网页设计与制作教程与实训(第2版） 第1章 网页制作基本知识

1、第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 n1.1 与网页制作相关的术语与网页制作相关的术语 n1.2 html简介简介 n1.3 网页界面的构成要素网页界面的构成要素 n1.4 网页开发的流程网页开发的流程 n1.5 网站设计的要求网站设计的要求 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这 个网址的一些信息和内容，这个页面就是我们通常所说的

2、网页，而打开网络由网址进个网址的一些信息和内容，这个页面就是我们通常所说的网页，而打开网络由网址进 入时第一个看到的页面，我们通常把它称为首页（入时第一个看到的页面，我们通常把它称为首页（home page）或主页，所有的信息）或主页，所有的信息 都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到 需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特又是一个特 殊的网页，是整个殊的网页，是整个web站点的起始点

3、和汇总点，是用户开始浏览站点的站点的起始点和汇总点，是用户开始浏览站点的“入口处入口处”。 由首页所延伸下去的页面，就是一个个网页。由首页所延伸下去的页面，就是一个个网页。 网页又称网页又称web页面，是网络文件的组成部分，是可以被浏览器访问的单个页面，是网络文件的组成部分，是可以被浏览器访问的单个html 超文本文件超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、 图片、按钮往往又是指向别的主页的连接点。在图片、按钮往往又是指向别的主页的连接点。在internet网上，这些连接点又叫超级网上，这些

4、连接点又叫超级 链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确 后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下 出现的集合体，就是网站（出现的集合体，就是网站（web site）。有主题性的网站是要经过规划和构架过的网）。有主题性的网站是要经过规划和构架过的网 站。在互联网上，站。在互联网上，web站点由一组相互关联的页面组成，如果把整个站点由一组相互关联的页面组成，如果把整个www信息世界信

5、息世界 看作一个村子，那么一个看作一个村子，那么一个web站点可以理解成一个家庭。站点可以理解成一个家庭。 第第1 1章章 网页制作基本知识网页制作基本知识 服务器是局域网的核心设备服务器是局域网的核心设备,它管理着局域网中的各种资源它管理着局域网中的各种资源,它的基本功能是它的基本功能是 网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一 台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微 软视窗软视窗window

6、s xp professional操作系统适用的服务器软件操作系统适用的服务器软件iis5.1网站上动态的网站上动态的 数据，必须要通过网站服务器的服务才能运作。数据，必须要通过网站服务器的服务才能运作。 用于查看用于查看web站点的软件被称作浏览器。它是站点的软件被称作浏览器。它是www的窗口的窗口,用户可以利用用户可以利用 浏览器从一个文档跳转到另一个文档实现对整个网站的浏览浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释也可以下载并解释 html文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、文档中所描述的动画、声音、文本、图形、图像，并能实现电子

7、邮件查看、 下载文件下载文件、ftd等功能。它有多种版本等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大如微软英特尔版本、苹果电脑版本等，大 多数浏览者（目前已经超过多数浏览者（目前已经超过90）使用）使用microsoft internet explorer(简称简称ie)浏览浏览 器器.还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功 能区在版面上的排列不同。能区在版面上的排列不同。 第第1 1章章 网页制作基本知识网页制作基本知识 远程站点是指服务器上组成的远程站点是指服务器上组成的web站

8、点。本地站点是指与远程站点站点。本地站点是指与远程站点 上的文件对应的本地磁盘上的文件。上的文件对应的本地磁盘上的文件。 在制作网页时，首先要定义一个本地站点。作为一个网站，里面有在制作网页时，首先要定义一个本地站点。作为一个网站，里面有 很多网页文件、图片、很多网页文件、图片、flash动画等，如果不进行管理归档，分散在硬动画等，如果不进行管理归档，分散在硬 盘的各个地方盘的各个地方,就无法方便地进行网页发布。定义本地站点，就是在硬就无法方便地进行网页发布。定义本地站点，就是在硬 盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行盘上建立一个目录，将所有的网页和相关的文件都放在里

9、面，以便进行 网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新 建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如“我的网我的网 页页”、“个人网页个人网页”等的文件夹里，也可以根据自己的习惯放置文件。等的文件夹里，也可以根据自己的习惯放置文件。 第第1 1章章 网页制作基本知识网页制作基本知识 url即即uniform resource locator（统一资源定位器）的缩写。（统一资源定位器）的缩写。 用来指明主机或文件在用来指明主机或文件在internet

10、上的位置，一个上的位置，一个url就是一个资源就是一个资源 在在internet上的具体位置，上的具体位置，url由由internet资源类型、服务器地址、资源类型、服务器地址、 端口及路径组成，如：端口及路径组成，如：http:/ 典型的典型的url。它的作用在于提供一个标准方法，以便能够在。它的作用在于提供一个标准方法，以便能够在 internet上找到任何东西。无论是单一的页面，还是庞大复杂的网上找到任何东西。无论是单一的页面，还是庞大复杂的网 站，甚至是一个小小的图片，所有的网络资源都能通过站，甚至是一个小小的图片，所有的网络资源都能通过url系统访系统访 问到。问到。 第第1 1章章

11、 网页制作基本知识网页制作基本知识 1.2.1 html基本格式及特点基本格式及特点 1.2.2 html的基本语句的基本语句 1. html 标记符标记符 2. “文件头文件头”标记符标记符 3. “文件标题文件标题”标记符标记符 4. “文件体文件体”标记符标记符 5. “标题标题”标记符标记符 6. 字体和段落标记符字体和段落标记符 7. 图像标记符图像标记符 8. 表格标记符表格标记符 9. 框架标记符框架标记符 10. 层标记符层标记符 11. 表单标记符表单标记符 第第1 1章章 网页制作基本知识网页制作基本知识 文字是网页最基本的构成要素，一个网页上大部文字是网页最基本的构成要素

12、，一个网页上大部 分是由文字构成的，由于文字所表达内容比较清楚、分是由文字构成的，由于文字所表达内容比较清楚、 直接直接,而且相对占用网页版面面积较小，使网页所表达而且相对占用网页版面面积较小，使网页所表达 的信息量加大，所以网上用来表达内容或链接的大部的信息量加大，所以网上用来表达内容或链接的大部 分是文字。文字也称文本，网页有分是文字。文字也称文本，网页有90左右是由文本左右是由文本 组成。首页上的文本基本上都是用来链接用的。组成。首页上的文本基本上都是用来链接用的。 第第1 1章章 网页制作基本知识网页制作基本知识 2. 图像图像 图形和图像也是网页主要的构成要素，它有动态和静态之分，图

13、形和图像也是网页主要的构成要素，它有动态和静态之分， 和文字的功能一样，也是基本上用来链接用的，它比文字看上去更和文字的功能一样，也是基本上用来链接用的，它比文字看上去更 加直观，更让人容易理解内容。图形可提高站点的访问率，但不能加直观，更让人容易理解内容。图形可提高站点的访问率，但不能 因此而在网页上加入过多的图片，这样会适得其反，一方面由于图因此而在网页上加入过多的图片，这样会适得其反，一方面由于图 形占网页空间较大，使网页信息量相对减少；另一方面由于图片较形占网页空间较大，使网页信息量相对减少；另一方面由于图片较 多，使网页显示的速度降低，用户浏览网页花费的时间较长。多，使网页显示的速度

14、降低，用户浏览网页花费的时间较长。 web图形的文件标准格式是图形的文件标准格式是jpg、gif和和png，对颜色具有平，对颜色具有平 滑渐变的图像使用滑渐变的图像使用jpg格式，如大多数照片；对于以单一颜色为主格式，如大多数照片；对于以单一颜色为主 的图像，使用的图像，使用gif格式。格式。 第第1 1章章 网页制作基本知识网页制作基本知识 超链接由两个端点及一个方向构成。通常开始的位置称为源端超链接由两个端点及一个方向构成。通常开始的位置称为源端 点，目标位置称作目标端点。链接就是由源端点指向目标端点的一点，目标位置称作目标端点。链接就是由源端点指向目标端点的一 种跳转。目标端点可以是一个

15、页面、一幅图像、一段声音、或者是种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是 页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。 根据源端点的不同，可以将超链接分为两种：超文本根据源端点的不同，可以将超链接分为两种：超文本 （hypertext）和超链接）和超链接（hyperlink）。超文本就是源端点的文本）。超文本就是源端点的文本 的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，的链接。而超链接是利用文本以外的对象作为源端点所创建的链接， 如图像、表单等。如图像、表单等。 第第1 1章章 网页制作基

16、本知识网页制作基本知识 交互功能，即网上提供的聊天、论坛、留交互功能，即网上提供的聊天、论坛、留 言本、邮件发送及接收的互动功能。这也是言本、邮件发送及接收的互动功能。这也是 互连网的一大优势所在，它给人提供了一个互连网的一大优势所在，它给人提供了一个 快捷交流的平台，给人的生活带来了许多便快捷交流的平台，给人的生活带来了许多便 利。利。 第第1 1章章 网页制作基本知识网页制作基本知识 多媒体就是指各种各样的信息载体在计算机中的应多媒体就是指各种各样的信息载体在计算机中的应 用，是一种文字、声音、图像、动画和视频影像成分的用，是一种文字、声音、图像、动画和视频影像成分的 交互组合。网页中的多

17、媒体主要指采用音频和视频功能交互组合。网页中的多媒体主要指采用音频和视频功能 的软硬件技术，包括数字音响、全动态图像、超媒体连的软硬件技术，包括数字音响、全动态图像、超媒体连 接等，主要是对声音、图像具有编辑处理的功能，即网接等，主要是对声音、图像具有编辑处理的功能，即网 页上提供的音频和视频下载及播放功能，包括页上提供的音频和视频下载及播放功能，包括flash动画、动画、 声音与影片文件的播放。它必须通过网络媒体播放器来声音与影片文件的播放。它必须通过网络媒体播放器来 实现，有多种网络媒体播放器。如常用的有实现，有多种网络媒体播放器。如常用的有windows media player和和 r

18、ealone player等播放器。等播放器。 第第1 1章章 网页制作基本知识网页制作基本知识 设计开发一个网站要考虑很多因素，如设计开发一个网站要考虑很多因素，如站站 点的定位、点的定位、确定网站的目录和链接结构、确定网站的目录和链接结构、首页首页 的设计制作的设计制作及网站的测试、发布和维护及网站的测试、发布和维护等，这等，这 些因素的考虑，是一个环环相扣的过程，要想些因素的考虑，是一个环环相扣的过程，要想 设计制作一个成功的网站，对每一个环节的把设计制作一个成功的网站，对每一个环节的把 握都十分重要。握都十分重要。 第第1 1章章 网页制作基本知识网页制作基本知识 1. 确定网站主题

19、2. 为网站命名 第第1 1章章 网页制作基本知识网页制作基本知识 cici形象是借用的广告术语。形象是借用的广告术语。( (cici是英文是英文corporate corporate identityidentity的缩写的缩写) )，意思是，意思是通过视觉来统一企业的形象。通过视觉来统一企业的形象。企企 业一般都要通过业一般都要通过cici形象的策划来提高知名度，它是一种营销形象的策划来提高知名度，它是一种营销 战略。如较早地成功导入战略。如较早地成功导入cici战略的世界知名公司有可口可乐、战略的世界知名公司有可口可乐、 sonysony、三菱、麦当劳等。一个网站，和实体公司一样，也需、

20、三菱、麦当劳等。一个网站，和实体公司一样，也需 要整体的形象包装和定位准确的、有创意的要整体的形象包装和定位准确的、有创意的ci ci 设计，这样设计，这样 对网站的宣传推广有事半功倍的效果。网站主题和名称定下对网站的宣传推广有事半功倍的效果。网站主题和名称定下 来之后，需要思考的就是网站来之后，需要思考的就是网站的的cici形象设计。网站的形象设计。网站的cici形象形象 设计和企业的设计和企业的cici形象设计的内容相似，主要包括：形象设计的内容相似，主要包括： 第第1 1章章 网页制作基本知识网页制作基本知识 1.4.2 定位网站定位网站ci形象形象 1. 设计网站的标志设计网站的标志(

21、logo) 即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的 集中体现，看见它就让人联想到它所代表的站点。如新浪网的集中体现，看见它就让人联想到它所代表的站点。如新浪网的 网标就网标就 体现出新浪网的快捷、准确、精华的特色。体现出新浪网的快捷、准确、精华的特色。 标志图形可以只由中文、英文字母构成，也可以只由符号、图案（动标志图形可以只由中文、英文字母构成，也可以只由符号、图案（动 物、植物、人物、几何）构成，还可以由文字和图形构成。如：物、植物、人物、几何）构成，还可以由文字和图形构成。如：soim是用是用 soim的英

22、文做为标志，新浪用字母的英文做为标志，新浪用字母sina和眼睛作为标志。和眼睛作为标志。标志的设计创意标志的设计创意 来自网站的名称和内容。来自网站的名称和内容。 1）以用与网站名称相关的人物，动物，花草等作为设计的主体对象，通）以用与网站名称相关的人物，动物，花草等作为设计的主体对象，通 过抽象、概括、变形等手法，使之艺术化、标志化，如迪斯尼的米老鼠、过抽象、概括、变形等手法，使之艺术化、标志化，如迪斯尼的米老鼠、 搜狐的卡通狐狸等。搜狐的卡通狐狸等。 2）专业性较强的网站，可以以本专业有代表的物品作为设计的主体对）专业性较强的网站，可以以本专业有代表的物品作为设计的主体对 象。如中国银行的

23、古钱标志、奔驰汽车的方向盘标志等。象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。 3) 最常用和最简单的方式，是用网站的英文名称的字体作为设计的主体最常用和最简单的方式，是用网站的英文名称的字体作为设计的主体 对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 logo的国际标准规范： 88*31 这是互联网上最普遍的logo规格，本站所收集的 均是这种大小 120*60 这种规格用于一般大小的logo 120*9

