网页设计与制作教程(第三版).ppt

《网页设计与制作教程(第三版).ppt》由会员分享，可在线阅读，更多相关《网页设计与制作教程(第三版).ppt（53页珍藏版）》请在三一办公上搜索。

1、网页设计与 制作教程（第三版）,普通高等教育“十一五”国家级规划教材赵祖荫 主编,第1章 网页设计与制作基础,1.1 Internet基础1.2 网页图像基础1.3 网页制作软件的主要功能和特点1.4 本章小结,本章重点：Internet基础知识 网页图像基础 网页制作套件的主要功能和特点,第1章 网页设计与制作基础,1.1.1 Internet与WWW服务计算机网络，简单的说，就是用通信线路把若干计算机连起来，再配以适当的软件和硬件，以达到计算机之间的资源共享和信息交换。Internet的中文名称是因特网或国际互联网，是一个几乎覆盖了全世界的计算机网络。,1.1 Internet基础,Int

2、ernet提供的服务主要有万维网（WWW）服务、电子邮件（E-mail）服务、文件传输（FTP）服务、远程登录（Telnet）服务和新闻与公告类（Usenet）服务等。网页能存放在全球的任何一台计算机上。所以一旦与WWW连接，用户就可以使用相同的方式轻松地接收全球任何地方的信息。Internet上链接在一起的网页构成了一个庞大的信息网。,图1-1 网页的超文本结构,1.1.2 服务器与客户机Internet连接着难以计数的计算机，按照功能它们大致可分为服务器和客户机两类。服务器是提供资源和服务的计算机。客户机是供用户使用资源和享受服务的计算机。浏览者在访问网页时，使用的是客户机。浏览器向存放网

3、页的WWW服务器（经常是在很远的地方）发出一个请求；收到请求后，WWW服务器将响应信号和网页发送给客户机。该流程如图1-2所示。,图 1-2 客户机和服务器,客户机也可以通过浏览器将数据信息上传给WWW服务器的数据库或者应用程序，还可以利用交互式网页向服务器的数据库查询数据，然后服务器将处理结果以网页的形式反馈给用户。,1.1.3 IP地址和域名网络上的每一台计算机都必须有IP地址或域名作为其独一无二的标识，就像我们每个人都有一个身份证号一样，作为身份的确认。IP地址是Internet上计算机的数字标识。两台计算机不能有相同的IP地址。它通常由四个0255间的十进制整数和中分点构成，例如、都是

4、合法的IP地址。,1.1.4 URL和超链接Internet是全球最大的信息库，每个服务器上都有成千上万的各种资源，那么如何来标识这些资源呢？用于解决这一问题的是统一资源定位器（uniform resource locator简称URL）。URL是全球WWW网服务器资源的标准寻址定位编码，它被用来确定资源的相应位置。URL采用统一的格式：协议名:/服务器的IP地址或域名/路径/文件名,1.1.5 HTML语言和网页制作工具网页实际上就是一个用超文本标记语言HTML（hyper text markup language）编写的文本文件，从而把文字、表格、图像、动画、声音和视频等各种媒体有机地组合

5、在一起。HTML语言能够运行于各种操作系统。,例如图1-3所示的网页的HTML语言源文件为：网页设计大家学网页设计大家学,图 1-3 网页的例子,1.2 网页图像基础,1.2.1 位图和矢量图1.位图位图是由分配了特定位置和颜色值的点(象素)的排列组成。位图的色彩和色调变化丰富，但占用空间较多。对位图进行编辑时，处理的实际上是一个个象素。位图的质量与分辨率有关。如果在屏幕上以较大的倍数放大显示图像，在图像边缘可能会产生锯齿。如图1-4所示，位图格式的向日葵图片被放大后与原图对比有很明显的马赛克纹样。,图1-4 将位图格式的局部图像放大前后的效果对比,2.矢量图矢量图用一组绘图指令来描述图像的内

6、容，这些指令根据图形的几何特性定义图形的轮廓，并用颜色进行描边和填充。矢量图主要用于表示线框型的图画、工程制图、艺术字等。矢量图文件的容量较小。矢量图形和分辨率无关，它们在不同分辨率的输出设备上显示效果都相同。图1-5显示了将矢量格式的向日葵局部图像放大前后的实际效果。,图1-5 将矢量格式的局部图像放大前后的实际效果。,常用图像格式及其特点图像格式是指计算机中存储图像文件的方法，它们代表不同的图像信息、色彩数和压缩程度。图形图像处理软件通常可以处理多种图像文件格式，每一种图像格式都有它的特点和用途。在选择输出的图像文件格式时，应考虑图像的应用目的以及图像文件格式的特点。,1BMP图像文件格式

