----------------------- Page 1-----------------------
1 
第 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 文件夹。 
③ 将光标再向右移动，单击MacromediaDreamweaver 8.0图标，Dreamweaver8.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 窗口，它也有标题栏、菜单栏和快捷菜单。 
----------------------- Page 2-----------------------
2 
图 1-1  “工作区设置”界面                  图 1-2  改变工作区 
标题栏                                                    面板组 
菜单栏 
插入面板组 
文档工具栏 
文件面板 
标签状态栏          属性面板 
文档编辑窗口 
图 1-3  Dreamweaver 8.0工作界面 
将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状 
态下最可能要进行的操作命令。 
1． “插入”面板组 
“插入”面板组上包括 7 个子面板，依次为“常用” 、 “布局” 、 “表单” 、 “文本” 、 “HTML” 、 “应用程序” 
和“Flash元素” 。单击面板组名称右端的下拉按钮，打开下拉列表，如图 1-4 所示，在下拉列表中选择子 
面板名称，即可打开相应的面板。 
单击下拉列表中的“收藏夹” ，可在其中添加网页制作时的一些常用对象。 
单击下拉列表中的“显示为制表符” ， “插入”面板组则以标签的形式显示，如图 1-5 所示。 
----------------------- Page 3-----------------------
3 
图 1-4  “插入”栏中的选项 
图 1-5  “插入”栏以标签显示 
2．文档工具栏 
在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括 “代码”视图、 
“设计”视图、同时显示 “代码”视图和 “设计”视图的拆分视图，如图 1-6 所示。 “文档”工具栏中还包 
含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 
图 1-6  文档工具栏 
文档工具栏中主要的工具按钮功能如下。 
没有浏览器/检查错误按钮          —单击该按钮可以在下拉菜单中实现检查浏览器支持、查错误及设置 目 
标浏览器的版本等功能。 
验证标记按钮  —可以验证当前文档或选中的标签。 
文件管理按钮  —单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件
 
