项目名称: 度假村网页制作
项目 | 度假村网页制作 | 课型 | 新授 | 授课日期 | ||||||||||||||||
项目目标 | 知识目标 | 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小时内删除。
发表评论