网页制作教程（第二版） - 万水书苑-出版资源网

全文

(1)第 2 章创建站点. 本章学习目标在制作网页之前首先要创建站点。本章通过校园网示例介绍了利用 FrontPage 2003 和 Dreamweaver 8 创建站点的方法。通过本章的学习，读者应掌握以下内容：  FrontPage 2003 和 Dreamweaver 8 的基本操作  利用 FrontPage 2003 和 Dreamweaver 8 创建站点的方法  利用 FrontPage 2003 和 Dreamweaver 8 管理站点的方法  能够为站点添加网页  导入文件到当前站点的方法  发布站点的方法. 2.1. 利用 FrontPage 2003 创建站点. 2.1.1 FrontPage 2003 简介 21 世纪之初，微软公司推出了 Office 的升级版本 Office 2003。FrontPage2003 是其中的一个重要组件，也是目前市场上最为优秀的网页制作软件和开发工具之一。它继承了 FrontPage 2003 等以前版本的传统功能，采用了与 Office 2003 其他组件一致的工作界面，在站点与网页向导、网页编辑、表单与框架、动态 HTML 技术等多方面进行了改进，并且新增了许多功能，是适合初学者使用的优秀软件。 1．FrontPage 2003 的新增功能（1）设计网站。FrontPage 2003 具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何 HTML 知识。 1）经过改进的工作环境和更大的设计区域。 FrontPage 2003 集中了所有 Web 设计功能，并让用户可以全景查看整个网站，从而使网站和网页设计比以前更容易。更大的设计区域还减少了滚动操作。 2）布局表格和单元格。通过使用布局表格和单元格，可以创建具有专业外观的网页布局。布局表格是为网页创建的框架。布局单元格是该框架内的区域，其中包含网页中的内容（包括文本、图像、Web 部件和其他元素）。可以选择预定义的布局列表，也可以自己绘制，总之，在做出最后决定前可以尝试多种布局。布局表格工具位于可以方便访问的任务窗格中。可以使用这些工具应用附加格式，如圆角、边框、自动伸缩和其他视觉效果。.

(2) 第 2 章创建站点. 15. 3）图像描摹。在使用图像描摹时，可以在图形程序中创建网页的外观模型图像，并将其作为直观参照，以便在 FrontPage 中创建或描摹网页设计。可以显示或隐藏图像、将其设置为不透明以及更改其位置。 4）动态 Web 模板。通过将动态 Web 模板附加到网页上，可以快速创建共享相同布局的 HTML 网页。可以指定模板内的某些区域可以编辑，而将其他区域保护起来。这意味着，可以允许其他人添加和编辑内容，但保持网页的布局和模板不变。用户可以在网站中使用任何数目的动态 Web 模板，并且可以将动态 Web 模板添加到任意数目的网页中。还可以将动态 Web 模板文件保存到任意位置。如果选择从网站的一个或多个网页取消动态 Web 模板，并不会从这些网页中删除内容。只会删除模板所提供的格式。 5）网页标尺和布局网格。只要有好用的定位参照（如网页标尺和背景布局网格），精确设计和布置就会变得十分容易。通过选择测量单位、线条样式和颜色以及间距选项，可以自定义标尺或网格。 6）设计阶段层。在 FrontPage 2003 中，层可以包含 HTML 元素，如文本和图形。在“层”任务窗格中，可以查看网页上所有层的详细列表。可以重叠、嵌套、显示或隐藏网页上的层，也可以通过使用“行为”任务窗格使层具有动画效果。 7）经过改进的主题。 FrontPage 2003 使用级联样式表而不是 HTML 来应用主题，所以文件变得更小、更透明并且更容易控制和修改。此外，如果网页包含在早期版本中应用的 HTML 主题，则会在 FrontPage 2003 中保留这些设置。（2）开发网站。FrontPage 2003 具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识），以及创建交互式脚本的工具。此外，FrontPage 2003 可以生成有效和干净的 HTML，能让用户更好地控制代码。 1）网页视图。用户在利用 FrontPage 2003 设计网页时，可以在下列任何网页视图中处理网页： “设计”视图——在“设计”视图中设计并编辑网页。此视图可以提供与使用设计工具创建网页一样的近似“所见即所得”的创作体验。 “代码”视图——亲自查看、编写和编辑 HTML 代码。使用 FrontPage 2003 中的优化代码功能，可以创建干净的 HTML，并且可以更容易地删除任何不想要的代码。 “拆分”视图——以拆分的屏幕格式检查并编辑网页内容，该视图能让用户同时访问代码视图和设计视图。 “预览”视图——在无需保存网页的情况下，显示与网页在 Web 浏览器中的外观相近似的视图。使用此视图可以查看创建网页时所做的更改。 2）图形工具。改进的图形支持能够更容易处理来自其他程序的图形。新的界面清楚地解释了将图像导入网站时的默认行为，以及在编辑这些图像时将会出现的行为。这使用户可以更好地控制图像的显示和保存方式。.