24、0 这种规格用于大型logo。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 2. 设计网站的标准色彩设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感，确定 网站的标准色彩是相当重要的一步。不同的色彩搭 配会产生不同的效果，并可能影响到访问者的情绪。 “标准色彩”是指能体现网站形象和延伸内涵 的色彩。如：ibm的深蓝色、肯德基的红色条型、 windows视窗标志上的红、蓝、黄、绿色块等，

25、都 会给我们不同的视觉感受。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 一般来说，一个网站的标准色彩不超过3种， 太多则让人眼花缭乱。标准色彩要用于网站的 标志，标题，主菜单和主色块。给人以整体统 一的感觉。至于其它色彩也可以使用，只是作 为点缀和衬托，绝不能喧宾夺主。 一般来说，适合于网页标准色的颜色有：蓝 色，黄/橙色，黑/灰/白色三大系列色。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 网站的宣传标语，就是把网站的精神、目标用

26、网站的宣传标语，就是把网站的精神、目标用 一句话或一个词来高度概括。类似生活中的广告语。一句话或一个词来高度概括。类似生活中的广告语。 如鹊巢的如鹊巢的“味道好极了味道好极了”、麦斯威尔的、麦斯威尔的“好东西和好东西和 好朋友一起分享好朋友一起分享”、intelintel的的“给你一个奔腾的心给你一个奔腾的心” 等。等。 网站的标志、色彩、字体和标语，是一个网站网站的标志、色彩、字体和标语，是一个网站 树立树立cici形象的关键，也是一个网站档次高低的直接形象的关键，也是一个网站档次高低的直接 体现，所以，定位网站体现，所以，定位网站的的cici形象，最好要有艺术设形象，最好要有艺术设 计人员

