课程内容
3 添加页面表现（CSS样式）
3.3制作内页
计划课时
4课时
一、情景引入
公司可以分为传统展示型网站和营销型网站，传统展示型网站的主要目的是公司简介以及公司产品或理念宣传，其作用和宣传册类似。
二、教学目标
学生通过完成本案例，达成以下目标：
知识目标：认识CSS两种最基本的特性：继承性和层叠性；知道CSS中的尺寸属性、布局属性、文字属性和边框属性。
能力目标：掌握CSS尺寸属性、布局属性、文字属性和边框属性的设置方法。
情感目标：激发学生对本课程和本专业学习的浓厚兴趣；培养学生互相帮助、团结协作的精神； 拓展学生的审美观念和想象能力，并具有创新能力。
三、教学重、难点
教学重点：创建页面布局、添加页面内容
教学难点：编辑布局样式、编辑文字样式、编辑图片样式
四、教学方法
以案例教学为核心，采用任务驱动式的行为导向教学法。
采取了由浅入深、循序渐进的教学策略，以学生的感知、理解、巩固、运用为教学设计流程。教学互动环节中主要包括六个步骤：明确任务——计划筹备——学生实施——引导组织——评估反馈——巩固实践。
五、教学资源
配套教材：《Web前端开发技术基础案例教程》高等教育出版社 978-7-04-055492-2
多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。
教学环节
教学过程设计
第一环节：明确任务
一．案例效果展示：
展示本项目的最终网站效果及本次课要完成的效果。
案例：制作
二．案例分析
本案例要制作一个“OO咖啡”，包含两个页面，首页的布局包括页面顶部的Logo和导航文字，较大幅的页面广告，主体部分是表格规划的图文内容，页尾为版权文字；内页的顶部和尾部与首页相同，主体部分主要以文字为主，包含标题、段落、图片等元素。页面的文字、图片、表格均有美化效果。
三．网站结构导图
第二环节：计划筹备
这里是案例制作前的准备工作，一方面是案例制作素材的准备，另一方面教师可以引导学生回顾上一个任务的知识点以及完成情况。
第三环节：学生实施
教师分发制作素材，让学生根据练习任务，自主的按照教材中图文结合的“制作过程”，一步步跟学跟做。完成该案例任务。
任务2 制作并美化内页css表格样式
任务目标
●熟悉CSS选择器，学会使用不同类型的选择器
●学会创建和使用页面的内联样式和内部样式表
●理解HTML元素的分类
任务活动
活动1：创建页面布局                                                                                       
活动2：编辑布局样式
任务效果
为内页story.html创建布局，编辑布局样式。
第四环节：引导组织
学生在跟学的过程中会遇到很多疑问和不解，这正是一个探索知识的过程。教师可以在这里解决这些问题，演示指导制作步骤，讲解任务中的“知识链接”：
⑥：CSS文字属性
⑦：CSS基本特性
⑧：CSS边框属性
⑨：CSS对齐方式
第五环节：评估反馈
课程学完后，教师对本节课所学知识要点做一个总结式的梳理：
学生检验自己的知识掌握情况。
备  注
教师在整个教学环节中除了提供给学生完整的案例文件、素材文件外，还应提供重要任务的录制视频教学资源，这样可以有效的避免教学中基础好的学生速度快等待教学进度，基础差的学生速度慢跟不上教学进度的学习现状，会收到事半功倍的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。