在制作网页之前首先要创建站点。本章通过校园网示例介绍利用 Dreamweaver CS5 创建 站点的方法。通过本章的学习，读者应该掌握以下内容： l 规划站点结构的方法 l Dreamweaver CS5 的基本操作 l 利用 Dreamweaver CS5 创建站点的方法 l 站点的基本操作 l 网页文件的基本操作
2.1 规划站点结构
作为一个网站，里面会有很多不同类型的文件，如果不进行分类组织，任意分散在硬盘 的各个地方，则网站会显得杂乱无章，不便于进行管理和更新，因此在建立站点之前，最好先 规划一下站点结构。 一般来说，整个站点是一个大的文件夹，称为站点根文件夹。在站点根文件夹下建立一 个合理的文件结构来存放所有与网站相关的资料。 通常，对站点文件的规划可以按照以下两种方法进行： （1）按照文件的类型进行规划。 按照文件的类型规划，就是将不同类型的文件分别存放在不同的 文件夹下。例如可以将所有的网页素材、图像、插件、模板等分别放 在各自的文件夹下，便于查找。 （2）按照网页主题进行规划。 按照网页主题对站点结构规划，可以使网站条理更清晰，便于日 后更好地管理站点。 读者可以选择上述方法之一进行网站的结构规划。 图 21 所示为示例网站的部分目录结构。 整个网站放置在硬盘的 myweb 目录下，这也是整个网站的根目 录。主页、其他网页的相关文件可以直接放在根目录下，这样设计起 来方便一些。各网页的子目录在根目录下依次建立，且都应有自己独 立的子目录，用来存放相关的文件。 网站结构的好坏，对浏览者来说并没有什么太大的感觉，但是对 于站点本身的上传维护、 内容未来的扩充和移植有着重要的影响。 下面是建立目录结构的一些 建议： 图 21 目录结构l 不要将所有文件都存放在根目录下， 那样会造成文件管理混乱。 如果将所有文件都存 放在根目录下，很难搞清哪些文件需要编辑和更新、哪些是无用的文件、哪些是相关 联的文件，影响工作效率。另外，上传速度慢。服务器一般都会为根目录建立一个文 件索引，即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的 索引文件。很明显，文件量越大，等待的时间也将越长。所以，应尽可能减少根目录 的文件存放数。 l 在每个主栏目目录下都建立独立的 images 目录。为每个主栏目建立一个独立的 images 目录是最方便管理的。而根目录下的 images 目录只是用来存放首页和一些次 要栏目的图片。 l 按栏目内容建立子目录。按主菜单的栏目建立子目录。一些相关性强、不需要经常更 新的栏目，可以合并放在一个统一目录下。 l 目录的层次不要太深。目录的层次建议不要超过 3 层，维护管理方便。 l 不要使用过长的目录。 l 不要使用中文目录。
2.2 利用 Dreamweaver CS5 管理站点
2.2.1 Dreamweaver CS5 简介 Dreamweaver 是 Macromedia 公 司 出 品 的 一款 “ 所见 即 所 得 ” 的 网页 编 辑 工 具。 与 FrontPage 不同，Dreamweaver 采用的是 Mac 机浮动面板的设计风格，对于初学者来说可能会 感到不适应。 一旦习惯了其操作方式后， 就会发现 Dreamweaver 的直观性与高效性是 FrontPage 所无法比拟的。 Dreamweaver 对于 DHTML（动态网页）的支持特别好，可以轻而易举地做出很多绚丽的 互动页面特效。 插件式的程序设计使得其功能可以无限扩展。 Dreamweaver 与 Flash、 Fireworks 并称为 Macromedia 的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常 紧密的结合。因此说 Dreamweaver 是高级网页制作的首选并不为过。 Dreamweaver 8 及以前版本都隶属于 Macromedia 公司， 2005 年 4 月 18 日全球最大的图像 编辑软件供应商 Adobe 以换股方式收购了 Macromedia 公司，之后的版本 Dreamweaver CS3、 CS4、CS5 都属于 Adobe 公司所有。 目前 Dreamweaver 较新的版本为 Adobe Dreamweaver CS5，Dreamweaver CS5 包含多种多 样的新功能。本书就以 Dreamweaver CS5 为工具介绍网页的制作方法。 1．Dreamweaver CS5 的界面 启动 Dreamweaver CS5，Dreamweaver CS5 的起始页便会出现在屏幕上，如图 22 所示。 与以往版本的起始页相比，CS5 的用户界面做了较大改进，界面更加简洁，操作也更加方便。 在用户界面的中部分成 3 部分，左边显示的是“打开最近的项目” ，用户可以方便地选择 最近编辑的文档；中间部分是“新建” ，用户可以选择新建各种类型的文件；右边列出的是一 些“主要功能” 。图 22 Dreamweaver CS5 的起始页 单击“新建”下面 HTML 图标按钮，打开 Dreamweaver CS5 的操作界面，如图 23 所示。 操作界面由以下几部分构成： （1）菜单栏。 菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。 （2）工具栏。 工具栏提供了常用命令的快捷启动方式，如可以使用工具栏中的“标题”框方便地设置 网页的标题。 （3）插入面板。 插入面板包含一些用于创建不同类型对象的按钮。只有在打开或新建页面时，插入面板 才处于激活状态；否则将处于未激活状态。 选择“窗口”→“插入”命令或者直接按 Ctrl+F2 组合键，出现插入面板。在插入面板上 包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，如文本、表格、框架等。 默认情况下，插入面板中显示的是“常用”工具组中的工具图标。单击插入面板上的对 象类型标签，会打开相应的插入面板，显示插入面板上所包含对象的类型。 插入面板共有“常用” 、 “布局” 、 “表单” 、 “数据” 、Spry、InContext Editing、 “文本” 、 “收 藏夹”8 组，每组中有不同类型的对象。图 23 所示是制表符格式，右击“常用”标签，在弹 出的快捷菜单中选择“显示为菜单”命令，插入面板将变为菜单格式。使用“插入”菜单中的 命令也可以实现插入各种对象，使用菜单还是使用插入面板，完全根据用户的习惯来决定。
插入 面板 菜单栏 浮动面板组 文档工具栏 文档编辑窗口 属性 面板 网页 名称 状态栏 信息 显示 图 23 Dreamweaver CS5 的操作界面 （4）浮动面板。 浮动面板是一种方便操作的界面方式， 使用者可以随时获得特定功能。 例如， 可以用“CSS 样式”面板设置 CSS 样式。 如果需要打开某个浮动面板，可以单击面板组中与之对应的快速启动按钮，或者在“窗 口”菜单中选择相应的命令。 如果要关闭目前不使用的面板， 则单击该面板上的关闭按钮即可。 如果要隐藏当前所有处于打开状态的面板， 可以单击“窗口”→“隐藏面板”命令或直接按快 捷键 F4。再一次选择“窗口”→“隐藏面板”命令或按 F4 键，就可以显示所有的隐藏面板。 另外，单击浮动面板上的 或 按钮，可以收起或展开浮动面板。 在实际操作中，可以通过自由组合面板来节省工作区的空间。拖动面板上的标识符，就可 以把面板拖动成独立的一个面板或加入到其他面板中。面板组中的所有面板都是可以移动的。 （5）文档窗口。 文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本 相同。 文档窗口上面的标题栏显示页面标题。在工具栏上面显示网页名称，后缀名为 html，如 果文档有尚未保存的部分，则在文件名之后还会出现一个星号（*）。网页保存后，在文件名的 右侧显示网页的保存路径。 控制被选文本或对象的标记符出现在文档窗口底部左边的标记符选择器上。单击这些标 记符可以准确地选取标记符及其控制的内容。如单击<body>可以选取整个文档，单击<table> 可以选取当前光标所在的表格。 单击窗口大小下拉菜单，用户可以将文档窗口的大小设为预设值或自定义值。
（6）属性面板。 属性面板上显示的是被选取对象或文本的各种属性，在属性面板上还可以检查和编辑当 前选定页面元素的属性。 用户可以在设计视图中选择页面元素， 也可以在代码视图中选择页面 元素。要显示或隐藏属性面板，应选择“窗口”菜单中的“属性”命令或者直接按 Ctrl+F3 组 合键，或者双击“属性”标签。用户对属性进行的修改多数会立即在文档窗口中应用，但有些 属性在修改完之后可能需要在属性编辑文本框之外的地方单击一下， 或者按 Tab 键转到别的属 性后才能应用。 （7）状态栏。 状态栏用于显示网页的一些基本信息，如网页大小、显示比例和估计下载时间等。 图 23 显示的是 Dreamweaver CS5 的经典界面，如果想变换界面显示风格，可以单击菜单 栏上部的“经典”按钮，从打开的菜单中选择不同的显示风格。 2．Dreamweaver 的视图 作为一种所见即所得的网页编辑软件，Dreamweaver 自动在用户创建网页时生成底层的 HTML 代码，同时提供了很好的 HTML 代码编辑功能。 单击工具栏上的“设计”按钮，即显示设计视图；单击工具栏中的“代码”按钮，则可 以很方便地切换到代码视图，以便查看当前编辑网页的 HTML 源代码；如果需要同时查看代 码视图和设计视图，可以单击工具栏上的“拆分”按钮，此时 Dreamweaver 将同时在窗口中 显示代码视图和设计视图。 单击工具栏上的“实时代码”按钮，可以打开实时代码窗口，当对网页文件进行修改后， 在“实时代码”窗口会实时显示更新的代码；单击工具栏上的“实时视图”按钮，可以打开 实时视图，在实时视图中显示网页和在浏览器中显示的网页效果基本相同，实时视图和实时 代码是同步打开的，左边显示实时代码，右边显示实时视图；单击“单击在浏览器中预览/ 调试”按钮，可以在打开的菜单中选择需要的浏览器来打开编辑的网页文件，以预览设计的 网页效果。 2.2.2 定义站点 1．站点概述 Dreamweaver 的站点是一种管理网站中相关文件的工具，用户通过站点可以对网站的相 关页面及各类素材进行统一管理，还可以通过站点管理将文件上传到网页服务器来进行站点 测试。 简单地说，站点就是管理网站的文件夹，在这个文件夹里包含网站中用到的各种文件。 2．站点面板 Dreamweaver CS5 为用户准备了专门的建站工具——站点面板。 它能够方便地建立和修改 更新网站， 帮助用户组织本地和远程的文件夹， 使用户能够在远程服务器上复制本地文件夹的 结构或者本地系统复制远程文件夹结构。 由于本地站点和远程站点的结构是相同的， 因此当用 户将文件夹传输到远程站点后，在本地站点中创建的链接仍可以使用。 在 Dreamweaver CS5 的编辑窗口中，选择“窗口”→“文件”命令即可打开站点面板， 如图 24（a）所示。单击左上方的 按钮，可以展开站点面板，如图 24（b）所示。 在站点面板中，用户可以单击右上角的 按钮，在弹出的菜单中选择“站点”→“新建 站点”命令创建新站点，也可以使用“站点”→“管理站点”命令对已有的站点进行管理。
（a） （b） 图 24 Dreamweaver CS5 的站点面板 3．创建站点 下面通过建立 Library 站点来说明创建站点的方法。 （1）选择“站点”→“新建站点”命令，弹出如图 25 所示的“站点设置对象”对话框； 也可选择“站点”→“管理站点”命令，打开“管理站点”对话框，单击“新建站点”按钮打 开该对话框；还可以在站点面板中单击 按钮，在弹出的菜单中选择“站点”→“新建站点” 命令打开该对话框。 图 25 “站点设置对象”对话框 （2）在“站点名称”文本框中输入新建站点的名称 Library，在“本地站点文件夹”文本 框中输入本地站点根目录的位置，或单击右侧的文件夹图标，打开“选择根文件夹”对话框来 选择本地站点根目录的位置。 （3）单击“保存”按钮关闭该对话框，会显示一个站点管理窗口，如图 26 所示。因为 是新建的一个站点，所以在本地目录看到的是一片空白。
图 26 新建的 Library 站点 2.2.3 站点的基本操作 在 Dreamweaver CS5 中创建好了本地站点后，即可对它进行相应操作。比如打开站点、 编辑站点、复制站点等。 1．打开站点 在站点面板中打开工具栏中的“文件”下拉列表框（如图 27 所示），选择需要打开的站 点，文件窗口中即会显示该站点文件夹和文件信息。 2．复制站点 若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单中的“管理站点”命 令，打开“管理站点”对话框，如图 28 所示。选中要复制的站点名称，单击“复制”按钮即 可对当前站点进行复制操作。 图 27 从站点面板打开站点 图 28 “管理站点”对话框 执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一 个“复制”字样的站点名称。 注意：站点复制通常是为了维护多个不同的站点副本。例如，在一个完整的站点中可以 包含所有的原材料，但在要上传的站点中，则应该删除网页中不需要的原材料（如文本素材、 图像素材等），这时可以用复制操作制作两个不同的站点以适应不同的情形。 3．编辑站点 如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作， 可以利用上面的方法打开“管理站点”对话框， 选中一个站点后单击“编辑”按钮， 即可打开 该站点的“站点设置对象”对话框，如图 25 所示。 4．删除站点 在 Dreamweaver CS5 中删除一个站点非常容易，在弹出的“管理站点”对话框中单击“删 除”按钮即可删除选中的站点。
注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用 Dreamweaver 管理该文件夹而已。如果需要再次用 Dreamweaver 管理该文件夹，只要用新建站点的方式再 次将该文件夹指定为站点根目录即可。 在 Dreamweaver CS5 的“管理站点”对话框中，除了可以进行“新建” 、 “编辑” 、 “复制” 、 “删除”站点外，还可以“导入”和“导出”站点等操作，读者可以自己练习。 5．发布站点 （1）申请域名和主页空间。 网站制作完成之后，就可以将站点上传到服务器了。网站的发布首先要考虑的是以什么 样的域名发布，发布在什么地方，即要申请域名和主页空间。目前，可以有多种方式申请域名 和主页空间。如果是个人网站，最简单的方式就是在 Internet 服务供应商（ISP）的服务器下 申请一个域名和一个主页空间。 但是在这之前，应注意站点浏览器的兼容性，最好先在本地计算机上测试一下，以保证 页面的外观、效果和链接等与自己的设计吻合。 （2）设置浏览器的兼容性。 在 Internet 上浏览网页时，可能会出现网页中的某些元素无法正常显示的情况，这是因为 访问者使用的浏览器不支持网页中的某些技术（如框架、动态 HTML、JavaScript 和 Java 小程 序等），即浏览器不兼容这些功能。为了避免在不同类型和版本的浏览器中出现某些元素不能 正常显示的现象，在站点发布前必须设置浏览器的兼容性。 在 Dreamweaver CS5 中检查网页对浏览器的兼容性，可按以下步骤进行： 1）在站点窗口中，选择要检查的目标对象，可以是文件，也可以是目录。如果是根目录， 则对整个站点进行检查。 2）选择“文件”→“检查页”→“浏览器兼容性”命令，Dreamweaver CS5 将打开底部 的“浏览器兼容性”面板，如图 29 所示，并开始检查过程。若对当前文档运行该检查，首先 系统提示要保存文件。Dreamweaver 对文件的最新保存版本执行该检查，而不包含未保存的 更改。 图 29 “浏览器兼容性”面板 3）检查完毕，检查报告将显示在“浏览器兼容性”面板中。 注意：检查目标浏览器功能只对文档中的 HTML 进行测试，检查是否有目标浏览器所不 支持的任何标签或属性。此检查对文档不作任何方式的更改。 （3）测试站点。 在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下 测试，因为在站点或者网页中可能会存在许多问题。例如，可能会有某个文件丢失或者某个超 链接断开的情况发生。这些问题如果不能及时得到解决，即使站点发布了，当浏览者访问站点
时也可能是空白一片或仅显示出一部分。 由此可以看出， 在站点发布之前对其进行测试是非常 重要的。 站点的测试主要包括查看超链接、验证超链接、修复超链接、更新超链接、测试网络连 接等。 1）查看站点中的所有内部超链接。查看站点中的所有内部超链接，可以在整个站点中查 找被中断的超链接和未被使用的文件，确保站点内的超链接完好。 2）验证各个外部超链接的有效性。在网页中，根据超链接的链接目标可将超链接大致 分为两类：一类是内部超链接；另一类是外部超链接。内部超链接是指链接的目标是当前站 点中的网页或文件的超链接，而外部超链接则是指链接目标是当前站点之外的网页或文件的 超链接。 3）修复断开的超链接。验证完当前站点中的超链接后，中断的超链接就会显示在“断掉 的链接”列表中。 为了使网站发布后链接畅通， 在发布之前就要对这些断开的超链接进行修复。 4）更新超链接。当中断的超链接被修复后，可以对站点内的全部超链接进行更新，以确 保站点内无错误的超链接出现。 （4）测试网络连接。 如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检 查主机名称、本地主机、IP 地址、TCP/IP 协议等设置。 （5）在本地计算机上发布站点。 测试完站点后，如果觉得把站点发布到服务器上的时机还不成熟，那么可以先在本地计 算机上发布以测试效果。 在本地计算机上发布站点，可以将站点发布到本地文件系统的文件夹中，也可以通过将 站点发布到新磁盘驱动位置上来制作一份整个站点的备份。 （6）在服务器上发布站点。 在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精 心制作的站点了。 发布站点的方法有很多种，如 FTP 上传（使用此方式上传站点时，应先安装上传软件 CuteFTP）或各大站点提供的文件管理器等。 2.2.4 网页文件的基本操作 1．新建网页 如果要新建一个新的网页文件，可以按照以下两种方法进行操作： （1）打开 Dreamweaver CS5 起始页，单击“新建”栏中的 HTML 按钮，即可打开一个新 网页。 （2）单击“文件”→“新建”命令，将弹出“新建文档”对话框，如图 210 所示。选择 “空白页”选项卡，从对话框的“页面类型”列表中选择一种类型，在“布局”列表中选择一 种布局格式，然后单击“创建”按钮。 2．文件的打开 要想编辑一个网页文件， 必须先打开该文件。 Dreamweaver CS5 可以打开多种格式的文件， 它们的扩展名分别是 htm、html、asp、js、dwt、xml、1h、as、css 等。如果要打开现有网页 文件，可以按照以下 4 种方法进行操作：
图 210 “新建文档”对话框 （1）在 Windows 的资源管理器中，右击要打开的文档图标，在弹出的快捷菜单中选择 Adobe Dreamweaver CS5 命令，即可启动 Dreamweaver CS5 并打开该文档。 （2）启动 Dreamweaver CS5，显示起始页。如果在“打开最近的项目”栏中列出了需要 的文档，直接单击该文档即可，如图 211 所示。如果需要的文档没有列出，可单击“打开最 近的项目”栏中的“打开”将弹出“打开”对话框，如图 212 所示，在该对话框中选择需要 打开的文档，再单击“打开”按钮。 图 211 打开最近的项目 （3）启动 Dreamweaver CS5，显示起始页。选择“文件”→“打开”命令，同样会弹出 “打开”对话框，在其中选择需要的文档，单击“打开”按钮。
图 212 “打开”对话框 （4）将要打开的网页文件拖动到 Dreamweaver CS5 文件名所在的位置，即可打开网 页文件。 3．保存网页文件 保存网页文件的方法随保存文件的目的不同而不同。 （1）如果同时打开了多个 Dreamweaver CS5 窗口，而保存的目的只是保存文件，则切换 到要保存的文档所在的窗口，然后选择“文件”→“保存”命令，会打开“另存为”对话框， 如图 213 所示。在“保存在”文本框中输入保存的路径，在“文件名”文本框中输入文件名， 单击“保存”按钮，即可存储文档。 图 213 “另存为”对话框
注意：如果编辑网页的文件名后面带有“*”符号，表示网页未保存；网页文件要用字母 或数字命名，最好不要用中文；网页文件的扩展名为 html。 （2）如果所需要保存的网页文件中带有框架文件，而保存的目的是保存该网页文件中所 有的文件，则应该选择“文件”→“保存全部”命令，然后按提示保存所有的框架文件。 （3）如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，选 择“文件”→“另存为模板”命令，会打开“另存模板”对话框，如图 214 所示。选择一个 保存该模板文件的站点，并在“另存为”文本框中输入文件的名称，最后单击“保存”按钮。 图 214 “另存模板”对话框 网页没有存盘时，在文档窗口标题栏的圆括号内显示的文件名后会出现一个星号*，网页 一旦存盘，则文档窗口标题栏的圆括号内会显示当前的文件名及所在的文件夹。 注意： 网站中的所有网页和图像等文件都应该保存在本地网站内， 因为将来上传到 Internet 上的是一个结构完整的网站，而不是一个单独的网页。 4．预览网页 在 Dreamweaver CS5 中制作的网页最终要通过浏览器浏览，在网页的制作过程中随时都 可以启动浏览器预览网页，预览网页的方法有以下几种： （1）按 F12 键。 （2）在工具栏中单击 按钮，在弹出的菜单中选择“预览在 IExplore”命令。 （3）选择“文件”→“在浏览器中预览”→IExplore 命令。
习题二
一、填空题 1．________是 Adobe 公司推出的一款“所见即所得”的网页编辑软件，代码由软件自动生成。 2．在 Dreamweaver CS5 中，要显示或隐藏“属性”面板，应直接按________键。 3．打开 Dreamweaver CS5 起始页，单击“新建”栏中的________超链接，即可打开一个新网页。 4．用 Dreamweaver CS5 设计网页时，网页文件名称的后缀为________，如果文档有尚未保存的部分， 则在文件名之后还会出现一个________号。 5．站点的测试主要包括________、________、________、________及测试网络连接等。 6．网站中的所有网页和图像等文件都应该保存在________内，因为将来上传到 Internet 上的是一个结构 完整的网站，而不是一个单独的网页。二、简答题 1．如何规划站点结构？ 2．在 Dreamweaver CS5 中，创建新的网页文件有哪些方法？ 3．如何发布一个创建好的网站？ 三、操作题 1．在本地硬盘目录下规划一个个人站点结构。 2．熟悉 Dreamweaver CS5 的界面，练习其基本操作。 3．在 Dreamweaver CS5 中，练习打开、编辑、复制和删除站点的基本操作。 4．首先根据个人爱好规划一个名为 Myweb 的个人站点，然后在 Dreamweaver CS5 中创建该站点，并在 创建好的站点中新建一个名为“我的个人主页”的网页。