27、参与。计人员参与。 第第1 1章章 网页制作基本知识网页制作基本知识 网站资料主要包括网站资料主要包括文本文本、图像图像两大类，大部分在两大类，大部分在 放入网页前都需要做适当的修改和处理。另外，依据放入网页前都需要做适当的修改和处理。另外，依据 网站的主题亮点，还可能准备如声音、网站的主题亮点，还可能准备如声音、flash影片、图影片、图 像等需要在网页中展示的内容。搜集资料时范围要广像等需要在网页中展示的内容。搜集资料时范围要广 泛，在进行网页设计时再整理与筛选。泛，在进行网页设计时再整理与筛选。 第第1 1章章 网页制作基本知识网页制作基本知识 站点确定后，接下来就要规划网站的结构，网站

28、的结构分目录目录 结构结构和链接结构链接结构。确定网站的结构目的是便于网站的使用和维护。 网站的目录是指在建立网站定义站点时创建的目录网站的目录是指在建立网站定义站点时创建的目录，如有类似 “我的网页”的根目录和“我的家”的子目录。目录的结构是一个 很容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太 大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植 有着重要的影响。如建立e:/我的网页我的家文字、图片、链 接等较清晰的目录，就便于网站的管理和维护。 网站的链接结构是指页面之间相互链接的拓扑结构，它建立在网站的链接结构是指页面之间相互链接的拓扑结构，它建立在 目录结构基础之上，

