网页设计课程介绍-课件.ppt

1、第一章第一章 网页设计课程介绍网页设计课程介绍课程要求课程安排学时：48 课时课程性质：考核科目考核科目期末考试：50%平时考核：50%100分分课堂讲解 聊聊什么是网页和网站网页的分类 网站财富人生网页中的常用术语 网页设计的相关知识 网站鉴赏1.聊聊什么是网页和网站聊聊什么是网页和网站 什么是网页什么是网站 一、什么是网页一、什么是网页 是由语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。网页中的常见元素网页中的常见元素从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中通常包含

2、站标、导航条、广告条、标题栏和按钮等功能元素，如下图所示。站标站标广告条广告条 标题栏标题栏 按钮按钮 导航条导航条 1站标站标 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。2导航条导航条 是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。设计导航条时，应注意以下几点：如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于观看，可为各排设置不同的底色，如下图所示。3广告条广告条 广告条又称Banner，其功能是宣传网站或替其

3、他企业做广告。在Banner制作过程中有几点需要注意。4标题栏标题栏 此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加不同颜色的背景，也可以是图片。标题栏标题栏 5按钮按钮 网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。设计按钮时，有以下几点需要注意。要保证按钮与页面的协调。如果按钮上有字则尽量使用单色或渐变色背景。当页面上有多个按钮时，应分清主次。什么是网站 网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。门户网站职能网站专业网

4、站个人网站 按所处位置分类 按表现形式分类 按所处位置分类 主页和子页两类。按表现形式分类 静态网页和动态网页。静态网页是相对于静态网页是相对于动态网页动态网页而言，是而言，是指没有后台数据库指没有后台数据库、不含程序和不可、不含程序和不可交互的网页。交互的网页。动态网站可以实现动态网站可以实现交互功能，如用户交互功能，如用户注册、信息发布、注册、信息发布、产品展示、订单管产品展示、订单管理等等理等等 。网站的财富人生初中生的网络神话初中生的网络神话个人简介李兴平，1979年出生于广东兴宁县，父母均为当地农民，兴平初中毕业后即返家谋生。2005年前第一次出远门，地点是深圳。1999年，网络在中

5、国逐渐普及，兴宁县也开始有了网吧。这时，开始迷上了上网的李兴平在当地网吧找了一份网吧管理员的工作。因为要帮人攒电脑赚钱，他需要用网络查询配件报价之类的信息，他发觉在网上找资料非常困难，当时的中文网站不仅内容不够丰富，数量有限，而且要把那些用英文字母表示的网址一个个记下来，并不是一件容易的事情。于是，他想到一个解决办法，设计了一个个人网页，把他认为好的网站搜集在一起，并和它们建立链接。当下次上网时，他就很方便地直接进入这些常用的网站。网吧管理员的身份让李兴平天天泡在网上，泡在那些打游戏、聊天、上网的网民中。很快，他发现来网吧的很多人都不知道如何上网，上网后又不知道去哪里找到所需要的内容。当时的上

6、网费很贵，时间与金钱却往往在茫然不知所措中奢侈地流失。他设计的简陋的个人主页开始发挥神奇的功效。他开始有意识地去做网站地址搜集分类工作，爱琢磨的他想到要做一个“网址大全”式的东西。半年后，李兴平的个人主页开始有了Hao123的雏形，他当时给它的名字就是“网址大全”。他把当时中国排名前5000位的站点进行分门别类，按用途组合在一起。随后他开始做一些点击广告以及网站联盟等，随着流量增大，网站的固定广告业务随之而来。2000年中期，Hao123网站以基本成型，开始靠点击广告来赚钱。虽然网络泡沫的破灭导致很多网站突然死亡，但Hao123对网络寒潮体味并不深。“最初的一笔广告费大概是几百元吧，后来每月收

