网页设计概述课件.ppt

1、第第1章章 网页设计概述网页设计概述1.1 认识网页认识网页1.2 网页和网站网页和网站1.3 网页设计网页设计1.4 网页的其他操作网页的其他操作1.1 认识网页认识网页1.1.1网页是什么网页是什么 “网页网页”是什么，平常所说的是什么，平常所说的“新浪新浪”、“搜狐搜狐”、“网易网易”等，即是俗称的等，即是俗称的“网站网站”。而访问这些网站的时候，。而访问这些网站的时候，最直接访问的就是最直接访问的就是“网页网页”了。这许许多多的网页就组成了了。这许许多多的网页就组成了整个站点，也就是网站。从中可以看到网页和网站之间的密整个站点，也就是网站。从中可以看到网页和网站之间的密切关系。切关系。

2、网页是一种网络信息传递的载体。这种媒介的性质和日网页是一种网络信息传递的载体。这种媒介的性质和日常的常的“报纸报纸”、“广播广播”、“电视电视”等传统媒体是可以相提等传统媒体是可以相提并论的。在网络上传递的相关信息，比如文字、图片甚至多并论的。在网络上传递的相关信息，比如文字、图片甚至多媒体音影，都是在网页中的存储，浏览者只需要通过浏览网媒体音影，都是在网页中的存储，浏览者只需要通过浏览网页，就可以了解到相关信息了。页，就可以了解到相关信息了。下一页 返回1.1 认识网页认识网页1.1.2网页是如何形成的网页是如何形成的 网页是由一些部件组成的，知道这些部件是做什么的很网页是由一些部件组成的，

3、知道这些部件是做什么的很重要，因为在网页编写或设计过程中，主要的任务就是为每重要，因为在网页编写或设计过程中，主要的任务就是为每一个标准的部件选用或编写相应的内容，这些部件有的能够一个标准的部件选用或编写相应的内容，这些部件有的能够在网页中直接看到，而有的却不能在网页中直接看到。在网页中直接看到，而有的却不能在网页中直接看到。上一页 下一页 返回1.1 认识网页认识网页 1.浏览者能够看到的内容浏览者能够看到的内容 (1)主题：一般情况下，浏览器在所显示网页窗口的标题栏主题：一般情况下，浏览器在所显示网页窗口的标题栏上显示上显示“主题主题”。网页的真正主题不一定出现在网页内部，。网页的真正主题

4、不一定出现在网页内部，而是有可能作为显示此网页的浏览器窗口的标题。然而，大而是有可能作为显示此网页的浏览器窗口的标题。然而，大多数网页的标题表现为屏慕上的文本或图像，标题的作用和多数网页的标题表现为屏慕上的文本或图像，标题的作用和在书本或杂志中的作用一样，位于网页中比较醒目重要的顶在书本或杂志中的作用一样，位于网页中比较醒目重要的顶部附近，从而给网页赋予了名字。部附近，从而给网页赋予了名字。(2)标题：浏览器在浏览网页时通常以较大字体、粗体或者标题：浏览器在浏览网页时通常以较大字体、粗体或者其他的突出显示类型来显示标题。一个网页可以有很多标题，其他的突出显示类型来显示标题。一个网页可以有很多标

5、题，而且标题还可以有多达而且标题还可以有多达6层的嵌套深度。层的嵌套深度。(3)普通文本：是指组成网页基本内容普通文本：是指组成网页基本内容A.多用途的文本。一多用途的文本。一般情况下将普通文本中的线和块当作页面中的般情况下将普通文本中的线和块当作页面中的“段落段落”。上一页 下一页 返回1.1 认识网页认识网页(4)签名：通常显示在网页的底部。签名标识了网页的作者，并签名：通常显示在网页的底部。签名标识了网页的作者，并且常常还包含作者且常常还包含作者(或者网络竹理员或者网络竹理员)的电子邮件地址，从而的电子邮件地址，从而使访问者可以发送有关此网页的评论或者建议、问题等。使访问者可以发送有关此