29、但可以跨越目录。目录结构基础之上，但可以跨越目录。形象地说：每个页面都是一 个固定点，链接则是在两个固定点之间的连线。一个点可以和一个 点连接，也可以和多个点连接。更重要的是，这些点并不是分布在 一个平面上，而是存在于一个立体的空间中。确立网站的链接结构 的目的是用最少的链接，使得浏览最有效率。 第第1 1章章 网页制作基本知识网页制作基本知识 一般来说，确定网站的目录结构有两种基本方式：一般来说，确定网站的目录结构有两种基本方式： 第第1 1章章 网页制作基本知识网页制作基本知识 一般来说，确定网站的链接结构有两种基本方式：一般来说，确定网站的链接结构有两种基本方式： 1) 树状链接结构（一

30、对一）。树状链接结构（一对一）。类似类似dos的目录结构，首页链的目录结构，首页链 接指向一级页面，一级页面链接指向二级页面。立体结构看起来接指向一级页面，一级页面链接指向二级页面。立体结构看起来 就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会优点是条理清晰，访问者明确知道自己在什么位置，不会“迷迷” 路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的 子页面，必须绕经首页。如子页面，必须绕经首页。如: 校园动态

31、校园动态-教师活动教师活动-学生活动学生活动 首页首页 教学园地教学园地-教师成果教师成果-学生作品学生作品 第第1 1章章 网页制作基本知识网页制作基本知识 1.4 网站开发的流程网站开发的流程 2) 星状链接结构（一对多）星状链接结构（一对多）。类似网络服务器的链接，每个页面相 互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接 结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太 多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。如: 校园动态校园动态-教师活动教师活动-学生活动学生活动 首页首页 教学园地教学园地-教师成果教师成果-学生作品学生作品 这两种

32、基本结构都只是理想方式，在实际的网站设计中，一般要将 这两种结构混合起来使用。 第第1 1章章 网页制作基本知识网页制作基本知识 确立好了网站的结构，就可以对网站的首页进行设计了，确立好了网站的结构，就可以对网站的首页进行设计了， 首页的设计是一个网站成功与否的关键。用户往往看到第一首页的设计是一个网站成功与否的关键。用户往往看到第一 页就已经对站点有一个整体的感觉，是不是能够促使他们继页就已经对站点有一个整体的感觉，是不是能够促使他们继 续点击进入或者使他们的视线留在站点上，首页设计的好坏续点击进入或者使他们的视线留在站点上，首页设计的好坏 是至关重要的是至关重要的,所以所以,首页的设计和制

