第一章网页设计基础知识

1、第一章第一章 网页设计基础知识网页设计基础知识1.1 网络概述网络概述一、一、 Internet基础基础 Internet是众多网络间的互联网，是一个分布在全球的成千是众多网络间的互联网，是一个分布在全球的成千上万台计算机相互连接到一起的全球性计算机网络的网络，上万台计算机相互连接到一起的全球性计算机网络的网络，即计算机网络互相连接组成的一个大的网络。即计算机网络互相连接组成的一个大的网络。Internet的组成的组成：由硬件和软件系统共同构成：由硬件和软件系统共同构成。1.1.1 Internet与与web1.1 网络概述网络概述硬件包括服务器、客户机和网络连接设备硬件包括服务器、客户机和网

2、络连接设备服务器服务器:提供各种网络服务和共享资源的计算机。提供各种网络服务和共享资源的计算机。客户机客户机:通过网络环境获取资源的计算机。通过网络环境获取资源的计算机。软件包括网络操作系统和网络通讯协议。软件包括网络操作系统和网络通讯协议。 网络通讯协议网络通讯协议:为网络数据交换而制定的关于信息顺序、为网络数据交换而制定的关于信息顺序、信息格式和信息内容的规则、约定与标准。信息格式和信息内容的规则、约定与标准。例如：例如：TCP/IP网络协议网络协议，HTTP:超文本传输协议超文本传输协议1.1 网络概述网络概述vInternet的主要功能的主要功能 WWW（World Wide Web）

3、万维网）万维网收发电子邮件收发电子邮件(E-mail) 搜索信息搜索信息(Gopher) 传输文件传输文件(FTP)远程登录远程登录(Telnet)服务服务网上交流网上交流(BBS)电子商务电子商务(E-business)1.1 网络概述网络概述vIP地址与域名地址与域名IP地址地址：用二进制数来表示，每个用二进制数来表示，每个IP地址长地址长32比特，比特，由由4个小于个小于256的数字组成，数字之间用点间隔，例的数字组成，数字之间用点间隔，例如如1表示一个表示一个IP地址。地址。域名域名：与网络上的数字型与网络上的数字型IP地址相对应的字符型地址。地址相对应的字符型地

4、址。域名的层次结构：域名的层次结构： 主机名主机名.组织机构名组织机构名.网络名网络名(机构类别机构类别).最高层域最高层域 例如：主机例如：主机6的域名地址是的域名地址是 1.1 网络概述网络概述域名域名有级别之分，从左往右依次递增，最右边是顶级有级别之分，从左往右依次递增，最右边是顶级域，每一级域名用域，每一级域名用.隔开。隔开。例如：新浪网例如：新浪网http:/中，中，为域名。为域名。sina是三级域名，是三级域名，com是是二级域名，二级域名，cn是国家顶级域名。是国家顶级域名。国际互联网络信息中心国际互联网络信息中心(InterNIC) 采用两种方法采用两种方

5、法对顶级域名进行分类：一种方法是按对顶级域名进行分类：一种方法是按组织模式组织模式进行划进行划分；另一种方法是按分；另一种方法是按地理模式地理模式进行划分。进行划分。v1.按组织模式进行划分按组织模式进行划分域名类型域名类型顶级域名顶级域名商业机构com教育机构edu政府机构gov国际组织int军事部门mil网络支持中心net非赢利性组织org表1-1 按组织模式划分域名v2.按地理模式进行划分按地理模式进行划分按照国家的不同分配不同后缀，这些域名即为按照国家的不同分配不同后缀，这些域名即为该国的国家顶级域名。有该国的国家顶级域名。有200多个国家和地区多个国家和地区都按照都按照ISO3166

6、国家代码分配了顶级域名，例国家代码分配了顶级域名，例如中国是如中国是cn，美国是，美国是us，日本是，日本是jp等。等。IP协议软件只能使用协议软件只能使用32位的位的IP地址不能直接使地址不能直接使用域名。当用域名来访问远程的计算机时，必用域名。当用域名来访问远程的计算机时，必须由须由Internet的的DNS将域名翻译成对应的将域名翻译成对应的32位位IP地址，然后才能完成对远程的计算机访问。地址，然后才能完成对远程的计算机访问。1.1 网络概述网络概述v统一资源定位统一资源定位(URL)统一资源定位器，又叫统一资源定位器，又叫URL(Uniform Resource Locator)，是

