网页制作基础教程内容

样章

第1章网页设计基础

Dreamweaver 8.0是Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创意，即可制作出独树一帜的网页。

本章重点介绍在Dreamweaver 8.0中如何创建站点并进行站点管理，从而为下一步开发网站做好准备，同时，通过本章的学习使读者熟悉Dreamweaver 8.0界面及运行环境。

1.1 初识Dreamweaver

8.0

在使用Dreamweaver开发网站之前，首先需要熟悉一下Dreamweaver的启动及设计环境。俗话说“工欲善其事，必先利其器”，通过本节可以使大家了解Dreamweaver 8.0这个神奇网页制作软件的“庐山真面目”，会使后面的学习变得更加轻松，上手更加迅速。

1.1.1 Dreamweaver 8.0的启动

步骤

①单击任务栏“开始”按钮，选择“程序”命令。

②将光标向右移动，选择Macromedia文件夹。

③将光标再向右移动，单击Macromedia Dreamweaver 8.0图标，Dreamweaver 8.0就被启动了。Dreamweaver 8.0根据设计人员和编码人员的需求自带了2种配置，此外也还可以构建自定义工作区。首次启动Dreamweaver 8.0时，系统会弹出一个“工作区设置”界面，可以从中选择一种工作区布局，如图1-1所示。“设计器”工作区适合于一般的用户，“编码器”工作区指的是代码编辑界面，适合于具有较高水平网页编程技术的用户。在这里可以选择“设计器”工作区。

如果在操作过程中想改变工作区，可单击“窗口”｜“工作区布局”命令，从中选择相应的工作区，如图1-2所示。

1.1.2 Dreamweaver 8.0的工作环境

启动Dreamweaver 8.0，双击打开任意一个网页文件，此时Dreamweaver 8.0工作界面如图

1-3所示。可以看出Dreamweaver 8.0窗口是一个标准的Windows窗口，它也有标题栏、菜单栏和快捷菜单。

图1-1 “工作区设置”界面图1-2 改变工作区

图1-3 Dreamweaver 8.0工作界面

将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状态下最可能要进行的操作命令。

1．“插入”面板组

“插入”面板组上包括7个子面板，依次为“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”和“Flash元素”。单击面板组名称右端的下拉按钮，打开下拉列表，如图1-4所示，在下拉列表中选择子面板名称，即可打开相应的面板。

单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。

单击下拉列表中的“显示为制表符”，“插入”面板组则以标签的形式显示，如图1-5所示。

标签状态栏属性面板

图1-4 “插入”栏中的选项

图1-5 “插入”栏以标签显示

2．文档工具栏

在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码”视图、“设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图1-6所示。“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

图1-6 文档工具栏

文档工具栏中主要的工具按钮功能如下。

没有浏览器/检查错误按钮—单击该按钮可以在下拉菜单中实现检查浏览器支持、查

找错误及设置目标浏览器的版本等功能。

验证标记按钮—可以验证当前文档或选中的标签。

文件管理按钮—单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。

在浏览器里预览/调试按钮—单击该按钮可以在下拉菜单中实现网页预览（可按F12键代替），纠正JavaScript的错误及选择浏览器等。

刷新设计视图按钮—用于刷新本地和远程站点的目录列表。

视图选项按钮—单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。

可视化助理按钮—可以使用不同的可视化助理来设计页面。

3．“属性”检查器

“属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查器将改为显示该图像的属性，如图1-7所示。

图1-7 图像“属性”检查器

在默认情况下，“属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工作区的顶部。单击“属性”字样或左端的下拉按钮，“属性”面板可折叠起来，再次单击面板即可展开。

4．文档编辑窗口

网页文档编辑窗口是Dreamweaver 8.0的主工作区，在这里可以进行网页的设计制作。（1）文档编辑窗口的缩放

网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成最大化或还原网页编辑区的操作，如图1-8所示。

图1-8 最大化文档窗口按钮

（2）文档编辑窗口的标题栏

当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但尚未保存，Dreamweaver将在文件名后显示一个“*”号。如果文档窗口处于最大化状态时，没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。

此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若要切换到某个文档，可以单击相应的选项卡。

（3）缩放工具和手形工具

此为Dreamweaver 8.0新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以便查看，如图1-9所示。

