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