33、作是一定要重视和花费首页的设计和制作是一定要重视和花费 精力的精力的,一般首页设计和制作占整个制作时间的一般首页设计和制作占整个制作时间的40%左右左右,这这 样可以避免出现全部制作好以后再修改带来的麻烦。样可以避免出现全部制作好以后再修改带来的麻烦。 首页，从根本上说就是全站内容的目录，是一个索引首页，从根本上说就是全站内容的目录，是一个索引, 但不是一个简单的目录的罗列，如何设计好一个首页呢？一但不是一个简单的目录的罗列，如何设计好一个首页呢？一 般的步骤是：般的步骤是： 第第1 1章章 网页制作基本知识网页制作基本知识 首页的内容模块是指你需要在首页上实现的主要内容和首页的内容模块是指你

34、需要在首页上实现的主要内容和 功能。一般的站点都需要这样一些模块：网站名称功能。一般的站点都需要这样一些模块：网站名称(logo)、 广告条广告条(banner)、主菜单、主菜单(menu)、新闻、新闻(whats new)、搜索、搜索 (search)、 友情链接友情链接(links)、邮件列表、邮件列表(maillist)、计数器、计数器 (count)、版权、版权(copyright). 选择哪些模块，实现哪些功能，选择哪些模块，实现哪些功能， 是否需要添加其他模块都是首页设计首先需要确定的。是否需要添加其他模块都是首页设计首先需要确定的。 第第1 1章章 网页制作基本知识网页制作基本知

35、识 在功能模块确定后，开始设计首页的版在功能模块确定后，开始设计首页的版 面。就象搭积木一样，每个模块是一个单位积面。就象搭积木一样，每个模块是一个单位积 木，如何拼搭出一座漂亮的房子，就要看设计木，如何拼搭出一座漂亮的房子，就要看设计 师的创意和想象力了。师的创意和想象力了。 设计版面的最好方法是先勾勒出理想中的设计版面的最好方法是先勾勒出理想中的 草图，然后再用网页制作软件来实现。草图，然后再用网页制作软件来实现。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 常用到的版面布局形式有：常用到的版面布局形式有： “t”字型结构布局。字型结

36、构布局。 所谓所谓“t”结构。就是指页面顶部为横条结构。就是指页面顶部为横条 网站标志和广告条，下方左面为主菜单，网站标志和广告条，下方左面为主菜单， 右面显示内容的布局，因为菜单条背景右面显示内容的布局，因为菜单条背景 较深，整体效果类似英文字母较深，整体效果类似英文字母“t”,所所 以我们称之为以我们称之为“t”形布局。这是网页设形布局。这是网页设 计中用的最广泛的一种布局方式。这种计中用的最广泛的一种布局方式。这种 布局的优点是页面结构清晰、主次分明，布局的优点是页面结构清晰、主次分明， 是较容易学习和掌握的布局方法。缺点是较容易学习和掌握的布局方法。缺点 是规矩、呆板，如果细节色彩上再

37、处理是规矩、呆板，如果细节色彩上再处理 不好（没有对比），就会让人觉得无味。不好（没有对比），就会让人觉得无味。 第第1 1章章 网页制作基本知识网页制作基本知识 http:/ 第第1 1章章 网页制作基本知识网页制作基本知识 “口口”字型布局。字型布局。 就是页面一般上下各有一就是页面一般上下各有一 个广告条，左面是主菜单，个广告条，左面是主菜单， 右面放友情连接等，中间右面放友情连接等，中间 是主要内容。这种布局的是主要内容。这种布局的 优点是充分利用版面，信优点是充分利用版面，信 息量大。缺点是页面拥挤，息量大。缺点是页面拥挤， 不够灵活。也有将四边空不够灵活。也有将四边空 出，只用中间

38、的窗口型进出，只用中间的窗口型进 行设计，如网易壁纸站。行设计，如网易壁纸站。 第第1 1章章 网页制作基本知识网页制作基本知识 http:/ 第第1 1章章 网页制作基本知识网页制作基本知识 “三三”字型布局。字型布局。这种布这种布 局多用于国外站点，国局多用于国外站点，国 内用的不多。特点是页内用的不多。特点是页 面上横向两条色块，将面上横向两条色块，将 页面整体分割为四部分，页面整体分割为四部分， 色块中大多放广告条。色块中大多放广告条。 第第1 1章章 网页制作基本知识网页制作基本知识 对称对比布局。对称对比布局。 顾名思义，采取左右或者顾名思义，采取左右或者 上下对称的布局，一半深上

39、下对称的布局，一半深 色，一半浅色，一般用于色，一半浅色，一般用于 设计型站点。优点是视觉设计型站点。优点是视觉 冲击力强，缺点是将两部冲击力强，缺点是将两部 分有机的结合比较困难。分有机的结合比较困难。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 pop布局。布局。 pop引自广告术语，就是引自广告术语，就是 指页面布局象一张宣传海指页面布局象一张宣传海 报，以一张精美图片作为报，以一张精美图片作为 页面的设计中心。常用于页面的设计中心。常用于 时尚类站点，如时尚类站点，如elle.com 等。优点是显而易见、漂等。优点是显而易见、漂

