网页制作

《 Dreamweaver MX 2004 的基本应用》

1.网页的布局2.构成网页的基本要素3.制作网页的基本工具4.美化网页的基本工具5.网页制作的基本步骤

第一章 网页制作初识

1.1 网页的布局

网页布局大致可分为：

“ 国”字型 ( 例如： CCTV 网站……）

拐角型 （例如： TCSZ 网站…… 例： 1 2

左右框架型 （例如：雅虎网站）

上下框架型 （上下分为两页的框架）

综合框架型 （例如：新浪网、搜狐网）

封面型 （一般由标题和图片构成 例： 1 2 3）

Flash 型 （功能强大、信息丰富、视觉

及听觉效果强大的相当于多媒体。例 :1 2 3）

变化型 （即上面几种类型的结合与变化）

所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在 800*600 的屏幕显示模式 ( 这也是最常用的 ) 下，在 IE 安装后默认的状态 ( 即工具栏地址栏等没有改变 ) 下， IE 窗口内能看到的部分为 778px*435px ，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

关于第一屏

1.2 网页的基本要素

1.2.1 文字 文字是网页发布信息所用的主要形式，由文

字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。

1．标题 一个网页通常都有一个标题，表明本网页的主要内容。标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。2．字号 网页中的文字不能太大或太小。太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。3．字型 在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。 如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。 当文本内容较多时。可以利用表格形式来实现。

1.2.2 图形 这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用 JPEG和 GIF ，这两种格式具有跨平台的特性，

可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。（示例图）1．菜单按钮 网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。

2．背景图形 为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。

A B

C

A 图片格式 BMP 482KB

B 图片格式 GIF 92KB

C 图片格式 JPG 45KB

1.2.3 链接标志 链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。

1.2.4 交互功能 Internet 区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过 Internet 告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。 通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。

1.3 制作网页的基本工具1．超文本标识语言（HTML） HTML 是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。

2． FrontPage FrontPage是由Microsoft 公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage界面与Word、 PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft 公司将 FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。

3． Dreamweaver Dreamweaver是一款在网页制作方面比较实用大众化的软件，它具有可视化编辑界面，用户不必编写复杂的 HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外， Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以 Dreamweaver是网页设计者的首选工具。

1.4 美化网页的基本工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化 工具对网页进行美化。 1． Photoshop Photoshop 是常用的图形处理软件，它是目前公认的 PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司， Photoshop 都是首选的平面制作工具。

2． Fireworks Fireworks 是著名的图形处理工具，它是第一套专门为制作网

页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件， Fireworks 还能够自动切割图像、生成光 标动态感应的 JavaScript程序等等，而且 Fireworks具有强大的动画功能和一个相当完美的网络图像生成器，它同著名的 Dreamweaver 、 FLASH 合称“网页制作三剑客”。

3． Flash Flash 是著名的矢量图形编辑和动画创作的专业软件，它

是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。

1.5 网页制作的基本步骤1.5.1 整体规划 进行网站的整体规划也就是组织网站的内容和设计其结构。

网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。

① 层状结构 层状结构（如图 1.8所示）类似于目录系统的树型结构，由网

站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。

主 页

页面 1 页面 2 页面 3

页面 4 页面 5 页面 6 页面 7

一级标题

二级标题

图 1.8 层状结构

② 线性结构 线性结构（如图 1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。

主

页

页面1

页面2

页面3

图 1.9 线性结构

主 页

页面 1 页面 2 页面 3

页面 4 页面 5 页面 7 页面 8

一级标题

二级标题

图 1.10 Web 结构

页面 6

③Web 结构 Web 结构（如图 1.10 所示）类似于 Internet 的组成结构，各网页之间形成网状连接，允许用户随意浏览。

1．收集整理资料2．准备素材3．内容规划1.5.2 网页设计与制作1．静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。 通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。 一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：

（ 1 ）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。

（ 2 ）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。

（ 3）最好不在 800×600以上的分辨率设计网页，常用的分辨率是 640×480及 800×600。但是如果主要要用 Dreamweaver来设计网页，建议使用 1024 × 876，否者有的功能显示不全。

（ 4）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。

（ 5）网页色彩搭配的技巧

①. 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度， (说得通俗些就是将 色彩变淡或则加深 )，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

②. 用两种色彩。先选定一种色彩，然后选择它的对比色。这样使得整个页面色彩丰富但不花稍。

③. 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在 photoshop 里按前景色方框，在跳出的拾色器窗中选择 "自定义 "，然后在 "色库 "中选就可以了 :)