7、专为标识，是专为标识Internet网上资源位置而设的网上资源位置而设的一种编址方式一种编址方式。由三部分组成：由三部分组成：传输协议：传输协议：/主机主机IP地址或域名地址地址或域名地址/资源所在路径和文件名资源所在路径和文件名例例： http:/china- 1.1 网络概述网络概述v1.1.2 Web的体系的体系WWW简称为简称为Web或万维网，或万维网，Web是建立在是建立在客户机客户机服务器模型服务器模型之上，以之上，以HTML语言和语言和HTTP协议为基础，协议为基础，能够提供面向各种能够提供面向各种Internet服务的、并保持用户界面服务的、并保持用户界面一致的信息浏览系统。客

8、户端只要通过一致的信息浏览系统。客户端只要通过“浏览器浏览器”（Browser）就可以非常方便地访问）就可以非常方便地访问Internet上的服上的服务器端，迅速地获得所需的信息。用户通过务器端，迅速地获得所需的信息。用户通过浏览器浏览器访访问问WEB服务器的网页。服务器的网页。v1.1.3 认识网站与网页认识网站与网页网页网页(Web Page)，也就是，也就是World Wide Web服务服务中最主要的文件类型。网页是网站的基本文档，中最主要的文件类型。网页是网站的基本文档，它包含文本、图片、声音、动画、视频以及链接它包含文本、图片、声音、动画、视频以及链接等元素。等元素。网站网站是网页

9、的集合，是一个整体，其中包括一个是网页的集合，是一个整体，其中包括一个首页和若干个网页。首页和若干个网页。主页主页是一种特殊的网页，它专指一个网站的首页。是一种特殊的网页，它专指一个网站的首页。1.1 网络概述网络概述1.2 网页的网页的组成组成1.2.1 网页的本质和功能组成网页的本质和功能组成v1. 网页的本质网页的本质图图1-1显示了腾讯网的主页，由该画面可以看出，显示了腾讯网的主页，由该画面可以看出，网页主要由文字、图像和动画等元素组成。网页主要由文字、图像和动画等元素组成。v2 网页的功能组成网页的功能组成从浏览者的角度看，网页中无非就是一些文字、图像、动从浏览者的角度看，网页中无非

10、就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将它们分为站标、导航条、广告条、标题栏和作用，可以将它们分为站标、导航条、广告条、标题栏和按钮等。按钮等。站标导航条按钮广告条标题栏v站标站标:也叫也叫Logo，是网站的标志，其作用是，是网站的标志，其作用是使人看见它就能够联想到企业。网站使人看见它就能够联想到企业。网站Logo通常采用企业的通常采用企业的Logo。Logo一般采用蕴一般采用蕴含企业文化和特色的图案，或是与企业名含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有称相关的字符或

11、符号及其变形，当然也有很多是图文组合，很多是图文组合，1.2 网页的网页的组成组成v导航条导航条导航条是链接到网站内主要页面的超链接组导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。同时，导航个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。浏览者在最短时间内了解网站的主要内容。1.2 网页的网页的组成组成图1-4 灵活摆放的导航条图1-5 多排导航条v广告条广告条(Banner)，其功能是宣传网站或

12、替其它，其功能是宣传网站或替其它企业做广告。企业做广告。 Banner的尺寸可以根据版面需的尺寸可以根据版面需要来安排。要来安排。 在在Banner的制作过程中有以下几点需要注意的制作过程中有以下几点需要注意:Banner可以是静态的，也可以是动态的。可以是静态的，也可以是动态的。Banner的体积不易过大的体积不易过大Banner中的文字不要太多，只要达到一定的提醒效果就可以，通常中的文字不要太多，只要达到一定的提醒效果就可以，通常是一两句企业的广告语。是一两句企业的广告语。Banner中图片的颜色不要太多，尤其是中图片的颜色不要太多，尤其是GIF格式的图片或动画。格式的图片或动画。1.2

13、网页的网页的组成组成v标题栏标题栏此处的标题栏不是指整个网页的标题栏，而是网此处的标题栏不是指整个网页的标题栏，而是网页内部各板块的标题栏，是各板块内容的概括。页内部各板块的标题栏，是各板块内容的概括。它使得网页内容的分类更清晰、明了，大大地方它使得网页内容的分类更清晰、明了，大大地方便了浏览者。便了浏览者。标题栏可以是文字加不同颜色的背景，也可以是标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定。图片，这要根据网站的内容和规模来决定。1.2 网页的网页的组成组成v按钮按钮:在现实生活中，按钮通常是启动某些在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的

