实训目标 实训重点 实训难点 实训方法 实训准备 10、 11、 掌握AP元素面板的使用 理解原始档图像和交换图像概念 1、 表格的布局 2、 图像交换设置 图像交换 上机实训 教案、素材、案例、教材、计算机机房 25、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 26、 27、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 一、新建站点和默认图像文件夹 二、交换图片实训 1、 新建网页“jh.HTML”将页面背景设置为黑色 2、 插入2行1列宽度为700px的表格，边框粗细0，边距10，间距0 3、 在第一行插入图片bj2.jpeg图片并居中，并将图片的ID命名为pm 4、 在第二行里再嵌套一个一行三列的表格，宽度为100%，边框粗细0，边距10，间距0，背景为灰色，然后分别插入教师所给素材1.jpeg、2.jpeg、3.jpeg，并将素材都设置宽高为200,30 5、 选择1.jpeg并将其添加行为——交换图像，如下图所示： 任务 交换图像 6、 同理，将2.jpeg、3.jpeg添加行为，保存预览 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 自主练习
实训总结 本次实训室交换图像，主要是一个小项目的制作，通过项目的制作让学生深刻理解交换图像的应用，较好。 实训课题 实训目标 实训重点 实训难点 实训方法 实训准备 12、 13、 拼图游戏 熟悉AP元素面板 掌握添加拖动AP元素 实训课时 2课时 拖动AP元素面板 项目的实现 上机实训 教案、素材、案例、教材、计算机机房 28、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 29、 30、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 三、拼图游戏实训 1、 新建网页pt.HTML，将页面背景设置为图片back.jpeg 2、 绘制AP DIV层，宽高分别为220,220，背景颜色为#FFCCFF 3、 另外绘制四个AP DIV层，宽高分别为110，110，背景颜色为#FFCCFF，并将教师准备的素材1.jpeg、2.jpeg、3.jpeg、4jpeg分别插入四个层 4、 利用辅助线将层对齐 5、 将四个层分别移动到大层里，将花朵拼凑整齐，如图所示 任务一 拼图游戏
6、 分别将四个小层添加行为——拖动ap元素，设置如图所示： 7、四个小层都设置完成后再将小层拖出大层，顺序打乱，保存 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次课通过拼图游戏的制作，让学生深刻理解AP层在DW的应用，运用AP属性设置不同的效果，较好。
课题 4.4修改属性特效及动态菜单制作 教学课时 2课时 自主练习 实训总结 知识目标 教学目标 1、掌握表格布局页面 2、掌握改变属性 3、掌握行为“显示-隐藏”的正确操作 1、学会利用不同行为制作网页效果 2、应用改变属性 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 能力目标 情感目标 教学重点 1、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开 2、AP元素隐藏显示
教学难点 属性高height、宽width的设置 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 1、 百度搜索图片时鼠标经过图片时图片经常会自动放大，如何实现？ 2、 导航栏如何制作？ 教师活动 演示图片放大及导航栏效果并引导学生思考 学生活动 欣赏教师的展示并分组讨论如何实现？ 设计意图 通过效果展示激发学生兴趣 导入新课 (5min) 一、 如何制作如下图所示效果网页？（具体要求：当鼠标经过图片时图片自动放大；当鼠标离开图片时图片缩小到原来大小） 任务一 修改属性特效 (35min) 操作步骤如下： 1、 新建网页，页面背景颜色为浅灰色 2、 插入3行3列的表格，合并第一行，并将第一行设置为深灰色，输入“索尼s630款图片”，居中对齐，字体大小为24，紫红色，黑体 3、 在第二行第三行分别插入图片1.jpeg、2.jpeg、3.jpeg、4.jpeg、5.jpeg、6.jpeg，并将图片设置为宽高分别为200,120，并将图片ID分别更改为p1…p6 4、 给p1添加行为-修改属性-，修改的宽高值如下图所示：
5、同理修改p2….p6 二、 动态菜单制作 1、 新建页面里绘制一个AP DIV层，背景颜色为#FF33FF在层里插入一行4列的表格，宽度为100%，边框，边距，间距都为0 2、 分别在表格里输入“新闻中心”、“娱乐频道”、“电脑网络”、“技术支持”，选中行设置行高25px，居中对齐 3、 AP DIV层设置行高为25px，并将层重新命名为dhl 4、 在新闻中心下面再绘制一个AP DIV层，并将层重命名为menu1，设置背景颜色为#FCF，在层里插入4行一列的表格，宽度设置为100%，边框，边距都为0，间距为3，输入文字国际新闻、国内新闻、体育新闻、英语新闻 5、 将“新闻中心”添加行为显示-隐藏，事件onmouseover，如下图所示 任务二 动态菜单制作 (40min) 6、 同理，添加行为显示-隐藏，事件onmouseout 7、 将menu1层跟dhl层靠在一起，给menu1同样添加显示-隐藏行为 课堂小结 (5min) 课后作业 (5min) 五、修改属性特效（宽width、高height、边框border等） 六、制作动态菜单栏（AP元素） 搜索百度图片及观察网页导航栏并对照教师上课内容 本次课通过修改属性特效掌握图片宽高的设置，理解图片大小改变效果。通过动态菜单栏教学反思 的制作，灵活运用AP层。
《网页制作》教案 - 图文