④. 用黑色和一种彩色。比如大红的字体配黑色的边框感觉很 " 跳 "。

（ 6）在网页配色中，忌讳的是：

①. 不要将所有颜色都用到，尽量控制在三种色彩以内。 ②.背景和前文的对比尽量要大， (绝对不要用花纹繁复的图案作背景 ) ，以便突出主要文字内容。

附： 《中国传统色彩名录》 取色器

2．为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。

1.5.3 测试网页 当网页设计者制作完所有网站页面之后，需要对所设计的网页

进行审查和测试，测试内容包括功能测试和完整测试两个方面。 所谓功能测试就是要保证网页的可用性，达到最初的内容组织设

计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整测试就是保证页面内容显示正确，链接准确，无差错无遗漏。

如果在测试过程中发现了错误，就要及时修改，在准确无误后 ,方可正式在 Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。

1.5.4 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不

能展现出去。发布的服务器可以是远程，也可以是本地，但如果制作的是动态网页那就必须支持 ASP，因为动态程序是建立在 ASP基础上的。

第二章 Dreamweaver MX 2004 的基本应用

一、 Dreamweaver的版本历史

二、 Dreamweaver MX 2004 界面介绍

三、 Dreamweaver MX 2004基本操作

一、 Dreamweaver的版本历史

Dreamweaver的发展经历了如下版本：　　　 Dreamweaver 1.0 Dreamweaver 2.0、 2.01　　 Dreamweaver 3.0、　　 Dreamweaver 4.0 对于初学者来讲，下面两个版本的 Dreamweaver在使用上不会有太大的差别。　　 Dreamweaver MX（ 6.0） Dreamweaver MX 2004（ 7.0、 7.01 ）其功能更加强大，特别是提供了对微软ASP.NET 的支持，不需要编写任何代码，即可实现动态的网页。并且在编写代码时，提供了智能的提示，便于我们手工编写代码。 此外， Dreamweaver MX还加入了代码自动完成功能，会按照用户写的代码片段自动给出提示，协助我们提高编写代码的效率。

第一节 起始页、文档窗口

二、 Dreamweaver MX 2004 界面介绍

一、起始页 运行 Dremweaver 程序，最先打开一个起始页，如下图所示。

二、文档窗口 文档窗口是编辑网页的区域网页的设计和代码编辑均在文档窗口中进行，如下图。

上图中：①为标题栏 ②为菜单栏 ③为插入工具栏 ④为文档窗口 ⑤为属性面板 ⑥为其它活动面板

三、菜单概述

“ 文件”菜单和“编辑”菜单包含“文件”菜单和“编辑”菜单的标准菜单项，例如“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。在 Windows 中，“编辑”菜单还提供对 Dreamweaver 菜单中“首选参数”的访问；在 Macintosh 中，使用 Dreamweaver 菜单可以打开“首选参数”对话框。 “视图”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 Dreamweaver 工具及工具栏。 “插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。 “修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 “文本”菜单使您可以轻松地设置文本的格式。

“命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令，以及一个使用 Macromedia Fireworks 优化图像的命令。

“ 站点”菜单提供用于管理站点以及上传和下载文件的菜单项。

提示：以前版本的 Dreamweaver 中的“站点”菜单的部分功能现在可以在“文件”面板的“选项”菜单中找到。

“窗口”菜单提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。（要访问工具栏，请参见“视图”菜单。）

“帮助”菜单提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。

第二节 插入工具栏及其它面板

一、插入工具栏

