HTML5+CSS3网站设计基础（第三版）教案 朱翠苗 模块4-6 DIV+CSS制作网上商城网站-CSS3设置网页特效

*******学院教案课次20教师姓名授课班级授课地点授课日期2023年4月7日第7周授课时数2本次授课标题模块4DIV+CSS制作网上商城网站任务1DIV+CSS制作网上商城首页教学目标能力（技能）目标知识目标会使用Dreamweaver创建站点会使用DIV+CSS进行布局与样式美化理解网站开发流程能力训练任务及案例子任务实现商城首页整体布局教学重点站点创建、整体布局课外拓展任务补充练习课后体会一个网站网站制作中，关键是鼓励学每个学生跟上进度，从头至尾做好一个网站，励做大家互助完成每次课的任务。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12345上次课程内容回顾，介绍本次内容与任务网站开发流程介绍与创建站点利用Dreamweaver搭建站点制作商城网站首页首先从制作总体布局设置全局的属性，使用全局选择器设置内外边距为0，整个网页的超链接为不带下划线；列表默认为不带列表符号设置整体布局的样式讲授讲授演示分析引导指导评讲讲授课件听讲听讲操作思考实践听讲操作调试5152545

*******学院教案课次21教师姓名授课班级授课地点D2-402授课日期2023年4月17日第9周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页教学目标能力（技能）目标知识目标会使用Dreamweaver创建站点会使用DIV+CSS进行布局与样式美化会使用外部样式理解网站开发流程理解CSS+DIV布局技术理解三种样式：外部样式、内部样式、行内样式能力训练任务及案例子任务实现顶部布局教学重点用样式表布局的理解课外拓展任务补充练习课后体会指导学生在本任务第一次的基础上，自己动手、思考、调试、实践。深入对float和clear的理解。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务顶部布局的组织结构代码：顶部header分成4部分设置样式logo的width:269px和height:118px，设置左浮动；up_right_menu的宽width为header的47%,高height:30px，内填充中上填充为10px，设置右浮动；up_right_hello在后续课程中我们可以做成跑马灯效果，所以宽度稍大为70%，高height:43px，它与菜单有一定间距设置margin-top:20px，同时右浮动；nav的宽100%，高height:30px，清除两侧的浮动元素clear:both，讲授分析引导指导评讲讲授指导讲授课件听讲听讲操作思考实践听讲102060

*******学院教案课次22教师姓名授课班级授课地点D1-407授课日期2023年4月18日第9周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页教学目标能力（技能）目标知识目标掌握Dreamweaver创建站点会使用DIV+CSS进行布局与样式美化理解网站开发流程理解CSS+DIV布局技术理解三种样式及优先级理解三种选择器的优先级能力训练任务及案例子任务实现左部商品分类教学重点文本的组织结构课外拓展任务美化网页完成上课的任务课后体会学生能认真听讲、积极实践，对于布局应该有更深的认识。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务整个商品分类的实现组织结构我们采用div-ul-li结构，由于类目的重要性，使用<h1>标签有利于搜索引擎优化编写组织结构代码分析编写样式main部分的高取消，以背景图片本身高度来决定main的高度，填加leftcategory的背景图片，这个图片本身高643宽203在效果图中“分类部分”的文字距离图片上部大概38px,距离左边5px，右边15px，设置leftcategory的padding属性实现确定标题行h1的行高27px，每个无序列表所占高度是120px，共5行，各行的行高24px，每个无序列表所占的宽度是183px，平均分成3列，每一列的宽度是60px，就是每个li的宽度讲授分析引导指导演示评讲讲授指导演示课件听讲听讲操作听讲操作54045*******学院教案课次23教师姓名授课班级授课地点D2-402授课日期2023年4月21日第9周授课时数2本次授课标题模块4DIV+CSS制作网上商城网站任务1DIV+CSS制作网上商城首页教学目标能力（技能）目标知识目标使用

div-dl-dt-dd实现图文混编的掌握