的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。 
在浏览器里预览/调试按钮  —单击该按钮可以在下拉菜单中实现网页预览（可按  F12 键代替），纠正 
JavaScript 的错误及选择浏览器等。 
刷新设计视图按钮  —用于刷新本地和远程站点的目录列表。 
视图选项按钮  —单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化 
助理的显示，文件头、网格、标尺的显示等。 
可视化助理按钮  —可以使用不同的可视化助理来设计页面。 
3． “属性”检查器 
“属性
”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。 “属性”检查 
器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则 “属性”检查器将改为显 
----------------------- Page 4-----------------------
4 
示该图像的属性，如图 1-7 所示。 
图 1-7  图像 “属性”检查器 
在默认情况下， “属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工作区的顶部。 
单击“属性”字样或左端的下拉按钮， “属性”面板可折叠起来，再次单击面板即可展开。 
4．文档编辑窗口 
网页文档编辑窗口是 Dreamweaver 8.0 的主工作区，在这里可以进行网页的设计制作。 
（1）文档编辑窗口的缩放 
网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成 
最大化或还原网页编辑区的操作，如图 1-8 所示。 
图 1-8  最大化文档窗口按钮 
（2）文档编辑窗口的标题栏 
当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改 
但尚未保存，Dreamweaver 将在文件名后显示一个 “*”号。如果文档窗口处于最大化状态时，没有标题栏， 
在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。 
此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若 
要切换到某个文档，可以单击相应的选项卡。 
（3）缩放工具和手形工具 
此为 Dreamweaver  8.0 新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐 
----------------------- Page 5-----------------------
5 
图像、选择较小的对象及查看较小的文本。使用手形工具，可以在 “设计”视图下拖曳页面以便查看，如 
图 1-9 所示。 
图 1-9  缩放工具和手形工具 
（4）标尺和辅助线 
选择“查看” ｜ “标尺” ｜ “显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。 
辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以测
量 
页面元素的大小，或者模拟 Web 浏览器的重叠部分 （可见区域） ，如图 1-10 所示。 
图 1-10  辅助线 
若要创建
水平辅助线或垂直辅助线，可以采用以下方法。 
① 从相应的标尺拖动。 
② 在“文档”窗口中定位辅助线，然后松开鼠标。 
③ 可以通过再次拖动辅助线来重新定位辅助线。 
在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。若要 
以百分比形式记录辅助线，可在创建或移动辅助线时按住 Shift 键。若将光标放到辅助线上，可查看此辅 
助线的位置，按住 Ctrl 键时可查看辅助线两侧的宽度或高度。 
（5）编码工具栏（只用于“代码”视图） 
Dreamweaver 8.0 中新增加的编码工具栏在“代码”视图一侧的沟槽栏中，如图 1-11所示，它提供了用于 
----------------------- Page 6-----------------------
6 
常见编码功能的按钮，可以迅速将代码添加到用户的页面中。 
图 1-11  编码工具栏 
若要迅速插入代码，请执行以下操作。 
① 选择“视图” ｜ “代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。 
② 选定插入点在代码中的位置，或选择一个代码块。 
③ 单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。 
编码工具栏中各按钮的功能如下。 
打开的文档按钮  —列出已打开的文档。选择了一个文档后，它将显示在 “文档”窗口中。 
折叠整个标签按钮  —折叠位于一组开始和结束标签之间的内容，例如位于  <table>  和</table>之间的 
内容。 
折叠所选按钮  —折叠所选代码。 
扩展全部按钮  —可还原所有折叠的代码。 
选择父标签按钮  —可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击 
此按钮且标签是对称的，则 Dreamweaver 最终将选择最外面的<html>和</html>标签。 
选取当前代码的按钮  —选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。如果 
反复单击此按钮且两侧的符号是对称的，则 Dreamweaver 最终将选择该文档最外面的大括弧、圆括
号或方 
括号。 
行号按钮  —可以在每个代码行的行首隐藏或显示行号。 
高亮显示无效代码按钮  —将以黄高亮显示无效的代码。 
应用注释按钮  —可以在所选代码两侧添加注释标签或打开新的注释标签。 
删除注释按钮  —删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。 
环绕标签按钮  —在所选代码两侧添加选自“快速标签编辑器”的标签。 
最近的代码片断
按钮  —可以从“代码片断”面板中插入最近使用过的代码片断。 
----------------------- Page 7-----------------------
7 
缩进代码按钮  —将选定内容向右移动。 
凸出代码按钮  —将选定内容向左移动。 
格式化源代码按钮  —将先前指定的代码格式应用于所选代码， 如果未选择代码块， 则应用于整个页面。 
（6）代码折叠 
通过隐藏和展开代码块，可以重点显示想要查看的代码，如图 1-12 和图 1-13 所示。  html下拉菜单的制作方法
图 1-12  代码折叠前                  图 1-13  代码折叠后 
若要折叠代码，请执行以下操作。 
① 选择要折叠的代码。 
② 选择“编辑”｜“代码折叠”｜“折叠所选” ，或单击所选代码旁边的折叠（+或- ）按钮。 
若要折叠所选代码之外的代码，请执行以下操作。 
① 在“代码”视图中选择代码。 
② 选择“编辑” ｜ “代码折叠” ｜ “折叠外部所选” 。 
5．面板组 
面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都 
可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工 
具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面 
板。 
Dreamweaver 8.0 默认的面板组有以下 4 个。 
（1）CSS 面板组 
CSS 面板组包含 “CSS 样式”和 “层”两个浮动面板，主要提供交互式网页设计和网页格式化的工具，如 
图 1-14 所示。 
（2） “应用程序”面板组 
“应用程序”面板组包含“数据库” 、 “绑定” 、 “服务器行为” 、 “组件”4 个浮动面板，主要提供动态网页 
设计和数据库管理的工作，如图 1-15 所示。 
----------------------- Page 8-----------------------
8 
图 1-14  CSS面板组            图 1-15  “应用程序”面板组 
（3） “标签”面板组 
“标签”面板组包含 “属性”和 “行为”两个浮动面板，主要方便代码的调试，如图 1-16所示。 
（4） “文件”面板组 
“文件”面板组包含 “文件” 、 “资源”和“代码片断”3 个浮动面板，主要提供管理站点的各种资源，如 
图 1-17 所示。 
图 1-16  “标签”面板组              图 1-17  “文件”面板组 
这些面板组中的面板将在以后的章节中逐一介绍。 
6．浮动面板组的操作 
常用的浮动面板组的操作

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。