插入工具栏的作用是向当前光标位置插入对象。单击插入工具栏上不同的图标，可以插入不同类型的对象。同时，也可以选择不同的插入工具栏，单击插入工具栏左侧的“常用”按钮可以弹出如图所示的下拉菜单。

选择“显示为制表符”选项可以使插入工具栏显示为层叠的选项形式，如下图。

分别选择布局、表单、文本、 HTML、应用程序、 Flash元素，如下图所示不同形式的制表符工具栏。

以上都是有关插入工具。

二、其它面板 除了上面介绍的面板之外， Dreamweaver还有许多其它面

板，如行为面板、框架面板、文件面板和代码面板等，它们都是针对不同的对象起作用，这些面板将在后面的章节中进行介绍。

在制作网页过程中，用户可以根据需要关闭或打开这些面板和工具条，具体操作步骤如下：

1 、选择菜单“查看 --工具栏 -- 插入”可以打开或关闭插入工具栏。 2 、选择菜单“查看 --工具栏 --文档”可以打开或关闭文档工具栏。选择菜单“查看 --工具栏 --标准”可以打开或关闭标准工具栏。 3、 选择菜单“查看 -- 隐藏面板”可以隐藏所有的面板。当所以面板处于隐藏状态时。选择菜单“查看 --显示面板”可以显示所以的面板。 4、 如果要打开某一个特定的面板，可以选择菜单“窗口”中相应的菜单顶。比如依次选择菜单“窗口 --文件”就可以打开“文件”面板。

Dreamweaver启动过程

①单击“开始”，指向“程序”，如图 1-1 所示；②单击箭头，在单击Macromedia ，然后从中选择Macromedia Dreamweaver MX 2004，即可启动 Dreamweaver。

　　

　　图 1-1 Dreamweaver的启动方式

三、 Dreamweaver MX 2004基本操作

第一节 创建站点 Dreamweaver站点是文件和文件夹的集合，对应于网络服务器上的Web站点 ,它提供了一种组织所有Web站点关联的文档的方法，可以利用 Dreamweaver将站点上传到服务器，自动跟踪和维护链接、管理文件以及共享文件。

一、站点定义具体操作步骤：(1) 选择菜单栏中“站点 --编辑站点”。在下

图中选择“新建站点”按下按钮。

（ 2 ）在下图中，在“您打算为您的站点起什么名字？”输入框中输入你想给你的站点起的名字。

（ 3）单击“下一步”按钮，在出现的对话框中可以设定是否要使用服务器技术，这里选择不使用

（ 4）单击“下一步”按钮，在出现的对话框中可以设置如何操作文件。这里选第一项，即在计算机上编辑网站副本，等完成后再传到服务器上。然后还可以选择把网站的文件保存在计算机上的什么位置，单击 按钮可以选择保存在计算机上的哪个文件夹中。

（ 5）单击“下一步”按钮，可以在出现的对话框中可以设定计算机与服务器的连接方式 。可以在下拉列表中 选择、无、 FTP、本地 /网络等几种方式，在这里选择“无”。

（ 6）单击完成站点的建立。

站点建好以后，打开站点右边的工作面板，在站点内按右键，在出现的菜单内选择“新建文件”，同是改名为“ index” ，这就是你所要制作网页的首页，建好以后就可以直接在其页面内输入文字或者插入图片。

【小提示】

1 、网站第一页的名字通常是 index.htm或 index.html 。其它页面的名字可以自己取。

2 、在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 3、在网页上打入空格的办法是：把输入法调为全角。 4、在网页上换行的办法是： shift+回车键。只按回车键则为换段。

第二节 创建页面

第三节 用表格定位网页

一、创建表格

在 Dreamweaver MX 2004中运行“插入→表格”命令，弹出属性设置窗口，然后就可以设定表格的行数和列数、表格的宽度、边框的宽度，同时还可以设定表格的样式，根据自己的需要来设置表格的相应属性即可。

【小提示】 表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的 60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为 400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。

使用表格可以清晰地显示列表的数据，实际上表格的作用远远不止显示数据，它在网页定位上一直起着重要的作用，尤其是对于使用非 IE浏览器的网友来说，使用表格定位的网页比使用图层定位的网页更具有优势。

