Dreamweaver-CS3教案

Dreamweaver CS3 教案 1 第第 1 章章 基础知识 基础知识 5 课时 课时 教学目标 1 掌握 HTML 的基本知识及作用 2 掌握安装和配置 IIS 的方法 3 熟悉 Dreamweaver CS3 的工作界面 4 掌握创建和设置 Dreamweaver CS3 站点的方法 教学重点 1 HTML 语言 2 熟悉 Dreamweaver CS3 的工作界面 3 创建本地站点 教学难点 HTML 的基本知识 教学方法 任务驱动法 以学生做为主 教师使用多媒体投影演示制作过程并讲解关键环节 学 生上机操作完成实例与实训 任务 1 认识网页 教学目标 1 理解掌握网页的概念 2 HTML 的概念 3 掌握 HTML 的基本知识及作用 教学重点 1 网页的实质 2 HTML 的基础知识 教学难点 HTML 标记 教学方法 任务驱动法 讲练结合法 教具准备 多媒体教学 教学内容 第 1 课时 一 网页 1 网页的概念 网页是网站的基本组成元素 网页文件的扩展名通常为 htm 或 html 一般是由 HTML 语言编写的文本文件 2 网页的实质 网页文档本身是一个文本文件 这些文本能够将文字及其他媒体文件有机的组织在一 起 在浏览器中合适地显示 二 HTML 1 Html 的中文含义 Html 是 Hypertext Markup Language 的缩写 其中文含义是 超文本标记语言 2 Html 的概念 它是使用特殊标记来描述文档结构和表现形式的一种语言 可以用来实现 WEB 页面 2 3 网页文档的组成 一个 HTML 文档通常分为文档头和文档主体两部分 三 标记 1 标记的格式 在 HTML 中定义了许多标记 这些标记用来描述文档 这些标记使用 括 起来 标记通常分为开始标记和结束标记 其格式为 标记内容 注意 若一个标记有多个属性 属性和属性之间要用空格隔开 示例 简单的网页文档 我的第一个网页 这是我的第一个网页 欢迎大家 第 2 课时 2 常用标记 标记一个 HTML 文档的开始和结束 Html 文档的所有内容就书写 在这两个标记之间 用于标记文当首部的开始和结束 首部通常包括网页标题 创作信 息等内容 在浏览网页时不会在浏览器窗口内显示 和 用于设置网页的标题 该标记中不能包含其它标记 且只能在标记 中出现一次 当浏览网页时 网页的标题会出现在浏览器窗口的标题处 和 标记是主体标记 该标记包含在 Html 标记内 文档主体包括了网 页显示的内容 如文字 链接 图像 表格和其它对象 和 标记一个段落的开始和结束 和 说明其后的文字是一级标题 注释标记 说明 1 每个标记在标识名以外还可以包含一个或多个 属性 用于控制标记内容的大小 颜色 位置 边框等 例如 bgcolor blue 就是 body 标记的一个属性 进一步说明网页的背景色为蓝色 2 如果一个标记有多个属性 中间要用空格隔开 3 标记的常用属性 3 属性名作用 Background用图像设置网页背景 Bgcolor设置网页的背景颜色 Text设置网页中所有文本的颜色 Link设置超文本链接尚未访问时文本的颜色 默认为蓝 色 Vlink设置超文本链接已经访问后 四 网页的基本元素 网页中包括的元素主要有文本 图像 视频 声音 动画 表格 表单等 1 网站 LOGO Logo 的中文含义是标志 标识 在网页设计中 Logo 常作为公司或站点的标识出现 起着非常重要的作用 集中体现了这个网站的文化内涵和内容定位 2 网站 Banner Banner 的中文含义是横幅 标语 通常被称为网络广告 3 导航栏 导航栏实质上是一组超链接 通过这组超链接可以浏览到整个网站的其他页面 4 文本 文本作为人类最重要的信息载体的交流工具 是最重要的网页元素之一 与图像 动 画等其他网页元素相比 文本不易在第一时间吸引浏览者的注意 但文本能够更加准确详 细地表达网页信息内容和含义 是对其他网页元素的补充 5 图像 图像在网页中起着非常重要的作用 适当的图像能够为网页增添生动性和活泼性 不 仅丰富网页内容 提供更多更直接的信息 还能给浏览者视觉上的美感 6 动画 动画能够形象生动地表现事物的变化发展过程 增加网页的动态效果 使网站更加生 动有趣 因此 动画已经成为现代网站中不可缺少的元素之一 7 表单 表单实质上是一个服务器程序 用户可以在网页上的表单域中输入文本或数据 提交 表单 该表单程序在服务器上执行 并将执行结果反馈到相应的页面上 从而实现了用户 与网站之间的交互 教学小结 主要介绍了网页的概念 标记的应用及书写格式还有网页的基本组成元素 课堂作业 1 总结网页的概念及网页的实质 2 列举 Dreamweaver CS3 中常用标记及其含义 板书设计 任务 2 让别人通过网络访问你的网页 教学目标 1 理解和掌握网站的概念 2 掌握安装 IIS 的步骤 3 掌握在 IIS 中配置站点的方法 4 教学重点 1 网站的含义 2 IIS 的含义及功能 教学难点 IIS 的配置 教学方法 演示法 任务驱动法 教具准备 多媒体教学 教学内容 一 网站 网站是许多相关网页有机结合而形成的一个信息服务中心 网站的设计者将要提供的 内容和服务制作成许多个网页 并且经过组织规划 让网页互相链接 然后把相关文件存 放在 WEB 服务器的一个文件夹中 这样一个文件夹就是一个网站 二 主页 当用户没有指定网页文件名时 网站的默认显示的网页 主页文件名通常为 index htm index html default htm 三 IIS 1 IIS 的含义 IIS Internet Information Server 互联网信息服务 是一种 Web 网页 服务组件 其 中包括 Web 服务器 FTP 服务器 NNTP 服务器和 SMTP 服务器 分别用于网页浏览 文 件传输 新闻服务和邮件发送等方面 它使得在网络 包括互联网和局域网 上发布信息 成了一件很容易的事 2 IIS 的运行环境 IIS 通常运行在 WINDOWS 的 SERVER 版本上 可支持大量用户的访问 在 WINDOWS XP professional 中 IIS 组件主要用于开发测试 不适宜大量用户的访问 另外 在 WINDOWS XP 的家庭版中未提供 IIS 组件 教学小结 介绍了网页中常用术语的含义及 IIS 的含义和站点的配置 任务 3 初识 Dreamweaver CS3 教学目标 1 掌握启动 Dreamweaver CS3 的方法 2 认识 Dreamweaver CS3 的工作界面 3 掌握 Dreamweaver CS3 界面中常用部分的用途 教学重点 熟悉 Dreamweaver CS3 界面各部分的名称及作用 教学难点 熟悉 Dreamweaver CS3 界面各部分的名称及作用 教学方法 多媒体演示法 任务驱动法 挂图法 教具准备 教学内容 5 一 启动 Dreamweaver CS3 的方法 1 从 开始 菜单 2 双击桌面上的快捷方式 二 Dreamweaver CS3 的工作界面 文档窗口 文档 窗口显示当前文档 可以选择设计视图 代码视图 拆分代码视图 代码和设计视图之一进行网页的编辑 和开发 当 文档 窗口处于最大化状态 默认值 时 文档 窗口顶部会显示选项卡 上面 显示了所有打开的文档的文件名 如果尚未保存已做的更改 则 Dreamweaver CS3 会在文件名后显示一个星号 若要切 换到某个文档 单击其选项卡即可 三 网页开发平台 早期的网页制作 网页设计师要通过手工编写 HTML 代码来实现 开发效率非常低 网页开发平台的出现 使得这些复杂代码的编写变得十分容易 在这些网页开发平台中 只需要点点鼠标 软件就能帮助用户书写出相应代码 即使不懂得 HTML 也能制作出漂 亮的网页来 Dreamweaver 就是一种网页开发平台 其最新版本就是 Adobe Dreamweave cs3 该软件同时适用于初学者和专业网页设计师 是一款优秀的 所见即所得 的可视化 网页编辑软件 另外 FrontPage 也是一款常用的网页开发平台 它是由微软公司开发的 适合于初学者 四 网页制作辅助工具 1 图像处理工具 Photoshop Photoshop 软件一直是图像处理软件的龙头老大 它不仅能创造出不朽的计算机图形艺 术 而且为网页图像制作提供了强大的支持 现在已经成为使用最为广泛的网页图像处理 软件 2 动画制作工具 FLASH FALSH 是目前网络上最为流行的矢量动画设计制作软件 在网页动画制作中有广泛应 用 教学小结 介绍了 Dreamweaver CS3 的启动方法 认识并掌握了界面的组成及常用部分的含义 课外作业 尝试使用菜单对面板组进行设置 6 任务 4 创建 DreamweaverCS3 站点 教学目标 1 理解并掌握站点的含义 2 掌握在 Dreamweaver CS3 中设置本地站点的步骤 教学重点 设置本地站点 教学难点 本地站点的设置 教学内容 一 站点 1 站点的含义 在 Dreamweaver CS3中 术语 站点 指属于某个 Web 站点的文档的本地或远程存 储位置 Dreamweaver CS3站点提供了一种方法 使您可以组织和管理您所有的 Web 文 档 将您的站点上传到 Web 服务器 跟踪和维护您的链接以及管理和共享文件 应定义 一个站点以充分利用 Dreamweaver CS3的功能 2 站点的类型 Dreamweaver CS3站点由三个部分 或文件夹 组成 具体取决于开发环境和所开发 的 Web 站点类型 1 本地根文件夹 存储您正在处理的文件 Dreamweaver CS3将此文件夹称为 本地站点 此文件夹 可以位于本地计算机上 也可以位于网络服务器上 如果您直接在服务器上工作 每次您 保存文件时 Dreamweaver CS3 都会将文件上传到服务器 2 远程文件夹 存储用于测试 生产和协作等用途的文件 Dreamweaver CS3在 文件 面板中将此 文件夹称为 远程站点 远程文件夹通常位于运行 Web 服务器的计算机上 3 本地根文件夹和远程文件夹的关系 本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件 这使您 可以轻松管理 Dreamweaver CS3站点中的文件 二 创建本地站点的步骤 1 创建本地站点的注意事项 1 第一步必须先在本地计算机的磁盘上建立一个文件夹 作为本地站点的根文件 夹 提示 为了方便以后管理站点上的文件 先在本地文件夹中创建几个目录 htm img others 分别存放网页设计中用到的资源及网页文件 2 建立本地站点 选择主菜单中的 站点 新建站点 命令 在弹出的新建站 点对话框进行设置 2 新建站点的操作步骤 第一步 选择菜单中的 站点 新建站点 命令 如图所示 7 在弹出的对话框中选择 基本 选项卡 出现定义站点向导 如下图所示 第二步 单击 下一步 按钮 询问是否要使用服务器技术 选择 否 选项 表示目前该站 点是一个静态站点 没有动态页即不使用 Web 应用程序 如 ASP JavaServer Page JSP 第三步 单击 下一步 按钮 选择 编辑我的计算机上的本地副本 完成后再上传到服务器 推荐 单选项 然后指定本地机磁盘上的一个文件夹储存站点文件 包括网页文件及设 计网页用到的其它资源 8 第四步 单击 下一步 按钮 在弹出的对话框中设置如何连接到远程服务器 单击下拉菜单 选择 无 如下图所示 第五步 单击 下一步 按钮 弹出如下图设置概要 单击 完成 按钮 完成设置 思考 如何使用高级模式创建或设置站点 教学小结 给大家介绍了使用向导及高级模式两种创建站点的方法步骤 第第 2 章章 创建简单网页创建简单网页 6 学时 学时 教学目标 1 掌握输入空格 普通文本 特殊字符 日期 列表等项目的操作方法 2 掌握文本的断行 3 掌握设置文本的属性及滚动文字的制作 4 掌握设置网页的属性 5 了解网页图像的格式 6 掌握图像插入 编辑的方法 7 掌握网站相册的建立 教学重点 1 文本段落的编辑 2 文本属性的设置 3 网页中图像的应用及属性的设置 9 教学难点 1 图像的编辑为难点 2 滚动文字的制作 教学方法 教师使用多媒体投影演示制作过程 学生上机操作完成实例与实训 任务 1 制作文本网页 教学目标 1 掌握建立网站站点 2 掌握制作简单的文本网页 3 掌握输入普通文本及设置文本属性 4 掌握插入水平线的方法 5 掌握滚动文字的制作方法 6 掌握预览网页的方法 教学重点 1 文本的输入与属性设置 2 水平线的插入与应用 3 滚动文字的制作 教学难点 1 水平线的应用及属性设置 2 滚动文字的应用 教学内容 一 新建网页文件 1 方法一 启动了 DreamweaverCS3 软件 如同启动 Word 等其它应用软件一样打开了一个新的空 的网页文档 就可以在这个新的文档中进行网页设计编辑 或者单击 文件 菜单中的 新建 命令 或直接按 Ctrl N 键 打开一个新页面 在该页面中也可以进行网页的设计 编辑 网页设计编辑完毕后 保存网页文件 保存的位置在战点根目录下 新文件取名为 index html 即建立了主页文件 2 方法二 打开站点管理窗口 在站点管理窗口右边的本地文件夹列表框中建立新文件 新文件 取名为 index html 按回车键 即建立了主页文件 双击 index html 文件 进入编辑 index html 的网页文件窗口 进行主页设计 二 输入普通文本 1 输入文本 1 文件 导入 2 复制已有的文本 复制 粘贴 3 直接输入 在文档编辑窗口中直接输入 2 输入网页中的空格 汉字输入状态下输入 属性 面板 格式 预先格式化的 Shift Ctrl 空格 编辑 首选参数 常规 允许多个连续的空格 3 文本换行 10 Enter 分段 隔一行 Shift Enter 换行 不分段 4 文本的属性设置 1 选用字体 在 字体 下拉表框中找到字体 如果在 字体 下拉表框中 没有找到字体 字体 下拉表框中找到字体 单击 文本 字体 编辑字体列表 命令 或者在 属性 面板中选择 字体 下拉列表中选择 编辑字体列表选项 要添加字体组合 可单击对话框中的加号按钮 若要删除字体组合 可单击减号按钮 在该对话框中的 可用字体 列表中选择所要添加的字体 2 设置字号 字号指的是相对缺省字体而言的字体的大小 我们可以在浏览器中使用缺省字号 可 在 属性 在面板的 大小 下拉列表框中选择 3 设置颜色 颜色是网页外观的一个重要因素 要改变文本的颜色 可选中要设置的文本 单击 文本 颜色 命令 三 插入水平线 1 插入水平线 1 将光标置于 我的简历 后面 2 执行菜单 插入记录 中的 HTML 中的 水平线 命令 2 水平线的属性面板 可以通过水平线的 属性 面板设置水平线的宽度 高度 类型 对齐方式及是否有 阴影 水平线的 属性 面板如下 四 时间日期 在 Dreamweaver CS3 系统中可以插入页面的制作日期和时间 将光标置于要插日期和 时间的位置 选择 插入 日期 命令 可以在页面上插入插日期和时间 还可以设 置日期和时间的格式 五 滚动文字的应用 1 基本格式 示例 啦啦啦 我会移动耶 2 属性 1 方向 left right up down 举例 啦啦啦 我从右向左移 啦啦啦 我从左向右移 2 方式 scroll slide alternate 举例 啦啦啦 我一圈一圈绕着走 啦啦啦 我只走一次就歇了 11 啦啦啦 我来回走耶 3 循环 次数 若未指定则循环不止 举例 啦啦啦 我只走 3 趟哟 啦啦啦 我只走 3 趟哟 啦啦啦 我只走 3 趟哟 4 速度 举例 啦啦啦 我走得好快哟 5 对齐方式 Align top middle bottom 对齐上沿 中间 下沿 举例 啦啦啦 我会移动耶 6 六 预览网页 1 执行 文件 菜单下的 保存 命令 保存网页 2 按快捷键 F12 预览网页 教学小结 介绍了简单文本网页的制作方法 课外作业 1 试写出网页中空格字符的输入方法 2 试写出使用 Enter 键与 Shift Enter 键在网页中的效果有什么不同 板书设计 任务 2 插入图像 教学目标 1 掌握网页 页面属性 的设置 2 掌握网页中图像的插入与属性设置 3 掌握鼠标经过图像的设置 教学重点 1 页面属性 的设置 2 图像的插入与属性设置 教学难点 图像的应用与属性设置 教学内容 一 页面属性 设置 使用 Dreamweaver CS3 创建了空白网页后可以对页面进行属性设置 执行 修改 页面属性 命令 打开 页面属性 对话窗口 12 使用 页面属性 对话框 可以设置页面的整个外观 如页面的字体 大小 颜色 背景颜色 背景图象 还可以设置链接的样式 页面的标题等 虽然页面的属性有很多 并不是一个页面要将所有的属性全部都设置 用户在使用过程中根据自己的需要进行设置 二 插入图像 1 步骤 1 光村定位 2 执行菜单 插入记录 下的 图像 命令 2 设置属性 1 在 属性 面板的 替代 列表中输入替代文字 2 在 属性 面板的 对齐 列表框中对齐方式 三 鼠标经过图像 步骤 1 执行菜单 插入记录 中的 图像对象 中的 鼠标经过图像 命令 2 在 原始图像 文本框中选取图像文件 3 在 鼠标经过图像 文本框中选取图像文件 4 单击 确定 按钮 提示 该效果只有在网页预览时才能看到 教学小结 讲述了网页中页面属性的设置 图片的应用及鼠标经过图像的设置与应用 这使得网 页效果更加美观 突出显示了图文并茂的效果 课外作业 1 鼠标经过图像的含义是什么 2 制作鼠标经过图像的步骤有哪些 任务 3 制作网站相册 教学目标 1 掌握网站相册的含义 2 掌握网站相册的制作及应用 教学重点 13 1 网站相册的制作及应用 教学难点 网站相册的制作 教学方法 示例演示法 教学内容 一 创建网站相册 步骤 1 执行菜单 命令 创建网站相册 命令 2 根据对话框设置参数 二 美化网站相册 步骤 1 设置标题文字的大小 颜色 2 设置标题文字所在的表格的背景颜色 提示 在创建网站相册时 应把照片事先存在一个文件夹中 然后创建一个文件夹在创建网 页时应用 教学小结 介绍了网页中网站相册的创建与应用 板书设计 课外作业 1 网站相册的含义 2 写出制作网站相册的步骤 第第 3 章章 网页布局 网页布局 8 学时 学时 本章教学目标 1 理解表格与层的概念及特点 2 掌握表格的创建与编辑 3 掌握表格与单元格的属性设置 4 掌握通过表格进行网页页面布局的方法 5 掌握层的创建 编辑 6 掌握层属性的设置 7 时间轴的基本操作 教学重点 1 表格和层的布局 2 表格和单元格属性的设置 3 时间轴的应用 教学难点 表格的嵌套 时间轴的使用 教学方法 教师使用多媒体投影演示制作过程 学生上机操作完成实例与实训 任务 1 制作 班级课程表 网页 14 教学目标 1 掌握创建表格的方法 2 掌握表格和单元格属性设置的方法 3 掌握表格的编辑 4 掌握嵌套表格的应用 教学重点 1 表格和单元格的属性设置 2 掌握嵌套表格的应用 教学难点 表格和单元格的应用及属性设置 教学方法 任务驱动法 示例讲解法 讲练法 教具准备 多媒体教学环境 教学内容 第 1 课时 一 表格 1 表格 1 表格的含义 表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具 表 格由一行或多行组成 每行又由一个或多个单元格组成 2 表格的两种模式 Dreamweaver CS3 提供了两种查看和操作表格的方式 标准 模式 在该模式下 表 格显示为行和列的网格 和 布局 模式 允许您在将表格用作基础结构的同时在页面上 绘制方框 调整方框的大小以及移动方框 3 表格的标记 在 HTML 语言中 表格标签用表示 表格元素标签位于和之 间 行标签为 单元格标签为 2 布局 网页布局是根据网站主题和所需的栏目 对网页上的内容进行精确定位 可使用表格 层和框架布局 一般以 800 600 像素和 1024 768 像素下全屏显示时的网页宽度来确定网页的大小 一般来说 除去浏览器的边框 800 600 像素下全屏显示时的网页宽度是 778 或 776 像素 1024 768 像素下全屏显示时的网页宽度为 1002 或 1000 像素 用户也可以根据设计效果 指定所需的宽度 网页高度一般不受限制 可以向下适当延展 3 嵌套表格 在使用表格对网页进行布局时 嵌套表格使用得十分广泛 嵌套表格是指在表格的单 元格中再插入表格来放置网页元素 一般而言 一个网页中嵌套表格的层次不能超过 3 层 层次越多 文件越大 因此 应尽量采用较少的嵌套层次来进行网页布局 第 2 课时 二 表格基本操作 1 表格的创建 选择菜单 插入记录 表格 命令 或在插入工具栏中单击 常用 表格 按钮 15 2 表格元素的选择 1 表格的选择 方法一 鼠标指向表格右框线或下框线 当指针变成双向箭头时单击鼠标左键 方法二 将光标置于表格中任意位置 在状态栏单击前面的标签 2 行的选择 单行的选择 用鼠标指向要选择行的左边线 当指针变成黑色箭头时单击鼠标左键 连续多行的选择 选择一行后 拖动鼠标选择多行 不连续多行的选择 按住 Ctrl 键 分别选择各行 3 列的选择 单列的选择 用鼠标指向要选择列的上边线 当指针变成黑色箭头时单击鼠标左键 连续多列的选择 选择一列后 拖动鼠标选择多列 不连续多列的选择 按住 Ctrl 键 分别选择各列 4 单元格的选择 单个单元格的选择 按住 Ctrl 键 用鼠标左键单击单元格 连续单元格的选择 按下鼠标左键在表格中拖动 选择鼠标指针划过的矩形区域中的 单元格 不连续单元格的选择 按住 Ctrl 键 用鼠标左键依次单击各单元格 3 改变表格大小 方法一 首先选择表格 选定的表格带有粗黑的外边框 在下边中点 右边中点和右 下角分别显示控制柄 用鼠标拖动控制柄调整表格大小 方法二 选择表格 在表格属性面板中输入表格高度和宽度的数值 4 行高和列宽的调整 1 列宽的调整 方法一 拖动要更改的列的右边线 相邻列的宽度也 更改了 表格的总宽度不变 按下 Shift 键后再拖动可以保持其他列宽不受影响 方法二 选择列 在属性面板中指定宽度 2 行高的调整 方法一 拖动要更改的行的下边线 相邻行的高度也更改了 表格的总高度改变 按下 Shift 键后再拖动可以保持其他行高不受影响 方法二 选择行 在属性面板中指定高度 注意 当选定了表格或表格中有插入点时 Dreamweaver CS3 会显示表格宽度和每个表格列 的列宽 宽度旁边是表格标题菜单与列标题菜单的箭头 如果没有看到表格的宽度或列的 宽度 则说明没有指定该表格或列的宽度 如果出现两个数 则说明 设计 视图中显示 的可视宽度与 HTML 代码中指定的宽度不一致 当拖动表格的右下角来调整表格的大小 或者添加到单元格中的内容比该单元格的设置宽度大时 会出现这种情况 例如 如果将某列的宽度设置为 200 像素 而添加的内容将宽度延长为 250 像素 则该列将显示两个数 200 属性中指定的宽度 和 250 带括号 表示该列呈现在屏 幕上的可视宽度 5 行 列的添加与删除 1 行或列的插入 用鼠标指向某单元格单击右键 在弹出菜单中执行 表格 插入 行 或 表格 插入列 命令 可在当前光标所在行或列位置插入一行或一列 将光标定位在末行的最后一个单元格中 按 Tab 键可在表格的最下边添加一行 2 行或列的删除 用鼠标指向某单元格单击右键 在弹出菜单中执行 表格 删除 16 行 或 表格 删除列 命令 可在删除当前光标所在行或列 6 删除表格 方法 选中表格 按 Delete 键 或者执行 编辑 清除 命令 第 3 课时 三 设置表格属性 在设置表格属性前 首先要插入表格并选择表格 将光标定位在插入的表格中 此时表格的上方或下方出现带有标注的绿线 单击绿线 区域即可选取光标所在的表格 如果没有绿线 则可以通过在表格左下方的标签栏上 单击标签来选取表格 选取表格后 属性 面板如下图所示 四 设置单元格属性 按住鼠标左键拖动选取需要的单元格后 其 属性 面板如下图所示 教学小结 介绍了网页布局中常用的布局方式 表格和创建 编辑 属性设置及在网页中的应用 课堂作业 在网页布局中表格有什么作用 板书设计 任务 2 AP 元素的应用 教学目标 1 AP 元素的概念 2 在网页中插入 AP 元素 3 AP 元素属性的设置 教学重点 1 网页中 AP 元素的应用 2 AP 元素的属性设置 教学难点 网页中 AP 元素的应用 教学方法 任务驱动法 实例演练法 教具准备 多媒体教学环境 教学内容 一 AP 元素的概念 17 1 AP 元素的概念 它是分配有绝对位置的 HTML 页面元素 就是 div 标签或其他任何标签 但通常是绝 对定位的 div 标签 在以前的版本中 通常称为 层 AP 元素可以包含文本 图像或其 他任何可放置到 HTML 文档正文中的内容 可以将它定位在页面上的任何位置 对页面上 的元素进行重叠和复杂的布局 2 AP 元素的面板 二 层的基本操作 层也是进行网页布局的一种工具 由于层具有浮动性 可以在窗口中随意拖动 因此 它的定位相对于表格更为灵活 例如 要在网页左右侧空白处或浮于网页上方添加一些广 告 宣传画等 就可以通过层来完成 1 创建层 选择插入工具栏上 布局 选项 单击 布局 面板上的 绘制 AP Div 按钮 移 动鼠标到文档区域 鼠标指针变成十字形 在网页中看拖动鼠标 绘出蓝色矩形区域 2 层的选择 单击层的边框 单击层的选择柄 位于层的左上方 3 层的删除 选择层后按键 三 层属性的设置 单击层边框选中层 其 属性 面板如下图所示 如果要使多个层对齐 大小一致等 则按住 Shift 键选中这些层 然后在 属性 面板中设置对应的参数 1 可见性 Default 默认 Inherit 继承 Visible 可见 18 Hidden 隐藏 2 溢出 Visible AP 元素将向右向下扩大以显示 AP 元素内的全部内容 Hidden 只显示 AP 元素尺寸以内的内容 Scroll 不改变 AP 元素的大小 但增加滚动条 不管 AP 元素是否能够显示全部的内 容都会显示滚动条 Auto 只有在 AP 元素不能显示全部内容的时候才出现滚动条 3 Z 轴 其数值代表在垂直平面的方向上 AP 元素的序号 序号大的 AP 元素显示在上面 四 表格与层的相互转换 在 DreamweaverCS3 中 表格与层之间可以相互转换 有些低版本的浏览器不支持层功 能 为了使网页的访问面扩大 可以将网页中的层转换为表格 选择 修改 转换 AP DIV 转换为表格 命令 可将层转换为表格 选择 修改 转换 表格转换为 AP DIV 命令 可将表格转换为层 教学小结 介绍了另外一种网页布局的方法 AP 元素 讲述了 AP 元素的创建 编辑及属性设 置方法 教学作业 说出 AP 元素在网页布局中的作用及它与表格之间的区别 板书设计 教学反思 AP 元素这种网页布局的方法比较灵活 可以弥补表格布局的缺陷 它们可以相互配合 地运用使得网页的效果更好 第第 4 章章 超级链接超级链接 本章教学目标 1 掌握超链接基础知识以及超链接的创建 设置 更改方法 2 能运用超链接知识 创建文本链接 锚点链接 电子邮件链接 图像映射 3 掌握链接基础知识 4 掌握链接的创建 设置与更改 5 掌握锚点链接 电子邮件链接 图像映射等创建和设置方法 6 了解链接检查与测试 本章教学重点 文本链接和图片链接的创建方法 本章教学难点 创建映射图像链接的方法 教学方法 讲授 多媒体演示及观看声像资料等 任务 1 为 我的作品 添加超文本链接 教学目标 1 理解掌握超级链接的含义及精髓 2 掌握超链接的分类 3 掌握超级链接的链接目标 19 教学重点 1 超链接的分类 2 超级链接的链接目标 教学难点 超级链接的创建方法 教学方法 示例讲述法 任务驱动法 教学内容 一 超级链接的分类 在 属性 面板中的 链接 文本框中直接输入要链接地址 htm 如果链接文件位 于本地站点目录中 也可以点击 浏览文件 按钮在硬盘上查找文件 1 链接目标 blank 将被链接文档显示在一个新的未命名的框架或窗口内 在内部链接或外部链 接中的主要分类页面时多用于此方式 parent 将被链接文档显示在包含链接的框架的上一级框架或者窗口内 多应用在框 架结构的网页中 seft 将被链接文档显示在和链接所在的同一框架或窗口内 这是默认的链接打开方 式 通常没有指定时就会被采用 top 将被链接文档显示在整个浏览器窗口并取消所有框架 同样多应用在框架结构 的网页中 2 链接的类型 一个网站是由多个页面组成的 而这些页面之间依据链接确定相互之间的导航关系 超级链接由两部分组成 链接载体 如 文本 图像 图像热区 动画等 和链接目 标 如 页面 图像 声音 程序 其他网站 Email 甚至是页面中的某个位置 锚点 链接的类型 内部链接 同一网站文档之间的链接 外部链接 不同网站文档之间的链接 锚点链接 同一网页或不同网页中指定位置的链接 E mail 链接 发送电子邮件的链接 3 链接路径 1 绝对路径 为文件提供完全的路径 包括适用的协议 例如 http ftp rtsp 等 如 2 相对路径 相对路径最适合网站的内部链接 如果链接到同一目录下 则只需要输入要链接文件的名称 要链接到下一级目录中的 文件 只需要输入目录名 然后输入 再输入文件名 如链接到上一级目录中的文件 则先输入 再输入目录名 文件名 3 根路径 是指从站点根文件夹到被链接文档经由的路径 以前斜杠开头 例如 pag grzl html 就是站点根文件夹下的 pag 子文件夹中的一个文件 grzl html 的根 路径 二 超级链接的创建 1 外部链接 1 直接输入地址 20 选中要加超链接元素 在属性面板中 链接 文本框直接输入外部绝对地址 如下图 所示 2 使用超级链接对话框 选中要加超链接元素 单击常用快捷栏中的 超级链接 按钮 如图所示 弹出 超级 链接 对话框 2 内部链接 在文档窗口选中文字 单击属性面板 链接 后的 按钮 弹出 选择文件 对话 框 选择要链接到的网页文件 即可链接到这个网页 我们也可以拖动 链接 后的 按钮到站点面板上的相应网页文件 则链接将指向这 个网页文件 3 E mail 链接 单击常用快捷栏中的 电子邮件链接 按钮 弹出 电子邮件链接 对话框 在对话 框的文本框那输入要链接的文本 然后在 E mail 文本框内输入邮箱地址即可 也可以直接 在 属性 对话框中直接输入 mailto E mail 4 锚点链接 1 定义 所谓锚点链接 是指在同一个页面中的不同位置的链接 2 锚点链接的作用 作用是当页面内容较长时 为了浏览更加方便 可以在页面的某个分项内容的标题上 设置锚点 然后在页面上设置锚点的链接 这样用户就可以通过链接快速地直接跳转到指 定页面中 5 创建其他超链接 1 空链接 有时候我们需要一种超链接的样式效果 但不需要其链接跳转到任何其他页面或站点 此时 空链接无疑是非常适合的 空链接指向的被链接文件是文件本身 操作方法是在 属性 面板 链接 文本框中直接输入 即可 2 下拉菜单链接 多个超链接使用一个下拉的菜单包括 单击显示菜单选择其中的链接文本即可打开对 应的超链接 多应用在超链接较多 超链接分类的页面中 3 框架网页链接 主要应用在框架结构的网页中 在效果方面的显示是这样的 一个页面 在某块区域 为页面的链接导航 某块区域为内容的显示 单击不同的超链接 该区域显示不同的信息 内容 教学小结 超级链接是网页的灵魂 它能使网页成为一个有机的整体 本任务主要介绍了超级链 21 接的分类 创建 地址的应用 课外作业 1 超级链接可以分为哪几类 2 举例说明几种地址的应用 3 什么是锚点链接 如何创建锚点链接 板书设计 任务 2 图像地图的创建 教学目标 1 掌握图像地图的含义 2 掌握热点区域的创建及绘制 3 掌握图像地图的创建 教学重点 1 热点区域的创建及应用 2 图像地图的创建 教学难点 图像地图的创建 教学方法 教学内容 一 图像地图映射概念 所谓图像映射 就是将一幅图像分成若干区域 并且每个区域都有自己的链接 图像 映射可用于地图 导航等应用中 二 热点区域的应用 1 绘制热点区域 从插入栏中选择 绘制矩形热点 选项 单击要映像的区域的一角 然后沿对角线拖 动鼠标绘制出一个矩形 释放鼠标 则会显示出指定区域 最后在 属性 面板中设置链 接 目标和替换文本框 2 修改热点区域 每个热点区域边框上都有控点 可用来改变热点的大小及形状 移动修改各控点之前 应先选中 属性 面板中的指针热点工具 矩形图形有四个控点 位于图形的四个角上 拖 曳任意一个控点可以改变图形大小及形状 提示 1 拖动时按住 Shift 键 将保持矩形为正方形 2 椭圆形热点也有四个控点 拖曳任意一个控点都可以缩小或放大圆形的直径 教学小结 介绍了图像地图的创建及应用 了解了这一类网页的应用及编辑 课外作业 1 图像地图的含义 2 热点区域有哪几类 如何应用 第 4 章内容小结 一 超级链接 1 概念 是指站点内不同网页之间 站点与 Web 之间的链接关系 它可以使站点内的网页成为 22 有机的整体 还能够使不同站点之间建立联系 超级链接由两部分组成 链接载体和链接 目标 超链接元素 文本 图像 图像热区 动画等 链接目标 可以是任意网络资源 例如 页面 图像 声音 程序 其他网站 Email 甚至是页面中的某个位置 锚点 2 超链接的类型 内部链接 同一网站文档之间的链接 外部链接 不同网站文档之间的链接 锚点链接 同一网页或不同网页中指定位置的链接 E mail 链接 发送电子邮件的链接 3 超链接路径 1 绝对路径 为文件提供完全的路径 包括适用的协议 例如 http ftp rtsp 等 2 相对路径 相对路径最适合网站的内部链接 如果链接到同一目录下 则只需要 输入要链接文件的名称 要链接到下一级目录中的文件 只需要输入目录名 然后输入 再输入文件名 如链接到上一级目录中的文件 则先输入 再输入目录名 文件 名 3 根路径 是指从站点根文件夹到被链接文档经由的路径 以前斜杠开头 二 超级链接的创建 1 创建外部链接的方法 1 直接输入地址 选中要加超链接元素 在属性面板中 链接 文本框直接输入外部 绝对地址 2 使用超级链接对话框 选中要加超链接元素 单击常用快捷栏中的 超级链接 按钮 输入 文本 链接 目标 标题 等信息 2 创建内部链接的方法 在文档窗口选中文字 单击属性面板 链接 后的按钮 弹出 选择文件 对话框 选择要链接到的网页文件 即可链接到这个网页 我们也可以拖动 链接 后的按钮到 站点面板上的相应网页文件 则链接将指向这个网页文件 此外 我们还可以直接将相对 地址输入到 链接 文本框里来链接一个页面 3 创建 E mail 链接 单击常用快捷栏中的 电子邮件链接 按钮 弹出 电子邮件链接 对话框 在对话 框的文本框那输入要链接的文本 然后在 E mail 文本框内输入邮箱地址 三 图像地图的应用 1 图像地图映射概念 就是将一幅图像分成若干区域 并且每个区域都有自己的链接 图像映射可用于地图 导航等应用中 2 使用绘图工具 从插入栏中选择 绘制矩形热点 选项 单击要映像的区域的一角 然后沿对角线拖 动鼠标绘制出一个矩形 释放鼠标 则会显示出指定区域 最后在 属性 面板中设置链 接 目标和替换文本框 按照以上步骤 在插入栏中选择 绘制椭圆热点 或 绘制多边形热点 选项 可以 使用椭圆热点工具或多边形热点工具绘制热点区域 3 修改热点区域 每个热点区域边框上都有控点 可用来改变热点的大小及形状 移动修改各控点之前 23 应先选中 属性 面板中的指针热点工具 矩形图形有四个控点 位于图形的四个角上 拖曳任意一个控点可以改变图形大小及 形状 拖动时按住 Shift 键 将保持矩形为正方形 椭圆形热点也有四个控点 拖曳任意一个控点都可以缩小或放大圆形的直径 例如 如果拖住圆形顶部的控点向上移动 圆形将往上扩展 每一个多边形热点的角上都有一个控点 单击某个控点将其拖至新的位置 多边形的 形状也会随之变化 第第 5 章章 框框 架 架 4 学时 学时 本章学习目标 1 了解使用框架的优缺点 2 掌握框架网页在创建 选择 设置 存储方面的特点 3 掌握框架和框架集的创建 4 掌握框架结构网页的制作 5 掌握嵌入式框架的使用 教学重点 1 框架结构网页的制作 2 框架与框架集的创建 教学难点 嵌入式框架 教学方法 教师使用多媒体投影演示制作过程 学生上机操作完成实例与实训 任务 1 创建框架网页 教学目标 1 理解掌握框架的作用及创建 2 理解掌握框架及框架集属性的设置 3 掌握框架下超级链接的创建 教学重点 1 框架的创建及属性设置 2 框架及框架集的设置及关系 教学难点 框架与框架集的应用及超级链接的创建 教学方法 示例演示法 任务驱动法 教具准备 多媒体教学环境 教学内容 一 框架和框架集 1 框架的概念 框架是浏览器窗口中的一个区域 用于显示独立的 HTML 文档 两个或两个以上的框 架组合成一个见面 框架经常用于导航 一个框架显示包含导航栏目的文档 另一个框架 显示含有内容的文档 2 框架集的概念 在网页上定义的一个区域就是单个框架 而框架集则记录了同一个网页中多个框架的 24 布局 超链接和属性信息 利用框架可以把浏览器窗口划分为若干个区域 每个区域可以 添加任意网页元素 也可分别显示不同的网页 注意 框架集也是 HTML 文件 但它本身并不包含要显示的 HTML 内容 它只是向浏览器提 供应如何显示一组框架及在这些框架中应显示哪些文档 3 框架与框架集的关系 框架集与框架之间的关系其实就是包含与被包含的关系 框架集相当于一个容器 框 架则是放在容器中的东西 框架集记录了框架的位置 以及框架中包含的网页的链接地址 二 创建框架 DreamweaverCS3 中给出了框架的预定格式 一般采用预定格式即可创建框架页 创建 框架的具体操作如下 1 选择 文件 新建 命令 打开 新建文档 对话框 2 在插入工具栏中的 布局 选项卡中单击 框架 按钮 在弹出的下拉菜单中选择 需要的框架样式 三 框架和框架集的选择 1 框架的选择 按住 Alt 键 在要选择的框架内单击鼠标即可选取该框架 在 框架 面板中单击框架来选取它 被选取的框架显示为虚线框 2 框架集的选择 单击框架边框 在选取一个框架的基础上按住 Alt 键 再按键盘上的方向键来选取同级 不同级的 框架 四 调整框架大小 拖动框架边线即可调节框架的大小 通过框架集 属性 面板中的 行列选定范围 项来调节 五 拆分框架 选取一个框架后 再按住 Alt 键并拖动框架边线或文档窗口四周的边框 即可将框 架拆分为多个框架 如果将框架边线拖到另一框架边线或窗口边界处 则可删除框架 如 果其中有内容 则会提示是否保存要删除的框架中的内容 六 设置框架属性 选取框架后 其 属性 面板如下图所示 1 滚动 指定在浏览器中框架是否显示滚动条 是 表示浏览器始终显示滚动条 否 表示不显示滚动条 自动 表示根据内容的多少在需要时显示 默认 则取决于用户浏览器的设置 2 不能调整大小 在浏览器中用户是否可以用鼠标拖动框架 默认值为不能调整大小 25 七 设置框架集属性 选取框架集后 其 属性 面板如下图所示 1 边框 是否在浏览器中显示边框 2 边框宽度 设置边框的宽度 3 边框颜色 设置边框颜色 4 列 用于设置框架的列宽 默认单位为像素 教学小结 介绍了网页的另外一个布局网页的方式 框架 讲述了它的创建 编辑及属性设置 讲述了框架与框架集的关系 课堂练习 什么是框架 什么是框架集 它们二者之间有什么关系 板书设计 教学反思 表格与框架均为网页布局的方式 但框架的优势是能在一个网页中设置超级链接 显 示网页的内容 任务 2 嵌入式框架 教学目标 1 熟练掌握表格及单元格的应用 2 掌握嵌入式框架代码的应用 教学重点 嵌入式框架的应用 教学难点 嵌入式框架的代码 教学方法 示例法 任务驱动法 教具准备 多媒体教学环境 教学内容 一 嵌入式框架 通过在 HTML 代码窗口中插入 iframe 标签来嵌入框架 它通过在标 签中命名 设置框架属性及链接文档路径来完成框架功能 二 嵌入式框架的步骤 建立嵌入式框架的具体操作步骤如下 1 嵌入浮动框架的网页文档 将光标定位在要嵌入框架的位置 2 代码视图 在光标处输入 iframe 3 窗口中即可看到一个灰色区域的矩形框 这就是嵌入式框架的范围 4 中加入代码指定嵌入式框架的名称 大小 以及是否需要滚动条等信息 例如 各项含义如下 border 0 表示边框为 0 marginwidth 0 marginheight 0 表示嵌入式框架的宽和高的边距均为 0 src images main html 表示框架中调用的网页文件是 main html frameborder no 表示框架没有边框 width 580 height 400 表示框架的宽度为 580 像素 高度为 400 像素 教学小结 介绍了嵌入式框架的应用及代码的含义 掌握了这些对于网页制作具有非常重要的作 用 第第 6 章章 层叠样式表 层叠样式表 6 学时 学时 本章教学目标 1 理解掌握 CSS 的概念和作用 2 熟练掌握类样式的创建和应用 3 熟练掌握标签样式的创建和应用 4 熟练掌握高级样式的创建和应用 5 熟练掌握外部样式表的创建 6 熟练掌握 CSS 特效的应用 7 熟练使用样式表美化网页 教学重点 1 掌握创建类样式 标签样式 高级样式及应用 2 掌握样式表文件的创建及应用 教学难点 创建和应用类样式 教学方法 任务驱动法 以学为主 教师使用多媒体投影演示制作过程并讲解关键环节 学生上 机操作完成实例与实训 任务 1 创建类样式 教学目标 1 创建 CSS 类样式 2 应用类样式 3 设置文字样式 4 设置边框样式 5 设置区域样式 教学重点 类样式的创建与应用 教学难点 个性化样式的设置 教学内容 一 样式表的三种基本类型 1 类样式 类样式适合于单独为元素设置个性化的样式 用户可以在文档的任何区域或文本中应 27 用类样式 定义好的类样式能很方便的应用到网页元素中 如果将类样式应用于一整段文 字 那么会在相应的标签中出现 Class 属性 该属性值即为类样式名称 2 HTML 标签样式 可以针对某一个标签来定义层叠样式表 也就是说所定义的层叠样式表将只应用于选 择的标签 例如 为标签定义了层叠样式表 那么所有包含在 标 签范围内的内容将遵循所定义的层叠样式表 3 高级样式 高级样式为特殊的组合标签定义层叠样式表 使用 ID 作为属性 以保证文档具有唯一 可用的值 高级样式是一种特殊类型的样式 常用的有四种