(3) 网页制作教程（第二版）. 16. 多编辑器配置可以为不同类型的内容选择不同的编辑器。例如，如果有许多 GIF 式文件，其中一些文件是照片，一些是图表，用户可以在 Adobe Photoshop 中编辑照片，在 Microsoft Office Visio 2003 中处理图表。 3）脚本和编码工具。行为是脚本选项，可用来向网页中的文本或其他元素快速添加交互性或增强功能。例如，可以向图像添加行为，这样，当网站访问者将指针移到图像上时，可以改变图像的显示。也可以通过查看“行为”任务窗格中的列表，查看和编辑与当前网页关联的脚本。交互式按钮可以通过从列表中选择专业外观的按钮来为网页添加这样的按钮。选中某个按钮后，可以添加按钮文本、选择字体和按钮颜色、定义链接，并为原始、悬停及按下状态设置图像和文本设置。使用快速标记选择器可以快速选择网页中的任何标记。使用快速标记编辑器可以插入、包容和编辑 HTML 标记。 4）专业编码工具。现在，FrontPage 2003 在代码视图中提供了智能感知技术，以减少代码中的错误。智能感知包括语句完成，并显示正在编写的代码的可用参数。智能感知可用于下列环境：HTML、级联样式表（CSS）、可扩展样式表语言（XSL）、JScript或JavaScript、VBScript 以及 ASP.NET。 2．FrontPage 2003 工作界面启动 FrontPage 2003 后，就进入了 FrontPage 2003 的主窗口，如图 2-1 所示。FrontPage 2003 主窗口由以下 6 部分组成。标题栏菜单栏常用工具栏. 格式工具栏任务窗格窗口栏. 图 2-1. FrontPage2003 主窗口. （1）标题栏。标题栏是 Windows 应用程序所共有的，主要用来显示应用程序的文件名称，如果尚未赋予名称，FrontPage 会自动命名为 new_page_1.htm、new page_2.htm、…… 启动 FrontPage 2003 程序时，FrontPage 2003 将刚打开的文档命名为 new_page_1.htm。当.

(4) 第 2 章创建站点. 17. 窗口不是处于最大化状态时，移动鼠标指针指向标题栏任意空白区域，按下鼠标左键不放并拖动，可以移动显示窗口在屏幕上的相对位置。鼠标左键双击标题栏可在最大化和还原状态之间切换。此外，标题栏还有控制窗口显示状态的功能。标题栏可分为 3 个部分：窗口控制菜单图标、应用程序标题和窗口控制按钮。最右端的窗口控制按钮可以控制窗口的最大化、最小化和关闭操作。（2）菜单栏。菜单栏位于标题栏的下方，它由 11 个菜单按钮组成。FrontPage 2003 中包含的所有命令都可以在这 11 个菜单中找到。在 FrontPage 2003 的帮助文本框中输入描述需求的短语后，按下回车键即可得到这种需求的提示信息。（3）常用工具栏。常用工具栏位于菜单栏的下面，格式工具栏的上方。常用工具栏提供了最常用命令的快捷按钮，如保存、打开、新建文档，移动、复制数据，撤消或恢复操作等，使用户执行这些命令时更方便快捷且易学易记。（4）格式工具栏。格式工具栏一般位于常用工具栏下方。格式工具栏提供了最常用设置格式命令的快捷按钮，如设置数据的字体、对齐方式，设置单元格的背景色等，使用户设置这些格式时更方便快捷。第一次启动 FrontPage 2003 时，操作界面上只会显示两个工具栏，即常用工具栏和格式工具栏。（5）窗口栏。在 Microsoft FrontPage 2003 中，可以使用几种不同的方法来查找网站内容，以便帮助用户有效地设计、发布和管理网站。（6）任务窗格。任务窗格用来显示 FrontPage 2003 正在完成的任务，一般位于窗口的右侧，点击任务栏右边的，可以打开一个任务下拉列表框，从中选择相应的任务项就可打开所需要的任务窗格。 3．FrontPage 2003 的视图 FrontPage 2003 有 7 种视图可供选择。（1）“网页”视图。网页视图是进行网页编辑的操作界面。在网页视图中还有几种显示状态，一般情况下包括“设计”视图、 “代码”视图、 “拆分”视图和“预览”视图以及其他编辑状态。例如在编辑框架网页时就会有 5 种编辑状态。（2）“文件夹”视图。可以使用“文件夹”视图来直接处理文件和文件夹，并组织网站内容。与 Microsoft Windows 资源管理器相似，还可以在此视图中创建、删除、复制和移动文件夹。（3）“远程网站”视图。可以使用“远程网站”视图发布整个网站，或有选择地发布个别文件。还可以在两个或更多个位置之间同步文件，即确保包含相同内容的网站都包含最新的更改。在“远程网站”视图中查看文件夹内容时，会用指示发布状态（例如“不发布”、“已更改”、“未更改”、“新建”和“冲突”）的图标和说明性文本来标记文件。可以筛选该视图，以显示文件夹内容、待发布的文件、不发布的文件和有冲突的文件。（4）“报表”视图。通过“报表”视图，可以在运行报表查询后分析网站内容。可以计算网站中文件的总大小，指出哪些文件没有与其他文件链接，标识出慢速网页或过期网页，按负责处理文件的任务或人员对文件进行分组等。.