40、亮、吸引人。缺点是速度亮、吸引人。缺点是速度 慢。慢。 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 整个站点编辑制作完成后整个站点编辑制作完成后,最终需要在服务器上发布最终需要在服务器上发布.但在此之但在此之 前必须对站点进行测试前必须对站点进行测试.测试以后测试以后,根据空间商所提供的资料根据空间商所提供的资料,将本将本 地站点发布到服务器上地站点发布到服务器上,并进行最后的测试并进行最后的测试. 在创建一个在创建一个web站点时站点时,测试是绝对需要的测试是绝对需要的,我们无法掌握用户我们无法掌握用户 的浏览器版本、类型，用尽可能多的

41、浏览器和系统中浏览自己的的浏览器版本、类型，用尽可能多的浏览器和系统中浏览自己的 页面是很关键的。在进行调整之前，必须对颜色、灰度系数、页页面是很关键的。在进行调整之前，必须对颜色、灰度系数、页 面偏移和容量的变化进行观察。可以从面偏移和容量的变化进行观察。可以从dreamweaver mx2004中中 进行一个比较基础、初级的测试类型，那就是代码测试。浏览器进行一个比较基础、初级的测试类型，那就是代码测试。浏览器 通常忽略了它们所不理解的标记和属性通常忽略了它们所不理解的标记和属性,但这些标记有可能产生但这些标记有可能产生 意想不到的不好的效果意想不到的不好的效果,所以所以,要首先检查目标浏

42、览器的兼容性，要首先检查目标浏览器的兼容性， 步骤如下：步骤如下： 第第1 1章章 网页制作基本知识网页制作基本知识 1.4.6 网站测试与发布网站测试与发布 1. 网站测试项目及方法网站测试项目及方法 对站点进行测试，还必须从以下几个方面来完成。对站点进行测试，还必须从以下几个方面来完成。 1）检查目标浏览器的兼容性。应在尽可能多的不同的浏览器和平台上预览页面，查看检查目标浏览器的兼容性。应在尽可能多的不同的浏览器和平台上预览页面，查看 布局、颜色、字体大小和默认浏览器窗口大小等方面的区别。这些区别在目标浏览器检查中布局、颜色、字体大小和默认浏览器窗口大小等方面的区别。这些区别在目标浏览器检

43、查中 是无法预见的。是无法预见的。 2）检查站点是否有断开的链接，并修复断开的链接。由于其它站点也在重新设计、重检查站点是否有断开的链接，并修复断开的链接。由于其它站点也在重新设计、重 新组织，所以所链接的页面可能已被移动或删除，可运行链接检查报告对链接进行测试。新组织，所以所链接的页面可能已被移动或删除，可运行链接检查报告对链接进行测试。 3）监测页面的文件大小以及下载这些页面所占用的时间。由大型表格组成的页面，在监测页面的文件大小以及下载这些页面所占用的时间。由大型表格组成的页面，在 某些浏览器中，某些浏览器中， 在整张表完全载入之前，访问者将什么也看不到。所以，应考虑将大型表在整张表完全

44、载入之前，访问者将什么也看不到。所以，应考虑将大型表 格分为几部分，或者将少量内容放在表以外的页面顶部，这样在下栽表的同时，用户就可以格分为几部分，或者将少量内容放在表以外的页面顶部，这样在下栽表的同时，用户就可以 查看这些内容。查看这些内容。 第第1 1章章 网页制作基本知识网页制作基本知识 将网页设计完成并测试成功之后，接下来就是要将它正式发布到将网页设计完成并测试成功之后，接下来就是要将它正式发布到internet上。如果没有商业用上。如果没有商业用 途，仅仅只是为了娱乐，最好的方法就是上网申请一个免费网页空间，这样既不花钱，又能看到自途，仅仅只是为了娱乐，最好的方法就是上网申请一个免费

45、网页空间，这样既不花钱，又能看到自 己的成果。己的成果。 申请免费的个人主页空间之前，需要注意以下几点：申请免费的个人主页空间之前，需要注意以下几点： 1）网站空间的容量。免费网站空间可能提供）网站空间的容量。免费网站空间可能提供5mb到到20mb不等容量，要先衡量一下自己的网页不等容量，要先衡量一下自己的网页 大小，再进行申请。大小，再进行申请。 2）义务性广告。申请免费网页空间，有时不可避免要附带提供方的广告，一般来说都是当开）义务性广告。申请免费网页空间，有时不可避免要附带提供方的广告，一般来说都是当开 通网站时才会自动打开广告小窗口，有些是在网站顶部自动生成广告栏，大都不会影响网站的浏

46、览。通网站时才会自动打开广告小窗口，有些是在网站顶部自动生成广告栏，大都不会影响网站的浏览。 3）文件上传的方式。每个系统所允许的上传方式可能会不同，虽然现在大部分的网站均使用）文件上传的方式。每个系统所允许的上传方式可能会不同，虽然现在大部分的网站均使用 ftp方式来上传文件，也可以使用方式来上传文件，也可以使用cuteftp或者是或者是dreamweaver mx2004来实现上传。在各大搜索引来实现上传。在各大搜索引 擎中输入擎中输入“免费空间免费空间”，即可找到无数条相关信息，选择合适的网站，即可申请一个免费主页空间。，即可找到无数条相关信息，选择合适的网站，即可申请一个免费主页空间。

