DW网页制作教程案例

计算机网络技术 系列校本教材 Dreamweaver 进阶与实例 施 琛 编著 苏州技师学院 信息工程系 前 言 当前 计算机网络技术迅速发展 国民经济各部门 对计算机网络技术的应用日益广泛 对计算机网络技术 人员的需求越来越迫切 为了培养计算机网络技术人员 的需要 不断提高教学质量 在苏州市劳动与社会保障 局领导和苏州技师学院领导的支持下 苏州技师学院信 息工程系的专业教师编写了此 计算机网络技术 系列 校本教材 这次编写的计算机网络技术系列校本教材包 括投影片制作 POWERPOINT VB 程序设计 动画设计 FLASH 常用工具软件 C 语言程序设计 图形图像处理 PHOTOSHOP 网站建设 DREAMWEAVER 数据库操作 ACCESS 和局域网安装与维护技能 参与编写 学习领域 计算机网络技术系列校本教 材的教师有夏国亭 林春生 刘志毅 刘俊燕 崔志华 施琛 罗清波 卜强和华康老师 计算机网络技术系列 校本教材是本着改革创新的精神组织编写的 作为 学 习领域 校本教材 适用于 行为引导型 教学法 符 合循序渐进的要求 从打好基础入手 突出操作技能训 练的特点 着力培养学生多种能力 作为系列化校本教 材 各教材的 工作页结构 得到了 学习领域 王生 专家的指点 在此表示衷心感谢 由于计算机网络技术发展迅速 知识更新快 而 编者水平有限 书中不妥之处在所难免 恳请读者批评 指正 编者 2008 年 9 月 目录 学习领域 1 Dreamweaver 基础 1 学习单元 1 工作区的选 取 1 学习单元 2 站点的 建立 5 学习单元 3 页面 设置 15 学习单元 4 网页的布局和 规划 21 学习单元 5 站点上传 27 学习领域 2 Dreamweaver 进阶 31 学习单元 1 表格的设置 31 学习单元 2 单元格的设置 39 学习单元 3 网页的布局设置 43 学习单元 4 超级链接 的实现 51 学习单元 5 库的应用 59 学习单元 6 模板的应用 65 学习单元 7 表单的应用 73 学习单元 8 层的应用 77 学习单元 9 CSS 的应用 83 学习单元 10 CSS 自定义样式 93 学习单元 11 CSS 的特殊设置 99 学习领域 3 Dreamweaver 实例 107 学习单元 1 网页实例 107 学习单元 2 网页上机实践 113 学习单元 3 网站实例 一 115 学习单元 4 网站实例 二 127 学习单元 5 网站制作上机实践 135 学习单元 6 网页综合实例 137 学习单元 7 网页综合实例上机实践 145 附 教学大纲 147 1 Dreamweaver 基础 工作区的选取 学习目标 掌握 Dreamweaver 工作区的选择 掌握 Dreamweaver 工作区的更改 学习时间 2 学时 DreamweaverMX 提供了两种可供选择的工作区布局 一种将 全部元素置于一个窗口中的集成布局和一种非类似于 Dreamweaver4 的浮动布局 第一次运行 DreamweaverMX 需要选择 一种工作区布局 选择 DreamweaverMX 工作区 2 两种布局的喜好因人而异 如果选择的是 DreamweaverMX 工作区 想改成 Dreamweaver4 工作区 可以使用 参数选择 对话框切 换 选择更改工作区 3 使用 DreamweaverMX 工作区 默认的界面中 工作区很小 如果 要把工作区变大 选择三角形按钮 就可以隐藏面板组和属性面 板 如果要使用面板组 再点击三角形按钮 4 内容延伸 Dreamweaver MX 简介 Macromedia Dreamweaver MX 是一个可视化的网页设计和网 站管理工具 支持最新的 Web 技术 包含 HTML 检查 HTML 格式 控制 HTML 格式化选项 HomeSite BBEdit 捆绑 可视化网页设 计 图像编辑 全局查找替换 全 FTP 功能 处理 Flash 和 Shockwave 等富媒体格式和动态 HTML 基于团队的 Web 创作 在 编辑上你可以选择可视化方式或者你喜欢的源码编辑方式 Dreamweaver MX 新增功能如下 加强的用户界面 多重用户 配置 增强的源代码编辑功能 扩展的文档格式支持 加强的服 务器模式扩展 改进的数据库链接操作 提升了与外部应用程序 的协作功能 学生分组讨论 由代表上讲台展示讨论内容 5 Dreamweaver 基础 站点的建立 学习目标 了解网页制作的流程 掌握使用 Dreamweaver 建立站点 掌握站点文件的创建 学习时间 2 学时 DreamweaverMX 中文版的出现 使制作一个功能强大的网站 变得很容易 可以轻易的做出以前被认为很复杂的 ASP PHP 网 站 通过建站实例 一步一步的带大家掌握网页制作技术 做网 站制作中 首先要了解的就是制作流程了 新建站点 站点文件命名 定义页面属性 插入表格 定义 页面大小 转换到布局视图 添加内容 插入导航条 转换到标 准视图工作 添加链接 使用代码片断 定义及应用 CSS 添加 动态交互 链接站点各个页面 以上是一个静态网站建设流程和需要掌握的技术 在后面的 几篇文章中 将通过建立一个网站实例 具体介绍这些内容 站点的建立 建立一个网站 首先要在本地机器上做好网站 再传到网上 的虚拟空间上 接下来主要介绍本地站点的建立 站点文件命名 简明步骤 在 C 盘新建一个文件夹 在 Dreamweaver 中定义站点 新建文件和文件夹 给文件和文件夹命名 目标是做一个个人 网站 打开 我的电脑 打开 C 盘 点鼠标右键 选择新建 6 选择文件夹选项 C 盘下会出现一个新建文件夹图标 输入你想要的站点名称 这里输入 SGJ 其实可以任意输入名称的 要注意的是 尽量不要用中文命名 以免出现意想不到的麻烦 现在开始在 DreamweaverMX 中把 SGJ 这个文件夹定义为站点 打 开 Dreamweaver 在菜单栏上 点击站点菜单 选择新建站点 7 接下来需要给站点起一个名字 可以起任意一个名字 这里起名为 SGJ 按下一步 按下一步按钮 选择是否使用服务器技术 因为实例建立的是一 个静态站点 就选择 否 我不想使用服务器技术 8 按下一步按钮 因为要传到网上的虚拟主页空间 就要选择 编 辑我的计算机上的本地副本 完成后再传到服务器上 接着 选择要定义的本地根文件夹 9 这里选择 SGJ 文件夹 点 选择 按钮 因为没有使用远程服务器 就选择 无 按下一步 10 按完成按钮 一个站点就定义好了 新建网页文件和文件夹 站点定义好之后 就要开始新建网页文件和文件夹了 在站点中 点击右键 选择新建文件 11 给新建的文件输入名称 新建文件夹与新建文件类似 就不重复了 在文件命名和站点结 构方面 养成良好的习惯很重要 注 网站首页默认的文件名 取决于你申请的主页空间 一般是 index htm index html default htm 等 同类型的文件 最好放 在一个文件夹中 例如把图片文件 都放在 image 文件夹中 不 要把所有文件都放在根目录下 把一个栏目的所有文件放在一个 文件夹中 在链接网页和维护时 会很方便 文件和文件夹的命 名 可以用栏目名称的拼音 也可以用栏目名称的英文 团队开 12 发时 有统一的命名规则相当重要 例如 jianli bbs 作文件夹 名称 应该有人发现了 DreamweaverMX 默认扩展名是 htm 修改 DreamweaverMX 的一个配置文件 就可以把默认扩展名从 htm 改 到 html 以 windows2000 操作系统 DreamweaverMX 默认安装路径为例 找到 文件名 MMDocumentTypes xml 这个文件 此文件位于 C ProgramFiles Macromedia DreamweaverMX Configuration D ocumentTypes 文件夹下 双击 MMDocumentTypes xml 在 DreamweaverMX 中打开 把第三行的 html 移动到 htm html shtml shtm stm lasso xhtml 这部分最前面的位置 就是改成 html htm shtml shtm stm lasso xhtml 然后保存 文件 重新打开 DreamweaverMX 新建一个文件 默认扩展名变 成 html 了 其它扩展名修改方法类似 13 内容延伸 为什么要创建站点 创建站点是第一步很重要 创建之后 Dreamweaver 就可以 帮忙来管理站点 比较说插入图片的时候将图片都放在定义站点 的文件夹内 代码自动写入相对地址 保证网站发布的时候完整 如果不定义站点 则代码就会写成绝对地址 指向本地电脑 发 布的时候图片链接会失效 总而言之将所用的文件都放在定义站点的文件夹内就没有问 题的 如果你定义好了站点 一旦出现站点外的文件 Dreamweaver 会提醒你的 学生分组讨论 由代表上讲台展示讨论内容 14 15 Dreamweaver 基础 页面设置 学习目标 了解整个网页的设置的一般步骤 掌握使用 Dreamweaver 对网页的页面进行设置 掌握网页的颜色选取的方法和依据 学习时间 2 学时 页面设置 双击 SGJ 站点中的 index htm 打开一个空白的页面 我们 将从这个空白页面开始制作 了解页面属性的设置和作用 在工 作区点鼠标右键 选择页面属性 打开页面属性对话框 16 下面是设置的一个页面属性 在标题上输入 5dmedia 在背景 文本 链接 访问过的链接 活动链接几部分选取颜色 设置左边界 顶部边界 边界宽度 边界高度都为 0 可以使页面中的表格与背景没有空隙 17 如果不设置设置左边界 顶部边界 边界宽度 边界高度 就会 与顶部和左边有明显的空隙 用得比较多的还有背景图像 选择一个已经做好的图像 就 可以设置成页面的背景图像 颜色布局 网页设计中 颜色是最关键的 决定了一个网站在美工方面 是否成功 现在流行的网页设计配色 采用黑 白 灰这些无彩 色作基调 采用一种精确的有彩色作为主色调 大多使用一种颜 色的渐变 让人感觉只有一种有彩色 在下面 主要针对相近颜 色 无彩色和有彩色的精确选取三部分 下面将以调整页面属性的颜色为实例 选择颜色选取框 18 打开颜色选取面板 精确选取有彩色 如果要精确选取各种颜色 特别是各种有彩色 就要使用 系统 颜色拾取器 单击 系统颜色拾取器 打开颜色面板 19 拖动最右边的滑块 调整高度 选择连续色调 在网页设计时 常使用相近的颜色 点三角形 按钮 选 连续色调 无彩色的选取 选择 灰度级 可以选取从白到黑各种无彩 色 不要选中 调整到网页安全色 如果选中这一项 会减少可选 择的颜色数 20 内容延伸 背景图不能在 IE 中预览 有时候用 Dreamweaver mx 的页面属性设置的背景图不能在 IE 中预览 因为图片的存储路径是带有中文名的文件夹 Dreamweaver 代码里是显示不了中文的编写语言 所以当背景图 是选择的带有中文名的文件里添加的 那么在 Dreamweaver 里的 代码视图里会显示乱码 总而言之将所用的文件都放在定义站点的文件夹 并且文件 夹是英文的就没有问题的 学生分组讨论 由代表上讲台展示讨论内容 21 Dreamweaver 基础 网页的布局和规划 学习目标 了解如何对网页进行整体布局 了解网页版式的一般规划 掌握使用表格布局 学习时间 2 学时 网页布局 现在有好几种尺寸的显示器 网页要在每个显示器上显示正 常 就要设置恰当的参数 常用的是在页面中插入表格放内容 采用象素和百分比两种 采用象素为单位 是以使用最多的显示器的分辨率为参照的 使用百分比 可以在各种显示器上有相同的效果 宽度设置为 100 时 在各种显示器上全屏显示 下面分别介绍这两种方法 简明步骤 打开一个页面 插入表格 设置表格宽度 在以前建立的 SGJ 站点中 新建 index htm 文件 双击打开 点击插入表格图标 22 打开 插入表格 对话框 设置行数为 1 列数为 1 宽度选百 分比 值为 100 边框为 0 一个可以在各种显示器上全屏幕显示的网页就搭建好了 以后要 做的是在表格里填充内容 下面介绍象素大小的表格设置 选择像素为单位 值为 768 可 以在 15 英寸显示器上全屏幕显示 在 17 英寸显示器上也有好的 显示效果 相对使用百分比制作网页 采用像素比较简单 23 做一个在 800 600 分辨率下满屏幕显示的页面 可以大致选择 一个近似的值 宽 768 高 430 宽 776 高 430 等 用像 素为单位的表格 大多是把表格设置为居中对齐 选中表格 在 属性面板选择对齐方式为居中对齐 版式规划 设计精美的网站 都是采用了优秀的版式设计 做一个网页 先要规划好版式 这里主要介绍制作网页时的版式设计 几种常 用的版式 分栏结构 LOGO 标志 尺寸 Banner 横幅 尺 寸 导航栏类型 导航菜单位置 网页内容 版权声明 24 以上是一个主页的简单结构 由三个表格组成 第一个表格 二 行一列 第一行放 LOGO 和 Banner 第二行放导航菜单 中间一个表格 一行二列 里面再分别插入两个表格 左边表格 放导航或者图片 右边表格放网页内容 典型的二分栏结构 下面一个表格 一行一列 放版权声明 实际中 Banner 和 LOGO 尺寸是根据设计需要选择大小 并不 受标准的限制 常见的 LOGO 在页面的左上方 Banner 在页面的 右上方 常见的分栏结构 还有三分栏 四分栏 下面是一个三分栏 的结构 最下面的表格 一行一列 放版权声明 联系方式 导航栏在网页的设计中 直接关系到使用网页的方便 和整 个网页的美观也有很大关系 内容延伸 主页和网页 网页 Web Page 和主页 Home Page 是两个不同的概念 每一个 HTML 文件都是一个网页 而主页指的是一个网站所有网 25 页中的首页 不过平常一般也没有必要严格区分它们 但这里要 指定的 Home Page 就是整个网站的首页 通常首页都命名为 index htm index html default htm 或 default html 之一 并且这个名字不能随便起 必须根据远程服务器的要求来定 而 网页就没有此规定 学生分组讨论 由代表上讲台展示讨论内容 26 27 Dreamweaver 基础 站点上传 学习目标 掌握站点的测试 掌握站点的上传 学习时间 2 学时 站点的测试 一个站点做好后 需要对站点进行测试 1 打开窗口菜单 结果 链接检查器 或者按 Ctrl Shift F9 快捷键 打开 2 点击无效链接 点最右边黄色的文件夹图标 选择正确的文 件 3 在站点报告测试 4 选择报告的内容 运行报告 28 5 检查浏览器的兼容性 站点上传 一个站点经过测试 修改所有错误之后 就可以上传了 1 点击 站点菜单 点击 新建站点 在高级面板中 设 置远程信息 访问 FTP FTP 主机 FTP 地址 主机目录 如果没有特别规定 为空 登陆 你的用户名 密码 密码 29 2 点 防火墙设置 按钮 在参数选择窗口 防火墙主机里输入 FTP 地址 防火墙端口中输入端口值 常见的是 21 这要看空间 服务商的规定 3 点击 测试 按钮 完成测试 内容延伸 网页空间 站点完成之后 如果要想让更多的人看到就需要上传至网页 空间 将网页及程序存放在服务商提供的服务器上 而且一台服 务器上要存放多个用户的站点内容 服务商会采用一种方式 将 服务器的硬盘存贮空间划分为许多块 每一块分给一个用户使用 用户只能将自己的网页文件和程序放在自己的那一块中 但不能 查看或处理属于别人的块 这些划分的存贮块就叫做网页空间 或 WEB 空间 学生分组讨论 由代表上讲台展示讨论内容 30 31 Dreamweaver 进阶 表格的设置 学习目标 了解表格的作用 掌握表格的功能 掌握表格的具体使用方法 学习时间 4 学时 Dreamweaver 的表格具有十分重要的作用 在前面已经粗略 的介绍过了 本单元的主要内容是表格的使用 初识表格 当单元格边距和单元格间距没有指定数值时 Dreamweaver 将以间距 2 填充 1 的设置显示表格 填充 单元格内容和单元格边框之间的距离 单位 象素 间距 单元格之间的距离 单位 象素 插入一个表格 为了便于分析表格 这里单元格间距设置为 10 插入一个表格 32 单元格 在表格中点击以选定单元格 也可以在标签选择器里 点击标签以选择单元格 表格 在标签选择器里点击标签以选择表格 一行 在标签选择器里点击标签选择一行 本例是以一个 一行二列的表格为基础的 一个 一行一列 的表格 至少有两个边框 设置边框为 1 边 框颜色黑色的表格如下图 33 红色 外侧 为表格边框 绿色 内侧 为单元格边框 表格 边框和单元格边框的颜色可以分别指定 间距 边框和边框之间的距离就是间距 为了便于观看填充的效果 在属性面板中 填充输入为 30 填充 单元格边框和内容之间的距离就是填充 34 调整行和列的宽度 鼠标放在一列的上面 出现向下的箭头时 单击 就可以选中 一列 在属性面板中可以设置所选列的宽和高 鼠标放在一行的左边 出现横向的箭头时 单击 就可以选中一 行 在属性面板中可以设置所选行的宽和高 35 制作一像素表格 制作一像素的表格 实质上是设置间距的大小和颜色 实例为 便于观看效果 把间距设置为 10 单元格填充和边框设置为 0 单元格填充和边框不输入数值效果类似 在单元格中点击 或者选中标签选择器中的选中单元格 设 置单元格的背景颜色为白色 选中表格 设置表格的背景颜色为黑色 一个 10 象素宽的表格 就做好了 实际上是把间距的颜色设置成了黑色 36 把间距改成 1 发布在浏览器中的效果 拆分和合并单元格 嵌套表是在表格中的一个表格 在一个单元格中 插入一个表 格 就是嵌套表 37 合并单元格 按 Ctrl 点单元格 选中表格 在属性面板中点 合并所选单元格 使用跨度 合并后的效果 拆分单元格 插入一个表格 在单元格中单击 选中单元格 点击属性面板中的 拆分单元 格为行或列 设置拆分方式 38 拆分为二行一列的表格如下图 内容延伸 怎样使网页页面更美观 在制作表格的时候 比如做 3 行 2 列的表格 就会显示每行表 格 但是为了美观 若只想要外框 里面的表格就不要了 请问怎么 实现呢 可以画个大表有格边线 里面嵌套三行两列无边框 即是表 格嵌套表格 在网页布局中常常会使用这种方法 学生分组讨论 由代表上讲台展示讨论内容 39 Dreamweaver 进阶 单元格的设置 学习目标 了解单元格的作用 掌握单元格的功能 掌握单元格的设置 学习时间 2 学时 设置单元格颜色 简明步骤 选中单元格 在属性面板中 选择一种背景颜色 把鼠标放在单元格内 出现红色边框时 单击 就可以选中单元 格了 在属性面板中 选择一种背景颜色 设置了背景颜色的单元格 40 设置单元格的对齐方式 作用 可以使单元格里的内容 从不同的地方开始 在 垂 直 下拉栏选择顶端 输入的文字可以从最上面一行开始 选择 中间 文字就开始从中间开始 在 水平 下拉栏 选择 左对 齐 文字和单元格左对齐 选择 右对齐 文字和单元格右 对齐 简明步骤 选中一个单元格 在属性面板中的 水平 垂直 下拉栏选择一个参数 在属性面板中的垂直选项栏选择 中间 输入的文字从单元格中间开始 在属性面板中的垂直选项栏选择 顶端 输入的文字从单元格 顶端开始 输入文字常选择这种方式 41 在属性面板中选择水平对齐方式为右对齐 在属性面板中 如果不想文字换行 不要选中 不换行 这种 方式可以保持其它表格不变形 42 如果选中 不换行 文字会沿一行扩张 其它表格也被挤压变 形 设置列为自动伸展的作用 自动伸展列可以随着浏览器调整大小 选择自动伸展后的效果如下图 内容延伸 如何在 dreamweaver 里单元格插入的图片上输入文字 可以将图片设置为单元格的背景 这样在单元格内就可以添 加文字了 选定表格或单元格 在 属性 栏的 背景 中进行 设置 选择相应的图片就可以为单元格设置背景了 同时又不影 响文字输入 学生分组讨论 由代表上讲台展示讨论内容 43 Dreamweaver 进阶 网页的布局设置 学习目标 了解布局视图 掌握布局视图的功能 掌握布局表格的绘制 掌握使用跟踪图像快速布局 学习时间 2 学时 在 DreamweaverMX 中 可以在表格中添加内容 但是内容只 是在表格的中间出现 这时需要从标准视图切换到布局视图 精 确定位网页内容 在布局视图中 您可以在页上绘制布局单元格和布局表格 当您 不在布局表格中绘制布局单元格时 Dreamweaver 会自动创建一 个布局表格以容纳该单元格 布局单元格不能存在于布局表格之 外 单击插入栏 布局 分类中的 绘制布局单元格 按钮 44 将鼠标指针放置在页上要开始绘制单元格的位置上 然后拖动指 针以创建布局单元格 若要创建多个单元格而不用每次都单击 绘制布局单元格 按钮 请按住 Ctrl 键并拖动指针来创建每 个布局单元格 绘制布局表格 单击插入栏 布局 分类中的 绘制布局表格 按钮 将鼠 标指针放置在页上 然后拖动指针以创建布局表格 若要绘制多 个布局表格而不必重复单击 绘制布局表格 按钮 请在单击 绘制布局表格 按钮时按住 Ctrl 键 45 要将一个布局表格绘制在另一个布局表格中 创建嵌套表格 单 击插入栏 布局 分类中的 绘制布局表格 按钮 鼠标指针变 为加号 指向现有布局表格中的空白 灰色 区域 然后拖 动指针以创建嵌套布局表格 转换到标准视图下的表格就是 46 添加内容到布局单元格 在布局单元格中输入文字 单击插入栏 常用 类别中的 插入图像 按钮插入图像 如果在单元格中插入了一个大于单元格宽度的图像 在布局 标题上就有两种大小 如图 选择使单元格宽度一致 47 设置列宽度为自动伸展 设置列宽度为自动伸展的意义 把一行中的一列设置为自动伸展 可以使这行始终在访问者浏览器窗口整个宽度显示 自动伸展列 的宽度随着浏览器窗口的宽度自动变化 自动伸展列的列标题区域显示波浪线而不是数字 在一行中 最好只选择最右边的一列为自动伸展 选中一列的标 题区域 选择 列设置为自动伸展 如果是第一次设置自动伸展 就会出现 选择间隔图像 对 话框 选择 创建间隔图像文件 按确定按钮 自动会有一个 spacer gif 文件 选择保存 自动伸展列的标题区域显示波浪线 一个自动伸展列就做好了 布局的一般步骤 在向网页填充内容之前 需要准备素材 包括网站的 LOGO Banner 图片 Flash 动画 各种按钮 声音文件 用于 布局参考的参考图像 把这些内容复制到站点中 通常把图片复 制到站点中的 images 文件夹 简明步骤 准备各种素材复制到站点中 设置页面的跟踪图 像 插入表格确定尺寸 布局 从资源面板中把资源拖到页面 用 Fireworks 制作一个页面的效果图 或者用一个已经存在的页 48 面做布局的参考 打开站点 SGJ 打开 index html 设置页面属 性 选择跟踪图像 点游览按钮 选择跟踪图像 这个跟踪图像 是已经做好的图像 也可以是其 它网站页面的截图 建议设置为 50 以下 以便和页面内容区别 设置了跟踪图像的页面如下图 跟踪图像并不在最终的页面中出 现 仅仅是在设计中起辅助作用 49 转换到布局选项卡 点 绘制布局表格 在页面参考跟踪图像布 局 从上到下 一行一行的画好整个页面的表格 点 绘制单元格按钮 在布局表格里面绘制单元格 一个页面做好布局之后 再打开页面属性 图像透明度设置为 10 就可以填充内容了 打开资源面板 把相应的资源拖到布局单元格中 50 在拖放的过程中 会出现选择对话框 可以输入替换文本和链接 按照这种方法把素材放到页面中 Flash 素材可以用类似的方法 文字部分可以手工输入或者从一个文本中复制到单元格中 一个 页面的内容就填充好了 内容延伸 跟踪图像 跟踪图像 是 Dreamweaver 一个非常有效的功能 它允许 用户在网页中将原来的平面设计稿作为辅助的背景 这么一来 用户就可以非常方便地定位文字 图像 表格 层等网页元素在 该页面中的位置了 跟踪图像的具体使用是这样的 首先使用各 种绘图软件作出一个想象中的网页排版格局图 然后将此图保存 为网络图像格式 包括 gif jpg jpeg 和 png 用 Dreamweaver 打开你所编辑的网页 在菜单中选择 修改 页面 属性 然后在弹出的对话框中的 跟踪图像 项中输入刚才创 51 建的网页排版格局图所在位置 再在图像透明度中设定跟踪图像 的透明度 这样你就可以在当前网页中方便地定位各个网页元素 的位置了 使用了跟踪图像的网页在用 Dreamweaver 编辑时不会 再显示背景图案 但当使用浏览器浏览时正好相反 跟踪图像不 见了 所见的就是经过编辑的网页 当然能够显示背景图案 学生分组讨论 由代表上讲台展示讨论内容 52 Dreamweaver 进阶 超级链接的实现 学习目标 了解超级链接的意义 掌握超级链接的作用 掌握各种超级链接的创建方法 学习时间 2 学时 超级链接的作用是 可以把一个网站的网页连接起来 点击 链接时从一个网页跳转到另一个网页 或者跳转到页面指定的位 置 创建导航链接 1 使用指向文件图标链接文档 选中图像 将 属性 检查器 的 链接 域右边的 指向文件 图标拖动到站点窗口的文档中 这 种方法方便快捷 推荐使用 例如指向一个文件夹 如果发布到 网上后 自动会打开这个文件夹下的默认首页文件 index htm 2 使用属性检查器 选中示例中的图像 也可以是文字 点击属性面板中的 浏览文件 图标 53 选中一个文件 会出现一个文件相对于 文档 3 绝对路径 完整的 URL 称作绝对路径 例如在链接域输 入 4 从打开文档的选取中创建链接 选中文字 按 Shift 键 拖动出现 指向文件 图标 把 指向文件 图标拖向目标文件 就会建立链接 54 5 选择被链接文档要打开的位置 若要使被链接文档不出现在当前窗口或框架中 从属性面板 的 目标 弹出式菜单选取一个选项 blank 在新的未命名的浏览器窗口中加载链接文档 parent 在父框架页或包含该链接的框架窗口中加载链接文档 self 将链接文档加载到与链接相同的框架或窗口中 该目标是 默认值 所以通常您不需要指定它 top 将在整个浏览器窗口中加载链接文件 同时移除所有框架 使用锚 简明步骤 选中文本 在目标文档中插入锚标记 命名 拖 动 指向文件 图标到文本 1 链接到文档中的指定位置 在需要插入锚的地方 点一 下光标 然后单击常用面板上的命名锚记工具 键入锚记名称 一个站点中的锚记名称只可以是唯一的 否则会 出现错误 55 在文档中选取要创建链接的文本 打开您需要链接的命名锚记所 在文档 不一定要是当前文档 可以是站点中的其它文档 点击 属性面板中的 指向文件 图标 并将它拖动到您需要链接的锚 记处 创建 javascript 脚本链接 1 在文档窗口中选取文本 图象或对象 2 在 属性 检查器的 链接 栏中键入 javascript 其后紧 接 JavaScript 代码或函数调用 例如在链接栏中键入 javascript alert 哈哈你上当了 创建一 个链接 点击链接后就会出现一个警告框 创建电子邮件链接 方法一 选取需要创建链接的文本或者图像 点击常用面板中的 电子邮件链接 工具 输入邮件地址 56 方法二 选取需要创建链接的文本或者图像 在属性面板中的链 接栏输入 mailto 邮件地址 创建跳转菜单 首先将插入点放在要插入链接的位置 点击表单面板中的跳 转工具 57 在插入跳转菜单对话框中 点添加项添加新链接 在属性面板中选择类型为 菜单 在浏览器中发布如图 58 内容延伸 超链接打不开 有同学在网页中建立了超链接 但是预览却打不开 点击了 却没反应啊 是怎么回事呢 链接页面打不开 可能是以下原因 1 链接页面使用了中文名或中文路径 2 链接地址错误 3 链接代码错误 学生分组讨论 由代表上讲台展示讨论内容 59 60 Dreamweaver 进阶 库的应用 学习目标 了解库的意义 了解库的作用 掌握库的创建 修改和更新 学习时间 2 学时 库是一种用来存储想要在整个网站上经常重复使用或更新的 页面元素 如图像 文本和其他对象 的方法 这些元素称为库 项目 使用库的意义 很多网页设计师讨厌频繁的改动网站 使用 Dreamweaver 的库 可以很好的解决这个问题 如果使用了库 就可以通过改动库更新所有采用库的网页 不用一个一个的修改 网页元素或者重新制作网页 具有更大的灵活性 创建库项目 1 选择文档的一部分 例如选择一个图片 61 2 打开资源面板 点击 库 按钮 打开库类别 3 点击 新建库项目 按钮 4 给库项目命名 一个库就创建好了 62 插入库项目 1 将插入点放在 文档 窗口中 2 选择一个库项目 单击 插入 按钮 3 插入库后的页面如下图 63 修改库和更新站点 1 选中页面中的库项目 2 在属性面板中点击 打开 按钮 3 修改库项目 修改完成之后保存 4 在 更新库项目 对话框中点击 更新 按钮 5 选择更新的范围 更新完成之后关闭 内容延伸 库的特点 库是一种用来存储想要在整个网站上经常重复使用或更新的 页面元素 如图像 文本和其他对象 的方法 这些元素称为库 项目 64 将库项目放在文档中时 Dreamweaver 向文档中插入该项目 的 HTML 源代码拷贝 并添加一个包含对原始外部项目的引用的 HTML 注释 Dreamweaver 将库项目存储在每个站点的本地根文件夹内的 Library 文件夹中 每个站点都有自己的库 如果库项目中包含 链接 链接可能无法在新站点中工作 此外 库项目中的图像不 会被拷贝到新站点中 学生分组讨论 由代表上讲台展示讨论内容 65 66 Dreamweaver 进阶 模板的应用 学习目标 了解模板的作用 掌握模板的创建 掌握模板的应用 学习时间 2 学时 创建模板 简明步骤 打开一个已经存在的网页 另存为模板 新建可 编辑区域 保存 打开站点中已经建好的 index htm 文件 打开 文件 点 击 另存为模板 67 选择模板存放的站点 在 另存为 中为模板输入一个唯一的名 称 单击保存按钮 在 插入栏 选择 模板 然后单击 可编辑区域 在 名称 文本框中为该区域输入唯一名称 建好的模板如下图 重复这个过程 可以再做一些 可编辑区域 68 打开 文件 菜单 单击 保存 一个模板就做好了 使用模板创建网页 在制作了模板之后 可以基于这个模板创建网页 简明步骤 文件 新建 打开 模板 选项卡 选择模板 删除模板里多余的文字 输入网页内容 保存 选择保存路径 1 打开 文件 菜单 点击 新建 2 打开 模板 选项卡 选择模板文件 单击 创建 按钮 3 选中可编辑区域 69 4 删除其中多余的文字 5 在里面输入网页的内容 6 输入内容后 点击 文件 菜单中的 保存 选择保存路径 一个页面就做好了 为了简化制作过程 常常采用先制作出页面 再应用模板的 方法 简明步骤 打开一个有内容的页面 打开资源面板 点击模 板按钮 选择一个模板 点击应用按钮 指定可编辑区域 确定 1 打开一个填充了内容的网页 70 2 打开资源面板 点击 模板 按钮 打开模板类别 3 选择一个模板 点击应用按钮 71 4 将内容移到新区域 按 确定 按钮 5 一个应用模板的页面就做好了 内容延伸 模板的特点 所谓模板 就是指一个文档 可以将该文档用作其它要创建 的文档的基础 在创建模板的时候 可以指定哪些元素保持不变 也就是不可编辑 哪些元素可以进行修改 例如 网站的表头 应该是不会再发生什么变化了 但是每一页面的内容肯定是要有 变化的可以将其内容的位置定义为可编辑区域 当要添加新的内 容时 只要选取可编辑区域 输入内容即可 72 创建模板 可以说明哪些网页元素不可编辑 哪些元素可以 编辑 有利于保持网页风格的一致 提高工作效率 学生分组讨论 由代表上讲台展示讨论内容 73 74 Dreamweaver 进阶 表单的应用 学习目标 了解表单 熟悉表单对象 掌握制作表单网页 学习时间 2 学时 表单的定义 表单提供了从用户那里收集信息 向数据库中添加信息和从 数据库中搜索信息的方法 是建立动态网页的最重要的工具 一 般的表单由两部分组成 一是描述表单的 HTML 源代码 二是客 户端的脚本 或者服务器用来处理用户所填写信息的程序 当访问者将信息输入表单并单击提交按钮时 这些信息将被 发送到服务器 服务器端脚本或应用程序在该处对这些信息进行 处理 服务器通过将请求信息发送回用户 或基于该表单内容执 行一些操作来进行响应 下图即是一张包含了表单的网页 75 表单对象 1 文本域 TextField 文本域 选择单行文本域 多行文本域或者密码文 本域 通过浏览器输入到密码文本域中的文本将显示为项目符号 X 或者星号 根据用户的系统和浏览器设置的不同有所区别 2 复选框 如果读者打算让浏览者可以从一组选项中选择多个选项 如 兴趣 特长等问题 则可以使用复选框 3 单选按钮 在要求浏览者只能从一组选项中选择一个选项时 可以使用 单选按钮 4 列表 菜单 除了复选框和单选按钮以外 在遇到需要制作选项时 读者 还可以使用列表 菜单 在拥有较多选项 并且网页空间有比较 有限的情况下 列表 菜单将会发挥出最大的作用 76 5 跳转菜单 跳转菜单是常见链接的一种形式 但与真正的链接相比 跳 转菜单可以节省很大的空间 跳转菜单从表单发展而来 浏览者 单击扩展按钮打开下拉菜单 在菜单中选择链接 即可连接到目 标网页 6 表单按钮 对表单而言 按钮是非常重要的 它能够控制对表单内容的 操作 如 提交 或 重置 要将表单内容发送到远端服务器 上 请使用 提交 按钮 要清除现有的表单内容 请使用 重 置 按钮 77 表单实例 下图是一张表单网页 同学们通过前面学习的知识 可以试 着制作一下 内容延伸 表格和表单的区别 表格用于布局 表单用于传输数据 我们可以在表格里面包 含表单 亦可以在表单里面包含表格 用表格来布局表单里面的 数据 如果你有数据提供给后台程序 比如一个输入框 文本框 等 这些元素通常要放到一个表单 这样才可以完成数据的提交 学生分组讨论 由代表上讲台展示讨论内容 78 Dreamweaver 进阶 层的应用 学习目标 掌握层的创建 掌握层的转换 了解层的应用 学习时间 2 学时 层的定义 在 Dreamweaver 中 层是极有使用价值的工具 其实 与其 说它是工具 倒不如说它是一张小纸片似乎更贴切点 如果在一 张方桌上写上字 画上画 那么要把它们挪动到另一个地方 得 擦掉原来写上去的字和画 要是我把它们先写在一张纸片上 白 的纸 带色的纸 有一定透明度的纸 有好看的图案图片的纸 都可以 这时候要移动它们 那就容易又方便 拉过来 拖过去 还可以把两张画叠起来 嵌入 插入 层是平放 也可以叠放 的一些小纸片 为了便于移动 或者说 层用来确定元素在页面 中的准确位置 最后的效果是各个图形 文档的排版效果 层 Layer 具体来说是一种 HTML 页面元素 您可以将它定 位在页面上的任意位置 层可以包含文本 图像或其它 HTML 文 档 层的出现使网页从二维平面拓展到三维 可以使页面上元素 进行重叠和复杂的布局 层的创建 1 新建层 1 在 窗口 菜单 选 层 或点 插入 菜单 布局 对象 选 层 2 在页面中显示一个层 3 通过周围的黑色调整柄拖动控制层的大小 4 拖动层左上角的选择柄可以移动层的位置 5 单击层标记可以选中一个层 6 在层中可以插入其他任何元素包括图片文字链接表格等 79 2 创建嵌套图层 创建的方法 将光标插入到已建好的图层中 然后选择菜单 中的 插入 层 命令 可在已建的图层中插入一个嵌套的图层 3 层的属性 一个页面中可以画出很多的层 这些层都会列在层面板中 层之间也可以相互重叠 层面板可以通过菜单 窗口 菜单 选 层 打开 层有隐藏和显示的属性 这是层的一个重要属性和以后说到 的行为相结合就变成了重要的参数 单击层面板列表的左边 可 以打开关闭眼睛 眼睛挣开和关闭表示层的显示和隐藏 层还有一个概念就是层数 层数决定了重叠时哪个层在上面 哪个层在下面 比如层数为 的层在层数为 的层的上面 改变 层数就可以改变层的重叠顺序 80 层面板上面还有一个参数就是防止层重叠 一旦选中 页面 中层就无法重叠了 层还有一种父子关系也就是隶属关系 在层面板中是这样表 示的 图中 Layer2 挂在 Layer1 的下面 Layer1 为父层 Layer2 为子层 在页面中拖动 Layer1 Layer2 也跟着动起来 因为他 们已经链在一起了 并且 Layer2 隶属于 Layer1 父层移动会影 响到子层 移动 layer2 层 Layer1 层不动 也就是子层不会影 响到父层 要建立这样的一种隶属关系方法很简单 在层面板中按 Ctrl 键将子层拖拽到父层即可 层和表格之间转换 由于层在网页布局上非常方便 所以 一些人可能不喜欢使 用表格或 布局 模式来创建自己的页面 而是喜欢通过层来进 行设计 Dreamweaver 可以使用层来创建自己的布局 然后将它 们转换为表格 在转换为表格之前 请确保层没有重叠 请执行以下操作 选择 修改 转换 层到表格 即可显示 转换层为 表格 对话框 选择所需的选项 单击 确定 若要将表转换为层 请选择 修改 转换 表格到 层 即可显示 转换表格为层 对话框 81 选择所需的选项 单击 确定 图层的应用 1 拖动层 利用行为的技术制作一个可以在浏览器窗口中用鼠标拖动的 图层 操作方法如下 1 新建一个网页文件 在设计中插入一个图层 并在图层中 插入一幅图片 2 选中该图层 单击 设计 面板中的 行为 选项卡中的 填加行为按钮 在弹出的菜单中选择 拖动层 命令 会 弹出下面对话框 设置合适的参数 单击确定 3 在行为面板中 把触发的时间改为 onMouseOver 预览页 面 可以用鼠标拖动图片任意移动 2 显示隐藏层 在页面上创建当鼠标移动到一幅图片上能显示隐藏的图层 当鼠标移开这幅图片时 图层又隐藏起来 具体操作步骤如下 1 新建一个网页文件 在设计中插入一幅图片和一个图层 并在图层中也插入一幅图片 然后设置图层隐藏 2 单击图片 然后单击添加行为按钮 在弹出的菜单中选 择 显示 隐藏层 命令 会弹出以下的对话窗口 82 3 选取 已命名层 中的层 单击 显示 按钮 然后单 击 确定 按钮 4 单击事件下面的三角形按钮 在弹出的菜单中选择 onMouseover 5 重复 2 4 步骤 把 3 步中的 显示 改为 隐藏 4 步选 onMouseout 6 预览页面 内容延伸 表格和层的比较 层使用简单 可以随意地在网页里面拖动 整个网页的元素 你想放哪都很容易解决 可是 它有个缺点 就是在不同的分辩 率下 位置会发生改变 这样如果是要发表的网页 可能就达不 到预计的效果了 表格虽然固定了 却能在不同分辨率下保持一致的位置不会 改变 表里又可以建表 什么功能都能实现 总的来说 层可用让系统资源消耗少 显示快等等 表格显 示数据详细 结构比较分明 各有优缺点 学生分组讨论 由代表上讲台展示讨论内容 83 84 Dreamweaver 进阶 CSS 的应用 学习目标 了解 CSS 的作用 掌握 CSS 的基本设置 掌握 CSS 的通常应用 学习时间 2 学时 要想做出精美的网页一定要用到 CSS 层叠样式表 CSS 是一 系列格式规则 它们控制网页内容的外观 CSS 样式使您可以控 制许多仅使用 HTML 无法控制的属性 CSS 的重要性就不多说了 要说清楚 CSS 可以写成一本大书 本单元只举例简单介绍一下 文字 CSS 应用 把一个网页的文字变成好看的 12 象素 px 大小 实现方 法 通过 重定义 HTML 标签 定义 td td 是单元格的标签 的字体大小为 12 象素 px 因为整个网页内容放在表格中的 也是放在单元格中的 所以 可能通过重定义单元格样式 改变 所有放在单元格里的内容 当然 重定义表格标签 table 也可 以实现同样的效果 简明步骤 打开样式面板 在类型中选择 重定义 HTML 标签 选择要重定义的标签 例如 td 给所选标签 例如 td 定义 CSS 一个定义了标签的网页就做好了 1 打开一个网页文档 85 2 打开样式面板 3 点击 新建 CSS 样式 按钮 4 在 类型 中 选择 重定义 HTML 标签 5 选择 td 标签 Td 标签代表单元格 6 选择分类中的 类型 7 设置字体 86 8 按 确定 按钮后 一个应用了 CSS 的网页就做好了 定义锚标签 就是有关链接的标签 锚对应的标签是 a 1 默认锚标签的网页 链接有下划线 蓝色 这种链接很难看 2 在标签下拉栏中选择 a 87 3 定义 a 的 CSS 样式 大小选择 12 象素 修饰选择无 颜色选 择一种深灰色 就可以和采用黑色的文本区分开来 4 重定义了锚标签的网页 88 超级链接的 CSS 应用 在 CSS 样式中 定义链接的各种状态 也是必须掌握的 绝 大多数站点的 CSS 中定义了链接的各种状态 定义链接的各种状 态 可以理解成定义锚标签 a 的各种状态 a link 没有接触过的链接 a visited 访问过的链接 a hover 鼠标放在链接上的状态 a active 在链接上按下鼠标时的状态 没有定义链接样式的网页 采用默认蓝色 下划线 文字也很大 下划线是为了容易分辨链接 但是如果链接很多 下划线反而不 利于阅读 有一个好的导航就够了 所以也没必要使用下划线 1 点击 CSS 样式 面板右下角的 新建 CSS 样式 按钮 2 在 类型 中选择 使用 CSS 选择器 定义在 仅对该文 档 3 点击 选择器 旁边的下拉按钮 弹出各种状态的锚标签 89 4 选择 a link 标签 a link 是指没有接触过的链接 a link 表现的是链接的常规状态 定义字体为宋体 修饰选择 无 就可以去掉下划线 行高为 20 像素 颜色为 333333 灰色 以和文本默认的黑色有差别 定义 a link 标签样式后的网页 90 5 选择 a hover 标签 a hover 是指鼠标放在链接上的状态 定义字体为宋体 大小为 12 像素 颜色为红色 FF3300 在浏览器中 鼠标放在链接上面 链接变成红色 6 选择 a active 标签 a active 是指在链接上按下鼠标时 的状态 91 定义字体为宋体 大小为 12 像素 颜色为灰色 999999 在浏览器中 鼠标在链接上按上时 链接变成灰色 并且 在链 接上按下时有虚线框 7 选择 a visited 标签 a visited 是指访问过的链接 92 定义字体为宋体 大小为 12 像素 下划线为 无 颜色为黑 色 在浏览器中点击链接 鼠标离开链接后 链接颜色就变成黑色 跟旁边灰色的链接还是有细微差别的 最后 看看在浏览器中 鼠标作用于链接表现出来的样式 链接 1 是访问过的颜色 链接 2 是鼠标按下时的状态 链接 3 是 鼠标放在链接上的状态 链接 4 是没有接触过的状态 93 象本例这种 仅对该文档 的 CSS 定义好后直接就对文档生效了 如果是定义成外部 CSS 样式表文件 就需要把每种链接状态的定 义都保存在同一个 CSS 文件里面 需要应用时 链接这个 CSS 文 件就可以了 这里就不介绍了 内容延伸 CSS CSS 就是一种叫做样式表 stylesheet 的技术 也有的人 称之为层叠样式表 Cascading Stylesheet 在主页制作时采 用 CSS 技术 可以有效地对页面的布局 字体 颜色 背景和其 它效果实现更加精确的控制 只要对相应的代码做一些简单的修 改 就可以改变同一页面的不同部分 或者页数不同的网页的外 观和格式 学生分组讨论 由代表上讲台展示讨论内容 94 Dreamweaver 进阶 CSS 自定义样式 学习目标 了解 CSS 的作用 掌握 CSS 自定义样式 掌握 CSS 自定义样式的应用 学习时间 2 学时 如果一个网页中的各部分内容需要使用不同的样式 或者多 个网页之间需要使用不同的样式 就可以使用自定义样式 class 解决这个问题 本文介绍创建和应用自定义样式的方 法 实现方法 创建自定义样式 class 创建好样式后 选 中文档中的对象 点 CSS 样式 面板上的 CSS 名称应用所选样 式 实例 给一个网页各行文字应用上不同的颜色 1 没有应用样式的网页 2 点击 CSS 样式 面板右下角的 新建 CSS 样式 按钮 3 在类型中选择 创建自定义样式 class 95 4 在名称中输入一个以 开头的名称 不能忽略这个小点 5 定义 CSS 样式 本例中定义字体为宋体 大小 12 像素 行高 20 像素 修饰无 颜色 FF6600 按 确定 按钮后 一个 CSS 样式就创建好了 6 继续创建 CSS 样式 96 7 定义 CSS 样式 8 定义好在样式显示在 CSS 样式 面板上 自定义样式并不直 接应用在网页中 9 选中网页中的内容 点击 CSS 样式 面板上的样式名称 样 式就应用到所选范围了 97 10 应用 red 样式后的网页 11 继续选择一行文本 点击一种样式名称 98 12 应用不同样式后的网页 13 也可以在标签选择器中选择一个标签 给这个标签应用样式 为了方便在站点内反复使用自定义样式 需要把自定义样式保存 为外部 CSS 样式表文件 内容延伸 CSS 的作用 99 1 在几乎所有的浏览器上都可以使用 2 以前一些非得通过图片转换实现的功能 现在只要用 CSS 就可以轻松实现 从而更快地下载页面 3 使页面的字体变得更漂亮 更容易编排 使页面真正 赏心悦目 4 你可以轻松地控制页面的布局 5 你可以将许多网页的风格格式同时更新 不用再一页 一页地更新了 你可以将站点上所有的网页风格都使用一个 CSS 文件进行控制 只要修改这个 CSS 文件中相应的行 那么整个站 点的所有页面都会随之发生变动 学生分组讨论 由代表上讲台展示讨论内容 100 Dreamweaver 进阶 CSS 的特殊设置 学习目标 了解 CSS 的作用 掌握 CSS 自定义样式 掌握 CSS 自定义样式的应用 学习时间 2 学时 设置个别链接的 CSS 样式 1 在类型中选择 使用 CSS 选择器 选择器中选择 a link 把插入点放在 a 后面 2 在 a 后面输入 名称 实例中输入 love 3 定义样式 101 4 定义好的样式在样式面板中显示出来 5 选择一个链接 6 点击样式名称 样式应用到所选链接 7 应用样式后的网页 102 8 继续以同一个名称定义其它链接状态 个别链接的 CSS 样式就 做好了 使用这种方法可以做出多个不同的链接样式 CSS 的标签样式 使用重新定义标签的方法 一次只能定义一个标签 如果有 一些标签的定义相同 比如定义 body 中的文字为 12 像素 单元 格 td 里的文字为 12 像素 表单文本区域 标签 textarea 里的文字为 12 像素 可以一次定义好这些标签 打开一个页面 在正文 body 里面输入 CSS 测试 这几 个字 插入一个三行一列的表格 在单元格 td 里面输入 5D 多媒体 几个字 在最下面的单元格中插入一个表单文本区域 标签 textarea 103 在选择器中输入 body td textarea 这些标签以 分开 定义样式 在浏览器中的效果 文字都变成红色 12 像素 在表单文本区域 输入文字 也是红色 10