图1-9 缩放工具和手形工具

（4）标尺和辅助线

选择“查看”｜“标尺”｜“显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。

辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以测量页面元素的大小，或者模拟Web浏览器的重叠部分（可见区域），如图1-10所示。

图1-10 辅助线

若要创建水平辅助线或垂直辅助线，可以采用以下方法。

①从相应的标尺拖动。

②在“文档”窗口中定位辅助线，然后松开鼠标。

③可以通过再次拖动辅助线来重新定位辅助线。

在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。若要以百分比形式记录辅助线，可在创建或移动辅助线时按住Shift键。若将光标放到辅助线上，可查看此辅助线的位置，按住Ctrl键时可查看辅助线两侧的宽度或高度。（5）编码工具栏（只用于“代码”视图）

Dreamweaver 8.0中新增加的编码工具栏在“代码”视图一侧的沟槽栏中，如图1-11所示，它提供了用于常见编码功能的按钮，可以迅速将代码添加到用户的页面中。

图1-11 编码工具栏

若要迅速插入代码，请执行以下操作。

①选择“视图”｜“代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。

②选定插入点在代码中的位置，或选择一个代码块。

③单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。

编码工具栏中各按钮的功能如下。

打开的文档按钮—列出已打开的文档。选择了一个文档后，它将显示在“文档”窗口中。折叠整个标签按钮—折叠位于一组开始和结束标签之间的内容，例如位于

和之间的内容。

折叠所选按钮—折叠所选代码。

扩展全部按钮—可还原所有折叠的代码。

选择父标签按钮—可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则Dreamweaver最终将选择最外面的和标签。

选取当前代码的按钮—选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。如果反复单击此按钮且两侧的符号是对称的，则Dreamweaver最终将选择该文档最外面的大括弧、圆括号或方括号。

行号按钮—可以在每个代码行的行首隐藏或显示行号。

高亮显示无效代码按钮—将以黄色高亮显示无效的代码。

应用注释按钮—可以在所选代码两侧添加注释标签或打开新的注释标签。

删除注释按钮—删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

环绕标签按钮—在所选代码两侧添加选自“快速标签编辑器”的标签。

最近的代码片断按钮—可以从“代码片断”面板中插入最近使用过的代码片断。

缩进代码按钮—将选定内容向右移动。

凸出代码按钮—将选定内容向左移动。

格式化源代码按钮—将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整个页面。

（6）代码折叠

通过隐藏和展开代码块，可以重点显示想要查看的代码，如图1-12和图1-13所示。

图1-12 代码折叠前图1-13 代码折叠后

若要折叠代码，请执行以下操作。

①选择要折叠的代码。

②选择“编辑”｜“代码折叠”｜“折叠所选”，或单击所选代码旁边的折叠（+或 ）按钮。

若要折叠所选代码之外的代码，请执行以下操作。

①在“代码”视图中选择代码。

②选择“编辑”｜“代码折叠”｜“折叠外部所选”。

5．面板组

面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面板。

Dreamweaver 8.0默认的面板组有以下4个。

（1）CSS面板组

CSS面板组包含“CSS样式”和“层”两个浮动面板，主要提供交互式网页设计和网页格式化的工具，如图1-14所示。

（2）“应用程序”面板组

“应用程序”面板组包含“数据库”、“绑定”、“服务器行为”、“组件”4个浮动面板，主要提供动态网页设计和数据库管理的工作，如图1-15所示。

图1-14 CSS面板组图1-15 “应用程序”面板组

（3）“标签”面板组

“标签”面板组包含“属性”和“行为”两个浮动面板，主要方便代码的调试，如图1-16所示。（4）“文件”面板组

“文件”面板组包含“文件”、“资源”和“代码片断”3个浮动面板，主要提供管理站点的各种资源，如图1-17所示。

图1-16 “标签”面板组图1-17 “文件”面板组

这些面板组中的面板将在以后的章节中逐一介绍。

6．浮动面板组的操作

常用的浮动面板组的操作方法如下。

（1）展开和折叠浮动面板组

Dreamweaver 8.0

的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记即可展开与折叠浮动面板。

（2）移动浮动面板组

将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标时，便可移动浮动面板组。利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。

（3）重新组合浮动面板