7、BMP图像是Microsoft Windows所定义的图像文件格式，在Windows中运行的图形图像软件都支持BMP图像格式。BMP图像文件只能存放一幅图像，图像数据有压缩或不压缩两种处理方式。,2GIF图像文件格式GIF图像是一种包含有帧、调色板、优化方案等工作信息的位图格式。最多只支持256种颜色，支持透明色。采用无损压缩的方法，产生的文件很小。GIF图像在网络上使用广泛。网络图像中色彩简单、内容不很复杂、动画以及包含透明区域的图像比较适合使用该图像格式。,3.JPEG图像文件格式JPEG图像支持多达224种颜色，可以描绘真实场景图像或颜色丰富、内容细腻的图像。JPEG图像采用有损压缩的方

8、法，图像质量与采用的压缩比相关，经过高倍压缩的JPEG图像文件比较小，是目前网络中使用最广泛的图像格式之一。,4PNG图像文件格式PNG图像是一种专门针对网络发布而开发的无损压缩图像文件格式，可以保存灰度模式、索引颜色模式、图层、帧等图像信息，并提供从28到232种颜色的支持，同时支持透明背景和动态效果。256色的PNG图像格式具有GIF图像格式的全部功能，文件大小比GIF图像格式小。支持224或232种颜色的PNG图像格式提供高压缩比的无损图像压缩。PNG图像使用的是高速交替显示方案，显示速度很快，只需要下载1/64的图像信息就可以显示出低分辨率的预览图像。,5PSD图像文件格式PSD图像是

9、著名图像处理软件PhotoShop中使用的一种标准图像文件格式，能够保存图像处理的每一个细节部分，便于图像的编辑和再处理。,1.2.3 色彩的属性网页中的色彩是网页内容的一种表现，能够突出地显示整个网站的风格，给人以视觉冲击。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。好的色彩搭配具有感染力，同时也具有象征性，所以确定网页的基准色彩就显得尤为重要。,1.2.3 色彩的属性色彩可以分为无彩色和有彩色两大类。无彩色包括黑、白、灰三种颜色；有彩色包括红、黄、绿、青、蓝、紫等多种颜色。各种色彩都具有明度、色相和纯度三种属性。,1明度明度是指色彩的明暗程度，任何色彩都有自己的明暗特征。从光谱

10、上可以看到最明亮的颜色是黄色，处于光谱的中心位置。最暗的是紫色，处于光谱的边缘。一个物体表面的光反射率越大，对视觉的刺激的程度越大，看上去就越亮，这一颜色的明度就越高。因此明度表示颜色的明暗特征，也就是说明度较高的色彩较亮、明度较低的色彩较暗。明度在色彩三要素中可以不依赖于其他性质而单独存在，任何色彩都可以还原成明度关系来考虑，明度适于表现物体的立体感和空间感。黑白之间可以形成许多明度台阶，人的最大明度层次辨别能力可达200个台阶左右，普通使用的明度标准大都为9级左右。,图1-6 色彩明度值由高到低的明度变化过程,2色相色相是指色彩的相貌，用来区别色彩种类。红、黄、蓝等色族便就是色相，它们之间

11、的差别属于色相差别。在应用色彩理论中，通常用色环来表示色彩系列。最初的基本色相为红、橙、黄、绿、蓝、紫；在各色中间加插中间色后，可制出红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫十二个基本色相。如果进一步再找出中间色，还可以得到二十四个色相。,3纯度纯度是指色彩的鲜艳度、饱和度。比如，红色中有鲜艳没有杂质的红、干涩灰暗的红以及淡薄的粉红等，它们的色相都是红，但却强弱不一，这说明它们的纯度不同。通常色彩纯度越高的颜色越鲜艳，纯度越低的越灰暗。任何一种色相只要和黑、白、灰中的任意一种混合纯度就会降低。比如，和白色相混明度增加纯度减弱；和黑色相混明度减弱色相变暗。,1.2.4 RGB

12、色彩模式和Web安全色3物体的颜色，实际上是由物体表面发出的特定波长的光作用于人的视觉器官而产生的。自然界中的颜色千变万化、数不胜数，但每种颜色都可以用红(R)、绿(G)、蓝(B)三种色光按一定的比例混合而成，这三种色光被称为光的三原色。网页制作中使用最广泛的是RGB色彩模式的十六进制显示模式。即用3个00FF的十六进制数来表示组成颜色的红、绿、蓝色的数值。例如：000000表示黑色，FFFFFF表示白色，00FF00表示红色，0000FF表示蓝色，总共有224种颜色。,1.2.4 RGB色彩模式和Web安全色3在图像处理软件中一般都有调色板，用户可以通过调整RGB的数值选择所需的颜色。图1-