7、入有1000元，逐步到四五千元，在2001天地达到了几万元，到2003年、2004年，每个月的收入稳定在80万元左右。”北京时间北京时间1 1月月3030日消息，亚马逊今天发布了日消息，亚马逊今天发布了20082008财年第四财年第四季度财报。报告显示，亚马逊第四季度净利润季度财报。报告显示，亚马逊第四季度净利润2.252.25亿美元亿美元，较去年同期的，较去年同期的2.072.07亿美元增长亿美元增长9%9%；净销售额；净销售额67.067.0亿美元亿美元，较去年同期的，较去年同期的56.756.7亿美元增长亿美元增长18%18%。亚马逊公司创始人和总裁杰亚马逊公司创始人和总裁杰夫贝佐斯夫贝

8、佐斯3737岁。这位古巴移民岁。这位古巴移民的后裔凭借超人的胆识和敏锐的后裔凭借超人的胆识和敏锐的目光，在短短的目光，在短短3 3年时间里，从年时间里，从无到有，使亚马逊公司成为世无到有，使亚马逊公司成为世界最大的网上书店。公司股票界最大的网上书店。公司股票上市一年多就增长上市一年多就增长2020倍，市场倍，市场总值超过拥有总值超过拥有10001000余家分店的余家分店的美国最大的庞诺书店的美国最大的庞诺书店的8 8倍。倍。而他本人也成为比尔而他本人也成为比尔.盖茨式盖茨式的美国新一代超级富豪，身的美国新一代超级富豪，身价数十亿美元，创造了又价数十亿美元，创造了又一个一个“美国神话美国神话”。

9、亚马逊的崛起是出典型的喜剧。剧中的主角、亚马逊的创办人贝佐佐斯创办亚马逊以前还是萧氏企业的一名经理人。在一天上网浏览时，偶然发现网络使用人数每个月以2300%的速度在成长。吃惊之余，他花了两个月的时间研究了网络销售业的潜力与远景，于是他作了个决定：辞掉现有工作，和他的妻子开着老式雪佛莱，跑到西部打算创立网络零售业。拟出了20种认为适合于虚拟商场销售的商品，包括图书、音乐制品、杂志、PC机和软件等。他最后选择了图书。这里有三个原因：一是因为美国每年出版的图书有将近130万种，而音乐制品大约只有30万种。二是美国音乐市场已经由6家大的录制公司控制，而图书市场还没有形成垄断，即使是老牌图书连锁店的市

10、场占有率也只有12%，而且每年图书行业的营业额能够达到250 亿美元；全球的书籍更是多达300多万种，书籍零售有820亿美元的市场。三是读书是很多人的爱好，在国外，有80%的人说读书是他们的业余爱好之一。因此，最后他选择了书籍作为网络销售的突破口，公司地点选择了西雅图，因为那里是书籍发行商英格姆的大本营。1995年8月，亚马逊卖出了第一本书。最初一段时间，他亲自运至邮局寄出。网络技术使亚马逊一类的新型公司迅速膨胀。得到用户认可的亚马逊公司已成为网络空间里最大的商店，拥有450万名顾客，1998年销售额从前一年的148亿美元增加到54亿美元。1997年5月，公司刚上市的股票每股仅值9美元，而到1

11、998年11月，在网络公司股票市场低迷的情况下，该公司的股票却一度涨至每股209美元，增长了23倍。而这些都发生在亚马逊每年亏损数百万美元，且预计直到2001年都不能赢利的情况下。这是因为，人们相信网络市场的潜力无限，更相信亚马逊公司已先一步在网络市场中占有一席之地。杰夫贝佐斯被称为电子商务之父。四、网页中的常用术语四、网页中的常用术语 www浏览器 URLFTPIP地址 域名 超级链接 HTMLwww 万维网是万维网是World Wide WebWorld Wide Web的中文简称，也的中文简称，也称为称为3W3W网，它的本质是一种基于超级文本技网，它的本质是一种基于超级文本技术的交互式信

12、息浏览检索工具，是术的交互式信息浏览检索工具，是InternetInternet提供的应用最普及、功能最丰富、使用方法提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在最简便的信息服务，用户可通过它在InternetInternet上浏览、编辑、传递超文本格式的上浏览、编辑、传递超文本格式的文件（即文件（即.html.html格式文件）。格式文件）。浏览器浏览器 浏览器是用于阅读网页中信息的一种软件浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。工具，就像使用电脑必须有操作系统一样。Internet Explorer（IE）Netscape Nav