选中浮动面板组中某个选项，单击浮动面板组右上角的按钮，

打开下拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮

动面板组，可重新组合浮动面板，如图1-18所示。

1.2 创建本地站点—我的足

球网

1.2.1 案例综述

一般来说，用户所浏览的网页都存储在Internet服务器上的。所谓Internet服务器，就是用于提供Internet服务的计算机，对于WWW浏览服务来说，Internet服务器主要用于存储用户所浏览的Web站点和页面。

通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet服务器上。因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。本例将创建一个简单的站点，从中介绍本地站点的创建及站点中的文件管理。

1.2.2 案例分析

在建立自己的网站之前，一定要合理地规划站点，避免建站设计工作的盲目性，有利于提高工作质量和效率。创建一个网站应遵循的流程如下。

①对站点进行规划。

②素材准备。

③管理站点（首先要创建一个站点）。

图1-18 重新组合浮动面板

④制作Web页面。

⑤设置Web应用程序运行环境。

⑥创建动态页。

⑦测试站点。

⑧上传站点到远程服务器。

在制作网页之前，首先应该在本地计算机的磁盘上建立一个本地站点，以文件夹的形式存在，然后将设计的网页文件及所搜集的一些资料，例如图片、声音、文字等都存放在该文件夹下，以便控制站点结构和全面系统地管理站点中的每个文件。利用Dreamweaver 8.0的文件面板就可以完成本地及远程站点的编辑和管理等任务。

在本例中主要完成以下任务。

①规划站点。

②创建本地站点。

③管理站点中的文件。

④制作简单主页。

1.2.3 实现步骤

1．规划站点

在着手进行网站设计之前，做一些诸如栏目规划、文件管理的准备工作是非常重要的。 ① 在F 盘新建文件夹myfootball ，作为存放整个站点内容的文件夹，也是网站的根目录。 ② 网站名为“我的足球网”，包括3个栏目“我与足球”、“足球新闻”、“足球明星相片”，这3个栏目内容分别存放在网站根目录下的aboutme ，news ，photo 文件夹里。

③ 网站所有素材图像存放于根目录下的文件夹image 中。

④ 案例效果设计如图1-19所示。

图1-19 “我的足球网”案例效果

2．新建站点

为实现对网站更好的管理，通常都需要在Dreamweaver 8.0中新建一个站点，这样可以利用Dreamweaver 8.0强大的站点管理功能来管理自己的网站。

步骤

① 打开Dreamweaver 8.0，选择菜单栏中的“站点”｜“管

理站点”命令，在随后出现的“管理站点”窗口中，单击

“新建”｜“站点”命令，如图1-20所示。

② 出现“站点定义”向导，在文本框中为站点命名，这里

输入“myfootball ”，如图1-21所示，单击“下一步”按钮。

③ 在“站点定义”第2部分，选择默认选项“否，我不想

使用服务器技术”，如图1-22所示，单击“下一步”按钮。

图1-20 新建“站点”

图1-21 输入站点名称“myfootball”

图1-22 选择“否，我不想使用服务器技术”

④在“站点定义”第3部分，“您将把文件存储在计算机上的什么位置”处的文本框内输入站点根目录路径，这里输入“D:\DRW\myfootball\”，如图1-23所示，单击“下一步”按钮。

图1-23 输入本地站点所在文件夹

提示：在第③步中选择默认选项“否，我不想使用服务器技术”，是因为本案例要建立的站点是一个简单的本地站点，与服务器技术无关。在第④步中，定义站点根目录路径为本地计算机根目录路径，仅在本地测试，同样与服务器无关。

⑤在“您如何连接到远程服务器”下拉列表处，选择“无”选项，如图1-24所示，单击“下一步”按钮。

⑥站点定义完成，出现“总结”窗口，显示出了刚才所定义站点的基本信息，最后一句提示“可以使用‘高级’选项卡对您的站点进行进一步配置”，单击该窗口上方“高级”标签，作进一步设置，如图1-25所示。

图1-24 远程服务器选择“无”图1-25 站点定义向导“总结”窗口

⑦在“高级”选项卡内，可以看到前面所设置的“站点名称”及“本地根文件夹”情况，这里需要进一步设置“默认图像文件夹”位置，此处设为“D:\DRW\myfootball\ image\”，如图1-26所示，单击“确定”按钮。

