第三课 开篇之作——基于表格的页面布局
一、教学目标
1、知识与技能:
a、了解组成网页的各种元素及其学会在网页中添加网页元素的方法。
b、使学生知道并掌握如何打开站点;创建首页;整理素材并保存首页;对网页初步布局;测试网页的操作方法。
2、过程与方法:
课堂教学中,在教师的引导下让学生自我展示、自我激励、自我评价,不断提高学生的求知欲,体验成功,在不断摸索中形成独立的操作能力,在自主解决问题的过程中培养成就感。
3、情感与价值观:
a、通过学习网页布局美化网页,来提高学生学习的兴趣,让学生学会在快乐中获取知识并快乐成长。
b、让学生学会好的东西要大家一起分享,并培养学生的创新思维。
二、学情分析
八年级的学生对各种活动充满着好奇心,这是本节课顺利开展的前提,提出贴近学生生活的活动照片来让学生感兴趣,把学生的注意力吸引到本课知识点的学习上来。同时不同学生的认知能力、思维能力、操作水平有差异,所以考虑适当的分层教学,照顾到各个层面的学生。通过分组协作,操作能力较薄弱的同学在小组长的帮帮下,也能迅速掌握要领。
三、教学重、难点
重点:创建网页及整理素材和对首页进行初步布局。难点:利用表格规划网页、添加网页元素。
教学课时:1课时。
教学方法:讲授、演示、任务驱动、操作实践等
四、教学过程:
(一)组织教学
(二)导入新课(图片导入)
通过学生欣赏几种网页的类型及几组平时不同活动的照片素材,并把它创建到网站的首页当中来提高学生学习兴趣,让学生知道活动的主要宗旨是离不开“安全”导入新课。
(三)授新课:教学过程包括创设情境→示范讲解→任务驱动→操作实践→协作学习→学习评价→课后总结
1、创设情境“安全自护我能行”的主题。本课采用任务贯穿整个教学,首先展示教师做的“安全自护我能行”网页,一个有学生活动情景的网页;然后再展示规划好的网页及一些优秀网站的网页。(设计意图:主要让学生体会规划布局好的网页会给人们耳目一新的感觉,学会规划自己的人生目标)
2、演示讲解
①、规划网页:②、创建首页
③、整理素材并保存首页④、对网页进行初步布局⑤、测试网页
3、任务驱动:
根据自己规划方案,用表格和水平线来调整网页的布局,之后再给网页添加文字、图片、等元素,最后运行。
(设计意图:让学生参考老师及一些网页的设计来规划一下自己班级的网页
4、操作实践:
围绕本节几个任务展开实践操作练习,重在体验运动后与之前变化之间的成就感。分组练习,小组之内合作互助,由小组长负责分工、引领工作。各小组之间作品互相评价,塑造竞争氛围。最后将优秀作品操作并在全班展示。(设计意图:学生学习知识只有通过自己的大脑和手来完成的,印象才会深刻,才能够真正理解。由于不同的学生水平各异,通过小组学习可以让学生互帮互助,更好地完成学习任务。)
5、协助学习及评价
学生反馈操作,可以给操作一般的学生机会,给他激励。
(设计意图:提出的建议能让学生更顺利的完成操作,同时让学生直观的看到自己的操作是否完成,更能激发学生学习热情。在本环节中教师还照顾到个体学生的差异)
6、课堂总结及创作天地本节课以制作“安全自护我能行”方面的相关网页为主要任务,学习巩固制作网页的布局,让学生发现新知,获取新知和运用新知的能力的同时为后面任务打好良好的基础,并学会运用网络一起分享美好的东西。下去完成P21的创作天地。按P21页上的(1)、(2)点要求完成。
课件12张PPT。(2)厂字型(1)同字型(3)综合框架型(4)左右框架型
(5)上下框架型
(两个独立的区域框架) (6)标题正文型(7)flash型
(8)封面型(通常是网站首页) ——基于表格的页面布局第三课 开篇之作1、启动Dreamweaver——展开“文件”——在文件面板中选择
“安全自护我能行”的站点。如图所示: 一、打开站点单击此处选择站点2、如果“安全自护我能行”的站点删了就按上节课讲的新建站点的方法从新建一个站点。 二、创建网站首页
1、整理素材
步骤1:创建文件夹。右击“文件”——“站点安全自护我能行(D/safe)”
——“新建文件夹”——改名为“images”,其他类型的文件存放到文件夹“other”中。
步骤2:将首页素材图片index.gif,复制粘贴到images文件夹中。如图:单击此处展开文件夹与images同层 2、创建并保存首页 步骤 1:执行“文件”——“新建”——“新建文档”——“空白页”——“HTML”——“创建” 即可。
步骤 2:执行“文件” ——“保存” ——“另存为对话框”——修改文件名为“index.html” ,保存路径无需修改,系统默认在D/safe下。
任务驱动一:整理素材、创建并保存首页。 三、对首页进行初步布局
1、为页面添加背景颜色:
步骤1:单击——“文档窗口”——使“插入点”在编辑区内闪烁——单击“属性检查器”——“页面属性”。
步骤2:对“页面属性”进行设置。单击“分类”——“外观CSS”——“背景颜色”——浅黄色的颜色值“#FFFF94”——“确定”按钮。
2、设置网页标题并预览网页效果:
步骤1:在“标题”文本框中输入“安全自护我能行——首页”。
步骤2:执行“文件”——“保存”。
步骤3:执行“文件”——“在浏览器中预览”——“IExplore”命令或按“F12”即可。效果图如下:
网页背景颜色网页标题3、使用表格初步布局步骤1:执行“插入”——“表格”——
“2行1列”对表格进行设置如图所示:
步骤2:单击“标签选择器”——?table?标签——
在“属性选择器”继续完成表格设置,如图所示:步骤3:单击“标签选择器”——?table?标签——单击“拆分”按钮——在第一行的鼠标定位符“?”之前——单击“空格键”——双击“background”——再单击“浏览”按钮——按“确定”。此时可以对表格的背景图像自行做一些调整。如图所示:4、测试网页步骤1:执行“文件”——“保存”命令。
按快捷键“ctrl+S ”。
步骤2:按快捷键“F12 ”效果如图所示:
任务驱动二:对首页进行初步布局并保存和运行。创作天地,任务探究:为网站再增加一个网页,命名为ex1.html,保存路径设置为
D:safeother,网页标题为“表格练习”,完成效果图为P21页3.19图可供参考,要求如下:
(1)使用3X2的表格进行布局。
(2)为网页和表格分别设置背景图像bg1.gif(图案为淡绿色小花)和bg2.gif(图案为田野溪流)。同学们再见!