14、按钮也沿用装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转或网页会实现相应的操作，比如页面跳转或数据的传输等。数据的传输等。1.2 网页的网页的组成组成v3. 静态网页与动态网页静态网页与动态网页网页可分为两类：静态网页与动态网页。网页可分为两类：静态网页与动态网页。 静态网页静态网页：在客户端运行的网页，它由标准的：在客户端运行的网页，它由标准的HTML代码代码组成。早期的网站一般都是由静态网页组成，常见的文件组成。早期的网站一般都是由静态网页组成，常见的文件类型有类型有HTML、htm、SHTML

15、、xml等为扩展名。静态网等为扩展名。静态网页中也可以有动态元素，例如：页中也可以有动态元素，例如：GIF动画，动画，Flash动画等，动画等，但是也仅仅只是视觉上的动态效果，与网页的动态是不同但是也仅仅只是视觉上的动态效果，与网页的动态是不同的。的。1.2 网页的网页的组成组成v3. 静态网页与动态网页静态网页与动态网页网页可分为两类：静态网页与动态网页。网页可分为两类：静态网页与动态网页。 动态网页：动态网页：在服务器端运行的网页和程序被称为动态网在服务器端运行的网页和程序被称为动态网页。动态网页以数据库技术为基础，可以根据编写的程序页。动态网页以数据库技术为基础，可以根据编写的程序访问数

16、据库，并动态生成页面，因而网页的信息是可以及访问数据库，并动态生成页面，因而网页的信息是可以及时的动态的更改时的动态的更改,常见的文件类型有常见的文件类型有cgi、jsp、php、asp等为扩展名。等为扩展名。1.2 网页的网页的组成组成v区别区别1:要制作静态网页，用户只需要掌握常用的要制作静态网页，用户只需要掌握常用的网页制作软件（如网页制作软件（如Dreamweaver）就可以）就可以了；而要创建动态网页，除了需要掌握常了；而要创建动态网页，除了需要掌握常用的网页制作软件外，还必须掌握诸如用的网页制作软件外，还必须掌握诸如ASP、PHP等动态网页制作技术，以及等动态网页制作技术，以及Mi

17、crosoft SQL Server或或Oracle等数据库等数据库管理系统。管理系统。v区别区别2:每一个静态网页都有一个固定的每一个静态网页都有一个固定的URL，且，且网页文件名以网页文件名以.htm、.html、.shtml等为后等为后缀；而动态网页没有固定的缀；而动态网页没有固定的URL，且后缀，且后缀名与网页使用的制作技术对应，通常名与网页使用的制作技术对应，通常为为.asp、.jsp、.php等。等。v区别区别3:静态网页文件一经发布到服务器上，无论静态网页文件一经发布到服务器上，无论是否有用户访问，每个网页都是客观存在是否有用户访问，每个网页都是客观存在的，也就是说，静态网页是实

18、实在在保存的，也就是说，静态网页是实实在在保存在服务器上的独立的文件；而动态网页并在服务器上的独立的文件；而动态网页并不是独立存在于服务器上的网页文件，只不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的有当用户请求时服务器才返回一个完整的网页（需要从数据库中调用数据）。网页（需要从数据库中调用数据）。区别区别4：静态网页的内容相对稳定，因此容易被搜静态网页的内容相对稳定，因此容易被搜索引擎检索到；动态网页则反之，所以现索引擎检索到；动态网页则反之，所以现在人们一般都将动态网页内容转化为静态在人们一般都将动态网页内容转化为静态网页发布。网页发布。区别区别5：静态网页在网站

19、制作和维护方面工作量较静态网页在网站制作和维护方面工作量较大；而动态网页由于有数据库的支持，在大；而动态网页由于有数据库的支持，在制作和维护方面要简单容易得多。因此当制作和维护方面要简单容易得多。因此当网站信息量很大，需要经常更新时，通常网站信息量很大，需要经常更新时，通常采用动态网页制作技术。采用动态网页制作技术。区别区别6：静态网页的交互性较差，在功能方面有较静态网页的交互性较差，在功能方面有较大的限制；而动态网页可以实现交互功能，大的限制；而动态网页可以实现交互功能，如各种论坛、留言板和聊天室等都属于动如各种论坛、留言板和聊天室等都属于动态网页。态网页。温馨提示：这里需要指出的是，在静态

