第三周（21-30课时）.doc

谷城中等职业教育中心学校电子教案20142015学年度第一学期网页制作课程电子教案 授课课题：我的第一个网站 授课教师： 蒋红艳 NO： 11授课班级14春微机、14春商务授课日期授课类型讲授+演示学 时 数2教学目标1、 掌握透明层的制作；2、 掌握动态网站公告的制作；3、 掌握交互式图像菜单的制作。教学内容尝试使用透明层效果、动态网站公告效果、交互式图像菜单制作自己的第一个网站。重点难点层的绘制、调整与设置教学方法讲授+演示学习方法观察+练习教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 范例展示，明确任务二、 分析任务 怎样完成上图所示网页的编辑？可分哪几步？1、 新建站点、素材文件夹、主页； 2、 打开主页，绘制表格；3、 第一行：站标，透明层效果；4、 第二行：网站导航，交互式图像菜单；5、 第三行：网站公告，代码；6、 第四行：主体部分三、 教师演示1、 建站点：我的第一个网站，指定保存位置；2、 在站点中建立素材文件夹flash和images，主页index.html; 3、 把网页中要用的动画和图像素材复制到对应的站点素材文件夹中； 4、 打开主页，绘制表格：4行1列，宽778像素； 5、 第一行，插入站标图片，沿着图片边缘绘制层，在层中插入动画，设置动画为透明效果；6、 第二行，导航菜单，使用交互式图像效果制作网站导航菜单；7、 第三行，网站公告：先把此行分两列，第1列插入图片（如图），第二列输入网站公告文字，切换到“代码”模式，插入代码，制作动态网站公告；8、 第四行，网站主体：插入主广告，在广告图上绘制层，插入汽泡动画，设置动画透明属性。5分钟10分钟20分钟课堂练习学生演示操作：根据范例效果，结合老师演示操作，请8名学生合作分步完成整个网页的制作。35分钟其他小结与作业课堂小结1、 新建站点、素材文件夹、主页； 2、 站标，透明层效果设置；3、 网站导航，交互式图像菜单；4、 网站公告，代码。5分钟本课作业填写上机实训报告本课教学后记（课堂设计理念，实际教学效果及改进设想）漂亮的范例网页，炫丽的动画效果，激发了学生的学习兴趣和热情，他们对本次课的任务兴趣很大，对于本次课安排的案例表现出极大的热情，肯钻肯练，教学效果不错。教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：我的第一个网站 授课教师： 蒋红艳 NO： 12-13授课班级14春微机、14春商务授课日期授课类型实训课学 时 数4教学目标1、 掌握透明层的制作；2、 掌握动态网站公告的制作；3、掌握交互式图像菜单的制作。教学内容尝试使用透明层效果、动态网站公告效果、交互式图像菜单制作自己的第一个网站重点难点层的绘制、调整与设置教学方法检查、指导学习方法动手实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、布置任务分发范例网页效果截图（如下）二、分发素材向学生分发网页中需要用到的动画素材和图像素材，让学生分类保存到flash和images文件夹中。三、学生实训 向学生分发已经整理好的实训操作步骤，便于学生实训任务的完成：1、 建站点：我的第一个网站，指定保存位置；2、 在站点中建立素材文件夹flash和images，主页index.html; 3、 把网页中要用的动画和图像素材复制到对应的站点素材文件夹中； 4、 打开主页，绘制表格：4行1列，宽778像素； 5、 第一行，插入站标图片，沿着图片边缘绘制层，在层中插入动画，设置动画为透明效果；6、 第二行，导航菜单，使用交互式图像效果制作网站导航菜单；7、 第三行，网站公告：先把此行分两列，第1列插入图片（如图），第二列输入网站公告文字，切换到“代码”模式，插入代码，制作动态网站公告；8、第四行，网站主体：插入主广告，在广告图上绘制层，插入汽泡动画，设置动画透明属性。四、作业保存、点评（学生实训过程中，教师不断巡视机房，查看学生的实训进度，必要的情况下给予指导，对于存在的共性问题，用教师软件进行集中讲解、演示。）课堂练习其他小结与作业课堂小结点评：作业完成的好的同学：好的表现：本课作业完成上机实训报告本课教学后记（课堂设计理念，实际教学效果及改进设想）学生对动手实训兴趣很大，对于本次课安排的案例表现出极大的热情，肯钻肯练，教学效果不错。教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：时尚网页 授课教师：蒋红艳 NO： 14授课班级14春微机、14春商务授课日期授课类型讲授、演示学 时 数2教学目标1、 掌握用表格进行网页布局的方法；2、 掌握表格的基本调整、设置方法；3、 掌握用CSS样式设置文本的方法；4、 知道网页布局的注意事项。教学内容1、 绘制、调整布局表格；2、 CSS样式设置文本；3、 网页布局注意事项；重点难点CSS样式设置文本教学方法演示、讲解学习方法观察、练习教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 范例展示，明确任务二、 分析任务1、 上图所示网页布局样式是什么型？2、 如何完成网页布局？应该插入几行几列的表格？3、 表格第二大行如何操作？4、 表格第三大行与其他各行有无不同？如果有，不同在哪里？如何操作？5、 表格中有两种不同的文字颜色，如何实现？三、 理论讲解（PPT：各种布局范例网站）网页布局样式：“厂”字型、“同”字型、“口”字弄、分栏型、封面型、flash型等。本例时尚网站的主页布局属于“厂”字型。四、 教师演示1、 学生操作：新建站点（时尚网站），站点内创建素材文件夹images和主页index.html;2、 学生操作：复制网页素材至站点的素材文件夹中；3、 插入表格，3行2列780像素（如何确定表格宽？）4、 第一行：合并，调整高度40像素；5、 第二行：第1列，设置宽550像素，第2列230像素，拆分成8行； 6、 第三行：第1列，嵌套表格1行4列550像素，单元格间距为10，第2列，拆分成2行；7、 学生操作：添加网页图片、文字；8、 定义CSS样式，套用样式，使菜单文字成白色；9、 设置单元格背景颜色；10、设置页面属性。五、 网页布局注意事项 1、主次分明，中心突出； 2、大小搭配，相互呼应；3、图文并茂，相得益彰； 4、疏密有度，平衡对称。 课堂练习请多名学生分工合作分步完成时尚网页的主页编辑。小结与作业课堂小结1、 网页布局样式种类；2、 表格嵌套；本课作业填写实训报告本课教学后记（课堂设计理念，实际教学效果及改进设想）CS5版软件环境下，对文本的设置要求较高，不能在属性面板上对文字直接进行设置，要通过定义CSS样式来完成，对学生来说，有一定难度。教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：时尚网页 授课教师：蒋红艳 NO： 15授课班级14春微机、14春商务授课日期授课类型实训课学 时 数2教学目标1、 掌握用表格进行网页布局的方法；2、 掌握表格的基本调整、设置方法；3、掌握用CSS样式设置文本的方法；教学内容时尚网站主页布局表格绘制、调整，网页元素添加，文字样式定义套用。重点难点布局表格绘制、调整，CSS样式设置文本教学方法检查、指导学习方法实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、布置任务 分发上机任务范例截图：二、分发素材给学生分发网页中所需要的图片素材，让学生保存到站点的素材文件夹中。三、学生实训向学生分发已经整理好的实训操作步骤，便于学生实训任务的完成：1、 学生操作：新建站点（时尚网站），站点内创建素材文件夹images和主页index.html;2、 学生操作：复制网页素材至站点的素材文件夹中；3、 插入表格，3行2列780像素（如何确定表格宽？）4、 第一行：合并，调整高度40像素；5、 第二行：第1列，设置宽550像素，第2列230像素，拆分成8行； 6、 第三行：第1列，嵌套表格1行4列550像素，单元格间距为10，第2列，拆分成2行；7、 学