网页设计与制作教案-0302

《网页设计与制作教案-0302》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目化实战教程《网页设计与制作》项目单元教学设计编号：0302学校：专业：项目单元：设计和制作网站首页授课教师：《网页设计与制作》教学设计编号：0302项目名称计算机系部网站建设任课教师任课班级项目单元名称设计和制作网站首页章节课时4子项目名称应用CSS盒子模型搭建网页框架布局教学目标知识目标l了解盒子模型的概念及属性l掌握网页布局最常用的两种布局：浮动和定位l掌握DIV+CSS布局思想技能目标能熟练应用DIV+CSS布局通用网页结构情感态度1、培养学生团队合作意识2、培养学生的创作意识，提高学生对编写代码的兴趣度教学内容l盒子模型概念及属性l浮动和定位l应用DIV+CSS布局通用网页结构

2、教学重点和难点重点l盒子模型概念及属性lDIV+CSS布局难点应用DIV+CSS布局通用网页结构教学方法和策略案例驱动教学设计思路1、依据行业标准来组织知识点，围绕一个通用网页结构的布局来展开讲解。2、以任务为驱动，为学生设置任务情境，让他们在思考中探索解决方案。3、在任务完成的基础上，及时拓展网站设计中存在的其他问题，力求提升学生自我解决问题的能力。教学实施步骤教师活动学生活动项目单元导入1.课程回顾上节课中我们学习了基本的CSS应用，创意设计了自己的网页。教师展示学生优秀网页作品，不计名展示不合格作品，并提出改进建议。我们发现，应用CSS样式可以较好地控制页面的内容和样式。网站中在应用

3、CSS控制页面显示的时候，盒子模型是一个很重要的概念，掌握了盒子模型，才能更精确控制页面中各个元素的位置。和教师一起评价作品，优秀的作品优秀在那里，失败的作品失败在那里？并进一步端正学习态度2.项目单元重点难点教师首先简述本项目单元重点、难点，让学生有重点的听讲。l盒子模型概念及属性lDIV+CSS布局在教师指导下，学生记录笔记，标记重点、难点。3．项目单元总体目标学完本项目单元，我们能应用盒子模型搭建一个标准的网页框架布局。学生明确本项目单元结束后自己能干什么。项目单元实施一、盒子模型基础（1）盒子模型标记

4、盒子，DIV是html中的“层”标签，

5、际高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距。学生结合盒子模型图解理解盒子模型中的各个元素。重点理解：（1）盒子模型四要素（2）盒子模型的实际宽度计算（3）盒子模型的实际高度计算（4）盒子模型填充属性应用（5）盒子模型边界属性应用二、应用盒子模型布局通用网页结构首先教师展示此网页结构，指导学生完成布局的草图设计及框架模块的命名。（1）根据网页布局图，我们得出网页DIV结构如下：│body{}/*这是一个HTML元素，页面中所有的内容都应该写在这个标签对之内*/└#Container{}/*学生在教师指导下画出通用网页结构草图，并记录常用的结构模块名称（推荐使用）布局重点

6、：浮动对齐一行两列布局我们可以把整个页面想象成一个大容器，此为页面顶层容器*/├#Header{}/*存放页面头部内容的容器*/├#PageBody{}/*存放页面主体内容的容器*/│├#Sidebar{}/*存放侧边栏内容的容器*/│└#MainBody{}/*存放主体内容的容器*/└#Footer{}/*页面底部*/（2）编写HTML结构代码