实验五网页的简单制作.ppt

实验五 网页的简单制作,刘学勇 教育科学学院,实验目的： 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 提供了“布局”模式。 在“布局”模式中，您可以使用表格作为基础结构来设计您的页，同时避免使用传统的方法创建基于表格的设计时经常出现的一些问题。局。 关于“布局”模式 从“标准”模式切换到“布局”模式 在“布局”模式中绘制 将内容添加到布局单元格中 清除自动设置的单元格高度 调整布局单元格和表格的大小以及移动它们 设置布局单元格和表格的格式 设置列宽度,四、创建 Dreamweaver 模板 可以从现有文档（如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文档）中创建模板，或者从新建的空白文档中创建模板。 创建模板后，可以插入模板区域。您也可以为代码颜色和模板区域高亮颜色设置模板首选参数。 您可以在模板的“设计备注”文件中存储关于模板的附加信息（如创作者、最后一次更改的时间或作出某些布局决定的原因）（基于模板的文档不继承模板的设计备注。 若要创建模板，请执行以下操作： 打开要另存为模板的文档： 若要打开一个现有文档，请选择“文件”“打开”，然后选择该文档。 若要打开一个新的空文档，请选择“文件”“新建”。在出现的对话框中，选择“基本页”或“动态页”，选择要使用的页面类型，然后单击“创建”。 文档打开时，执行下列操作之一： 选择“文件”“另存为模板”。 在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择“创建模板”。 除非您以前选择了“不再显示此对话框”，否则您将收到一个警告，表示您正在保存的文档中没有可编辑区域。单击“确定”将文档另存为模板，或单击“取消”退出此对话框而不创建模板。 出现“另存为模板”对话框。,从“站点”弹出菜单中选择一个用来保存模板的站点，并在“另存为”文本框中为模板输入一个唯一的名称。 单击“保存”。 Dreamweaver 将模板文件保存在站点的本地根文件夹中的 Templates 文件夹中，使用文件扩展名 .dwt。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在您保存新建模板时自动创建该文件夹。 不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。此外，不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。 使用“资源”面板创建新模板 在“资源”面板（“窗口”“资源”）中，选择面板左侧的“模板”类别。 即会显示“资源”面板的“模板”类别。 单击“资源”面板底部的“新建模板”按钮。 一个新的、无标题模板将被添加到“资源”面板的模板列表中。 在模板仍处于选定状态时，输入模板的名称，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 Dreamweaver 在“资源”面板和 Templates 文件夹中创建一个新的空模板。,五、网页的发布：IIS之Web服务器安装步骤 1、插入windows xp安装光盘，打开控制面板，然后打开其中的“添加/删除程序” 2、在添加或删除程序窗口左边点击“添加/删除Windows组建”1 3、捎带片刻系统会启动Windows组建向导，在Internet信息服务（IIS）前面选勾，点击下一步： 4、系统安装成功，系统会自动在系统盘新建网站目录，默认目录为：C:Inetpubwwwroot 5、打开控制面板性能和维护管理工具Internet 信息服务： 6、在默认网站上点击右键选择属性： 7、点击主目录：在本地路输入框后点击浏览可以更改网站所在文件位置，默认目录为：C:Inetpubwwwroot 在执行权限后面点击配置调试教本错误信息，选中：向客户端发送文本错误信息：处理 URL 时服务器出错。请与系统管理员联系。 点击文档：可以设置网站默认首页，推荐删除iisstart.asp，添加index.asp和index.htm 点击目录安全性：点击编辑可以对服务器访问权限进行设置 8、把凡人网络购物系统V7.0文件复制到你选择的网站目录下，假设你选择的目录为默认目录：C:Inetpubwwwroot 9、把frshop.rar解压之后的文件复制到C:Inetpubwwwrootshop下即可 10、您可以通过以下方式访问商城： http:/localhost/shop/ 或 /shop/ 或 http:/计算机名/shop/ 或 http:/本机IP地址/shop/ 访问 其它人可以通过http:/计算机名/shop/ 或 http:/本机IP地址/shop/ 访问 11、如果您有域名，把域名解析到本地IP地址，即可通过http:/域名/shop/,编辑本段IIS之Web服务器建立 IIS之Web服务器 建立第一个Web站点 比如本机的IP地址为，自己的网页放在D:Wy目录下，网页的首页文件名为Index.htm，现在想根据这些建立好自己的Web服务器。 对于此Web站点，我们可以用现有的“默认Web站点”来做相应的修改后，就可以轻松实现。请先在“默认Web站点”上单击右键，选“属性”，以进入名为“默认Web站点属性”设置界面。 1修改绑定的IP地址：转到“Web站点”窗口，再在“IP地址”后的下拉菜单中选择所需用到的本机IP地址“”。 2修改主目录：转到“主目录”窗口，再在“本地路径”输入（或用“浏览”按钮选择）好自己网页所在的“D:Wy”目录。 3添加首页文件名：转到“文档”窗口，再按“添加”按钮，根据提示在“默认文档名”后输入自己网页的首页文件名“Index.htm”。 4添加虚拟目录：比如你的主目录在“D:Wy”下，而你想输入“/