图1-26 设置“默认图像文件夹”

提示：设置“默认图像文件夹”的优点在于，当要插入一幅站点外的图像到网页上时，系统会提示是否需要复制，如果需要，则系统自动将图像复制到默认图像文件夹内。如果不设此项，则默认图像文件夹为当前站点根目录。

⑧系统自动返回到“管理站点”窗口，新建站点myfootball已出现在列表框中，如图1-27所示，单击“完成”按钮，最后完成站点的创建。

⑨创建完成的站点会自动显示在“文件”面板中，如图1-28所示。

图1-27 新建站点已出现在列表框中图1-28 站点显示在“文件”面板中

3．在“文件”面板中管理文件

新创建好的站点显示在“文件”面板中，这时可以看到站点下除image文件夹外，并没有任何内容，现在就可以在这里按网站的规划创建其他文件了。

步骤

①在“文件”面板中的“站点-myfootball(D:\DRW\myfootball\)”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，如图1-29所示。

②系统将自动创建新文件untitled.htm，如图1-30所示。

图1-29 新建文件图1-30 创建新文件untitled.htm

③将默认文件名untitled.htm改为index.htm，该文件为网站的首页文件，也是本实例要重点编辑的网页。

提示：此处将新建文件名改为index.htm，是在本站规划中，该文件是网站的首页文件，即访问网站的人最先看到的一个网页。一般情况下，网站默认的首页文件名是index.htm，此外也可以是index.html，index.asp，default.htm等。（注意区分大小写）

④在“文件”面板中的“站点myfootball(D:\ DRW\myfootball\)”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。

⑤系统自动创建新文件夹untitled，图标表示这是一个文件夹，如图1-31所示。

⑥将默认文件夹名untitled改为aboutme，如图1-32所示。

⑦用同样的方法创建另两个文件夹photo，news，用aboutme，photo，news文件夹存放事先设计的3个栏目内容。

⑧在3个文件夹aboutme，photo，news中分别再建3个网页文件me.htm，photo.htm，news.htm，作为首页文件的3个链接指向，如图1-33所示。

图1-31 新建文件夹图1-32 再建3个文件夹图1-33 分别在各文件夹中创建网页文件

提示：在3个文件夹aboutme，photo，news中分别再建3个网页文件me.htm，photo.htm，news.htm 时，应在相应文件夹上单击鼠标右键，从而保证所建文件分别在3个文件夹内。

4．编辑首页文件

首页文件，有时也称主页文件，是来访者光临网站最先看到的页面。双击“文件”面板上的index.htm文件，可以在编辑区域内打开此文件进行编辑。下面重点介绍“我的足球网”首页文件的编辑方法。

步骤

①首先为要编辑的网页设置背景色，单击编辑区域下方的按钮，出现“页面属性”对话框。

②单击“背景颜色”旁的按钮，选择绿色作为背景色，如图1-34所示，单击“确定”

按钮。

③编辑的页面变成绿色的背景，在编辑区域内输入“我的足球网”几个字。

④在“我的足球网”几个字的下一行插入一个1行2列的表格，方法是选择“插入”｜“表格”命令，在“表格”对话框中将“行数”设为1，将“列数”设为2，单击“确定”按钮，如图1-35所示。

图1-34 “页面属性”对话框图1-35 插入表格

⑤在页面上出现一个1行2列的表格，将文本光标停留在第1列内，在菜单栏选择“插入”｜“图像”命令，这时会弹出“图像标签辅助功能属性”对话框，如图1-36所示，单击“确定”按钮，将素材库里的图像ch1\MAN.jpg插入进来，如图1-37所示。

图1-36 “图像标签辅助功能属性”对话框

图1-37 在表格第1列内插入图像

提示：由于在创建站点时事先设置好的默认图像文件夹

“D:\DRW\myfootball\image\”，在插入站点外的图像时，系统会

自动将图像文件复制到默认图像文件夹。如果在创建站点时没

有设置默认图像文件夹，则在插入站点外的图像时，系统会

提示是否需要复制。单击“是”按钮，则将文件复制到站点

根目录下，如图1-38所示。如果单击“否”按钮，则不复制，