(5) 网页制作教程（第二版）. 18. （5）“导航”视图。 “导航”视图提供了网页的分层视图。通过此视图，可以添加新的导航网页，也可以通过鼠标的拖动修改导航网页所处的层或者导航网页之间的相互关系。（6）“超链接”视图。在 FrontPage 中，“超链接”视图可以将网站中超链接的状态显示在一个列表中，此列表既包括内部超链接，又包括外部超链接，并用图标指示超链接已通过验证或已中断。在当前网页图标左侧是指向当前网页的超级链接，用指向当前网页的箭头表示；在当前网页右侧的是当前网页中的超级链接，用从当前网页出发的箭头表示。另外，在此超级链接的图标上会有一个“＋”或“－”号，“＋”号表示该超级链接下还有超级链接。单击“＋” 号，会显示所有的超级链接，此时“＋”号变为“－”号；单击“－”号，会隐藏所有超级链接。（7）“任务”视图。“任务”视图以表格形式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。在制作一个网站时，由于工作量大，所以在网站制作之前往往需要预先制作一个计划，这样就可以有条不紊地进行网站设计。“任务”视图就是为此目的而设计的。在“任务”视图中，可以方便地建立任务或查看任务完成情况等。在“视图”菜单上，单击要使用的视图，就可实现视图间的切换。 2.1.2 创建站点 1．创建新站点在 FrontPage 2003 中，创建新站点是一件非常简单的事，只需在空白网页或应用向导创建的网页上添加或修改内容即可。下面以创建一个 HH 空白站点为例，介绍如何使用 FrontPage 2003 创建网站。操作步骤如下：（1）选择“文件”|“新建”命令，打开“新建”任务窗格。（2）单击“新建站点”下的“其他网站模板”超级链接，打开“网站模板”对话框，如图 2-2 所示。. 图 2-2. “网站模板”对话框. （3）单击“网站模板”中的“空白网站”图标，在“指定新网站的位置”文本框中输入新站点的位置“E:\qjl\HH”，单击“确定”按钮，出现“创建新站点”对话框，如图 2-3 所示。.

(6) 第 2 章创建站点. 图 2-3. 19. “创建新站点”对话框. （4）创建完毕，在“E:\qjl”路径下就会看到如图 2-4 所示的名为“HH”的新建站点。. 图 2-4. 浏览“E\qjl\HH”文件夹. 在创建一个新站点时，FrontPage 2003 会创建两个子文件夹，即-images 子文件夹和-private 子文件夹。-images 文件夹用来保存站点的页面所使用的图像文件；-private 文件夹用来设置用户不能访问的子目录。注意：在创建站点选择路径时，最好选择某个文件夹作为站点，而不要选择某个磁盘分区（例如 E 盘）作为站点，否则可能会导致整个磁盘分区瘫痪。 2．导入一个已存在的站点导入站点可以方便多人共同开发一个站点，从而提高站点的开发速度。导入站点分为“从本地计算机或网络上源文件中导入文件”和“从 Internet 上的网站中导入”等 5 种途径。要导入一个站点，首先应选择“文件”菜单下的“导入”命令，然后根据提示，依次选择需导入的站点即可。如将“E:\qjl\HH”站点导入到“F:\Web\CX”站点，具体的操作方法为：（1）执行“文件”|“导入”命令，打开“导入”对话框，如图 2-5 所示。. 图 2-5. “导入”对话框.

(7) 网页制作教程（第二版）. 20. （2）在“导入”对话框中，单击“来自网站”按钮，打开“导入网站向导—欢迎”对话框，如图 2-6 所示。. 图 2-6. “导入网站向导—欢迎”对话框. （3）选择“您希望以何种方式获得文件”下的“文件系统”单选按钮，在“网站位置” 文本框中输入“E:\qjl\HH” （或通过“浏览”按钮查找），选择“包含子网站”复选框。单击“下一步”按钮，打开“选择目标网站位置”对话框，如图 2-7 所示。. 图 2-7. “选择目标网站位置”对话框. （4）在“本地副本的位置”文本框中输入“F:\Web\CX”，或单击“浏览”按钮查找该站点。单击“下一步”按钮，弹出“完成”对话框，如图 2-8 所示。. 图 2-8. “完成”对话框.

(8) 第 2 章创建站点. 21. （5）单击“完成”按钮，退出“导入网站向导” ，完成站点的导入。 3．将文件夹转换为站点 FrontPage 2003 中可以将一个已经存在的文件夹转换为站点。具体步骤如下：（1）打开“文件夹”视图，选择要转换为站点的文件夹。（2）用鼠标右键单击要转换的文件夹，从弹出的快捷菜单中选择“转换为站点”命令，打开 Microsoft Office FrontPage 询问对话框，如图 2-9 所示。. 图 2-9 Microsoft Office FrontPage 对话框. （3）单击“是”按钮，关闭 Microsoft Office FrontPage 询问对话框。（4）双击要转换为站点的文件夹，打开一个新的窗口，即为文件夹转换成的站点。除了可以应用上面所述的方法创建站点外，还可以应用向导来创建站点。具体方法可参考相关书籍，这里不再赘述。 2.1.3 管理站点在创建完站点后，就应该管理站点了。有效地管理站点不但可以更好地创建和修改站点，而且可以作为修改 Web 站点的一种手段。管理站点不仅可以针对站点内部文件（如文件夹、超级链接和导航等）进行管理，还可以对整个站点进行管理，如打开、关闭、重命名与删除站点等。 1．打开站点在修改或编辑站点中的文件前，必须先打开站点中的文件，例如，打开 F 盘 HH 网站中的名为“办公电话”的网页。操作步骤如下：（1）单击工具栏中的“打开”按钮，弹出“打开文件”对话框，如图 2-10 所示。. 图 2-10. “打开文件”对话框.