二、基本使用

1 、点击插入 /表格，打开表格面板进行设置。行数、列数、宽度、边框等，“单元格填充”为单元格内侧与内容的距离；“单元格间距”为单元格之间的距离，单位均为像素。 2 、插入表格后，在表格的边框上点击一下，可以全选整个表格。然后在下面的属性面板里可以进行各种设置。 3、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。 【小技巧】

制作细线表格 1 、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。 2 、选中所有单元格，设置其背景为白色。

自动格式化表格 1 、先制作好一张表格，然后选中。 2 、 选菜单中的命令 /格式化表格。即可以其中选择预设好的一些表格样式。

【小提示】 通常选取整个表格比较困难下面是关于选定表格的四种方法。

1． 把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。

2． 运行“修改→表格→选择表格”命令选择整个表格。

3． 在单元格中右击鼠标，并且从弹出菜单中选择“表格→选择表格”命令选取整个表格。

4． 用鼠标点击任一个单元格，接着按两下“ Ctrl＋ A”组合按钮选取整个表格。

三、表格定位

虽然可以实现最基本的网页定位，但是这种方法也并不是没有缺点，它的最大问题在于表格内容下载比较耗时，往往要等一个表格中全部内容下载完成后才能显示该表格内容，因此尤其要注意表格的嵌套使用，尽量不要嵌套过多的表格以影响页面的下载速度。

通常在一个网站中会有几十甚至几百个风格基本相似的页面，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就显得非常麻烦，不过我们可以借助 Dreamweaver MX 2004的模板功能来简化操作。其实模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，因此能够极大提高工作效率。

一、制作模板

第四节 模板的应用

制作模板和制作一个普通的页面完全相同，只是不需要把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公有部分，而把中间区域用页面的具体内容来填充。

运行“文件”——“新建”命令，在窗口中选定“基本页”——“ HTML模板”选项，点击创建按钮之后即可创建一个模板。

二、使用模板

有了模板之后，接下来就要在编辑网页时候使用它们了。只要在 Dreamweaver MX 2004主窗口中运行“文件→新建”命令即可看新建窗口，接着进入“模板”标签即可查看到已经保存的模板，从中选取一种还可以在右部的预览区进行预览，最后挑选一款中意的模板并点击下部“创建”按钮打开这个模板。

三、修改和更改模板

在通过模板创建了若干个页面之后，如果需要更改页面或者增加栏目，再对所有的页面手工修改则非常麻烦，因此我们可以通过Dreamweaver MX 2004的模板修改功能来解决这个问题。比如我们对模板进行了修改之后，运行“文件→保存”命令来保存模板，这时候会弹出提示框询问是否更新所有使用了该模板的页面，确认之后就会显示出更新的页面总数以及更新的时间等信息。

第五节 用框架构建网页

我们经常登录一些论坛之后，可以看见左边是每个讨论区的名称，点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容，不过左右部分是独立显示的，例如拖动左边的滚动条不会影响右侧的显示效果。其实这就是页面中利用了框架技术，因此可以把浏览器的显示空间分割为几个部分，每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集，能够让页面具有更为丰富的效果。 一、创建框架和框架集

【小提示】 如果边框拖拽错了，只要用鼠标把需要删除的线拖拽到“父框架”的边框上即可删除它 。

二、编辑框架

第六节 图层的使用

一、创建图层

二、嵌套图层

所谓嵌套图层指的是一个图层创建在另外一个图层中 。实际上制作这种嵌套图层很简单，只要创建了一个父图层之后用鼠标点击图层内部，并且再次插入一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部，它们之间存在着继承关系。

三、图层的 “ Z—顺序”

和表格相比，图层最大的优势在于图层可以重叠，为了表示各个图层哪个在上面，哪个在下面，就要给每个图层设定一个序号，这个序号就是“ Z- 顺序”，它的意思就是除了屏幕的 X和 Y 坐标之外，人为增加一个垂直于屏幕的 Z轴。