只保持与源图像的链接关系，这样做的结果是在网站移动后，

会出现图像无法显示的情况。 ⑥ 在表格的第2列中，分3行依次输入“我与足球”、“足球新闻”、“足球明星相片”，并在下一行处插入另一张图像素材，如图1-39所示。

图1-39 在表格第2列输入文字及图像

⑦ 将光标移至表格的下一行，输入“本网站最后更新时间”，紧接着插入“日期”。方法是选择菜单栏上的“插入”｜“日期”命令，在出现的

“插入日期”对话框中设置好显示的日期与时间格

式，一定要选中“储存时自动更新”复选框，如图

1-40所示，单击“确定”按钮。

⑧ 选择“我的足球网”后，在如图1-41所示的“属

性”面板中进行设置，在“格式”下拉列表中选择“标题1”

，单击按钮，将网页标题居中。

图1-41 设置文本属性

⑨ 选择“本网站最后更新时间”并插入日期，将其居中，如图1-42所示。

图1-40 “插入日期”对话框

图1-38 选择是否要复制图像 文件到站点根文件夹

图1-42 将最后一行文字居中

⑩制作栏目链接。一个最简单的方法是选择“我与足球”后，用光标指向属性检查器上的

图标，并拖动鼠标到右边“文件”面板上的me.htm文件处，如图1-43所示。

图1-43 拖动图标到me.htm文件

用同样的方法制作文本“足球新闻”与“足球明星相片”的链接，其中“足球新闻”的链接指向文件是news.htm，“足球明星相片”的链接指向文件是photo.htm。

在文档编辑区域上方的标题栏，将默认标题“无标题文档”改为“我的足球网”，如图1-44所示。文件存盘后按F12键预览实际效果。

至此，一个简单的图文并茂的主页就制作完成了，至于其他几个链接页面的制作，读者可以自由发挥。为了方便用户浏览网站中的各个页面，别忘了在3个分页面中设置返回的超链接。

图1-44 将页面标题“无标题文档”改为“我的足球网”

1.3 创建

网站

用Dreamweaver 8.0创建Web站点有多种方式，可以创建一个静态的网站，也可以创建一个动态的具有交互功能的网站。利用Dreamweaver 8.0用户可以在本地计算机的磁盘上构造出整个网站的框架，从整体上对站点进行全局把握。由于这时候没有与Internet连接，因此有充裕的时间完成站点的设计，进行完善的测试。当站点设计完毕，可以利用各种上载工具，例如FTP程序，将本地站点上传到Internet服务器上，形成远端站点。

1.3.1 站点的规划

在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制及站点的整体风格等。合理规划不仅有利于避免设计的盲目性，而且有利于管理众多的站点文件。

1．确定站点目标

一个好的站点，应该具有明确的目标。目标可谓是站点设计的灵魂与向导，能够引导设计者成功地设计站点。站点的目标因主题而异，因此，在设计站点之前应该明确站点的目标，才能有条不紊地设计和管理好站点文件。

2．规划站点结构

俗话说，“良好的开端就是成功的一半”，认真地规划站点结构，能够避免日后出现文件管理混乱的局面。

在规划站点结构时应遵循以下两个原则。

（1）本地站点和远程站点采用相同的结构

将本地站点和远程站点设置成相同的结构，以便于站点的维护和管理。在本地站点结构设置修改完成后，利用Dreamweaver将本地站点上的文件及文件夹上传到远程服务器上。（2）用文件夹保存文档

应将站点文件分门别类，保存在站点根目录下的文件夹中，从而使文件的组织管理一目了然。

3．规划站点内容

站点的内容一定要丰富，纵然有漂亮的外表，没有充实的内容，也不能吸引广大浏览者。

可以将各种不同的内容划分为几个板块，例如，生活、旅游、健康、IT等，这样既可以方便网站设计者，又能够方便用户获取相关信息。

除了文本和图像等内容外，如果需要，还可以加入多媒体元素、层动画等内容，使得在丰富网站内容的同时，平添几分生趣。

此外，要注意使用合理的文件名称，尽量避免使用中文名称，因为大多数的软件平台总是基于英文的。有的Web服务器是区分大小写的，所以，一般都采用小写字母命名站点中的文件。