(9) 22. 网页制作教程（第二版）. （2）在“打开文件”对话框中选择名为“人才培养”的网页。单击“打开”按钮，打开 “F:\网页\HH\人才培养.htm”网页，如图 2-11 所示。. 图 2-11. “人才培养”网页. 2．重命名站点在创建站点时，如果没有为站点设计一个好的名称，可以重新为站点命名。重命名 Web 站点时，FrontPage 2003 会用新站点名称自动更新所有内部超链接以及其他站点设置。下面将站点“E:\qjl\HH”更名为“E:\qjl\HH2”站点。具体操作步骤如下：（1）选择“E:\qjl\HH”路径下“工具”|“网站设置”命令，打开“网站设置”对话框，如图 2-12 所示。. 图 2-12. “网站设置” 对话框.

(10) 第 2 章创建站点. 23. （2）在“网站名称”文本框中输入站点的新名称“E:\qjl\HH2”，单击“确定”按钮，即完成了站点重命名。注意：如果在站点发布之前为站点重命名，则站点会自动更改本地计算机或本地网络上该站点的路径。如果在 Web 站点发布之后对其进行重命名，则需要用新名字重新发布整个站点。 3．删除站点如果创建的站点不理想，修改起来又十分麻烦，可以将站点删除。在 FrontPage 2003 中打开“文件夹”视图，并选择要删除的站点，按 Delete 键，或单击鼠标右键，从弹出的快捷菜单中选择“删除”命令，就可以删除所选的站点了。注意：应用手动方式删除文件，删除的文件会自动放置于“回收站”中，而应用“删除” 命令方式删除文件，被删除的文件将直接从磁盘中删除，是不可恢复的。 2.1.4 为站点添加网页创建完站点，接下来的任务就是为站点添加网页。在 FrontPage 2003 中，为站点添加网页的方法有两种：①单击工具栏中的“新建网页”按钮或者按快捷键 Ctrl＋N，打开一个空白网页，设计者可以在网页编辑区编辑自己的网页；②选择“文件”|“新建”|“网页或站点”命令，在打开的“新建”任务窗格中单击“其他网页模板”超级链接，利用网页模板创建网页。 FrontPage 2003 具有强大的模板功能，使用这些模板功能可以大大简化网页的创建、编辑过程。下面以“普通网页”为例，介绍如何应用模板来创建网页。（1）选择“文件”|“新建”命令，在打开的“新建”任务窗格中单击“其他网页模板” 超级链接，打开“网页模板”对话框，如图 2-13 所示。. 图 2-13. “网页模板” 对话框. （2）在“常规”选项卡中选择“普通网页” ，然后单击“确定”按钮，建立一个如图 2-14 所示的网页。用户可以按要求在网页编辑区域输入文本，插入图片、表格、表单、组件等网页元素。.

(11) 网页制作教程（第二版）. 24. 图 2-14. 新建网页. 2.1.5 导入文件到当前站点站点设计者可以通过导入一个页面而减轻自己的工作量，并吸收别人成功的经验（当然要得到版权的许可）。（1）执行“文件”菜单下的“导入”命令，打开“导入”对话框，如图 2-5 所示。（2）在“导入”对话框中，单击“添加文件”按钮，打开“将文件添加到导入列表”对话框，如图 2-15 所示。. 图 2-15. “将文件添加到导入列表”对话框. （3）在此对话框中选择要导入的文件，单击“打开”按钮，即可把文件添加到导入列表中。 2.1.6 发布站点网站制作完成之后，就可以将站点上传到服务器了。但是在这之前，应注意站点浏览器的兼容性，最好先在本地计算机上测试一下，以保证页面的外观、效果和链接等与自己的设计吻合。.

(12) 第 2 章创建站点. 25. 1．设置浏览器的兼容性在因特网上浏览网页时，可能会出现网页中的某些元素无法正常显示的情况，这是因为访问者使用的浏览器不支持网页中的某些技术（例如框架、动态 HTML、JavaScript 和 Java 小程序等），即浏览器不兼容这些功能。为了避免在不同类型和版本的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性，具体方法可参考相关书籍。 2．测试站点在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下测试，因为在站点或者网页中可能会存在许多问题。例如，可能会有某个文件丢失或者某个超链接断开的情况发生。这些问题如果不能及时得到解决，即使站点发布了，当浏览者访问站点时，可能是空白一片或仅显示出一部分。由此可以看出，在站点发布之前对其进行测试是非常重要的。站点的测试主要包括：查看超链接、验证超链接、修复超链接、更新超链接及测试网络连接等。（1）查看站点中的所有内部超链接。查看站点中的所有内部超链接，可以在整个站点中查找被中断的超链接和未被使用的文件，确保站点内的超链接完好。（2）验证各个外部超链接的有效性。在网页中，根据超链接的链接目标，可将超链接大致分为两大类：一类是内部超链接，另一类是外部超链接。内部超链接是指链接的目标是当前站点中的网页或文件的超链接，而外部超链接则是指链接目标是当前站点之外的网页或文件的超链接。（3）修复断开的超链接。验证完当前站点中的超链接后，中断的超链接就会显示在“断开的超链接”列表中。为了使网站发布后链接畅通，在发布之前就要对这些断开的超链接进行修复。（4）更新超链接。当中断的超链接被修复后，可以对站点内的全部超链接进行更新，以确保站点内无错误的超链接出现。 3．测试网络连接如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检查主机名称、本地主机、IP 地址、TCP/IP 协议等设置。 4．在本地计算机上发布站点测试完站点后，如果觉得把站点发布到服务器上的时机还不成熟，那么可以先在本地机上发布以测试效果。在本地计算机上发布站点，可以将站点发布到本地文件系统的文件夹中，也可以通过将站点发布到新磁盘驱动位置上来制作一份整个站点的备份。 5．在服务器上发布站点在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。发布 Web 页时应按以下步骤进行：（1）申请域名和主页空间。网站的发布首先要申请域名及主页空间。申请的域名有两种类型：一种是收费的，另一种是免费的。大部分都是收费的，免费的申请越来越少。目前接受收费域名申请的 ISP 很多，图 2-16 所示是“搜狐”网站上的收费域名申请页面。.