6、网页的评论或者建议、问题等。(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。(6)动画：可以是网页中出现的文本或者图片，不同的是它们以动画：可以是网页中出现的文本或者图片，不同的是它们以某种方式运动。图片可以忽隐忽现或者按照简单的动作进行某种方式运动。图片可以忽隐忽现或者按照简单的动作进行旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。(7)超级链接：可以链接到很多不同的对象上去，如其他的网页、超级链接：可以链接到很多不同的对象上去，如其他的网页、多媒体文件多媒体文件(动画

7、、视频、声音和外部图像动画、视频、声音和外部图像)、文档文件、电、文档文件、电子邮件地址以及文件或者应用程序。链接还可以引导至当前子邮件地址以及文件或者应用程序。链接还可以引导至当前网页的某个特定的位置。网页的某个特定的位置。上一页 下一页 返回1.1 认识网页认识网页 (8)内嵌图像：指那些嵌入网页布局中的图像，它们让网页内嵌图像：指那些嵌入网页布局中的图像，它们让网页变得大气美观，而且使得网页的信息量更大。变得大气美观，而且使得网页的信息量更大。(9)图像地图：是一些内嵌图像，此图像的不同区域下面包图像地图：是一些内嵌图像，此图像的不同区域下面包含有不同的链接，称为热点区域。含有不同的链接

8、，称为热点区域。(10)背景色或样式：可以是一种单一的颜色，或者是一个内背景色或样式：可以是一种单一的颜色，或者是一个内嵌图像，但是和普通图像不同的是，它们覆盖了整个网页页嵌图像，但是和普通图像不同的是，它们覆盖了整个网页页面的背景，文本和其他图像就显示在其上面。面的背景，文本和其他图像就显示在其上面。(11)列表：可以是黑点或按数字进行编号，或者其他图形。列表：可以是黑点或按数字进行编号，或者其他图形。(12)表单：访问者可以在其中的空白处填写内容，回复在线表单：访问者可以在其中的空白处填写内容，回复在线注册网站，填写个人信息、发表言论、问卷调查等。注册网站，填写个人信息、发表言论、问卷调查

9、等。上一页 下一页 返回1.1 认识网页认识网页 2.浏览者看不到的内容浏览者看不到的内容 (1)鉴定：网页文件可以包含多种鉴定信息，包括作者的名鉴定：网页文件可以包含多种鉴定信息，包括作者的名字、电子邮件地址，以及一些特殊的编码，这些编码可以帮字、电子邮件地址，以及一些特殊的编码，这些编码可以帮助搜索引擎确定网页的主题与内容。助搜索引擎确定网页的主题与内容。(2)注释：这是用户希望在直接阅读网页的注释：这是用户希望在直接阅读网页的HTML代码时能代码时能够看到的文本，在浏览器中是看不到的。注释通常包括够看到的文本，在浏览器中是看不到的。注释通常包括HTML文件的结构或者相关的注意事项。文件的

10、结构或者相关的注意事项。(3)JavaScript代代4i：在：在HTML文件内，文件内，JavaScript的的语句行可以给网页添加一些特殊的动态效果。语句行可以给网页添加一些特殊的动态效果。(4)Java Applet：以单独的文件存在，这种：以单独的文件存在，这种Java程序模程序模块可以提高访问者、浏览器和服务器之间的交互能力。比如块可以提高访问者、浏览器和服务器之间的交互能力。比如说，说，Java就非常适合于编写在就非常适合于编写在Web页面上玩的交互游戏。页面上玩的交互游戏。(5)图像地图和表单处理代码：用来处理图像地图和交互表图像地图和表单处理代码：用来处理图像地图和交互表单的程

11、序代码。单的程序代码。上一页 下一页 返回1.1 认识网页认识网页1.1.3网页的浏览过程网页的浏览过程 (1)用户在用户在www客户机上输入网址，发出浏览网页的请求客户机上输入网址，发出浏览网页的请求(HTTP请求请求)；(2)该请求通过互联网从该请求通过互联网从WWW客户机传输到客户机传输到WWW服务器；服务器；(3)WWW服务器接受这个请求，然后根据这个请求找到相服务器接受这个请求，然后根据这个请求找到相关的网页并发送给用户；关的网页并发送给用户；(4)这个网页又通过互联网传输到这个网页又通过互联网传输到WWW客户机，客户机接客户机，客户机接受这个网页并将其在浏览器上显示出来。受这个网页

12、并将其在浏览器上显示出来。上一页 返回1.2 网页和网站网页和网站(1)拥有众多的网页。拥有众多的网页。(2)拥有一个主题与统一的风格。拥有一个主题与统一的风格。(3)有便捷的导航系统。有便捷的导航系统。(4)分层的栏目组织。分层的栏目组织。(5)用户指南和网站动态信息。用户指南和网站动态信息。(6)能与用户进行双向交流的栏目。能与用户进行双向交流的栏目。(7)有一个域名。有一个域名。返回1.3 网页设计网页设计1.3.1网页设计网页设计 1.网页设计的步骤网页设计的步骤 (1)草案。新建页面就像一张白纸，没有任何表格、框架和草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西。设计

13、人员可以尽可能地发挥想象力，然后约定俗成的东西。设计人员可以尽可能地发挥想象力，然后将所想象到的勾勒出一个草图。这属于创造阶段，所以不讲将所想象到的勾勒出一个草图。这属于创造阶段，所以不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。意的轮廓即可。(2)粗略布局。在草案的基础上，将需要设置的功能模块安粗略布局。在草案的基础上，将需要设置的功能模块安排到页面上。这时设计人员必须遵循突出重点、平衡协调的排到页面上。这时设计人员必须遵循突出重点、平衡协调的原则。首先将网站标志、主菜单等最重要的模块放在最显眼、原则。首先将网站标志

14、、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的位置排放。最突出的位置，然后再考虑次要模块的位置排放。(3)确定方案。这是设计网页布局的重要步骤，是指将粗略确定方案。这是设计网页布局的重要步骤，是指将粗略布局精细化、具体化，形成完整的页面设计方案。布局精细化、具体化，形成完整的页面设计方案。下一页 返回1.3 网页设计网页设计 2.网页表现手法网页表现手法 (1)匀称。匀称。(2)非对称形式。非对称形式。(3)对比。对比。(4)空白。空白。(5)图片解说。图片解说。上一页 下一页 返回1.3 网页设计网页设计1.3.2网页设计的流程网页设计的流程 1.客户需求客户需求 2.

15、确定网站的内容和主题确定网站的内容和主题 3.设计页面设计页面 4.设计网页动画设计网页动画上一页 返回1.4 网页的其他操作网页的其他操作1.4.1保存网页中的图片保存网页中的图片 在浏览网页时，看到自己喜爱的图片，总想将其收藏起在浏览网页时，看到自己喜爱的图片，总想将其收藏起来，以便日后使用。保存网页中的图片步骤很简单，具体步来，以便日后使用。保存网页中的图片步骤很简单，具体步骤为：骤为：将鼠标移动要保存的图片上，右击；将鼠标移动要保存的图片上，右击；在弹出的快捷菜单中选择在弹出的快捷菜单中选择“图片另存为图片另存为”命令；命令；在弹出的在弹出的“保存图片保存图片”对话框中选择合适的保存路

16、径，并对对话框中选择合适的保存路径，并对图片重新命名，最后单击确定。图片重新命名，最后单击确定。下一页 返回1.4 网页的其他操作网页的其他操作1.4.2保存正在浏览的网页保存正在浏览的网页(1)在在IE浏览器的菜单栏中选择浏览器的菜单栏中选择“文件文件”“另存为另存为”命令，弹命令，弹出出“保存网页保存网页”对话框，对话框，(2)单击单击“保存保存”按钮即可将正在浏览的页面连同其中的图片完按钮即可将正在浏览的页面连同其中的图片完整地保存下来。在对话框中还可以设置网页的保存路径、网整地保存下来。在对话框中还可以设置网页的保存路径、网页保存的文件名以及网页保存的模式。页保存的文件名以及网页保存的模式。上一页 返回