实验五 网页的简单制作1ppt课件.pptVIP

实验五 网页的简单制作 刘学勇 教育科学学院 实验目的： 1、了解站点的建立、编辑。 2、了解网页的布局。 3、了解网页模板的使用。 4、了解网站的发布。 Dreamweaver 创建 Web 站点的工作流程 可以用多种方式创建 Web 站点。本文档中介绍的工作流程首先定义站点的策略或目标。如果您正在开发 Web 应用程序，则必须根据需要设置服务器和数据库。然后再设计该站点的外观。当外观设计完成后，将生成该站点并编写页代码，以添加内容和交互控件；然后将页面链接在一起，并对该站点进行功能测试，以验证它是否符合定义的目标。您还可以在站点中包含动态页。在这一工作流程的最后，在服务器上发布该站点。许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常。 实验内容： 一、Dreamweaver 工作区 工作区布局 在 Windows 中，Dreamweaver 提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。 注意 Windows 工作区还有一个“编码器”选项，它默认将面板组停靠在左侧，并在“代码”视图中显示“文档”窗口。在 Macintosh 上，Dreamweaver 可以在带有标识每个文档的标签的单个窗口中显示多个文档。Dreamweaver 还可显示一个浮动工作区，其中的每个文档都显示在它自己的单独窗口中。面板组最初停靠在一起，但是可以将它们取消停靠使其位于自己的窗口中。当您拖动窗口或调整它们的大小时，窗口将自动彼此对齐或者与屏幕的边沿、“文档”窗口对齐。 1、工作区布局 2、Dreamweaver 工作区元素 3、“文档”窗口 4、“文档”工具栏 5、“标准”工具栏 6、状态栏 7、“插入”栏 8、“编码”工具栏 9、“样式呈现”工具栏 二、设置 Dreamweaver 站点 请执行以下操作： 选择“站点”“管理站点”。 出现“管理站点”对话框。 注意 ?如果您没有定义任何 Dreamweaver 站点，则会出现“站点定义”对话框，您可以跳过下一步。 单击“新建”按钮。 出现“站点定义”对话框。 执行下列操作之一： 单击“基本”选项卡以使用“站点定义向导”，它将引导您逐步完成设置过程。 鼓励不熟悉 Dreamweaver 的用户使用“站点定义向导”；有经验的 Dreamweaver 用户可能更喜欢使用“高级”设置。 单击“高级”选项卡以使用“高级”设置，它使您可以根据需要分别设置本地、远端和测试文件夹。 若要开始，可以完整地设置一个 Dreamweaver 站点，或者就以第一步开始，设置本地文件夹。 完成 Dreamweaver 站点设置过程： 在“站点定义向导”中，回答每一屏上出现的问题，然后单击“下一步”继续进行设置，或者单击“上一步”返回到前一屏。 对于“高级”设置，根据需要完成“本地信息”类别、“远端信息”类别和“测试服务器”类别（请参见使用“高级”设置来设置 Dreamweaver 站点）。 ? 设置好 Dreamweaver 站点后，最好将该站点导出，以便拥有一个本地备份副本。有关更多信息，请参见导入和导出站点。 设置本地文件夹 本地文件夹是 Dreamweaver 站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。 若要设置本地文件夹，请执行以下操作： 选择“站点”“管理站点”。 出现“管理站点”对话框。 注意? 如果您没有定义任何 Dreamweaver 站点，则会出现“站点定义”对话框，您可以跳过下一步。 单击“新建”。 出现“站点定义”对话框。 如果未显示“高级”设置，请单击“高级”按钮。 “站点定义”对话框的“高级”选项卡显示“本地信息”类别选项。 输入“本地信息”选项。 （可选）如果已经做好了设置远端服务器的准备，请跳过剩下的步骤；选择左侧的“远端信息”类别，然后完成该对话框。 有关更多信息。 单击“确定”。 Dreamweaver 创建初始站点缓存，新的 Dreamweaver 站点显示在“文件”面板中。 三、对页进行布局 创建页布局的一种常用的方法是使用 HTML 表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对 Web 页进行布局。为了简化使用表格进行页面布局的过程，Macromedia Dreamweaver 8 提供了“布局”模式。 在“布局”模式中，您可以使用表格作为基础结构来设计您的页，同时避免使用传统的方法创建基于表格的设计时经常出现的一些问题。局。 关于“布局”模式 从“标准”模式切换到“布局”模式 在“布局”模式中绘制 将内容添加到布局单元格中 清除自动设置的单元格高度 调整布局单元格和表格的大小以及移动它们 设置布