(13) 网页制作教程（第二版）. 26. 用户申请收费域名后，有的还提供一定的主页空间，可以直接上传发布网页。收费域名的好处是服务有保证，功能比较多。. 图 2-16. 在“搜狐”网站上申请收费域名. 图 2-17 所示为“3939”网站上的免费域名申请页面。这里不仅提供域名，还提供主页空间。目前提供免费域名的网站还有：http://www.company.com，http://my.126.apply-new.htm， http://xilu.com/dns.freedns.html，http://mycool.net 等。. 图 2-17. 在“3939”网站上申请免费域名. 与申请域名一样，申请主页空间也有免费和收费两种情况，而且大部分都是收费的，免费的很少。图 2-18 所示为“网易”网站上的申请收费个人空间，图 2-19 所示为“中文雅虎” 网站上的申请免费个人空间。.

(14) 第 2 章创建站点. 图 2-18. 图 2-19. 27. 在“网易”网站上申请收费个人空间. 在“中文雅虎”网站上申请免费个人空间. （2）测试网页。获得域名和主页空间之后，在把网页上传到远程站点之前，要对本地站点进行测试，包括：检测站点浏览器的兼容性；检测站点中的所有超链接；修复站点中失效的超链接；预览所有网页等。（3）上传网页到 Internet。在上传网页之前，要构建远程站点，才能将本地站点的内容传到 Internet 服务器上，形成真正的网站。可以用 Dreamweaver 的站点管理器上传网页，也可以用 CuteFTP 上传网页。. 2.2. 利用 Dreamweaver 8 创建站点. 2.2.1 Dreamweaver 8 简介 Dreamweaver 8 是 Macromedia 公司推出的网页编辑工具，是一个“所见即所得”的网页.

(15) 28. 网页制作教程（第二版）. 编辑器。它采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。 1．Dreamweaver 8 的主要功能作为一款优秀的网页编辑工具，Dreamweaver 8 具有以下主要功能：（1）创建和编辑网页元素。利用 Dreamweaver 8，用户可以方便地在网页中插入图像、文本、表格、特殊字符、注册符号、窗体以及媒体文件等，并可以对它们进行各种编辑操作，如设置大小和颜色等。此外，利用 Dreamweaver 8，用户还可以创建链接和导航栏、添加弹出式菜单、应用框架集和层等。（2）编辑 HTML 代码。Dreamweaver 8 提供了强大的 HTML 编辑功能，用户可以方便地编辑 HTML 文档。在编辑网页的过程中，还可以利用快速标签编辑器随时随地修改生成的源代码，实现某些可视化操作下不能完成的特性。此外，用户还可以在网页中使用可以被多种浏览器共同支持的标准 HTML 编辑来创建样式，生成兼容性较好的网页。（3）管理站点。Dreamweaver 8 提供了完善的站点创建向导，协助用户开发 HTML、 XHTML、ASP、ASP.NET、ColdFusion、JSP 和 PHP 等技术的站点，并提供了测试控件。 Dreamweaver 8 不仅可以编辑站点，还可以管理站点。利用站点地图，用户可将站点管理和网页创作结合起来，高效快速地构建网站。（4）插入 Fireworks 文件和 Flash 动画。在 Dreamweaver 8 中，用户可以方便地插入 Fireworks 生成的 HTML 文件、图形、按钮以及导航条等，并可以插入用 Flash 制作的矢量动画，从而制作出栩栩如生、动感十足的网页来。（5）强大的模板功能。Dreamweaver 8 提供的模板和库不但为用户创建统一版面的网页提供了便捷的途径，也为维护站点提供了很大的方便，用户可以在很短的时间内重新设计网页的外观、改变站点中的所有网页，从而大大地提高了工作效率。（6）启动和编辑外部媒体。Dreamweaver 8 是一个网页编辑工具，如果希望编辑其他类型的文件，如图像或多媒体文件，则需要使用其他工具。在站点窗口中，双击任何图形或多媒体文件，都可以启动相应的外部编辑器，并对这些图像或多媒体文件进行编辑，而不需要从系统的“开始”|“所有程序”菜单中启动外部编辑器。（7）定制和扩展功能。在 Dreamweaver 8 中，用户可以自己定制一些功能，例如，可以创建需要的对象和命令，修改菜单和快捷键，甚至可以自己书写 JavaScript 代码来为 Dreamweaver 8 创建新的“行为”面板和“属性”面板，以增强 Dreamweaver 8 本身的功能。 2．Dreamweaver 8 的工作界面启动 Dreamweaver 8，首先在屏幕上显示启动画面，显示 Dreamweaver 8 的图标、版本号和版权信息等，随着初始化进程的展开，调用程序的名称将不断地出现在启动画面上。启动画面消失后，将打开程序窗口，如图 2-20 所示。该窗口的主体是中间的起始页，在其中单击“创建新项目”栏中的 HTML 超链接，即可进入 Dreamweaver 8 的工作界面，如图 2-21 所示。（1）标题栏。标题栏位于程序窗口的顶端，主要显示 Dreamweaver 8 的图标、名称、当前文档的标题和名称等按钮。（2）菜单栏。菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。.