20、网页上出现的各种动态效果，如.Gif格式的动画、Flash动画、滚动文字等，这些动态效果只是视觉上的，与动态网页是不同的概念。1.2.2 网页的基本构成要素网页的基本构成要素网页的基本构成要素大体相同，网页设计就是网页的基本构成要素大体相同，网页设计就是要将构成要素有机整合，表达出美与和谐。要将构成要素有机整合，表达出美与和谐。文字文字：网页中的信息以文本为主。与图片相比，：网页中的信息以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。意，但却能准确地表达信息的内容和含义。图片图片：用户在网页中使用

21、的图片格式主要包括：用户在网页中使用的图片格式主要包括GIF、JPEG和和PNG等，其中使用最广泛的是等，其中使用最广泛的是GIF和和JPEG两种格式。两种格式。1.2 网页的网页的组成组成超链接超链接：超链接在本质上属于一个网页的一部分，是一种：超链接在本质上属于一个网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。超链接允许用户同其他网页或站点之间进行连接的元素。超链接是指从一个网页指向一个目标的连接关系，这个目标可以是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片

22、、一个电子邮件地址、一个文件，甚至是一个是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。应用程序。动画动画：为了更有效地吸引浏览者的注意，许多网站的广告：为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：都做成了动画形式。网页中的动画主要有两种：Gif动画动画和和Flash动画。其中动画。其中Gif动画只能有动画只能有256种颜色，主要用于种颜色，主要用于简单动画和图标。简单动画和图标。1.2 网页的网页的组成组成音频和视频音频和视频：声音是多媒体网页的一个重要组成部：声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有分

23、。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和和AIF等。很多浏览器不要插件等。很多浏览器不要插件也可以支持也可以支持MIDI、WAV和和AIF格式的文件，而格式的文件，而MP3和和RM格式的声音文件则需要专门的浏览器播放。格式的声音文件则需要专门的浏览器播放。 其他常见元素其他常见元素：包括悬停按钮、：包括悬停按钮、Java特效、特效、ActiveX等各种特效。等各种特效。1.2 网页的网页的组成组成在网页中可以看到的内容有：主题、标题、在网页中可以看到的内容有：主题、标题、普通文本、签名、水平线、内嵌图像、背景普通文本、签名、水平线、内嵌图像、背景色或样式、动画、超级

24、链接、图像地图、列色或样式、动画、超级链接、图像地图、列表、表单。表、表单。在网页中不能看到的内容有：鉴定、注释、在网页中不能看到的内容有：鉴定、注释、JavaScript代码、代码、Java applet、图像地图和、图像地图和表单处理代码。表单处理代码。1.2 网页的网页的组成组成v1.2.3 网页的浏览网页的浏览v1.web浏览器浏览器 浏览器是用户端计算机上的应用软件，就像浏览器是用户端计算机上的应用软件，就像一个字处理程序一样。在屏幕上看到的网页一个字处理程序一样。在屏幕上看到的网页是浏览器对是浏览器对XHTML文档所做的翻译。由于浏文档所做的翻译。由于浏览器使用图形用户界面（览器使

25、用图形用户界面（GUI），用户在使），用户在使用计算机时不必用键盘输入各种操作命令。用计算机时不必用键盘输入各种操作命令。只需用鼠标选择即可，方便用户使用。只需用鼠标选择即可，方便用户使用。v1.2.3 网页的浏览网页的浏览v（1）web浏览器工作的方式浏览器工作的方式 网页主要是以网页主要是以XHTML为基本格式的文档。浏览器浏览网为基本格式的文档。浏览器浏览网页时，实际上就是从该网页所在的页时，实际上就是从该网页所在的web服务器下载服务器下载XHTML文件，然后在本地进行语法解释并显示在用户屏文件，然后在本地进行语法解释并显示在用户屏幕上。幕上。Web浏览器工作的方式：浏览器工作的方式：

26、1.客户端浏览器使用客户端浏览器使用HTTP协议向协议向web服务器发送请求服务器发送请求以访问指定的文档或服务；以访问指定的文档或服务；2.web服务器发回请求的响应服务器发回请求的响应-使用使用XHTML书写的文书写的文档；档；3.浏览器阅读、解释其中所有的标记代码并以正确的浏览器阅读、解释其中所有的标记代码并以正确的格式显示出来。格式显示出来。v网页的浏览过程网页的浏览过程浏览网页的过程如图所示，就是在浏览器浏览网页的过程如图所示，就是在浏览器中输入某个网址（中输入某个网址（URL）来访问一个网页，）来访问一个网页，通过网页上的超链接跳转到其他网页。这通过网页上的超链接跳转到其他网页。这

