网页电子教案（47-54课时）

1、谷城中等职业教育中心学校电子教案20142015学年度第一学期网页制作课程电子教案 授课课题： 个人主页首页 授课教师：蒋红艳 NO： 24-25授课班级14春微机、14春商务授课日期授课类型讲授、演示、实训学 时 数4教学目标制作一个简单的个人网站，构建网站意识，掌握各种链接的灵活应用。教学内容文本超链接、图片超链接、电子邮件超链接重点难点图片热区超链接、水平线属性设置教学方法演示、讲解学习方法观察、实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、范例展示二、任务分析这是一个综合的小型网站，由三个相互链接的页面构成。主页布局可以用一个4行1列的表格完成，第1行，插入标题和图

2、片；第2行，插入导航文字，设置链接；第3行，插入水平线，设置水平线样式；第4行，插入地图，制作图片热区超链接。三、教师演示1、学生1操作：新建站点、素材文件夹、首页；2、学生2操作：绘制布局表格，复制素材； 3、学生3操作：第1行，插入图片、标题文字，设置文字样式；4、学生4操作：输入导航菜单文字，网站中添加子页，建立超链接； 5、教师演示：插入水平线，设置水平线样式；hr width=” size=” color=” />6、学生5操作：第4行，插入地图，创建图片热区超链接；7、教师演示：设置页面背景。  课堂练习制作个人网站主页  小结与作业课

3、堂小结   本课作业  本课教学后记（课堂设计理念，实际教学效果及改进设想）    教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题： 个人网站子页 授课教师：蒋红艳 NO： 26授课班级14春微机、14春商务授课日期授课类型讲授、演示、实训学 时 数2教学目标制作个人网站子页版主的话，熟练掌握简单的网页布局、文本编排、样式设置，构建网站意识，掌握各种链接的灵活应用。教学内容电子邮件超链接、文字样式设置、水平线设置重点难点CSS设置文本样式教学方法演示、讲解学习方法观

4、察、实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 范例展示二、任务分析这是个人网站的子页：版主的话页面，整个页面比较简单，主要是文字和链接。因此设置文字的样式就显得非常重要。网页中的文字要做到疏密有度，便于阅读。页面布局可以用一个4行1列的表格完成，第1行，插入标题；第2行，插入导航文字，设置链接；第3行，插入水平线，设置水平线样式；第4行，插入文字，设置文字样式。三、教师演示1、学生1操作：新建子页banzhu.html；2、学生2操作：绘制布局表格； 3、学生3操作：插入水平线，设置水平线样式；hr width=” size=” color=” />4、教师操作

5、：第4行，插入文字，设置文字样式；5、教师演示：设置页面背景。  课堂练习制作个人网站子页：版主的话  小结与作业课堂小结   本课作业  本课教学后记（课堂设计理念，实际教学效果及改进设想）    教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题： 个人网站子页（校园笑话） 授课教师：蒋红艳 NO： 27授课班级14春微机、14春商务授课日期授课类型讲授、演示、实训学 时 数2教学目标制作个人网站子页校园笑话，熟练运用锚记超链

6、接、电子邮件超链接等知识，掌握各种链接的灵活应用。教学内容锚记超链接的创建、文字样式设置重点难点锚记超链接教学方法演示、讲解学习方法观察、实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 范例展示二、任务分析这是个人主页的校园笑话页面，页面较长，使用锚记超链接进行页面内的跳转。因此，熟练掌握锚记超链接的创建是本页面的制作重点。创建锚记超链接的步骤上：1、文本编排；2、插入锚记；3、创建链接。三、教师演示1、学生1操作：绘制布局表格； 2、学生2操作：第1行，插入图片、标题文字，设置文字样式；3、学生3操作：输入导航菜单文字，网站中添加子页，建立超链接； 4、学生操作：插入水平线，设置水平线样式；hr width=” size=” color=” />5、教师操作：第4行，插入文本，对文本进行编排；7、教师演示：插入命名锚记；8、教师演示：创建锚记超链接；9、教师演示：创建返回的锚记超链接。  课堂练习制作个人网站子页校园笑话  小结与作业