(16) 第 2 章创建站点. 图 2-20. 29. Dreamweaver 8 的程序窗口. 标题栏. 菜单栏. 插入面板 “文档” 工具栏 “标准” 工具栏. 文档窗口. 其他面板. 状态栏. 属性面板. 图 2-21. Dreamweaver 8 的工作界面. （3）“插入”面板。Dreamweaver 8 的“插入”面板提供了创建各种对象的快捷按钮，包括常用、布局、表单、文本、HTML、应用程序、Flash 元素、收藏夹插入面板等。单击“插入”面板左侧的下拉按钮，可以在各插入面板之间切换。注意：如果窗口中没有显示“插入”面板，可以单击“窗口”|“插入”命令或单击“查看”|“工具”|“插入”命令，将其打开。.

(17) 网页制作教程（第二版）. 30. （4）工具栏。工具栏提供了常用命令的快捷启动方式。Dreamweaver 8 的工具栏有两个：一个是“文档”工具栏，一个是“标准”工具栏。“文档”工具栏提供了视图切换、设置文档标题、浏览器检查错误、文件管理、预览网页、视图管理等功能。 “标准”工具栏可以实现新建文档、保存文档、剪切、复制、粘贴、撤销和重做等功能。（5）文档窗口。文档窗口是用来显示、创建和编辑当前文档的地方。（6）状态栏。状态栏上包括标记符选择器、窗口设置等工具。（7）“属性”面板。“属性”面板上显示的是被选取对象和文本的各种属性，使用户可以随时修改，大大方便了编辑工作。要显示或隐藏“属性”面板，应选择“窗口”菜单中的“属性”命令或直接按 Ctrl+F3 组合键。用户对属性进行的修改多数会立即在文档窗口中应用，但有些属性在修改完之后可能需要在属性编辑文本框之外的地方单击一下，或者按 Tab 键转到别的属性后才能应用。 “属性”面板的右下角有一个三角形图标，单击该图标，可以展开或折叠属性面板。（8）其他面板。Dreamweaver 8 提供了多种设置面板，如“文件”面板、“行为”面板、 “层”面板等。默认情况下，它们停靠在窗口右侧，用户可以用鼠标将其拖动到窗口的任意位置，从而成为浮动面板。单击面板名称，可以展开或隐藏该面板；单击面板右上角的按钮，利用弹出的下拉菜单可以实现多种相关操作。 3．Dreamweaver 8 的视图作为一种所见即所得的网页编辑软件，Dreamweaver 8 自动在用户创建网页时生成底层的 HTML 代码，同时提供了很好的 HTML 代码编辑功能。使用工具栏中的视图切换按钮可以很方便地切换到代码视图，以便查看当前编辑网页的 HTML 源代码。如果需要同时查看代码视图和设计视图，可以单击工具栏上的“显示代码视图和设计视图”按钮，此时 Dreamweaver 8 将同时在窗口中显示代码视图和设计视图。 2.2.2 定义站点在 Dreamweaver 8 中创建站点的方法有两种。下面通过建立 Library 站点来说明两种创建本地站点的方法。 1．通过站点定义向导创建站点（1）单击“窗口”|“文件”命令或按“F8”键，打开“文件”面板，单击该面板上的“管理站点”超链接（如图 2-22 所示）；或从左侧的下拉列表框中选择“管理站点”选项，弹出“管理站点”对话框，如图 2-23 所示。. 图 2-22. 单击“管理站点”超链接. 图 2-23 “管理站点”对话框. （2）单击“新建”按钮，在弹出的下拉菜单中选择“站点”选项，打开“站点定义”对.

(18) 第 2 章创建站点. 31. 话框 1，如图 2-24 所示。注意：也可以选择“站点”|“新建站点”命令，打开“站点定义”对话框 1。（3）选择“基本”选项卡，在上面的对话框中输入要建立的站点的名称，在这里输入 Library，在下面的对话框中输入根目录的 URL，单击“下一步”按钮，则会打开“站点定义” 对话框 2，如图 2-25 所示。通过该对话框，用户可以选择一种服务器技术。. 图 2-24. “站点定义”对话框 1. 图 2-25 “站点定义”对话框 2. （4）如果所建立的站点不使用 Web 应用程序，可以选中“否，我不想使用服务器技术” 单选按钮，这里选择“是，我想使用服务器技术”单选按钮，选择好服务器后，单击“下一步” 按钮，则会打开一个选择处理文件方式和存储文件位置的对话框，如图 2-26 所示。（5）选择“在本地进行编辑，然后上传到远程服务器”单选按钮，然后单击“下一步” 按钮，则会打开一个选择测试文件对话框，如图 2-27 所示。在该对话框中输入浏览文件的地址，该地址是计算机的域名，或输入 http://122.0.0.1/。如果计算机上已经安装了 IIS 或 PWS，并且设置了默认的文档，就可以测试设置的地址是否正确。如果正确，在单击“测试 URL” 按钮后，会弹出一个对话框，告知用户测试成功。. 图 2-26. 选择处理文件方式和存储文件的位置. 图 2-27 选择测试文件对话框.