27、个过程大致总结如下：个过程大致总结如下：输入地址输入地址浏览器查找域名的浏览器查找域名的 IP 地址（这一步包括地址（这一步包括 DNS 具体的查找过程，包括：浏览器缓存具体的查找过程，包括：浏览器缓存-系统缓存系统缓存-路由器缓存路由器缓存.）浏览器向浏览器向 web 服务器发送一个服务器发送一个 HTTP 请求请求服务器的永久重定向响应（从服务器的永久重定向响应（从 http:/ 到到 http:/）浏览器跟踪重定向地址浏览器跟踪重定向地址服务器处理请求服务器处理请求服务器返回一个服务器返回一个 HTTP 响应响应浏览器显示浏览器显示 HTML浏览器发送请求获取嵌入在浏览器发送请求获取嵌入

28、在 HTML 中的资源中的资源（如图片、音频、视频、（如图片、音频、视频、CSS、JS等等）等等）浏览器发送异步请求浏览器发送异步请求在这个过程背后是复杂的网络技术支持。这在这个过程背后是复杂的网络技术支持。这些技术主要包括些技术主要包括WWW服务、服务、HTTP协议、协议、TCP/IP协议和网页解析与显示技术。协议和网页解析与显示技术。v（2）浏览器的功能）浏览器的功能 浏览器常用的功能有以下几种：浏览器常用的功能有以下几种：使用使用URL向服务器申请各种资源服务。向服务器申请各种资源服务。使用超链接从一个网页跳转到另一个网页。使用超链接从一个网页跳转到另一个网页。可以查看以前浏览过的网页。

29、可以查看以前浏览过的网页。查找自己感兴趣的网页。查找自己感兴趣的网页。存储、打印网页。存储、打印网页。收发收发E-mail电子邮件。电子邮件。v（3）浏览器的缓存）浏览器的缓存因为网上的文档下载需要时间，浏览器可以因为网上的文档下载需要时间，浏览器可以在硬盘上临时存储图像及文件，以免重复下在硬盘上临时存储图像及文件，以免重复下载相同的文件，这类文件我们称为临时文件。载相同的文件，这类文件我们称为临时文件。v网页浏览工具网页浏览工具： 用于浏览网页的工具称为用于浏览网页的工具称为web浏览器。浏览器。vIE的界面如图的界面如图1-8所示所示v标题栏标题栏包括控制按钮包括控制按钮,当前浏览网页的名

30、称当前浏览网页的名称,最小化按钮最小化按钮,最大化最大化/还原按钮以及关闭挖掘还原按钮以及关闭挖掘,通过对标题栏的操作通过对标题栏的操作,可以改变可以改变IE窗口的大小和位置窗口的大小和位置;菜单栏菜单栏提供了完成提供了完成IE所有功能的命令所有功能的命令,通过打开下拉菜单通过打开下拉菜单,可以挂可以挂靠相应的操作靠相应的操作;工具栏工具栏提供了常用命令的工具按钮提供了常用命令的工具按钮,可以不用打开菜单可以不用打开菜单,而是单击而是单击相应的按钮来快捷地执行命令相应的按钮来快捷地执行命令.地址栏地址栏用于指出要访问的资源在多上的统一资源定位地址用于指出要访问的资源在多上的统一资源定位地址,可

31、以可以输入想要访问的网页的输入想要访问的网页的URLv浏览区浏览区窗口中最大面积的区域窗口中最大面积的区域,显示当前访问的网页内容显示当前访问的网页内容以便用户浏览以便用户浏览.v状态栏状态栏显示正在浏览的网页的下载状态显示正在浏览的网页的下载状态,下载进度和区域下载进度和区域属性等状态信息属性等状态信息.v保存网页保存网页单击单击“文件文件”菜单，选择下拉菜单中的菜单，选择下拉菜单中的“另存为另存为”命令。命令。在弹出的在弹出的“保存网页保存网页”对话框中输入文件对话框中输入文件名，单击名，单击“保存保存”按钮，如图按钮，如图1-9所示。所示。v保存网页图片保存网页图片将鼠标移到一副图片上。