div-dl-dt-dd图文混编的技术能力训练任务及案例子任务实现中部主体布局教学重点图文布局的应用课外拓展任务美化网页、拓展任务课后体会这一部分是首页的难点，多讲多练是关键。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务中部局部布局分上下两块，上部是图片，下部是图文，下部的图文有解释说明的含义，而并非并列关系，所以应该使用dl-dt-dd结构。编写结构代码分析编写样式上下方的宽度都为524px。中部上方实际高度为195px，其中容器高度为190px，同时设置下方的内边距为5px，上部元素总共占据空间就是190+5=195px，作为和"天天疯狂"板块的空白间隙。下方实际高度为440px，其中设置上方的内边距为37px作为背景标题和下方内容的空白间隙，下方容器标签<div>的高度设为403px。讲授分析引导指导演示评讲分析引导指导演示评讲课件听讲听讲操作听讲操作52560

*******学院教案课次24教师姓名授课班级授课地点授课日期2023年5月5日第11周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页教学目标能力（技能）目标知识目标会用div-ul-li布局页面的技术会用

div-dl-dt-dd实现图文混编的技术掌握使用div-ul-li布局页面的技术掌握使用

div-dl-dt-dd实现图文混编的技术能力训练任务及案例子任务实现首页右部布局实现网站首页底部信息教学重点CSS的运用课外拓展任务美化网页、拓展任务课后体会这一部分学生在有前面知识和实践的基础上，基本都能按时完成任务。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12345上次课程内容回顾，介绍本次内容与任务main部分的右部rightsidebar分成上、中、下三部分，以rightsidebar_top、rightsidebar_center、rightsidebar_foot块命名编写这三部分的组织结构代码<divclass="rightsidebar"><divclass="rightsidebar_top"></div><!--rightsidebar_top结束--><divclass="rightsidebar_center"></div><!--rightsidebar_center结束--> <divclass="rightsidebar_foot"></div><!--rightsidebar_foot结束--></div><!--rightsidebar结束-->分析样式、编写样式实现网站首页底部信息讲授分析引导指导演示评讲分析引导指导演示评讲听讲听讲操作听讲操作听讲操作听讲操作515253510*******学院教案课次25教师姓名授课班级授课地点授课日期2023年5月8日第12周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页教学目标能力（技能）目标知识目标会用div-ul-li布局页面的技术会用

div-dl-dt-dd实现图文混编的技术掌握使用div-ul-li布局页面的技术掌握使用

div-dl-dt-dd实现图文混编的技术能力训练任务及案例拓展任务：京东商城的顶部导航菜单教学重点CSS的运用课外拓展任务美化网页、拓展任务课后体会根据首页的实践经验，学生自主完成顶部导航教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务指导学生实践，完成顶部导航菜单评讲实践操作讲授分析引导指导演示评讲听讲听讲操作听讲操作56025

*******学院教案课次26教师姓名授课班级授课地点授课日期2023年5月9日第12周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务2CSS+DIV制作商品具体介绍页教学目标能力（技能）目标知识目标会用iframe实现顶部和底部复用会灵活运用float实现左右浮动效果熟练使用div-ul-li实现局部布局熟练使用float能力训练任务及案例子任务使用iframe实现顶部与底部代码复用实现商品具体介绍页的内容与样式教学重点静态网页制作的知识点巩固课外拓展任务美化网页、拓展任务课后体会商品具体介绍页的页面与前面页面相比较难，在教师指导下学生进行制作。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务使用iframe实现顶部与底部代码复用实现商品具体介绍页的内容，编写商品介绍页的组织结构。用简洁思路实现根据右边数据并列关系的特点，改为ul-li结构实现页面布局分析整体采用的结构，但右列采用<ul>结构，并且各<ul>块的内容均用<li>实现实现商品具体介绍页的样式讲授分析引导指导评讲分析引导指导评讲计算机课件听讲听讲操作听讲操作101565

*******学院教案课次27教师姓名授课班级授课地点授课日期2023年5月12日第12周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务3CSS+DIV制作注册页教学目标能力（技能）目标知识目标会用iframe实现顶部和底部复用会灵活运用float实现左右浮动效果熟练使用div-ul-li实现局部布局熟练使用float能力训练任务及案例子任务实现商城网站的注册页制作教学重点静态网页制作的知识点巩固课外拓展任务美化网页、拓展任务课后体会通过课堂实践让学生理解表格布局的优势。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾，介绍本次内容与任务任务4DIV+CSS制作注册页页面结构分析页面结构，3列11行的表格，右边阅读协议跨11行样式修饰分析与样式编写。CSS样式的实现问题小结讲授分析引导指导评讲听讲听讲操作107010