图层是网页的一个区域，在一个网页中可以有多个图层存在，它最大的魅力在于各个图层可以重叠，并且可以决定每个图层是否可见，同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后，就可以给网页提供强大的页面控制能力。

第七节 创建 CSS 样式表

1 、在网页上输入一些文字。 2 、打开“ CSS 样式”面板，也可以用“窗口 /CSS 样式”打开。 3、面板下方有四个按钮，分别是附加样式、新建样式、编辑样式、删除样式。 4、点击“新建样式”，打开对话框。输入名称，注意名称前有一个点号。如取名为 .s001( 中文名不行 )。类型：创建自定义样式，定义在：仅对该文档。 5、此时再打开一个对话框，在左边的分类里选择“类型”，然后在右面设置字体、大小、颜色等。然后确定。 6、选中页面上的文字，然后点击窗口里的样式 .s001 。此时这段文字就应用了 CSS 样式。 7、如要对刚才定义的 CSS 样式进行修改，可以点中它，然后点下面的编辑样式按钮。

第八节 库的应用

网站中有些内容需要反复使用，比如自己制作的一个网站图标等，此时将这个组件存为在库里，可以随时调用。

1 、 打开一个页面，选择需要保存的组件，比如一个图标。 2 、 点击菜单窗口 /资源，打开资源窗口。然后在其中选最下面一本书样的按钮，打开库面板。 3、 点击下面的新建按钮，就将刚才选中的图标保存到库里了，此时还可以给它取名。 4、 在一个新页面上要应用库里的内容时，打开库面板，选中需要用的图标，然后点击下面的“插入”即可。

【小提示】例如将一些经常要用到的“导航条”也可以做成“库”保存，需要的时候就可以在网页上插入，从而节省了大量了时间。

第九节 用行为丰富网页效果

一、弹出消息框

进入网站首页的时候可以看见一个弹出的消息框。

二、弹出新窗口

进入网站首页的时候可以看见一个弹出的新网页。

三、链接解释文字

在浏览一些网页的时候，将鼠标放在图像或者链接上会有解释文字出现。

行为可以说是 Dreamweaver MX 2004中最有特色的功能，它可以让你不用书写一行代码即可实现多种动态网页效果。行为的关键在于 Dreamweaver MX 2004中提供了很多动作，其实就是标准的程序，每个动作可以完成特定的任务。这样，如果你所需要的功能在这些动作中，那么就不要自己编写程序了

第十节 制作网页内的链接

一、链接图片和文字

提示：在建立链接的时候需要注意两种方式。

1．绝对地址：例如 www． abc． com/test． htm；

2．相对地址：比如 download/1． htm ，说明页面 1． htm 在服务器的根目录中。

在经过前面几个部分的操作之后，我们的网页已经图文并茂，具有相当的效果了，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体，必须将各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。

二、在一张图片上设定多个链接

有些网页在一张大图片上做了多个链接，这样访问者可以通过点击图片的不同位置进入不同的页面，这是应用了图像热区域的概念。

三、定制页面内跳转的链接（锚式标记）

如果你经常在网上订阅免费的电子杂志，或者浏览超长的页面应该对这种标签链接不陌生，这是通过一个类似目录的列表来方便地跳转到页面内任何部分。

【小提示】 如果想指向另外一页中的某个位置也可以，把这个锚式标记放过去就行了。

四、快速检查网页链接

上网冲浪的时候，最讨厌的就是看见“ Web Server error 4004:File Not Found” 之类的出错信息。由于一个网站中的的链接数量很多，稍有不甚就会导致很多链接出错，不过在 Dreamweaver MX 2004 中可以很方便地对链接进行检查。

第十一节 宣传自己的网站

如何让网站地址让别人知道，方法有二：

1 、 用专门的软件，可以将网站登录到各大搜索引擎。2 、 手工登录。如打开百度（ www.baidu.com） ,在下面有个链接“网站登录”，点击后会被要求填写网站地址、名称、内容等，然后就被收入百度的搜索引擎了，这样别人就可以搜索到你的网站了。

完祝大家学习愉快！