13、7是Fireworks 8中的调色板。,图1-7 Fireworks 8中的调色板,不同的操作系统和浏览器可能采用不同的调色板。图像在网络发布后，色彩的显示可能会受到浏览端的操作系统和浏览器的影响，同一种颜色也许会在不同的浏览端显示出不同的明度或者色相。我们把在不同的操作系统和浏览器中显示效果一致的216种颜色称为网络安全色。辨别一种颜色是否是网络安全色的方法是看其颜色值，任何由00、33、66、99、CC或者FF组合而成的颜色值都是Web安全色。例如：003366、0066FF、33CC99等。通常在软件中如图1-8所示的颜色拾取框中可以直接选取的颜色都是Web安全色,图1-8 Firewo

14、rks 8中的颜色拾取框,1.2.5 图像元素在网页中的应用网页传达的信息由视觉和听觉两种形式组成，目前主要通过视觉进行传播。网页的视觉设计过程和其他传统媒体的视觉设计过程一样，通过合理的组织文字、图像和视频等视觉元素来实现设计效果。图像是十分重要的网页组成元素，没有图像的网页往往会显得单调枯燥。,1.LOGO(标志)LOGO是文字、符号、图案按照特定的设计理念有机结合的产物。网站的标志(LOGO)和产品的商标样，是网站主题和风格的集中体现。2.标题在网页中可以使用图像标题或文本标题。文本标题在设计时采用的字体，如果浏览端没有安装就会被其他字体代替，影响网页的质量。图像标题表现形式丰富，可以使

15、用各种图案，也可以使用各种艺术字，在浏览端也不存在字体被替换的问题。,3.照片和插图照片和插图是给网页增强视觉效果的基本工具。它们不仅能够美化页面，而且能够简洁准确地传达信息。照片和插图的选择取决于站点的内容和风格，还要注意图片文件不能过大以免用户下载时间过长。选用JPEG图像文件有必要的话应进行压缩，在文件大小和图片质量间取得平衡。,4.广告横幅（Banner）网络广告是推广产品的重要途径。在网站上做广告通常有两种形式，一种是文字链接广告，一种是Banner图像广告。图像广告能快速醒目地吸引浏览者的注意。广告（Banner）可以有任意大小和形状。图像格式也常选择GIF动画或Flash动画。,

16、5.背景网页的背景是网站整体设计风格的重要体现方法之一。背景可以是单色，也可以是图像。背景图像可以是GIF格式，也可以是JPEG格式。这些都取决于整体风格的要求。制作背景时要注意避免喧宾夺主，不能妨碍浏览者浏览页面内容。背景图像一般平铺在网页上，图像尺寸和文件大小都不必也不宜太大。,6.导航栏整个网站会有很多网页，各网页之间存在着较为复杂的链接关系。导航栏指向网站的关键部分，能帮助浏览者熟悉网站结构，快速找到想浏览的网页。导航栏有两种形式：文字式导航和图像化导航，两种方法各有所长。文字式导航清楚易懂，下载迅速，适用于信息量大的网站。图像化导航栏大方美观，表现力强，适用于一般的商业网站。也有很多

17、网站把这两种方法结合使用，同时设立文字式导航和图像化导航。一个站点中，导航栏的设计应尽可能保持一致，达到站点风格的统一。,1.3 网页制作软件的主要功能和特点Macromedia公司的Dreamweaver 8、Fireworks 8、Flash 8三个软件是优秀的网页制作套件，被许多用户称之为网页制作的梦幻组合，又称为网页设计“三剑客”。Macromedia公司对这三款软件的功能进行了合理的划分。如Dreamweaver 8用于对网页进行整体的布局和设计，以及对网站的创建和管理；Fireworks 8用来绘制和优化网页中所用到的图像，并可以制作按钮、导航条和简单的动画；Flash 8则主要用

18、于制作网页中的矢量动画。综合使用这套软件便能够制作出理想的网页。下面就来介绍这三款软件的主要功能和特点。,1.3.1 Fireworks 8 的主要功能和特点Fireworks 8是网络图形的处理软件，它集网页图形的创建、编辑、管理于一体，简化了制作网页图形的流程，能生成大小合适而且质量较好的网页图形。Fireworks 8具有易学易用、方便快捷、轻巧高效等众多优点，可以快速创建所需的各种网页图形。,Fireworks 8 的主要功能和特点（1）Fireworks 8工作环境与Dreamweaver 8、Flash 8和谐统一，具有相同风格的面板、菜单栏、工具箱等。（2）提供了强大的矢量图形和