*******学院教案课次28教师姓名授课班级授课地点授课日期2023年5月19日第13周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务4CSS+DIV制作客户中心页教学目标能力（技能）目标知识目标使用<iframe/>制作网页模板使用Dreamweaver工具实现表格布局使用div-ul-li实现局部布局<iframe/>制作网页模板div-ul-li实现局部布局能力训练任务及案例任务DIV+CSS制作客户中心页教学重点框架窗口间的关联效果知识动态CSS特效知识课外拓展任务完善页面课后体会大部分学生能按时完成任务,但对于框架窗口的关联联系应加大练习和熟悉。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1任务DIV+CSS制作芙蓉客户中心页制作思路1结构分析1）页面的整体组织结构2）左区块的组织结构3）右区块的组织结构组织结构代码的书写2二级菜单显示、隐藏讲授分析引导演示思考讨论90

*******学院教案课次29教师姓名授课班级授课地点授课日期2023年5月22日第14周授课时数2本次授课标题模块4CSS+DIV制作网上商城网站任务4CSS+DIV制作客户中心页教学目标能力（技能）目标能力（技能）目标能实现框架窗口间的关联效果能实现动态CSS特效能实现框架窗口间的关联效果能实现动态CSS特效能力训练任务及案例任务DIV+CSS制作客户中心页教学重点框架窗口间的关联效果知识动态CSS特效知识课外拓展任务完善页面课后体会督促学生完成链接，检查连接以及打开的形似，大部分学生能按时完成任务。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123制作思路1结构分析2二级菜单显示、隐藏3、实现左右区块间的关联左侧各<a>标签的地址设置为右侧DIV块的ID名，右侧DIV块ID名与右侧标签地址对应，即此时id名作为锚链接。三个DIV块与父容器的实际高度设为一致修饰右侧各区块，设置内边距作为空白填充建立页面间的导航链接1、根据页面间关系建立页面链接2、链接检测和修正讲授分析引导讲授分析引导引导演示思考讨论思考讨论讨论编程4545*******学院教案课次30教师姓名授课班级授课地点授课日期2023年5月23日第14周授课时数2本次授课标题模块5HTML5设置网页内容任务1HTML5常用元素和属性教学目标能力（技能）目标知识目标1、掌握HTML5新增的元素的使用方法。2、会使用HTML5新增的元素设置页面内容。理解新增元素的作用与用法能力训练任务及案例任务1实现京东商城的头部设计教学重点Ul-li的使用课外拓展任务完成头部设计课后体会京东商城的头部，采用了新增元素，结合CSS的综合样式进行设计，有效的复习巩固了前面的内容教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12343任务展示与要求分析讲解新增元素的介绍指导学生完成头部内容结合CSS的定位机制完成设计效果评讲出现的问题布置作业讲授分析引导讲授分析演示指导讲授演示讲授思考讨论思考听讲实践听讲听讲102045105*******学院教案课次31教师姓名授课班级授课地点授课日期2023年5月26日第14周授课时数2本次授课标题模块5HTML5设置网页内容任务1HTML5常用元素和属性教学目标能力（技能）目标知识目标1、掌握HTML5新增的元素的使用方法。2、会使用HTML5新增的元素设置页面内容。理解新增元素的作用与用法能力训练任务及案例任务1实现京东商城的左侧菜单教学重点Ul-li的使用课外拓展任务完成头部设计课后体会京东商城的左侧菜单需配合JS完成动态效果，这里仅完成内容编辑。为不影响效果显示，需学会使用display属性教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12343任务展示与要求分析讲解新增元素的介绍指导学生完成左侧菜单内容结合display属性实现内容隐藏评讲出现的问题布置作业讲授分析引导讲授分析演示指导讲授演示讲授思考讨论思考听讲实践听讲听讲102045105*******学院教案课次32教师姓名授课班级授课地点授课日期2023年5月29日第15周授课时数2本次授课标题模块5HTML5设置网页内容任务2HTML5表单元素和属性教学目标能力（技能）目标知识目标1、掌握HTML5新增的元素的使用方法。2、会使用HTML5新增的元素设置页面内容。理解新增元素的作用与用法能力训练任务及案例任务1实现京东商城的中间广告任务2实现京东商城右侧快报与图标设计教学重点表单的使用课外拓展任务完善商城课后体会学生之间的差距拉大，通过学生之间互助来弥补教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456任务展示与要求分析讲解新增表单元素的介绍任务1实现京东商城的中间广告任务2实现京东商城右侧快报与图标设计评讲出现的问题布置作业讲授分析引导讲授演示指导指导讲授演示讲授思考讨论思考听讲实践实践听讲听讲10151040105*******学院教案课次33教师姓名授课班级授课地点授课日期2023年5月30日第15周授课时数2本次授课标题模块5HTML5设置网页内容任务2HTML5表单元素和属性教学目标能力（技能）目标知识目标1、掌握HTML5新增的元素的使用方法。2、会使用HTML5新增的元素设置页面内容。理解新增元素的作用与用法能力训练任务及案例任务1实现京东商城的“近日推荐”任务2实现京东商城的“猜你喜欢”教学重点CSS的使用课外拓展任务完善商城课后体会部分学生非常自觉，利用课后时间积极实践，已经基本完成首页教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234任务展示与要求分析讲解任务1实现京东商城的“今日推荐”任务2实现京东商城的“猜你喜欢”评讲出现的问题布置作业讲授分析引导分析指导分析指导讲授思考讨论实践实践听讲1035405*******学院教案课次34教师姓名授课班级授课地点授课日期2023年6月2日第15周授课时数2本次授课标题模块6CSS3设置网页特效任务1CSS3新增选择器教学目标能力（技能）目标知识目标1、掌握属性选择器、伪类选择器与伪元素选择器的使用方法理解新增选择器的作用与区别能力训练任务及案例任务1属性选择器使用任务2伪类选择器使用任务3伪元素选择器使用教学重点CSS3新增选择器的用法课外拓展任务课后体会在前面的实践基础上，学生已经牢牢掌握了ID、类与标签选择器菜单使用。但是CSS3的新增选择器也可以快速的找到对应的元素。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12345任务展示与要求分析讲解任务1属性选择器的使用任务2伪类选择器的使用任务3伪元素选择器的使用评讲出现的问题总结新增选择器的用法与区别，布置作业讲授分析引导讲授演示讲授演示讲授演示讲授思考讨论听讲实践听讲实践听讲实践听讲53025255*******学院教案课次35教师姓名授课班级授课地点授课日期2023年6月5日第16周授课时数2本次授课标题模块6CSS3设置网页特效任务2背景边框教学目标能力（技能）目标知识目标1、掌握背景渐变属性与值设置方法2、掌握边框变化方法理解渐变设置方法能力训练任务及案例任务1背景渐变任务2边框新样式教学重点背景渐变课外拓展任务课后体会这部分内容涉及的属性与值比较多，需要花时间慢慢琢磨教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234任务展示与要求分析讲解任务1背景渐变任务2边框样式总结渐变属性与值的使用布置作业讲授分析引导讲授演示讲授演示讲授思考讨论听讲实践听讲实践听讲540405*******学院教案课次36教师姓名授课班级授课地点授课日期2023年6月6日第16周授课时数2本次授课标题模块6CSS3设置网页特效任务3过渡样式教学目标能力（技能）目标知识目标1、掌握过渡属性与对应的值涉及理解过渡属性及它的值能力训练任务及案例任务1颜色过渡任务2宽高过渡任务3位置过渡教学重点过渡属性课外拓展任务课后体会这部分内容比较有趣，学生参与度较高教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12345任务展示与要求分析讲解任务1颜色过渡任务2宽高过渡任务3位置过渡总结过渡属性使用的方法布置作业讲授分析引导讲授演示讲授演示讲授演示讲授思考讨论听讲实践听讲实践听讲实践听讲53025255*******学院教案课次37教师姓名授课班级授课地点授课日期2023年6月9日第16周授课时数2本次授课标题模块6CSS3设置网页特效任务42D/3D转换教学目标能力（技能）目标知识目标掌握2D/3D转换的属性与常用方法的方法会设置旋转等效果理解新增选择器的作用与区别能力训练任务及案例任务12D效果设置教学重点2D的改变属性课外拓展任务课后体会注意与过渡的区别。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234任务展示与要求分析讲解任务12D效果设置讲解与过渡的分别，引入旋转倾斜等特效“改变”属性与值的用法，布置作业讲授分析引导讲授演示讲授思考讨论听讲实践听讲106515*******学院教案课次38教师姓名授课班级授课地点授