13、igator（NE）腾讯腾讯TT浏览器浏览器 等等URL URL（Uniform Resource Locator）统一资源定位符统一资源定位符 主要是用来指定协议（如主要是用来指定协议（如HTTP或或FTP）以及对象、文档、万维网网页或其他以及对象、文档、万维网网页或其他目标在目标在Internet的位置和存取方式。的位置和存取方式。通信协议通信协议 主机名主机名所要访问的网页路径及名称所要访问的网页路径及名称 FTP FTP（File Transfer Protocol）文件传输协议文件传输协议是一种广泛使用的文件传输协议，是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。是

14、快速、高效和可靠的信息传输方法。FTP是基于客户是基于客户/服务器模型的服务器模型的TCP/IP的应用，的应用，所以只要在客户端和服务器之间建立了所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都接方式的异同以及使用的操作系统的异同，都能通过能通过FTP协议进行文件的传输。协议进行文件的传输。IP地址地址 IP地址用来标识连接到地址用来标识连接到Internet上电脑的指上电脑的指定编号，每一个定编号，每一个IP地址对应一台电脑，这与地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。用电

15、话号码标识电话网络中的电话相同。电脑识别的电脑识别的IP地址由地址由32位二进制数值组成，位二进制数值组成，电脑上以十进制数值来显示，一组数值分为电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于部分，每一部分均不能大于255，中间用，中间用“.”分隔，如分隔，如61.139.2.69。域名域名 域名就是常说的网址，它也具有惟一域名就是常说的网址，它也具有惟一性，如百度的网址性，如百度的网址、网易的网址网易的网址等就是一个等就是一个域名，域名由汉语拼音或英文字符加域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将上数字表示，在访问网络时，域名将通过域名服务器转换成通

16、过域名服务器转换成IP地址，这种地址，这种转换是在后台完成的。转换是在后台完成的。超级链接超级链接 是网页中最常用的元素之一，网页就是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个是通过无数的超级链接才能组成一个网站。网站。超级链接可以链接到网站内部页面、超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现方便了用户在各个页面对象之间实现跳转。跳转。HTML HTML（Hyper Text Markup Language）超级文本标记语言超级文本标记语言是一种用户与电脑之间是一种用户与电脑之间进行交流的

17、文本技术，使用超文本文档的简进行交流的文本技术，使用超文本文档的简单标记语言。单标记语言。所谓超文本，是因为它可以加入图片、声音、所谓超文本，是因为它可以加入图片、声音、动画、视频等多媒体内容，并且可以从一个动画、视频等多媒体内容，并且可以从一个文档跳转到另一个文档，以及与世界各地主文档跳转到另一个文档，以及与世界各地主机的文件相连接。机的文件相连接。扩展名一般为扩展名一般为“*.htm”或或“*.html”。五、网页设计的相关知识五、网页设计的相关知识 设计网页的原则 网页设计的一般步骤 网页制作的常用工具 设计网页的原则设计网页的原则整体规划整体规划 鲜明的主题鲜明的主题善用图像善用图像醒

18、目的导航醒目的导航及时更新及时更新易记的网站名称易记的网站名称通用网页通用网页动画适量动画适量 网页设计的一般步骤网页设计的一般步骤 规划网站规划网站收集整理资源收集整理资源配置站点配置站点创建页面创建页面测试站点测试站点发布站点发布站点 维护、更新站点维护、更新站点网页制作的常用工具网页制作的常用工具 网页设计软件：网页设计软件：Dreamweaver是目前使用是目前使用最多的网页设计软件。最多的网页设计软件。图像处理软件：图像处理软件：制作网页图像的软件种类制作网页图像的软件种类繁多，大多数网页设计人员选择的是繁多，大多数网页设计人员选择的是Fireworks或或Photoshop。动画制作软件：动画制作软件：网页动画制作中最常用的网页动画制作中最常用的软件非软件非Flash莫属。莫属。