19、位图图像的编辑功能，可以直接在位图图像和矢量图像两者之间进行切换，可以避免图像在多个应用程序之间转移。（3）可以快速创建Web导航，由向导程序自动生成图形和JavaScript代码，并可以在Dreamweaver 8 中方便地编辑所生成的图形文件。,（4）可以进行图形的热区与切片制作，创建复杂的交互动作和GIF动画文件。（5）输入输出功能强大，完全支持HTML、JavaScript和图像的输出；允许导入、导出Photoshop文件，支持层的遮罩控制和保持对象各种效果的可编辑性；允许对同一图形中的不同区域采用不同级别的压缩，在保证图像质量的同时减小文件的体积，有利于图像在网络上的传输。（6）提供

20、了一个批处理命令环境，允许设计者快速地创建并执行批处理任务。,1.3.2 Flash 8的主要功能和特点Flash 8是制作适合网络传输的流媒体动画的专用软件。Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点，已成为当前制作高压缩网络动画的专业工具软件。,Flash 8的主要功能和特点（1）Flash 8与Dreamweaver 8、Fireworks 8有相同风格的快速启动栏、浮动面板、菜单栏、工具箱等。（2）提供了与Fireworks 8基本相同的绘图工具，因此对于掌握Fireworks 8的设计者来讲，在使用Flash 8的绘图工具时，基本上不需要再进行重复学习。（3）利

21、用关键帧和元件等技术，可以轻而易举地制作出各类动画。许多动画仅需制作开头和结尾的关键帧，就可以由Flash 8自动生成中间的部分，大大减少了设计者的工作量。,（4）提供了层技术，使动画的各组成部分既分又合，方便了动画的制作和修改。（5）支持许多图像、声音、视频格式，这些多媒体文件均可以直接导入动画中，从而使Flash动画声像并茂。（6）提供了功能比较完善的ActionScript脚本语言，可以为动画加入交互效果。在Flash 8中处理的文档可以保存为Flash 5.0文档的格式、HTML格式、EXE可执行文件格式等多种文件格式。,1.3.3 Dreamweaver 8的主要功能和特点Dream

22、weaver 8是集网页制作和网站管理于一身的网页编辑软件，是一套针对专业网页设计者和开发者的可视化网页开发工具。它具有功能强大、代码简洁和操作方便等特点，利用它可以非常轻松地制作出跨越平台和浏览器限制的充满动感的网页。,1.网页制作方面的功能和特点（1）在设计网页时，浮动面板和选项卡式的文档窗口在编辑窗口中可随意移动，这些面板可以组合在一起，也可以折叠或者扩展，并且可以根据需要让其缩到屏幕一边，给工作区增加更大的空间。利用各种浮动面板来调整网页元素的参数，在不关闭浮动面板的情况下可以直接看到修改的结果，真正实现了所见即所得的功能。（2）可使用HTML标记、HTML样式、CSS样式来格式化文本

23、。（3）支持使用表格、布局表格和布局单元格、层、框架来规划网页的布局。（4）支持用时间轴和行为来制作与控制动感网页。,（5）可使用单选钮、复选框、列表和文字编辑框制作各种交互式表单，用于信息交流。（6）可以创建批量制作网页的模板，利用模板来建立风格一致的网页，将网页的内容与页面的设计分开，使得网页制作更规范、网站更新更迅速。（7）可以很方便地将Flash、Fireworks、Shockwave、Java和ActiveX等软件生成的文件插入到网页上。（8）Dreamweaver 8可与Macromedia公司出品的其它软件如Fireworks 8、Flash 8等密切配合，从而更高效地完成网页制

24、作工作。（9）支持多种浏览器，并且可以选择主要的浏览器。（10）支持第三方插件，任何人可以根据自己的需要扩展Dreamweaver 8的功能，并且可以发布这些插件。,2.网站管理方面的功能和特点（1）在【站点】面板中，可以快速创建、设计、更新和重组网页，也可以快速浏览桌面和网络上的资源和文件。（2）利用网站管理器能建立、复制和修改网站。（3）使用【站点地图】可以有效地管理各网页之间的链接关系，改变网页文件的位置和名称。可上传或下载网站的文件，并同步更新站点内容。,1.4本章小结Internet是一个覆盖几乎全球的计算机网络，WWW服务是互联网上最为先进、应用最广、交互性能最好的信息检索工具，它向人类提供了一个无比丰富的资源库，网页是其上主要的资源组织形式。图像是网页颇具活力的组成元素，网页上常用的图像格式是Gif和Jpeg,网页制作中使用最广泛的是RGB色彩模式,在不同的操作系统和浏览器中显示效果一致的216种颜色称为网络安全色。Macromedia公司的Dreamweaver 8、Fireworks 8、Flash 8三个软件是网页制作的优秀套件。,