4．规划站点的导航机制

一个优秀的站点，应该具有明确的导航系统，避免使用户在页面上迷失方向，找不到自己想要浏览的内容。

在规划站点的导航机制时，应注意以下几个方面。

（1）返回首页链接

一般在站点的每个页面上都有首页的链接，方便用户回到开始的地方，寻找新的导航目标。同时，当用户在页面上迷失方向时，可以返回首页，重新开始。

（2）导航标题明确

导航标题文字或图像具有明确的导航指示作用，标题性文字一般是页面内容的概括，例如“今日要闻”，用户一看到该标题文字，就可知道链接的内容是当日重要的新闻，如果要查阅当日发生的重要事件，单击该链接即可。

相对于文字导航标题，图像标题更有其独到的一面。例如，做一个首页的链接，设计者往往是添加一个大家所熟悉的小狐狸图标，即搜狐网站的标志。这样，既可以起到明确的导航作用，同时又比单调的文本要丰富得多。此外，可以在图像上添加替代文本，这些文本可起到辅助的指示作用。

5．明确站点的风格

站点的风格应该能够自然地流露出站点的主题，因此，应紧紧围绕站点主题和内容设计出页面的形象和风格。例如，以诗词歌赋为主题的站点，最好能够体现出书香韵味。

在实际创作过程中，可以使用模板创建风格相同的页面，使用库调用页面内经常出现的元素，既可以提高设计的效率，又使得管理这些文件变得轻松。

1.3.2 定义本地站点

在Dreamweaver中，站点的管理放在面板中进行，单击“文件”面板右侧的“管理站点”链接，可以打开站点管理窗口。利用“管理站点”对话框可创建和管理站点。

1．“管理站点”对话框

选择“站点”｜“管理站点”命令，弹出“管理站点”对话框，该对话框的作用是创建新站点、编辑站点、复制站点、删除站点及导入或导出站点。

（1）创建新站点

Dreamweaver的“管理站点”对话框除了提供新建“站

点”功能，还提供了新建“FTP与RDS服务器”功能，

如图1-45所示。利用新建“FTP与RDS服务器”，可

以建立与远程计算机的联系，进行文件的远程编辑。

（2）编辑站点

对已经设置好的站点进行设置修改。

（3）复制站点

在“管理站点”对话框中可以建立一个站点的副本，副本将出现在站点列表窗口中。（4）删除站点

将不需要的所选站点从“管理站点”对话框中删除，执行删除命令时会提醒用户该操作无法撤销。

（5）导入和导出站点

可以将站点导出为XML文件，然后将其导入Dreamweaver。这样就可以在各计算机和产品版本之间移动站点，或与其他用户共享。

2．创建本地站点

单击“管理站点”对话框中的“新建”按钮，可以通过弹出如图1-46所示的对话框来创建本站点。此对话框提供了“基本”和“高级”两种创建本地站点的方式。

（1）通过“基本”选项卡创建

在如图1-46所示的对话框中，单击“基本”标签，出现“站点定义”向导，如图1-46所示，它将逐步引导完成设置过程。在“站点定义”向导中回答每一屏上出现的问题，然后单击“下一步”按钮继续进行设置，直至完成。

（2）通过“高级”选项卡创建

对于有经验的Dreamweaver用户，推荐使用“高级”选项卡来完成站点的创建。单击“站点定义”向导中的“高级”标签，出现“高级”设置选项卡，如图1-47所示。它可以根据需要分别设置本地、远程和测试服务器信息。

在本机上用Dreamweaver设计网站，如要快速开始，可以选择设置本地信息，而且开始使用Dreamweaver前至少应设置一个本地文件夹。至于其他远程和测试信息，可以以后再添加。下面重点介绍对“本地信息”设置的方法。

在如图1-47所示的“高级”选项卡中，选择“分类”列表中的“本地信息”，在右侧出现相关选项，设置本地文件夹。

设置本地文件夹的属性如下。

“站点名称”—输入站点的名称。

图1-46 “站点定义”向导中的“基本”选项卡图1-47 设置本地信息

“本地根文件夹”—指定放置站点文件的本地文件夹。

“自动刷新本地文件列表”—选择该复选框，则当站点文件发生变化时，自动更新文件列表。