32、将鼠标移到一副图片上。右击鼠标，在弹出的菜单中选择右击鼠标，在弹出的菜单中选择“图片另存为图片另存为”命令，如图命令，如图1-10所示。所示。在弹出的在弹出的“保存图片保存图片”对话框中选择存储路径，对话框中选择存储路径，并输入文件名称。并输入文件名称。单击单击“保存保存”按钮。把图片永久存储在本地计算按钮。把图片永久存储在本地计算机的一个文件夹下。（提示：有些网页为了保护机的一个文件夹下。（提示：有些网页为了保护其版权，限制用户使用其版权，限制用户使用“保存保存”功能。因此，对功能。因此，对于此类网页中的文本和图片不能进行保存。）于此类网页中的文本和图片不能进行保存。）v保存网页的背景（操作

33、类似保存图片）保存网页的背景（操作类似保存图片）当用户遇到所喜欢的背景时，可以将其保存下来。将鼠标当用户遇到所喜欢的背景时，可以将其保存下来。将鼠标移到自己喜欢的背景处，右击鼠标，当弹出的菜单中选择移到自己喜欢的背景处，右击鼠标，当弹出的菜单中选择“背景另存为背景另存为”命令。命令。v查阅网页的源代码查阅网页的源代码使用使用IE浏览网页时，可以查看页面的浏览网页时，可以查看页面的HTML源代码，这样源代码，这样可以学习别人设计主页的方法和技巧。可以学习别人设计主页的方法和技巧。选择选择“查看查看”菜单中的菜单中的“源代码源代码”命令，即可查看命令，即可查看HTML源程序，如图源程序，如图1-1

34、1所示。所示。v将网页添加到收藏夹中将网页添加到收藏夹中单击单击“查看查看”菜单，选择菜单，选择“添加到收藏夹添加到收藏夹”命令，如图命令，如图1-13所示。所示。输入名称，并单击输入名称，并单击“确定确定”按钮。按钮。v1.3 常用的网页设计工具常用的网页设计工具v1.3.1网页编辑工具网页编辑工具v1.文本编辑器文本编辑器不仅在记事本中可以编写不仅在记事本中可以编写HTML代码，任何文代码，任何文本编辑器都可以编写本编辑器都可以编写HTML。比如写字板、。比如写字板、word等，但保存的时候必须保存为等，但保存的时候必须保存为.html或或.htm格式。格式。有一些文本编辑器专门提供网页制

35、作及程序设有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持计等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript、VBScript等多种语法的着色显示。等多种语法的着色显示。u例如：例如：EmEditor、EditPlus、UltraEdit图1-14 EmEditor 工作界面v2.网页设计软件网页设计软件DreamweaverDreamweaver，简称，简称“DW”，是美国，是美国Macromedia公司公司开发的集网页制作和管理网站于一体的网页编辑器，现被开发的集网页制作和管理网站于一体的网页编辑器，现被Adobe公

36、司收购。它是网页设计与制作领域中用户最多、公司收购。它是网页设计与制作领域中用户最多、应用最广、功能最强的软件。应用最广、功能最强的软件。Dreamweaver用于网页的用于网页的整体布局和设计，以及对网站进行创建和管理，是网页设整体布局和设计，以及对网站进行创建和管理，是网页设计三剑客之一，利用它可以轻而易举地制作出充满动感的计三剑客之一，利用它可以轻而易举地制作出充满动感的网页。图网页。图1-15是是Dreamweaver CS6的工作界面。的工作界面。图1-15 Dreamweaver CS6 工作界面v1.3.2素材处理工具素材处理工具v1.图像处理软件图像处理软件Fireworks

37、Fireworks是是Adobe推出的一款网页作图软件，软件可以加速推出的一款网页作图软件，软件可以加速 Web 设计与开发，设计与开发， 是一款创建与优化是一款创建与优化 Web 图像和快速构建网站与图像和快速构建网站与 Web 界面原型的理想工具。界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像不仅具备编辑矢量图形与位图图像的灵活性，的灵活性， 还提供了一个预先构建资源的公用库，还提供了一个预先构建资源的公用库， 并可与并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和和 Adobe Flash软件省时集成。软件省时集成。 在在 Fireworks中将设计迅速转变为模型，中将设计迅速转变为模型， 或利或利用来自用来自Illustrator、Photoshop和和Flash的其它资源。的其它资源。 然后直接置入然后直接置入Dreamweaver中轻松地进行开发与部署。图中轻松地进行开发与部署。图1-16是是Fireworks CS6的工作界面的工作界面图1-16 Fireworks CS6 工作界面