第二次实验要求

要求 练习要求 练习 3 1 实验 上交实验实验 上交实验 3 2 3 3 1 3 3 2 三个实验三个实验 第三章第三章 Dreamweaver 网页设计网页设计 实验实验 3 13 1 本地站点管理本地站点管理 相关知识相关知识 1 站点是构建在网络上 具有独立名称的逻辑上的独立体 大到一个网站 小到一个 网页 2 通常将存储于 Internet 服务器上的站点和相关文档称为远程站点 将存储于本地计 算机上的站点和相关文档称为本地站点 在网站建设中 一般的步骤是 先在本地计 算机上创建本地站点 然后再将本地站点的相关文档通过 FTP 等方式上传到服务器上 3 为了有效地管理站点中的文件 在制作网页之前应先规划站点的目录结构 然后定 义一个站点 将站点中的全部文件分门别类地放在不同的文件夹下 一 实验目的和要求一 实验目的和要求 1 掌握创建本地站点的方法 2 掌握编辑和删除本地站点的方法 3 掌握在本地站点中新建 复制 粘贴 删除和重命名文件夹方法 4 掌握在本地站点中新建 复制 粘贴 删除和重命名文件的方法 二 实验步骤二 实验步骤 1 创建本地站点 1 单击 站点 新建站点 菜单命令 打开站点定义向导 切换到 基本 选 项卡下 输入站点名称为 NewSite 单击 下一步 按钮 2 选中 否 我不想使用服务器技术 选项 单击 下一步 按钮 3 选中 编辑我的计算机上的本地副本 完成后再上传到服务器 推荐 选项 单击 浏览 按钮设置将文件存储在计算机上的位置 单击 下一步 按钮 4 在 您如何连接到远程服务器 下拉列表中选择 无 单击 下一步 按钮 5 检查对话框中所设置的信息是否正确 如果有错误 可以单击 上一步 按钮 修改本地站点设置信息 如果正确 则单击 完成 按钮 2 管理本地站点 1 单击 站点 管理站点 菜单命令 打开 管理站点 对话框 单击 编辑 按钮可以对已有站点重新进行编辑 2 打开 站点定义 对话框 切换到 高级 选项卡下 在 分类 列表框中选择 本地信息 选项 可以设置默认图像文件夹 链接相对于文档还是站点根目录 HTTP 地址等内容 在 分类 列表框中选择 远程信息 选项 在 访问 下拉列表中选择 FTP 可以设置 FTP 主机名 主机目录 登录用户名 密码等内容 单击 测试 按钮 可 以检查是否能登录到指定主机 在 分类 列表框中选择 测试服务器 选项 可以设置服务器模型 访问方式 并进行测试 3 在 管理站点 对话框中 单击 复制 删除 导入 导出 按钮可以对 已有站点进行管理 单击 完成 按钮可以关闭 管理站点 对话框 3 创建文件夹 1 打开 文件 浮动面板 选中 NewSite 本地站点 2 在面板的空白处单击鼠标右键 在弹出的快捷菜单中选择 新建文件夹 菜单命 令 输入文件夹名称 web 3 按照同样的方法 新建文件夹 image 4 创建文件 1 打开 文件 浮动面板 选中文件夹 web 单击鼠标右键 在弹出的快捷菜单 中选择 新建文件 菜单命令 输入文件名 index html 2 按照同样的方法 新建文件 main html 5 编辑文件夹和文件 打开 文件 浮动面板 选中文件夹或文件 单击鼠标右键 在弹出的快捷菜单中选 择 编辑 菜单命令 可以对文件夹或文件进行剪切 复制 粘贴 删除 重命名操作 6 显示站点地图 一旦对站点中的文件建立超链接 就可以非常直观地在站点地图中看到各网页的链接 关系 打开 文件 浮动面板 单击 展开以显示本地和远端站点 按钮可以展开或折 叠站点地图 打开的窗口中左边是站点地图 右边是站点文件的目录结构 操作技巧与注意事项操作技巧与注意事项 1 尽量使用小写英文字母给站点 站点中的文件夹 文件命名 2 应将网页文件按照类型 用途等保存在不同的文件夹中 实验实验 3 23 2 制作简单网页制作简单网页 相关知识相关知识 1 网页就是在浏览器上看到的一个一个的页面 它们都是用 HTML 的文件格式来表 示的 2 在页面属性中 可以对网页的标题 背景颜色等进行设置 3 在 HTML 文档中 文件头和标签之间的内容在网页中是看不到的 可以在文件头信息中插入 META 关键字 说明等 META 元素用于描述网页文件自 身的信息 在搜索引擎中 检索信息都是通过输入关键字来实现的 4 在历史面板中 按照操作的顺序记录了使用者在文档窗口中的所有操作 使用历史 面板可以非常方便地撤销以前的操作或再次执行某些操作 一 实验目的和要求一 实验目的和要求 1 熟悉 Dreamweaver 工作环境 2 掌握创建网页文档的方法 3 掌握页面属性设置的方法 4 掌握在页面中插入和编辑文本的方法 5 掌握在页面中创建项目列表的方法 二 实验步骤二 实验步骤 1 新建一个网页文档 启动 Dreamweaver 单击 文件 新建 菜单命令 新建一个网页文档 2 设置页面属性 1 单击 修改 页面属性 菜单命令 打开 页面属性 对话框 2 在 分类 列表框中选择 外观 设置页面 字体 为 宋体 字体 大小 为 中 文本颜色 为 0033FF 背景颜色 为 FFFFCC 3 在 分类 列表框中选择 标题 编码 选项 设置 标题 为 我的第一个网 页 4 单击 确定 按钮 3 格式化文本 1 在文档的第 1 行输入 网页制作课程介绍 2 选中所有文字 在属性面板的 字体 下拉列表中选择 黑体 在 大小 下 拉列表中选择 大 单击 居中对齐 按钮 3 如果字体下拉列表中没有 黑体 则单击 字体 下拉列表中的 编辑字体列 表 选项 打开 编辑字体列表 对话框 4 在对话框的 可用字体 列表中选中 黑体 单击按钮 将 黑体 添加到 选择的字体 列表中 单击 确定 按钮 将 黑体 添加到字体下拉列表中 4 创建项目列表 1 在文档的第 2 行输入 网页布局软件 Dreamweaver 第 3 行输入 图像处理软 件 Fireworks 第 4 行输入 动画制作软件 Flash 2 选中第 2 4 行所有文字 在属性面板中单击 项目列表 按钮 创建项目列表 5 添加特殊网页元素 1 将光标放在第 1 行末尾处 单击 插入 日期 菜单命令 打开 插入日期 对话框 在对话框的 星期格式 下拉列表中选择 星期四 在 日期格式 列表 中选择 1974 年 3 月 7 日 在 时间格式 下拉列表中选择 10 18 PM 选中 储 存时自动更新 复选项 单击 确定 按钮 插入当前系统日期和时间 并且在文档 每次修改后都会自动更新插入的日期和时间 2 将光标放在第 1 行末尾处 单击回车键 将光标放在第 2 行起始处 3 单击 插入 HTML 水平线 菜单命令 在文档中插入一条水平线 4 选中该水平线 在属性面板中 设置水平线的 宽 为 700 像素 高 为 5 像素 在 对齐 下拉列表中选择 居中对齐 设置 阴影 复选项为不选中 6 使用颜色面板 在网页设计中 很多场合都需要使用颜色面板设置颜色 对颜色面板的操作方法是相 同的 这里以设置文本的颜色为例进行说明 1 选中文本 在属性面板中 单击 文本颜色 按钮 打开颜色面板 如图 3 1 所 示 图 3 1 颜色面板 2 选取一种颜色 如果颜色面板中没有符合需要的颜色 可以单击颜色面板上的 系统颜色拾取器 按钮 打开 颜色拾取器 面板 自己拾取一种颜色 7 插入文件头信息 1 单击 插入 HTML 文件头标签 META 菜单命令 打开 META 对话框 在对话框的 属性 下拉列表中选择 名称 设置 值 为 Content Type 设置 内容 为 text html charset gb2312 单击 确定 按钮 即可设置 META 元素 2 单击 插入 HTML 文件头标签 关键字 菜单命令 打开 关键字 对话框 在文本框中输入关键字 多个关键字之间用逗号分隔 单击 确定 按钮 即可插入关键字 实现按关键字对网站信息的搜索 3 单击 插入 HTML 文件头标签 说明 菜单命令 打开 说 明 对话框 在文本框中输入说明文字 单击 确定 按钮 即可插入说明 4 单击 插入 HTML 文件头标签 刷新 菜单命令 打开 刷 新 对话框 设置 延迟 为 500 秒 在 操作 处选中 刷新此文档 单击 确定 按钮 即可实现对页面的自动定时刷新 8 使用历史面板 1 单击 窗口 历史记录 菜单命令 打开 历史记录 面板 拖动 历史 记录 面板上的滑块 可以撤销若干操作 回到操作前的状态 2 按住 Shift 键 单击 历史记录 面板上的多个记录 单击 历史记录 面板右上角的按钮 弹出快捷菜单 选择 重播步骤 菜单命令 可以再次执行 这些操作 3 单击 历史记录 面板右上角的按钮 弹出快捷菜单 选择 清空历史记 录 菜单命令 可以清空所有历史记录 9 保存网页文档 单击 查看 工具栏 标准 菜单命令 添加标准工具栏 在标准工具 栏上单击 保存 按钮 文件命名为 index html 将网页文档保存 10 预览网页 单击 F12 或者单击 文件 在浏览器中预览 IExplore 6 0 菜单 命令 在浏览器中打开网页 可以预览设计效果 操作技巧与注意事项操作技巧与注意事项 1 在设置页面属性时 一般将左右边距都设置为 0 使得页面不会有太多空白区 2 文件头信息还包括基础和链接等 它们在网页中是不可见的 实验实验 3 33 3 超链接和导航条超链接和导航条 相关知识相关知识 1 URL Uniform Resource Locators 的中文全称是 统一资源定位器 它的功能 是提供一种在 Internet 上查找任何信息的标准方法 2 超链接是网页中由一个地方跳转到另一个地方 网页 网站或文件的指针 3 绝对路径提供链接目标端点所需的完整的 URL 地址 包括使用的协议类型 4 相对路径是目标端点与源端点之间的相对位置 它的参考点是源端点 与协议类型 网址和根目录的位置无关 5 基于根目录的路径可以看作是一个基于本网站的根目录的相对路径 通常用一个 表示根目录 不管源端点在哪个文件中 都可以使用正确的路径链接到指定的位 置 实验实验 3 3 1 一 实验目的和要求一 实验目的和要求 1 掌握创建文本超链接的方法 2 掌握创建图像超链接的方法 3 掌握创建电子邮件超链接的方法 4 掌握创建锚记超链接的方法 5 掌握设置超链接属性的方法 二 实验步骤二 实验步骤 1 新建一个网页文档 启动 Dreamweaver 单击 文件 新建 菜单命令 新建一个网页文档 2 创建文本超链接 1 在网页中输入 文本超链接 选中这些文字 2 打开属性面板 执行以下操作之一 在 链接 选项处直接输入链接的 URL 单击 链接 选项后面的 浏览 按钮 打开 选择文件 对话框 选中 要链接的文件 直接拖动 链接 选项后面的 指向文件 按钮 到站点中要链接的文件上 3 在属性面板的 目标 下拉列表中选择 blank 在新的浏览器窗口中打开目 标网页 3 创建图像超链接 1 在网页中单击 插入 图像 菜单命令 选择一幅图像 插入到网页中 并 将其选中 2 打开属性面板 执行以下操作之一 在 链接 选项处直接输入链接的 URL 单击 链接 选项后面的 浏览 按钮 打开 选择文件 对话框 选中 要链接的文件 直接拖动 链接 选项后面的 指向文件 按钮 到站点中要链接的文件上 3 在属性面板的 目标 下拉列表中选择 blank 在 替换文本 处输入 图 像超链接 4 创建电子邮件超链接 1 单击工具栏中的 电子邮件链接 按钮 或者单击 插入 电子邮件链 接 菜单命令 打开 电子邮件链接 对话框 2 在对话框的 文本 处输入链接提示文字 联系我们 在 E Mail 文本框中 输入 E Mail 地址 web 3 在属性面板的 目标 下拉列表中选择 blank 5 创建锚记超链接 1 在网页中 将插入点放置到要创建锚记的位置上 2 单击工具栏中的 命名锚记 按钮 或者单击 插入 命名锚记 菜单 命令 打开 命名锚记 对话框 在 锚记名称 文本框中输入锚记名称 anchor 单击 确定 按钮 在文档中出现一个锚标记 3 选中要创建链接的文本 在属性面板的 链接 文本框中输入锚记的超链接地址 如果锚记在当前文档中 则输入 anchor 如果锚记不在当前文档中 则输入链接 文档的 URL anchor 6 设置超链接的属性 1 单击 修改 页面属性 菜单命令 打开 页面属性 对话框 2 在 分类 列表中选中 链接 选项 在 链接字体 下拉列表中选择 黑体 在 大小 下拉列表中选择 中 设置 链接颜色 为 0033FF 设置 已访问链 接 颜色为 999999 在 下划线样式 下拉列表中选择 始终无下划线 实验实验 3 3 2 一 实验目的和要求一 实验目的和要求 掌握检查链接的方法 二 实验步骤二 实验步骤 1 打开网页 单击 文件 打开 菜单命令 打开实验 3 3 1 制作的网页 link html 2 检查链接 1 执行以下操作之一 打开 链接检查器 面板 单击 站点 检查站点范围的链接 菜单命令 打开 文件 浮动面板 选中站点 单击鼠标右键 弹出快捷菜单 选择 检查链接 整个本地站点 菜单命令 2 在 链接检查器 面板上单击 检查链接 按钮 在弹出的快捷菜单中选择 检 查整个当前本地站点的链接 如图 3 2 所示 图 3 2 检查链接 按钮的快捷菜单 3 在 链接检查器 面板上 选中 显示 下拉列表中的 断掉的链接 选项 在 链接检查器 面板上立刻可以显示检查结果 如图 3 3 所示 双击 断掉的链接 列表中的文件 立刻将该文件打开 这时可以直接修改链接 URL 地址 图 3 3 链接检查器 面板 实验实验 3 3 3 一 实验目的和要求一 实验目的和要求 掌握制作导航条的方法 二 实验步骤二 实验步骤 1 新建一个网页文档 启动 Dreamweaver 单击 文件 新建 菜单命令 新建一个网页文档 2 插入导航条 1 制作 5 个大小 风格相同的关于 新闻资讯 公司简介 产品项目 合作 伙伴 招聘信息 的图片 每个图片还要制作出四种不同的效果 为原始图像 鼠 标经过图像 按下图像和按下时鼠标经过图像四种状态服务 2 将光标放在网页上要插入导航条的位置上 单击 插入 图像对象 导 航条 菜单命令 或者单击工具栏中的 图像