1、ISBN978-7-121-09530-6 书名网页制作基础教程（Dreamweaver 8.0） （第 2 版） 第 1 章网页设计基础 Dreamweaver 8.0 是 Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是 它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创 意，即可制作出独树一帜的网页。 本章重点介绍在Dreamweaver 8.0 中如何创建站点并进行站点管理，从而为下一步开发网站做好准 备，同时，通过本章的学习使读者熟悉Dreamweaver 8.0 界面及运行环境。 1.1 初识 Dreamweave
2、r 8.0 在使用 Dreamweaver 开发网站之前， 首先需要熟悉一下Dreamweaver 的启动及设计环境。俗话说“工 欲善其事，必先利其器”，通过本节可以使大家了解Dreamweaver 8.0 这个神奇网页制作软件的“庐 山真面目”，会使后面的学习变得更加轻松，上手更加迅速。 1.1.1 Dreamweaver 8.0 的启动 步骤 单击任务栏“开始”按钮，选择“程序”命令。 将光标向右移动，选择Macromedia 文件夹。 将光标再向右移动，单击 Macromedia Dreamweaver 8.0图标，Dreamweaver 8.0 就被启动了。 Dreamweaver 8
3、.0 根据设计人员和编码人员的需求自带了2 种配置，此外也还可以构建自定义工作区。 首次启动Dreamweaver 8.0 时，系统会弹出一个 “工作区设置” 界面，可以从中选择一种工作区布局， 如图 1- 1 所示。 “设计器”工作区适合于一般的用户，“编码器”工作区指的是代码编辑界面，适合 于具有较高水平网页编程技术的用户。在这里可以选择“设计器”工作区。 如果在操作过程中想改变工作区，可单击“窗口” “工作区布局”命令，从中选择相应的工作区， 如图 1- 2 所示。 1.1.2 Dreamweaver 8.0 的工作环境 启动 Dreamweaver 8.0， 双击打开任意一个网页文件，
4、此时 Dreamweaver 8.0 工作界面如图1- 3 所示。 可以看出Dreamweaver 8.0 窗口是一个标准的Windows 窗口，它也有标题栏、菜单栏和快捷菜单。 图 1- 1 “工作区设置”界面图 1- 2 改变工作区 图 1- 3 Dreamweaver 8.0 工作界面 将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了 当前状态下最可能要进行的操作命令。 1 “插入”面板组 “插入”面板组上包括7 个子面板，依次为“常用”、 “布局”、 “表单”、 “文本”、 “HTML ” 、 “应用 程序”和“ Flash 元素”。单击面板组名称
5、右端的下拉按钮，打开下拉列表，如图1- 4 所示，在下拉 列表中选择子面板名称，即可打开相应的面板。 单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。 单击下拉列表中的“显示为制表符”， “插入”面板组则以标签的形式显示，如图1- 5 所示。 图 1-4 “插入”栏中的选项 图 1- 5 “插入”栏以标签显示 2文档工具栏 在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码” 视图、 “设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图1- 6 所示。“文档”工 具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命
6、令和选项。 面板组 文件面板 文档编辑窗口 插入面板组 文档工具栏 标签状态栏属性面板 标题栏 菜单栏 图 1- 6 文档工具栏 文档工具栏中主要的工具按钮功能如下。 没有浏览器 /检查错误按钮单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及 设置目标浏览器的版本等功能。 验证标记按钮可以验证当前文档或选中的标签。 文件管理按钮单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器 端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。 在浏览器里预览/调试按钮单击该按钮可以在下拉菜单中实现网页预览（可按F12 键代替）， 纠正 JavaScript
7、 的错误及选择浏览器等。 刷新设计视图按钮用于刷新本地和远程站点的目录列表。 视图选项按钮单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等 可视化助理的显示，文件头、网格、标尺的显示等。 可视化助理按钮可以使用不同的可视化助理来设计页面。 3 “属性”检查器 “属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性” 检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查 器将改为显示该图像的属性，如图1- 7 所示。 图 1-7 图像“属性”检查器 在默认情况下， “属性”检查器位于工作区的底部，但是如果需要的
8、话，可以将它停靠在工作区的顶 部。单击“属性”字样或左端的下拉按钮，“属性”面板可折叠起来，再次单击面板即可展开。 4文档编辑窗口 网页文档编辑窗口是Dreamweaver 8.0 的主工作区，在这里可以进行网页的设计制作。 （1）文档编辑窗口的缩放 网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮， 完成最大化或还原网页编辑区的操作，如图1- 8 所示。 图 1-8 最大化文档窗口按钮 （2）文档编辑窗口的标题栏 当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做 了更改但尚未保存，Dreamweaver 将在文件名后
9、显示一个“* ”号。如果文档窗口处于最大化状态时， 没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。 此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件 名。若要切换到某个文档，可以单击相应的选项卡。 （3）缩放工具和手形工具 此为 Dreamweaver 8.0 新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地 对齐图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以 便查看，如图1- 9 所示。 图 1-9 缩放工具和手形工具 （4）标尺和辅助线 选择“查看” “标尺”
10、 “显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。 辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以 测量页面元素的大小，或者模拟Web 浏览器的重叠部分（可见区域） ， 如图 1- 10 所示。 图 1- 10 辅助线 若要创建水平辅助线或垂直辅助线，可以采用以下方法。 从相应的标尺拖动。 在“文档”窗口中定位辅助线，然后松开鼠标。 可以通过再次拖动辅助线来重新定位辅助线。 在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。 若要以百分比形式记录辅助线，可在创建或移动辅助线时按住Shift 键。若将光标放
11、到辅助线上， 可查看此辅助线的位置，按住Ctrl 键时可查看辅助线两侧的宽度或高度。 （5）编码工具栏（只用于“代码”视图） Dreamweaver 8.0 中新增加的编码工具栏在“代码”视图一侧的沟槽栏中，如图1-11 所示，它提供 了用于常见编码功能的按钮，可以迅速将代码添加到用户的页面中。 图 1- 11 编码工具栏 若要迅速插入代码，请执行以下操作。 选择“视图” “代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。 选定插入点在代码中的位置，或选择一个代码块。 单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。 编码工具栏中各按钮的功能如下。 打开的
12、文档按钮列出已打开的文档。选择了一个文档后，它将显示在“文档”窗口中。 折叠整个标签按钮折叠位于一组开始和结束标签之间的内容，例如位于 和之 间的内容。 折叠所选按钮折叠所选代码。 扩展全部按钮可还原所有折叠的代码。 选择父标签按钮可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。如果反 复单击此按钮且标签是对称的，则Dreamweaver 最终将选择最外面的 和 标签。 选取当前代码的按钮选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。 如果反复单击此按钮且两侧的符号是对称的，则Dreamweaver 最终将选择该文档最外面的大括弧、 圆括号或方括号。 行号按钮可以在
13、每个代码行的行首隐藏或显示行号。 高亮显示无效代码按钮将以黄色高亮显示无效的代码。 应用注释按钮可以在所选代码两侧添加注释标签或打开新的注释标签。 删除注释按钮删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释 标签。 环绕标签按钮在所选代码两侧添加选自“快速标签编辑器”的标签。 最近的代码片断按钮可以从“代码片断”面板中插入最近使用过的代码片断。 缩进代码按钮将选定内容向右移动。 凸出代码按钮将选定内容向左移动。 格式化源代码按钮将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整 个页面。 （6）代码折叠 通过隐藏和展开代码块，可以重点显示想要查看的代码，如图
14、1- 12 和图 1- 13 所示。 图 1- 12 代码折叠前图 1- 13 代码折叠后 若要折叠代码，请执行以下操作。 选择要折叠的代码。 选择“编辑”“代码折叠”“折叠所选”，或单击所选代码旁边的折叠（+或）按钮。 若要折叠所选代码之外的代码，请执行以下操作。 在“代码”视图中选择代码。 选择“编辑” “代码折叠” “折叠外部所选” 。 5面板组 面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面 板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网 页处理辅助工具，它具有随着调整即可看到效果的特点。由于它可以方便地拆
15、分、组合和移动，所 以也把它叫做浮动面板。 Dreamweaver 8.0 默认的面板组有以下4 个。 （1）CSS 面板组 CSS 面板组包含“ CSS 样式”和“层”两个浮动面板，主要提供交互式网页设计和网页格式化的工 具，如图1- 14 所示。 （2） “应用程序”面板组 “应用程序”面板组包含“数据库”、 “绑定”、 “服务器行为” 、 “组件” 4 个浮动面板，主要提供动 态网页设计和数据库管理的工作，如图1- 15 所示。 图 1- 14 CSS 面板组图 1- 15 “应用程序”面板组 （3） “标签”面板组 “标签”面板组包含“属性”和“行为”两个浮动面板，主要方便代码的调试，
16、如图1-16 所示。 （4） “文件”面板组 “文件”面板组包含“文件”、 “资源”和“代码片断”3 个浮动面板，主要提供管理站点的各种资 源，如图1- 17 所示。 图 1- 16 “标签”面板组图 1- 17 “文件”面板组 这些面板组中的面板将在以后的章节中逐一介绍。 6浮动面板组的操作 常用的浮动面板组的操作方法如下。 （1）展开和折叠浮动面板组 Dreamweaver 8.0 的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记即可展 开与折叠浮动面板。 （2）移动浮动面板组 将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4 个方向箭头的图标时，便可移动浮动面板 组。利
17、用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。 （3）重新组合浮动面板 选中浮动面板组中某个选项，单击浮动面板组右上角的按钮，打开下 拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可 重新组合浮动面板，如图1- 18 所示。 图 1- 18 重新组合浮动面板 1.2 创建本地站点 我的足球网 1.2.1 案例综述 一般来说，用户所浏览的网页都存储在Internet 服务器上的。所谓Internet 服务器，就是用于提供 Internet 服务的计算机，对于WWW 浏览服务来说，Internet 服务器主要用于存储用户所浏览的Web 站点和页面。
18、 通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet 服务器上。 因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。本例将创建一 个简单的站点，从中介绍本地站点的创建及站点中的文件管理。 1.2.2 案例分析 在建立自己的网站之前，一定要合理地规划站点，避免建站设计工作的盲目性，有利于提高工作质 量和效率。创建一个网站应遵循的流程如下。 对站点进行规划。 素材准备。 管理站点（首先要创建一个站点）。 制作 Web 页面。 设置 Web 应用程序运行环境。 创建动态页。 测试站点。 上传站点到远程服务器。 在制作网页之前，首先应该在本地
19、计算机的磁盘上建立一个本地站点，以文件夹的形式存在，然后 将设计的网页文件及所搜集的一些资料，例如图片、声音、文字等都存放在该文件夹下，以便控制 站点结构和全面系统地管理站点中的每个文件。利用 Dreamweaver 8.0 的文件面板就可以完成本地及 远程站点的编辑和管理等任务。 在本例中主要完成以下任务。 规划站点。 创建本地站点。 管理站点中的文件。 制作简单主页。 1.2.3 实现步骤 1规划站点 在着手进行网站设计之前，做一些诸如栏目规划、文件管理的准备工作是非常重要的。 在 F 盘新建文件夹myfootball，作为存放整个站点内容的文件夹，也是网站的根目录。 网站名为“我的足球网
20、”，包括 3 个栏目“我与足球” 、 “足球新闻”、 “足球明星相片” ，这 3 个栏 目内容分别存放在网站根目录下的aboutme，news，photo 文件夹里。 网站所有素材图像存放于根目录下的文件夹image 中。 案例效果设计如图1- 19 所示。 图 1- 19 “我的足球网”案例效果 2新建站点 为实现对网站更好的管理，通常都需要在Dreamweaver 8.0 中新建一个站点，这样可以利用 Dreamweaver 8.0 强大的站点管理功能来管理自己的网站。 步骤 打开 Dreamweaver 8.0，选择菜单栏中的 “站点” “管理站点” 命令，在随后出现的“管理站点”窗口中
21、，单击“新建”“站点” 命令，如图1- 20 所示。 出现“站点定义”向导，在文本框中为站点命名，这里输入 “myfootball ” ，如图 1- 21 所示， 单击“下一步” 按钮。 在“站点定义”第2部分，选择默认选项“否，我不想使用服务 器技术”，如图 1- 22 所示，单击“下一步”按钮。 图 1- 20 新建“站点” 图 1- 21 输入站点名称“myfootball ” 图 1-22 选择“否，我不想使用服务器技术” 在“站点定义”第3 部分，“您将把文件存储在计算机上的什么位置”处的文本框内输入站点根 目录路径，这里输入“” ，如图1- 23 所示，单击“下一步”按钮。 图 1
22、- 23 输入本地站点所在文件夹 提示： 在第步中选择默认选项“否，我不想使用服务器技术”，是因为本案例要建立的站点是一个简 单的本地站点，与服务器技术无关。在第步中，定义站点根目录路径为本地计算机根目录路径，仅在本地测 试，同样与服务器无关。 在“您如何连接到远程服务器”下拉列表处，选择“无”选项，如图1- 24 所示，单击“下一步” 按钮。 站点定义完成，出现“总结”窗口，显示出了刚才所定义站点的基本信息，最后一句提示“可以 使用高级选项卡对您的站点进行进一步配置”，单击该窗口上方“高级”标签，作进一步设置， 如图 1- 25 所示。 图 1- 24 远程服务器选择“无”图 1- 25 站
23、点定义向导“总结”窗口 在“高级”选项卡内，可以看到前面所设置的“站点名称”及“本地根文件夹”情况，这里需要 进一步设置“默认图像文件夹”位置，此处设为“” ，如图 1- 26 所示，单 击“确定”按钮。 图 1- 26 设置“默认图像文件夹” 提示： 设置“默认图像文件夹”的优点在于，当要插入一幅站点外的图像到网页上时，系统会提示是否需 要复制，如果需要，则系统自动将图像复制到默认图像文件夹内。如果不设此项，则默认图像文件夹为当前站 点根目录。 系统自动返回到“管理站点”窗口，新建站点myfootball 已出现在列表框中，如图1- 27 所示， 单击“完成”按钮，最后完成站点的创建。 创建
24、完成的站点会自动显示在“文件”面板中，如图1- 28 所示。 图 1- 27 新建站点已出现在列表框中图 1- 28 站点显示在“文件”面板中 3在“文件”面板中管理文件 新创建好的站点显示在“文件”面板中，这时可以看到站点下除image 文件夹外，并没有任何内容， 现在就可以在这里按网站的规划创建其他文件了。 步骤 在“文件”面板中的“站点-myfootball(D:DRWmyfootball)”上单击鼠标右键，在弹出的快捷菜 单中选择“新建文件”命令，如图1- 29 所示。 系统将自动创建新文件untitled.htm ，如图 1-30 所示。 图 1- 29 新建文件图 1- 30 创建新文件untitled.htm 将默认文件名untitled.htm 改为 index.htm，该文件为网站的首页文件，也是本实例要重点编辑的 网页。 提示： 此处将新建文件名改为index.htm，是在本站规划中，该文件是网站的首页文件，即访