(19) 网页制作教程（第二版）. 32. （6）测试成功后，单击“下一步”按钮，则会打开一个对话框，如图 2-28 所示，询问用户是否使用远程服务器。如果需要则单击“是的，我要使用远程服务器”单选按钮，否则就选择“否”单选按钮。这里选择“是的，我要使用远程服务器”单选按钮。（7）单击“下一步”按钮，在弹出的对话框中选择连接服务器的方式以及文件的存储位置，如图 2-29 所示。. 图 2-28. 询问是否需要远程服务器. 图 2-29 选择服务器访问方式. （8）设置完成后，单击“下一步”按钮，将弹出对话框询问是否启用存回和取出功能，如图 2-30 所示。如果在该对话框中选择“是，启用存回和取出”单选按钮，可在“您叫什么名字？”文本框中输入出现在被验证文件旁的验证名称，在“您的电子邮件的地址是什么？” 文本框中输入电子邮件地址。这里选择“否，不启用存回和取出”单选按钮。（9）设置完验证功能后，单击“下一步”按钮，则会打开站点定义的最后一个对话框，如图 2-31 所示。在该对话框中显示了用户所设置的信息。如果对所进行的设置不满意，则单击“上一步”按钮，退到相应的步骤重新进行设置。如果对所进行的设置满意，则单击“完成” 按钮进行确认并关闭该对话框。. 图 2-30. 设置验证功能. 图 2-31 “站点定义”的最后一个对话框.

(20) 第 2 章创建站点. 33. 注意：上面只是以站点向导为例介绍创建站点的方法，其实，还可以在站点定义对话框中选择“高级”选项卡，在其中进行更为细致的设置，该方法适合有一定基础的用户，读者如果有兴趣，不妨试一试。 2．直接定义站点（1）选择“站点”|“新建站点”命令，弹出如图 2-24 所示的“站点定义”对话框，在对话框中选择“高级”选项卡，该对话框如图 2-32 所示。该对话框分为左右两部分，左边是 “分类”列表框，右边是与当前分类对应的选项组。（2）从“分类”列表框中选择“本地信息”选项，在“站点名称”文本框中输入新建站点的名称 Library，在“本地根文件夹”文本框中输入本地站点根目录的位置，在“HTTP 地址” 文本框中输入站点的 URL，选中“启用缓存”复选框。（3）如果要将本地站点传输到远程服务器上，则应在图 2-32 所示的“分类”列表框中选择“远程信息”选项，在“访问”下拉列表框中选择一种服务器访问方式，如图 2-33 所示，并按要求设置服务器的一些选项。. 图 2-32. “站点定义”对话框的“高级”选项卡. 图 2-33 设置远程信息. （4）设置完毕，单击“确认”按钮关闭该对话框，在“文件” 面板则会显示新建站点。单击面板上的按钮，打开站点管理窗口，如图 2-34 所示。因为是新建的一个站点，所在本地文件看到的是一片空白。. 图 2-34. 新建的 Library 站点.

(21) 网页制作教程（第二版）. 34. 在默认情况下，站点管理窗口的左边窗格显示远程站点，右边窗格显示本地站点，用户可以通过设置站点参数改变其位置。在站点管理窗口中，用户可以选择菜单“站点”|“新建站点”命令创建新站点，也可以使用“站点”|“编辑站点”命令编辑已有的站点。在 Dreamweaver 8 中除了可以创建本地站点外，还可以创建远程站点，即在 Web 服务器上创建站点，它可以被其他人通过 Internet 访问到。可以用 FTP 软件管理远程站点，也可以直接用 Dreamweaver 8 对远程站点进行管理。 2.2.3 站点的基本操作在 Dreamweaver 8 中创建好了本地站点后，即可对它进行相应操作，如打开站点、编辑站点、复制站点等。 1．打开站点如果要打开站点，先打开站点管理窗口，打开 “显示”下拉列表框（如图 2-35 所示），选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。. 图 2-35. 从站点管理窗口打开站点. 2．复制站点若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“管理站点”命令，打开“管理站点”对话框，如图 2-36 所示。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。. 图 2-36. “管理站点”对话框.

(22) 第 2 章创建站点. 35. 执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。注意：站点复制通常是为了维护多个不同的站点副本。例如，在一个完整的站点中可以包含所有的原材料，但在要上传的站点中，则应该删除网页中不需要的原材料（例如文本素材、图像素材等），这时可以用复制操作制作两个不同的站点以适应不同的情形。 3．编辑站点如果要更改当前站点设置，比如修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“管理站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑，如图 2-32 所示。 4．删除站点在 Dreamweaver 8 中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用 Dreamweaver 8 管理该文件夹而已。如果需要再次用 Dreamweaver 8 管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。 2.2.4 网页的基本操作在用 Dreamweaver 8 进行网页制作时，首先要了解其基本操作，如创建网页、打开网页、保存网页等。下面将分别进行介绍。 1．创建空白网页如果要创建新的网页文件，可以采用以下三种方法：（1）打开 Dreamweaver 8 起始页，单击“创建新项目”栏中的 HTML 超链接，即可打开一个新网页。（2）单击“文件”|“新建”命令，将弹出“新建文档”对话框，如图 2-37 所示。从该对话框的“类别”列表中选择一种类别，在“基本页”列表中选择一种需要创建的文档格式，然后单击“创建”按钮即可。（3）如果要基于模板创建文档，则可以在“新建文档”对话框中单击“模板”选项卡，此时对话框变为“从模板新建”对话框。从左侧的“模板用于”列表中选择模板所在的站点，在右侧的模板列表中选择一个模板，然后单击“创建”按钮，即可基于该模板创建新文档。 2．打开现有网页如果要打开现有网页文件，可以按照以下三种方法进行操作：（1）在 Windows 的资源管理器中，有鼠标右键单击要打开的文档图标，在弹出的可快捷菜单中选择“使用 Dreamweaver 8 编辑”选项，即可启动 Dreamweaver 8，并打开该文档。（2）启动 Dreamweaver 8，显示起始页。如果在“打开最近项目”栏中列出了需要的文档，直接单击该文档即可；如果需要的文档没有列出，可单击“打开最近项目”栏中的“打开” 超链接，将弹出“打开”对话框，如图 2-38 所示。在该对话框中选择需要打开的文档，单击 “打开”按钮即可。.

