网页制作基础教程dreamweaver80第2版-样章

第 1 章 计算机中的数据和编码 1ISBN 978-7-121-09530-6 书名 网页制作基础教程（Dreamweaver 8.0） （第 2 版）样 章第 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 章 计算机中的数据和编码2图 1-1 “工作区设置”界面 图 1-2 改变工作区图 1-3 Dreamweaver 8.0 工作界面将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状态下最可能要进行的操作命令。1 “插入”面板组“插入”面板组上包括 7 个子面板，依次为“常用” 、 “布局” 、 “表单” 、 “文本” 、 “HTML”、“应用程序”和“Flash 元素 ”。单击面板组名称右端的下拉按钮，打开下拉列表，如图 1-4 所示，在下拉列表中选择子面板名称，即可打开相应的面板。单击下拉列表中的“收藏夹” ，可在其中添加网页制作时的一些常用对象。单 击 下 拉 列 表 中 的 “显 示 为 制 表 符 ”， “插 入 ”面 板 组 则 以 标 签 的 形 式 显 示 ， 如 图 1-5 所示 。图 1-4 “插入”栏中的选项面板组文件面板文档编辑窗口插入面板组文档工具栏标签状态栏 属性面板标题栏菜单栏第 1 章 计算机中的数据和编码 3图 1-5 “插入”栏以标签显示2文档工具栏在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括 “代 码 ”视 图 、 “设 计 ”视 图 、 同 时 显 示 “代 码 ”视 图 和 “设 计 ”视 图 的 拆 分 视 图 ， 如 图1-6 所示。 “文档”工 具 栏 中 还 包 含 一 些 与 查 看 文 档 、 在 本 地 和 远 程 站 点 间 传 输 文 档 有 关 的常 用 命 令 和 选 项 。图 1-6 文档工具栏文档工具栏中主要的工具按钮功能如下。没有浏览器/检查错误按钮 单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及设置目标浏览器的版本等功能。验证标记按钮 可以验证当前文档或选中的标签。文件管理按钮 单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。在浏览器里预览/调试按钮 单击该按钮可以在下拉菜单中实现网页预览（可按 F12键代替） ，纠正 JavaScript 的错误及选择浏览器等。刷新设计视图按钮 用于刷新本地和远程站点的目录列表。视图选项按钮 单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。可视化助理按钮 可以使用不同的可视化助理来设计页面。3 “属性”检查器“属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查器将改为显示该图像的属性，如图 1-7 所示。图 1-7 图像“属性”检查器在默认情况下， “属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工第 1 章 计算机中的数据和编码4作区的顶部。单击“属性”字样或左端的下拉按钮， “属性”面板可折叠起来，再次单击面板即可展开。4文档编辑窗口网页文档编辑窗口是 Dreamweaver 8.0 的主工作区，在这里可以进行网页的设计制作。（1）文档编辑窗口的缩放网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成最大化或还原网页编辑区的操作，如图 1-8 所示。图 1-8 最大化文档窗口按钮（2）文档编辑窗口的标题栏当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但尚未保存，Dreamweaver 将在文件名后显示一个“*”号。如果文档窗口处于最大化状态时，没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若要切换到某个文档，可以单击相应的选项卡。（3）缩放工具和手形工具此为 Dreamweaver 8.0 新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以便查看，如图 1-9 所示。图 1-9 缩放工具和手形工具第 1 章 计算机中的数据和编码 5（4）标尺和辅助线选择“查看” “标尺” “显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使 用 辅 助线 还 可 以 测 量 页 面 元 素 的 大 小 ， 或 者 模 拟 Web 浏 览 器 的 重 叠 部 分 （ 可 见 区 域 ） ， 如 图1-10 所示。图 1-10 辅助线若要创建水平辅助线或垂直辅助线，可以采用以下方法。 从相应的标尺拖动。 在“文档”窗口中定位辅助线，然后松开鼠标。 可以通过再次拖动辅助线来重新定位辅助线。在 默 认 情 况 下 ， 以 像 素 值 来 记 录 辅 助 线 与 文 档 顶 部 或 左 侧 的 距 离 ， 并 相 对 于 标 尺 原 点 显 示辅 助 线 。 若 要 以 百 分 比 形 式 记 录 辅 助 线 ， 可 在 创 建 或 移 动 辅 助 线 时 按 住 Shift 键 。 若 将 光标 放 到 辅 助 线 上 ， 可 查 看 此 辅 助 线 的 位 置 ， 按 住 Ctrl 键 时 可 查 看 辅 助 线 两 侧 的 宽 度 或 高度 。（5）编码工具栏（只用于“代码”视图）Dreamweaver 8.0 中新增加的编码工具栏在 “代码”视图一侧的沟槽栏中，如图 1-11 所示，它提供了用于常见编码功能的按钮，可以迅速将代码添加到用户的页面中。图 1-11 编码工具栏若要迅速插入代码，请执行以下操作。 选择“视图” “代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。第 1 章 计算机中的数据和编码6 选定插入点在代码中的位置，或选择一个代码块。 单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。编码工具栏中各按钮的功能如下。打开的文档按钮 列出已打开的文档。选择了一个文档后，它将显示在“文档”窗口中。折叠整个标签按钮 折叠位于一组开始和结束标签之间的内容，例如位于 和之间的内容。折叠所选按钮 折叠所选代码。扩展全部按钮 可还原所有折叠的代码。选 择 父 标 签 按 钮 可 选 择 放 置 了 插 入 点 的 那 一 行 的 内 容 及 其 两 侧 的 开 始 和 结 束 标 签 。如 果 反 复 单 击 此 按 钮 且 标 签 是 对 称 的 ， 则 Dreamweaver 最 终 将 选 择 最 外 面 的 和标 签 。选取当前代码的按钮 选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。如果反复单击此按钮且两侧的符号是对称的，则 Dreamweaver 最终将选择该文档最外面的大括弧、圆括号或方括号。行号按钮 可以在每个代码行的行首隐藏或显示行号。高亮显示无效代码按钮 将以黄色高亮显示无效的代码。应用注释按钮 可以在所选代码两侧添加注释标签或打开新的注释标签。删除注释按钮 删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。环绕标签按钮 在所选代码两侧添加选自“快速标签编辑器”的标签。最近的代码片断按钮 可以从“代码片断”面板中插入最近使用过的代码片断。缩进代码按钮 将选定内容向右移动。凸出代码按钮 将选定内容向左移动。格式化源代码按钮 将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整个页面。（6）代码折叠通过隐藏和展开代码块，可以重点显示想要查看的代码，如图 1-12 和图 1-13 所示。图 1-12 代码折叠前 图 1-13 代码折叠后若要折叠代码，请执行以下操作。 选择要折叠的代码。 选择 “编辑 ”“代码折叠 ”“折叠所选” ，或单击所选代码旁边的折叠（+或）按钮。若要折叠所选代码之外的代码，请执行以下操作。 在“代码”视图中选择代码。 选择“编辑” “代码折叠” “折叠外部所选” 。第 1 章 计算机中的数据和编码 75面板组面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面板。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 的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记第 1 章 计算机中的数据和编码8即可展开与折叠浮动面板。（2）移动浮动面板组将鼠标指向浮动面板组左上角的标签，当鼠标指针变成 4 个方向箭头的图标时，便可移动浮动面板组。利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。（3）重新组合浮动面板选中 浮 动 面 板 组 中 某 个 选 项 ， 单 击 浮 动 面 板 组 右 上 角 的 按 钮 ，打 开 下 拉 式 菜 单 ， 并 在 级 联 菜 单 中 选 择 与 当 前 浮 动 面 板 组 合 的浮 动 面 板 组 ， 可 重 新 组 合 浮 动 面 板 ， 如 图 1-18 所 示 。1.2 创建本地站点 我的足球网1.2.1 案例综 述一般来说，用户所浏览的网页都存储在 Internet 服务器上的。所谓 Internet 服务器，就是用于提供 Internet 服务的计算机，对于 WWW 浏览服务来说，Internet 服务器主要用于存储用户所浏览的 Web 站点和页面。通常 创 建 一 个 网 站 ， 总 是 先 在 本 地 计 算 机 上 进 行 开 发 和 调 试 ， 待 完 成 后 再 上 传 到 Internet 服务器上。因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。本例将创建一个简单的站点，从中介绍本地站点的创建及站点中的文件管理。1.2.2 案例分析在建立自己的网站之前，一定要合理地规划站点，避免建站设计工作的盲目性，有利于提高工作质量和效率。创建一个网站应遵循的流程如下。 对站点进行规划。 素材准备。 管理站点（首先要创建一个站点） 。 制作 Web 页面。 设置 Web 应用程序运行环境。 创建动态页。 测试站点。 上传站点到远程服务器。在制作网页之前，首先应该在本地计算机的磁盘上建立一个本地站点，以文件夹的形式存在，然后将设计的网页文件及所搜集的一些资料，例如图片、声音、文字等都存放在该文件夹下，以便控制站点结构和全面系统地管理站点中的每个文件。利用 Dreamweaver 8.0的文件面板就可以完成本地及远程站点的编辑和管理等任务。在本例中主要完成以下任务。 规划站点。 创建本地站点。 管理站点中的文件。 制作简单主页。图 1-18 重新组合浮动面板第 1 章 计算机中的数据和编码 91.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 章 计算机中的数据和编码10图 1-21 输入站点名称“myfootball”图 1-22 选择“否，我不想使用服务器技术” 在“站点定义”第 3 部分， “您将把文件存储在计算机上的什么位置”处的文本框内输入站点根目录路径，这里输入“D:DRWmyfootball” ，如图 1-23 所示，单击“下一步”按钮。图 1-23 输入本地站点所在文件夹第 1 章 计算机中的数据和编码 11 提示：在第步中选择默认选项“否，我不想使用服务器技术” ，是因为本案例要建立的站点是一个简单的本地站点，与服务器技术无关。在第步中，定义站点根目录路径为本地计算机根目录路径，仅在本地测试，同样与服务器无关。 在“您如何连接到远程服务器”下拉列表处，选择“无”选项，如图 1-24 所示，单击“下一步”按钮。 站点定义完成，出现“总结”窗口，显示出了刚才所定义站点的基本信息，最后一句提示“可以使用高级选项卡对您的站点进行进一步配置” ，单击该窗口上方“高级”标签，作进一步设置，如图 1-25 所示。图 1-24 远程服务器选择“无” 图 1-25 站点定义向导“总结”窗口 在“高级”选项卡内，可以看到前面所设置的“站点名称”及“本地根文件夹”情况，这里需要进一步设置“默认图像文件夹”位置，此处设为“D:DRWmyfootball image”，如图 1-26 所示，单击“确定”按钮。图 1-26 设置“默认图像文件夹”提示：设置“默认图 像文件夹” 的优 点在于，当要插入一幅站点外的图像到网页上时，系统会提示是否需要复制，如果需要，则系统自动将图像复制到默认图像文件夹内。如果不设此项， 则默认图像文件夹为当前站点根目录。第 1 章 计算机中的数据和编码12 系 统 自 动 返 回 到 “管 理 站 点 ”窗 口 ， 新 建 站 点 myfootball 已 出 现 在 列 表 框 中 ， 如 图 1-27 所示，单击“完成”按钮，最后完成站点的创建。 创建完成的站点会自动显示在“文件”面板中，如图 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，该文件为网站的首页文件，也是本实例要重点编辑的网页。第 1 章 计算机中的数据和编码 13提示：此处将新建文件名改为 index.htm，是在本站规划中， 该文件是网站的首页文件，即访问网站的人最先看到的一个网页。一般情况下，网站默认的首页文件名是 index.htm，此外也可以是index.html，index.asp，default.htm 等。 （注意区分大小写） 在“文件”面板中的“站点 myfootball(D: DRWmyfootball)”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。 系统自动创建新文件夹 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 章 计算机中的数据和编码14图 1-34 “页面属性”对话框 图 1-35 插入表格 在页面上出现一个 1 行 2 列的表格，将文本光标停留在第 1 列内，在菜单栏选择“插入” “图像”命令，这时会弹出“图像标签辅助功能属性”对话框，如图 1-36 所示，单击“确定”按钮，将素材库里的图像 ch1MAN.jpg 插入进来，如图 1-37 所示。图 1-36 “图像标签辅助功能属性”对话框图 1-37 在表格第 1 列内插入图像第 1 章 计算机中的数据和编码 15提示：由 于 在 创 建 站 点 时 事 先 设 置 好 的 默 认 图 像 文 件 夹“D:DRWmyfootballimage”，在 插 入 站 点 外 的 图 像 时 ，系 统 会 自动 将 图像文件复制到默认图像文件夹。如果在创建站点时没有设置默认图像文件夹，则在插入站点外的图像时，系 统会提示是否需要复制。单击“是”按钮，则将文件复制到站点根目录下，如图 1-38 所示。如果单击“ 否 ”按钮，则不复制，只保持与源图像的链接关系，这样做的结果是在网站移动后，会出 现图像无法显示的情况。 在表格的第 2 列中，分 3 行依次输入“我与足球” 、 “足球新闻” 、 “足球明星相片” ，并在下一行处插入另一张图像素材，如图 1-39 所示。图 1-39 在表格第 2 列输入文字及图像 将光标移至表格的下一行，输入“本网站最后更新时间” ，紧接着插入“日期” 。方法是选择菜单栏上的“插入”“日期”命令，在出现的“插入日期”对话框中设置好显示的日期与时间格式，一 定 要 选 中 “储 存 时 自 动 更 新 ”复 选 框 ，如 图 1-40 所 示 ， 单 击 “确 定 ”按 钮 。 选 择 “我 的 足 球 网 ”后 ， 在 如 图 1-41 所 示 的“属 性 ”面 板 中 进 行 设 置 ， 在 “格 式 ”下 拉 列 表中 选 择 “标 题 1”， 单 击 按 钮 ， 将 网 页 标 题 居 中 。图 1-41 设置文本属性 选择“本网站最后更新时间”并插入日期，将其居中，如图 1-42 所示。图 1-40 “插入日期”对话框图 1-38 选择是否要复制图像文件到站点根文件夹第 1 章 计算机中的数据和编码16图 1-42 将最后一行文字居中 制作栏目链接。一个最简单的方法是选择“我与足球”后，用光标指向属性检 查 器 上的 图 标 ， 并 拖 动 鼠 标 到 右 边 “文 件 ”面 板 上 的 me.htm 文 件 处 ， 如 图 1-43 所示。图 1-43 拖动 图标到 me.htm 文件用同样的方法制作文本“足球新闻”与“足球明星相片”的链接，其中“足球新闻”的链接指向文件是 news.htm， “足球明星相片”的链接指向文件是 photo.htm。在文档编辑区域上方的标题栏，将默认标题“无标题文档”改为“我的足球网” ，如图1-44 所示。文件存盘后按 F12 键预览实际效果。至此，一个简单的图文并茂的主页就制作完成了，至于其他几个链接页面的制作，读者可以自由发挥。为了方便用户浏览网站中的各个页面，别忘了在 3 个分页面中设置返回的超链接。第 1 章 计算机中的数据和编码 17图 1-44 将页面标题“无标题文档”改为“我的足球网”1.3 创建网站用 Dreamweaver 8.0 创建 Web 站点有多种方式，可以创建一个静态的网站，也可以创建一个动态的具有交互功能的网站。利用 Dreamweaver 8.0 用户可以在本地计算机的磁盘上构造出整个网站的框架，从整体上对站点进行全局把握。由于这时候没有与 Internet 连接，因此有充裕的时间完成站点的设计，进行完善的测试。当站点设计完毕，可以利用各种上载工具，例如 FTP 程序，将本地站点上传到 Internet 服务器上，形成远端站点。1.3.1 站点的 规划在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制及站点的整体风格等。合理规划不仅有利于避免设计的盲目性，而且有利于管理众多的站点文件。1确定站点目标一个好的站点，应该具有明确的目标。目标可谓是站点设计的灵魂与向导，能够引导设计者成功地设计站点。站点的目标因主题而异，因此，在设计站点之前应该明确站点的目标，才能有条不紊地设计和管理好站点文件。2规划站点结构俗话说， “良好的开端就是成功的一半” ，认真地规划站点结构，能够避免日后出现文件管理混乱的局面。在规划站点结构时应遵循以下两个原则。（1）本地站点和远程站点采用相同的结构将本地站 点 和 远 程 站 点 设 置 成 相 同 的 结 构 ， 以 便 于 站 点 的 维 护 和 管 理 。 在 本 地 站 点 结 构设 置 修 改 完 成 后 ， 利 用 Dreamweaver 将 本 地 站 点 上 的 文 件 及 文 件 夹 上 传 到 远 程 服 务 器 上 。（2）用文件夹保存文档应将站点文件分门别类，保存在站点根目录下的文件夹中，从而使文件的组织管理一目了然。第 1 章 计算机中的数据和编码183规划站点内容站点 的 内 容 一 定 要 丰 富 ， 纵 然 有 漂 亮 的 外 表 ， 没 有 充 实 的 内 容 ， 也 不 能 吸 引 广 大 浏 览 者 。可以将各种不同的内容划分为几个板块，例如，生活、旅游、健康、IT 等，这样既可以方便网站设计者，又能够方便用户获取相关信息。除了文本和图像等内容外，如果需要，还可以加入多媒体元素、层动画等内容，使得在丰富网站内容的同时，平添几分生趣。此 外 ， 要 注 意 使 用 合 理 的 文 件 名 称 ， 尽 量 避 免 使 用 中 文 名 称 ， 因 为 大 多 数 的 软 件 平 台 总 是 基于英 文 的 。 有 的 Web 服 务 器 是 区 分 大 小 写 的 ， 所 以 ， 一 般 都 采 用 小 写 字 母 命 名 站 点 中 的 文 件 。4规划站点的导航机制一个优秀的站点，应该具有明确的导航系统，避免使用户在页面上迷失方向，找不到自己想要浏览的内容。在规划站点的导航机制时，应注意以下几个方面。（1）返回首页链接一 般 在 站 点 的 每 个 页 面 上 都 有 首 页 的 链 接 ， 方 便 用 户 回 到 开 始 的 地 方 ， 寻 找 新 的 导 航 目 标 。同时 ， 当 用 户 在 页 面 上 迷 失 方 向 时 ， 可 以 返 回 首 页 ， 重 新 开 始 。（2）导航标题明确导航标题文字或图像具有明确的导航指示作用，标题性文字一般是页面内容的概括，例如“今日要闻” ，用户一看到该标题文字，就可知道链接的内容是当日重要的新闻，如果要查阅当日发生的重要事件，单击该链接即可。相对于文字导航标题，图像标题更有其独到的一面。例如，做一个首页的链接，设计者往往是添加一个大家所熟悉的小狐狸图标，即搜狐网站的标志。这样，既可以起到明确的导航作用，同时又比单调的文本要丰富得多。此外，可以在图像上添加替代文本，这些文本可起到辅助的指示作用。5明确站点的风格站点的风格应该能够自然地流露出站点的主题，因此，应紧紧围绕站点主题和内容设计出页面的形象和风格。例如，以诗词歌赋为主题的站点，最好能够体现出书香韵味。在实际创作过程中，可以使用模板创建风格相同的页面，使用库调用页面内经常出现的元素，既可以提高设计的效率，又使得管理这些文件变得轻松。1.3.2 定义本地站点在 Dreamweaver 中，站点的管理放在面板中进行，单击 “文件”面板右侧的“管理站点”链接，可以打开站点管理窗口。利用“管理站点”对话框可创建和管理站点。1 “管理站点”对话框选择“站点” “管理站点”命令，弹出“管理站点”对话框，该对话框的作用是创建新站点、编辑站点、复制站点、删除站点及导入或导出站点。（1）创建新站点Dreamweaver 的“管理站点” 对话框除了提供新建“站点”功能，还提供了新建“FTP 与 RDS 服务器”功能，如图 1-45 所示。利用新建“FTP 与 RDS 服务器” ，可以建立与远程计算机的联系，进行文件的远程编辑。（2）编辑站点图 1-45 “管理站点”对话框第 1 章 计算机中的数据和编码 19对已经设置好的站点进行设置修改。（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 设置本地信息“本地根文件夹” 指定放置站点文件的本地文件夹。“自动刷新本地文件列表” 选择该复选框，则当站点文件发生变化时，自动更新文件列表。第 1 章 计算机中的数据和编码20“默认图像文件夹” 指定放置站点图像文件的目录。“HTTP 地址” 指定站点的 URL 地址。“缓存” 选择“启用缓存”复选框，创建本地缓存，有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源。1.3.3 管理站点在 Dreamweaver 8.0 中利用“文件”面板，可以对本地站点的文件或文件夹进行选择、移动、复制、删除等操作。1在站点中选择多个文件在“文件”面板中可以用以下操作方法选择多个文件。 单击第一个文件，按住 Shift 键，然后单击最后一个要选择的文件，可选择一组连续的文件。 按住 Ctrl 键，然后单击要选择的文件，可选择一组不连续的文件。2在本地站点中剪切、粘贴、复制、删除、重命名文件或文件夹在 “文 件 ”面 板 中 对 文 件 的 剪 切 、 粘 贴 、 复 制 、 删 除 、重 命 名 操 作 可 先 选 中 要 操 作 的 文 件 或 文 件 夹 ， 单 击 鼠 标右 键 打 开 快 捷 菜 单 ， 从 中 选 择 相 应 的 命 令 便 可 完 成 相 应的 文 件 操 作 ， 如 图 1-48 所 示 。3创建文件或文件夹建立了本地站点后，就可以通过创建自己的网页文件和文件夹来扩充站点了。步骤 在“文件”面板中单击鼠标右键，从弹出的快捷菜单中选择“新建文件” ，如图 1-49 所示。将名称改为相应的网页文件名即可。 在“文件”面板中右击，从弹出的快捷菜单中选择“新建文件夹” ，给新创建的文件夹命名。提示：在创建文件或文件夹时，单击 鼠标右键的位置即为创建后的位置。例如，在站点根目录上单击鼠标右键新建文件，则此文件将存在于站点根目录。可以使用相同的方法创建代表网站结构的其他文件夹，从而可以创建一个清晰的树状目录。4 “文件”面板的使用利 用 “文 件 ”面 板 可 对 网 站 上 的 文 件 进 行 有 效 地 管 理 。 单 击 站 点 “文 件 ”面 板 右 边 的 扩展 /折 叠 按 钮 ， 可 以 展 开 站 点 “文 件 ”管 理 面 板 ， 如 图 1-50 所 示 ， 其 中 的 站 点 文 件 、测 试 服 务 器 和 站 点 地 图 图 标 按 钮 只 有 在 “文 件 ”面 板 展 开 时 才 出 现 。 下 面 介 绍 其 主 要 功能 。图 1-49 创建网页文件图 1-48 在“文件”面板中对文件操作第 1 章 计算机中的数据和编码 21图 1-50 展开后的“文件”管理面板（1）站点文件视图按钮站点文件视图按钮，可以在“文件”面板的空格中显示远程和本地站点的文件结构。（2）测试服务器视图按钮测试服务器视图按钮，可以显示测试服务器和本地站点的目录结构。（3）站点地图视图按钮站点地图视图按钮，可以根据文档相互链接的方式显示站点的图形地图。 “站点地图”视图按钮包括“仅地图”和“地图和文件”两个选项，如图 1-51 所示。当选择“仅地图”选项时，窗口中显示站点的链接地图。若选择“地图和文件”选项时，窗口分两个窗格分别显示链接地图及站点文件，如图 1-52 所示。图 1-52 两种“站点地图”视图（4）连接/断开按钮连接/断开按钮用于连接到远程站点或断开与远程站点的连接。在默认情况下，如果Dreamweaver 已空闲 30 分钟以上，则将断开与远程站点的连接。（5）刷新按钮“刷新”按钮用于刷新本地和远程目录列表。如果已取消选择“站点定义”对话框，即图1-47 中的“自动刷新本地文件列表”或“自动刷新远程文件列表” ，则需要使用此按钮手动刷新目录列表。（6）获取文件按钮获取文件按钮用于将选定文件从远程站点复制到本地站点。图 1-51 “站点地图”的两个选项第 1 章 计算机中的数据和编码22（7）上传文件按钮上传文件按钮用于将选定的文件从本地站点复制到远程站点。单击连接/断开图标，可以连接到远程主机，选取“本地文件”中的文件，单击上传文件图标，即可上传文件到远程站点上。（8）取出文件按钮取出文件按钮用于将文件的副本从远程服务器传输到本地站点，并且在服务器上将该文件标记为取出。如果对当前站点关闭了“站点定义”对话框中的“远程信息”或“测试服务器”分类中的“启用存回和取出” ，则此选项不可用，如图 1-53 所示。（9）存回文件按钮存回文件按钮用于将本地文件的副本传输到远程服务器，并且使该文件可供他人编辑。本地文件变为只读。如果对当前站点关闭了“站点定义”对话框中的“远程信息”或“测试服务器”分类中的“启用存回和取出” ，则此选项不可用。（10）扩展/折叠按钮单击扩展/折叠按钮，可以展开或折叠 “文件”面板，以显示一个或两个窗口。1.3.4 网页文件的基本操作本节要讲述的网页文件的基本操作主要包括：创建网页、打开网页和保存网页及网页的设置等。1创建网页在 Dreamweaver 8.0 中，通常可以通过下列 3 种方法创建空白网页。 通过启动页面创建网页。启动 Dreamweaver 8.0 后，窗口中会出现一个初始页面，单击“创建新项目”下面的“HTML”选项即可创建网页，如图 1-54 所示。图 1-54 Dreamweaver 8.0 的初始页面 在 Dreamweaver 8.0 已启动或正在使用的情况下，选择“文件” “新建”命令，打开“新建文档”对话框，选择“常规”选项卡中“类别”下的“基本页”选项，单图 1-53 关闭“启用存回和取出”选项第 1 章 计算机中的数据和编码 23击“创建”按钮，如图 1-55 所示，即可新建一个页面，默认名称为 Untitled-1。在“新建文档”对话框的“常规”选项卡的“类别”列表框中可以根据情况选择创建不同的页面类别，例如动态页面、模板页面、框架页等。 通过工具栏按钮创建网页。选择“查看” “工具栏” “标准”命令，打开标准工具栏，单击标准工具栏上的新建按钮 ，打开“新建文档”对话框，按上面的步骤操作，即可创建网页，如图 1-56 所示。图 1-55 “新建文档”对话框图 1-56 标准工具栏另外，Dreamweaver 8.0 还新增了从范例创建的功能。在 Dreamweaver 8.0 初始页面上，选择“入门页面”下的所需要的设计风格或类型，如图 1-57 所示。图 1-57 从范例创建2打开网页打开网页的操作方法有以下几种。 在 Windows 操 作 系 统 的 资 源 管 理 器 中 选 中 要 打 开 的 文 件 图 标 ， 单 击 鼠 标 右 键 ， 然后 从 弹 出 的 快 捷 菜 单 中 选 择 “使 用 Dreamweaver 8.0 编 辑 ”命 令 ， 便 可 在Dreamweaver 8.0 中 打 开 该 文 档 。 通过初始页面打开网页。启动 Dreamweaver 8.0 后，单击初始页面上的“打开最近第 1 章 计算机中的数据和编码24项目”下面的选项，可以打开文件。 通过菜单命令打开网页。选择“文件”“打开”命令，弹出“打开”对话框，选择要打开的文件，单击“打开”按钮，即可打开该文件。提示：在 默 认 情 况 下 ，系 统 打 开 HTML 格 式 的 文 件 。除 此 之 外 ，还 可 以 打 开 多 种 格 式 的 文 件 ，例 如 .asp，.js，.dwt，.as，.asr，.txt 等 格 式 的 文 件 。打 开 的 方 法 是 ：单 击 “打 开 ”对 话 框 的 “文 件 类 型 ”右 端 的 下 拉 按 钮 ，打 开 下 拉 列 表 ，从 中 直 接 选 择 将 要 打 开