47、 但是免费主页空间有很多缺点，如太多人使用，空间小，频带窄，易堵塞，而且多数需要义务但是免费主页空间有很多缺点，如太多人使用，空间小，频带窄，易堵塞，而且多数需要义务 性广告，随时会被取消服务。因此，在经济允许的条件下，可以申请收费空间。提供收费空间的网性广告，随时会被取消服务。因此，在经济允许的条件下，可以申请收费空间。提供收费空间的网 站很多，价格也比较合适。站很多，价格也比较合适。 申请好网页空间后，接下来就要将整个网站上传到服务器。利用申请好网页空间后，接下来就要将整个网站上传到服务器。利用dreamweaver mx2004内置的内置的 ftp功能来上传，具体步骤如下：功能来上传，具

48、体步骤如下： 第第1 1章章 网页制作基本知识网页制作基本知识 第第1 1章章 网页制作基本知识网页制作基本知识 网站推广的基本方法主要有以下几种。 1.搜索引擎注册 2. 建立链接 3.利用公告栏和新闻组 4.发布网络广告 5.发送电子邮件 6.提供免费服务 7.使用传统的促销媒介 第第1 1章章 网页制作基本知识网页制作基本知识 只有题材引人注目，才有可能吸引更多的浏览者，并给他们留系只有题材引人注目，才有可能吸引更多的浏览者，并给他们留系 深刻的印象，使之能继续浏览网站的内容。所以在选择题材时要根据深刻的印象，使之能继续浏览网站的内容。所以在选择题材时要根据 我们前面学习的方法来选择，慎

49、之又慎。我们前面学习的方法来选择，慎之又慎。 1.5.2 设计制作网页时最容易犯的错误就是确定好题材后立刻开始制作，设计制作网页时最容易犯的错误就是确定好题材后立刻开始制作， 这样往往会出现网站结构不清晰、目录庞杂、内容放置无规律等不足，这样往往会出现网站结构不清晰、目录庞杂、内容放置无规律等不足， 造成浏览者看不明白，扩充和维护网站也困难的后果。建立网站就如造成浏览者看不明白，扩充和维护网站也困难的后果。建立网站就如 同写文章，首先要拟好提纲，文章才能主题明确、层次清晰；也类似同写文章，首先要拟好提纲，文章才能主题明确、层次清晰；也类似 造高楼，首先要设计好框架图纸，才能使楼房结构合理。所以

50、，在制造高楼，首先要设计好框架图纸，才能使楼房结构合理。所以，在制 作网页前，一定还要确定好栏目内容及设计好版面布局。作网页前，一定还要确定好栏目内容及设计好版面布局。 第第1 1章章 网页制作基本知识网页制作基本知识 栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目的时候，既栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目的时候，既 要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点：要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点： (1)确定栏目要紧扣主题确定栏目要紧扣主题 即将网站主题按一定的方法分类并将它们作为

51、网站的主栏目。如以动画题材为主的网页可以将栏目即将网站主题按一定的方法分类并将它们作为网站的主栏目。如以动画题材为主的网页可以将栏目 分为动物动画、标志动画、三维动画、卡通动画等，在首页上标明最近更新的动画。要使主题栏目个数分为动物动画、标志动画、三维动画、卡通动画等，在首页上标明最近更新的动画。要使主题栏目个数 在总栏目中要占绝对优势，这样的网站显得专业、主题突出，容易给人留下深刻印象。在总栏目中要占绝对优势，这样的网站显得专业、主题突出，容易给人留下深刻印象。 (2)要设一个最近更新或网站指南的栏目要设一个最近更新或网站指南的栏目 首页设立一个首页设立一个“最近更新最近更新”的栏目，以便照

52、顾常来的访客，使主页更具人性化。如果主页内容庞大的栏目，以便照顾常来的访客，使主页更具人性化。如果主页内容庞大 (超过超过15mb)、层次较多，又没有站内的搜索引擎，就需要设置、层次较多，又没有站内的搜索引擎，就需要设置“本站指南本站指南”栏目，这样可以帮助初访栏目，这样可以帮助初访 者快速找到他们想要的内容。者快速找到他们想要的内容。 (3)要设定一个可以双向交流的栏目要设定一个可以双向交流的栏目 设定如论坛、留言本、邮件列表等双向交流的栏目，可以让浏览者留下他们的信息，这样可使站点设定如论坛、留言本、邮件列表等双向交流的栏目，可以让浏览者留下他们的信息，这样可使站点 更具有亲和力。更具有亲

53、和力。 (4) 要设一个下载或常见问题回答栏目要设一个下载或常见问题回答栏目 网络的特点是信息共享。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定希望能一次网络的特点是信息共享。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定希望能一次 性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览者带来很大的方便；性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览者带来很大的方便； 另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页再设立一个常见问题回答的另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页再设立