(23) 36. 网页制作教程（第二版）. 图 2-37. 图 2-38. “新建文档”对话框. “打开”对话框. （3）启动 Dreamweaver 8，显示起始页。单击“文件”|“打开”命令，同样会弹出“打开”对话框，在其中选择需要的文档，单击“打开”按钮。 3．保存网页要保存网页，可执行如下操作：将窗口切换到需要保存网页所在的 Dreamweaver 窗口，单击“文件”|“保存”命令。如果网页尚未保存过，则会弹出“另存为”对话框，如图 2-39 所示。选择路径并输入文件名，单击“保存”按钮即可保存网页。如果网页已经保存过，则不会弹出该对话框，系统直接将其保存到原位置。如果要将当前文件保存为其他名称或在其他位置保存，可以单击“文件”|“另存为”命令，也将弹出“另存为”对话框，在其中选择保存的路径并为网页命名，单击“保存”按钮即可。.

(24) 第 2 章创建站点. 图 2-39. 37. “另存为”对话框. 本章小结本章的重点内容是在 FrontPage 2003 和 Dreamweaver 8 基础上创建、管理站点。创建站点分创建本地站点和远程站点，而管理站点分为打开站点、编辑站点、删除站点、复制站点等多方面的工作。学完本章，读者应能熟练应用 FrontPage 2003 和 Dreamweaver 8 创建一个新站点，能够有效地维护本地站点和远程站点，并能为站点添加网页。. 习题一、填空题 1 ． FrontPage 2003 有 7 种视图可供选择，即 _____________ 、 _____________ 、 _____________、_____________、_____________、_____________和_____________。 2 ．一般情况下， FrontPage 2003 网页视图有 _____________ 、 _____________ 、 _____________、_____________以及其他编辑状态，在编辑框架网页时就会有_____________ 种编辑状态。 3．在创建一个新站点时，FrontPage 2003 会创建两个子文件夹，即_____________子文件夹和_____________子文件夹。_____________文件夹用来保存站点的页面所使用的图像文件， _____________文件夹用来设置用户不能访问的子目录。 4．在 FrontPage 2003 中，导入站点分为从_____________导入文件和从_____________导入文件等五种途径。 5．在发布站点之前，首先要看_____________。 6．站点的测试主要包括：____________、____________、____________、____________ 及测试网络连接等。 7．在网页中，根据超链接的链接目标，可将超链接大致分为两大类：一类是____________，.

(25) 网页制作教程（第二版）. 38. 另一类是_____________。 8．_____________是 Macromedia 公司推出的一款“所见即所得”的网页编辑软件，代码由软件自动生成。 9．在 Dreamweaver 8 中创建站点的方法有两种，分别为____________和____________。 10．打开 Dreamweaver 8 起始页，单击“创建新项目”栏中的_____________超链接，即可打开一个新网页。二、选择题 1．在 Dreamweaver 8 中，要显示或隐藏“属性”面板，应直接按下（）键。 A．Ctrl+F1 B．Ctrl+F2 C．Ctrl+F3 D．Ctrl 2．下列说法错误的是（）。 A．网页是在 WWW 上看到的画面 B．浏览器是一种应用软件 C．首页就是主页 D．网站是相互联系的多个页面的总和 3．下列说法正确的是（）。 A．删除操作可以真正删除站点文件夹和其中的内容 B．在创建站点选择路径时，不要选择某个磁盘分区作为站点 C．在创建站点选择路径时，不要选择某个文件夹作为站点 D．如果在站点发布之前为站点重命名，站点不会自动更改本地计算机或本地网络上该站点的路径三、简答题 1．在 FrontPage 2003 中，如何将文件夹转换为站点？ 2．在 Dreamweaver 8 中，创建新的网页文件可以采用哪几种方法？四、操作题 1．熟悉 FrontPage 2003 和 Dreamweaver 8 的界面，练习其基本操作。 2．在 FrontPage 2003 中，利用站点向导建立一个名为“我的个人网站”的个人站点，并在创建好的站点中新建一个“我的个人主页”网页。 3．在 Dreamweaver 8 中创建一个“中华网”的站点，HTTP 地址为 www.china.com；使用 FTP 上传，主机地址 member.china.com，用户名与密码为 china，最后再删除该站点。 4．在 Dreamweaver 8 中新建一个“我的家乡”网页，并保存到本地文件夹下。.

(26)