项目名称: 度假村网页制作
项目 | 度假村网页制作 | 课型 | 新授 | 授课日期 | ||||||||||||||||
项目目标 | 知识目标 | 1、掌握边框效果的制作 2、掌握首行缩进效果的制作方法 | ||||||||||||||||||
能力目标 | 1、能熟练掌握 css添加边框效果的制作方法 2、能独立制作度假村网页 3、能熟练为网页中的段落设置首行缩进效果 | |||||||||||||||||||
德育目标 | 1、培养学生分析解决问题的能力 2、培养学生自主学习,创新思考的意识 3、培养学生团队协作的精神 | |||||||||||||||||||
项目分析 | 项目重点 | 边框效果在网页中的应用 | ||||||||||||||||||
项目难点 | 段落首行缩进效果的制作 | |||||||||||||||||||
项目要求 | 要求同学们能够熟练使用图片轮播效果,并且能够制作博宏房地产网页页面 | |||||||||||||||||||
任务内容 | 1、度假村网页页面制作 2、为文字添加背景效果制作 3、 css添加边框效果 4. 段落首行缩进效果 | |||||||||||||||||||
教学方法 | 演示法、任务驱动法、启发式教学 | |||||||||||||||||||
课前准备 | 1、 按8s标准,课前清扫、清洁、整理、整顿 2、 教师清点人数、查鞋套、收手机 | |||||||||||||||||||
教学 环节 | 教学内容 | 教师 活动 | 学生 活动 | 设计 意图 | ||||||||||||||||
情景设置 项目导入 | 一、导入 屏幕上展示博宏房地产网页的效果图,共有两个页面,在这个效果图中有图片轮播效果,引导学生怎么才能制作这种效果,提高学生的兴趣,并确定本节课要制作的重点和难点。 图一:主页 图2:子页 | 比较网页的特点,分队进行讨论,每队说出一条这个网页的特点 | 学生讨论网页的风格,并进行总结。 | 以效果图导入提高学生兴趣 | ||||||||||||||||
自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 | 二、具体任务 任务一:度假村网页页面制作 如图1 任务分解制作: 1.新建一个基本页面,并保存,对页面重新命名为:index.html 2.利用表格进行布局设计. 确定页面的整体宽度:1000px;页面字体:宋体;字体大小:12px;文本颜:#999999;背景颜:#FFFFFF;上下左右边距:0px 3.导航条制作:怎么制作网页图片 4.页面主体制作 5.网页页脚制作 任务二:为文字添加背景效果制作 具体步骤: 1. 打开网页文档 2. 单击窗口,打开css样式命令,选择新建 3. 在新建css规则里,输入“.bg”,设置定义在为“仅对该文档” 4.打开css样式面板,单击“背景”选项卡,设置背景颜 5.打开需要添加的文字部分,把要加的背景css样式进行套用,并对颜进行适当的修改。 6.保存网页文档,预览。 任务二拓展,为文字添加背景图像。根据任务二的制作步骤,学生自行为网页文字添加文字背景图像 任务三:css添加边框效果 效果:“青岛一地两日游”,带有红边框效果 如图: 1. 打开网页文档 2. 单击窗口,打开css样式命令,选择新建 3. 在新建css规则里,输入“.yy”,设置定义在为“仅对该文档” 4.打开css样式面板,单击“边框”选项卡,设置边框颜 5.打开需要添加的文字部分,把要加的边框css样式进行套用,并对颜进行适当的修改。 6.保存网页文档,预览。 任务四:段落首行缩进效果 具体步骤: 1. 打开网页文档 2. 单击窗口,打开css样式命令,选择新建 3. 在新建css规则里,输入“.tt”,设置定义在为“仅对该文档” 4.打开css样式面板,单击“区块”选项卡,设置“文字缩进”,单位“字体高”。 5.打开需要添加的文字部分,把要加的缩进css样式进行套用,并对进行适当的修改。 6.保存网页文档,预览。 三、小队评比 打分标准: 1、4个任务,每个任务1分,共4分。 2、做的最快的那个队另加2分 3、纪律差或队中有做和学习无关着没人次扣1分 4、效果图有创新另加1分
| 教师演示,并以引导性语言让学生思考该如何操作 。 老师给出提示,观察学生制作情况,必要时给出共同演示 教师巡回指导, 以学生自学为主,在巡回知道中发现存在的问题,统一讲解 老师给出提示,观察学生制作情况,必要时给出共同演示 教师先演示基本步骤,并提出问题,如何刷新到外部网站 先观看效果,提高学生的兴趣,学生先做,教师最后总结 教师记录学生不足与缺陷。各个小队讲完后进行总结 鼓励学生展现成果抒发己见 | 根据老师的提醒积极思考 小队讨论后实际动手制作 学生之间交流并操作 小队讨论后实际动手制作 学生实际练习并重点记录红标识的知识点 学生根据任务三的特点,学习自己把代码加到适合的位置 得分最低的小队要进行“奖励”或表演节目 | 培养学生善于分析与思考的能力 培养同学们的团队合作意识 跟据要求自主处理,发挥学生的创造力 培养同学们的团队合作意识 通过实践总结步骤和难点培养自主学习能力 通过实践总结步骤和难点,培养自主学习能力 肯定自己的成绩,正视自己的不足 | ||||||||||||||||
归 纳总 结 | 本节课重要的知识点为用css去对文本进行格式化,在实际的应用中较为广泛,需学生们在实际制作的过程中认真去理解和体会。网页的文字效果较为简单,需根据自己的制作需要灵活掌握。 | |||||||||||||||||||
作业布置 | 1、如何制作文字背景效果?。 2、总结用css制作首行缩进效果 3、总结用css制作边框效果 | |||||||||||||||||||
课后反思 | 本节课在实施过程中主要以学生实际操作为主,老师起到一个引导作用,尽可能的通过本节课的学习来锻炼学生自主学习与探究的能力。 | |||||||||||||||||||
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论