54、一个常见问题回答的 栏目，以便我们不断学习和更新网页。栏目，以便我们不断学习和更新网页。 第第1 1章章 网页制作基本知识网页制作基本知识 版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个用户版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个用户 的显示器分辨率不同，所以同一个页面的大小可能出现的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素、像素、800*600像素、像素、 1024*768像素等不同尺寸。像素等不同尺寸。 布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置，布局要符布局，就是以最适合浏览的方式将图片和文字排放在页

55、面的不同位置，布局要符 合站点整体的创意，同时它也是一个创意的问题，但要比站点整体的创意容易、更有合站点整体的创意，同时它也是一个创意的问题，但要比站点整体的创意容易、更有 规律。版面布局的步骤是：规律。版面布局的步骤是： (1) 草案草案 新建页面就象一张白纸，没有任何表格、框架和约定俗成的东西，我们可以尽可新建页面就象一张白纸，没有任何表格、框架和约定俗成的东西，我们可以尽可 能的发挥想象力，将想到的能的发挥想象力，将想到的“景象景象”画上去，尽量多画几个方案，最后选定一个满意画上去，尽量多画几个方案，最后选定一个满意 的作为继续创作的脚本。的作为继续创作的脚本。 (2) 粗略布局粗略布局

56、 在草案的基础上，将确定需要放置的功能模块安排到页面上。安排页面时，一定在草案的基础上，将确定需要放置的功能模块安排到页面上。安排页面时，一定 要遵循突出重点、平衡协调的原则，即将网站标志、主菜单等最重要的模块放在最显要遵循突出重点、平衡协调的原则，即将网站标志、主菜单等最重要的模块放在最显 眼、最突出的位置，然后再考虑次要模块的放置。眼、最突出的位置，然后再考虑次要模块的放置。 (3) 定案定案 即将粗略布局精细化，具体化。即将粗略布局精细化，具体化。 第第1 1章章 网页制作基本知识网页制作基本知识 在布局过程中，常遵循的法则有：在布局过程中，常遵循的法则有： 平衡和对称。平衡和对称。对称

57、指上下左右对照分布的形式，主要强调秩序感，能达到安定对称指上下左右对照分布的形式，主要强调秩序感，能达到安定 平实、和谐的效果；平衡指上下左右虽然不完全对称，但却能达到视觉上的均衡，也平实、和谐的效果；平衡指上下左右虽然不完全对称，但却能达到视觉上的均衡，也 能达到一种视觉稳定的效果，但比完全对称的形式显活泼。能达到一种视觉稳定的效果，但比完全对称的形式显活泼。 对比。对比。所谓对比，目的是为了强调和突出，不仅要在构成元素的性质（图形和所谓对比，目的是为了强调和突出，不仅要在构成元素的性质（图形和 文字）、色彩搭配上来对比表现，也要在内容上的古与今、新与旧存在对比。文字）、色彩搭配上来对比表现

58、，也要在内容上的古与今、新与旧存在对比。 凝视。凝视。所谓凝视，就是利用页面中人物视线，使浏览者仿照跟随的心理，以达所谓凝视，就是利用页面中人物视线，使浏览者仿照跟随的心理，以达 到注视页面的效果，一般多用明星凝视状。到注视页面的效果，一般多用明星凝视状。 空白。空白。空白有两种作用，一方面对其它网站表示突出；另一方面也表示网页品空白有两种作用，一方面对其它网站表示突出；另一方面也表示网页品 位的优越感，这种表现方法对体现网页的格调十分有效。位的优越感，这种表现方法对体现网页的格调十分有效。 图片。图片。即尽量用图片来解说，对不能用语言说服、或用语言无法表达的情感，即尽量用图片来解说，对不能用

59、语言说服、或用语言无法表达的情感， 就要用图片来解说的内容，可以传达给浏览者的更多的信息。就要用图片来解说的内容，可以传达给浏览者的更多的信息。 上述的设计法则，如果能领会并活用到页面布局里，页面视觉效果就会更好。如：上述的设计法则，如果能领会并活用到页面布局里，页面视觉效果就会更好。如： 网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号来串联；左面网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号来串联；左面 文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角等等。文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角等等。 第第1 1章章

60、网页制作基本知识网页制作基本知识 2) 版面布局的设计版面布局的设计 以上只是常见的布局形式，要想设计出别具一格的布局形以上只是常见的布局形式，要想设计出别具一格的布局形 式，还要经过长期的实践学习不断提高视觉感受能力后才能式，还要经过长期的实践学习不断提高视觉感受能力后才能 实现。版面在布局过程中，还应注意做到以下几点：实现。版面在布局过程中，还应注意做到以下几点： 要加强页面的视觉效果；要加强页面的视觉效果； 要加强文案的可视度和可读性；要加强文案的可视度和可读性； 要统一整个页面的风格；要统一整个页面的风格； 要具有新鲜感和个性化。要具有新鲜感和个性化。 第第1 1章章 网页制作基本知识