HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元6 页面整体布局

XXXXXX学院单元设计课程课程：内容：单元6页面整体布局学时：

设计摘要教学 课题单元1HTML5静态网站开发概述课程学时安排16学时年级高职一年级所选教材汤佳陈晓男主编．《HTML5+CSS3网页设计任务教材（第2版）》．高等教育出版社，2023年12月．一、教学背景创作思路：针对传统教学无法解决的教学难题进行设计，课程依托信息化教学环境，整合数字化教学资源，采用混合式教学模式，采用翻转课堂的有力手段，采用“有效学习时间”的理念进行项目化考核。以学生为中心，教师做引导，在项目教学的各环节充分运用HbuilderX开发工具、智慧职教MOOC、动画、在线教学平台等信息化手段解决教学重点难点问题。设计特色 ：1．教学过程项目化：依据“工学结合、职业情境、项目主导”人才培养模式，通过创设情境、针对实际问题精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学”，“学中做”，降低了学生学习难度，提高学习兴趣和课堂参与度；2．教学资源数字化：丰富的课件、经典作品、视频等资源可供学生在线平台学习；3．网络平台融合化：紧紧围绕HbuilderX开发工具，融入智慧职教MOOC、动画、在线教学平台等信息化手段进行教学完成教学目标，突破重点、难点；4．学习评价多元化：结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评价平台等多种手段形成动态化、多元化的评价体系。二、学习目标与内容1.学习目标 知识目标：掌握常用的页面制作方法；掌握常用的页面布局方法（包括弹性布局）；掌握表格的基础知识，包括标签常用属性及其描述；掌握使用表格制作简历及百分比网页的方法；掌握采用rem制作自适应webApp的方法。能力目标：熟练掌握静态布局、弹性布局的排版方式；熟练掌握<table>显示各种样式的表格数据；熟练掌握H5混合开发App。素质目标：总体目标：培养新时代的“工匠精神”。开发软件必须坚持质量优先的技术操守；面对重复性工作，不抱怨不放弃；面对困难，以创新思维解决问题攻克难关。思政育人目标：通过学习常用的页面布局方法，让学生明白学习没有捷径可走，要想“抄近路”是办不到的，只有勤奋地学习，刻苦地练习和实践，踏踏实实一步一个脚印地前进，才能掌握真才实学，获得成功；通过学习表格的基础知识，让学生明白“三尺有神明，不畏人知畏己知”，无论你在什么地方做任何事，你头上三尺地方的神明都会看得清清楚，所以任何人不要以为没有人在旁边就做坏事。2.学习主要内容 960网格系统在网页制作中的使用；clearfix和clear的使用；常用经典布局；常用弹性布局；表格基本知识；使用表格制作个人简历；使用表格制作QQ邮箱；使用基于lib-flexible库的rem单位制作自适应网站。3.学习重点及难点教学重点：960网格系统的基本原理；DIV+CSS常用布局；表格的语法、操作及多种显示数据的方法；rem单位的基本原理。教学难点：clearfix和clear的写法及使用方法；flex弹性布局的实现原理和使用。三、学情分析授课对象是高职一年级的学生，通过一学期的学习，已系统学习了《计算机应用基础》《程序设计基础》课程，有一定的编程基础，但对软件开发基本流程的理解、自我规划和管理能力、团队协作交流能力、自我学习解决问题的能力还有所欠缺，基于“课堂不保证做，课后保证不做”的现状，需要采用翻转课堂的有力手段监督其课后学习情况，课堂主要用于作业检查、解惑答疑、交流讨论，从而达到更好的教学效果。四、学习环境选择与学习资源设计1.学习环境（1）教学硬件：多媒体教室；（2）教学软件：极域电子教室、PhotoShop、HBuilderX、谷歌浏览器等。2.学习资源类型（1）课程在线教学平台（2）新形态一体化教材（3）职教云课堂3.学习资源内容简要说明智慧职教平台《移动web开发》在线开放课程有多媒体课件、微视频、试题库等多种数字化资源；高等职业教育新形态一体化规划教材《HTML5+CSS3网页设计任务教材（第2版）》中二维码标注微课、课件，实现移动终端随扫随学。五、学习情境创设上一章节我们学习了页面局部布局，这一章节我们主要学习页面整体布局，局部布局是实现某个功能模块，整体布局是实现页面排版。页面整体布局包含网格系统与栅格布局、如何清除页面浮动、常用的div+css经典布局、常用的flex弹性布局、表格基本知识、使用基于lib-flexible库的rem单位制作自适应网站，以上内容是本单元的主要学习内容。六、教法学法设计1、项目化教学步骤：①创设情景、导入任务②演示录屏、学生笔记③学生练习、教师巡视④集中讲解，学生修改，上传作业⑤重复2-4步⑥课堂小结⑦布置作业。2、教师教法（1）分阶段演示法：将一个复杂案例分解成若干个步骤，分阶段演示。（2）巡回指导法：逐个检查学生的练习情况，并进行答疑解惑。（3）错误总结法：将检查巡视过程中发现的共性错误，进行集中讲解。（4）定期检查法：针对期末项目考核，阶段性检查其作业情况，起到监督和辅导的作用。3、学生学法（1）模仿案例法：学期初学生还未入门，学生根据教师的操作录屏，模仿案例自主练习。（2）反复练习法：针对常用知识点，需要反复不断练习，提高熟练程度。（3）综合项目法：针对复杂案例，先进行分析，分解成若干简单案例，再进行组合。（4）自由发挥法：底子薄弱的学生，照着书本敲代码，练习打字维持课堂秩序即可。4、项目考核：人手一份，定期展示，录像检查。

七、教学过程设计（第1-2学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：960网格系统在网页制作中的使用；clearfix和clear的使用。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑网格系统的基本原理是什么？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示两栏页面效果。打开教材提供的网页案例，演示不均分三栏页面效果。打开教材提供的网页案例，演示均分三栏页面效果。打开教材提供的网页案例，演示均分四栏页面效果。打开教材提供的网页案例，演示clearfix和clear使用页面效果。设疑：网格和分栏之间是什么关系？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生搜索“960网格系统”，了解网格系统的原理，并了解“城市管理网格员”的工作职责。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生使用960网格系统分别制作两栏页面、三栏页面和四栏页面；clearfix和clear的基本使用方法。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。960网格系统的基本原理。960网格系统是使用固定宽度960px置中对齐画面的方式呈现在网页上。去除左右两边各10px的空间，留下中间940px的区块以20px作为间隔分栏。在空间设计上，可随意合并多栏作为版面配置及网页尺寸的设定，合并出来的栏宽也不会有畸零数，有利于CSS中<div>宽度的设定。960网格系统常用规格有两种：一个是12栏式的，另一个是16栏式的。如果你的设计里面分3个区块你就选择12栏式的，那是因为12能被3整除；同理假如你的设计分四个区块，你可以选12栏式或者16栏式，那是因为12和16都可以被4整除。一般我们都采用12栏式的进行设计。CSS中的清除浮动（clearfix）的基本原理。采用<divclass="clear"></div>方法清除浮动，会多一个没有意义的<div>，因此并不推荐使用。我们采用clearfix的方法来清除浮动，代码如下：.clearfix:after{/*在类名为“clearfix”的元素内最后面加入内容*/content:".";/*内容为“.”就是一个英文的句号而已。也可以不写*/display:block;/*加入的这个元素转换为块级元素*/clear:both;/*清除左右两边浮动*/visibility:hidden;/*设置为隐藏。它和display:none;是有区别的。仍然占据空间，只是看不到而已*/height:0;/*高度为0*/font-size:0;/*字体大小为0*/}整段代码就相当于在浮动元素后面跟了个宽高为0的空<div>，然后设定它clear:both来达到清除浮动的效果。原理是经过使用after伪对象，它将在应用clearfix的元素结尾添加content中的内容，也就是一个"."，并且把他设置为块级元素（display="block"）；高度设置为0，clear="both"，然后将其内容隐藏掉（visibility="hidden"），这样就会撑开此块级元素。之所以用它，是因为，你不必在HTML文件中写入大量无意义的空标签，又能清除浮动。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生960网格系统在网页制作中的使用：代码详见教材第174页。clearfix和clear的使用： <h1>clearfix和clear</h1> <h3>没有clear:both</h3> <divclass="out"> <divclass="left"></div> <divclass="right"></div> </div> <divclass="clear"></div> <!--这行清除浮动，否则两个案例会重叠--> <h3>有clear:both</h3> <divclass="out"> <divclass="left"></div> <divclass="right"></div> <divclass="clear"> </div> </div> <h3>采用clearfix</h3> <divclass="outclearfix"> <divclass="left"></div> <divclass="right"></div> </div>1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计搭建页面框架。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第3-4学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：常用经典布局；常用弹性布局。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑弹性布局有什么优点？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示八种经典布局效果。打开教材提供的网页案例，演示百分比布局页面效果。打开教材提供的网页案例，演示圣杯布局页面效果。打开教材提供的网页案例，演示侧边固定宽度布局页面效果。设疑：网格布局和弹性布局相比较有哪些优缺点？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生搜索“常见的网页布局”，并了解对应的应用场景，让学生了解“具体问题具体分析”的原理和方法论。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生采用div+css排版常用三种经典布局；使用弹性布局方式实现百分比布局；使用弹性布局方式实现圣杯布局；使用弹性布局方式实现侧边固定宽度布局。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。div+css常用页面结构命名规范。页面结构命名：一个页面往往会根据页面的结构不同样式也会有所不同，所以页面结构命名也有一定的规则可循，大体如下：容器:container、页头：header、内容：content、页面主体：main、页尾：footer、导航：nav/menu、侧栏：sidebar、栏目：column、页面外围控制整体布局宽度：wrapper、左右中：leftrightcenter。div+css常用导航命名规范。导航命名：页面结构中的导航命名也需要遵循一定的规则，具体如下：导航：nav、主导航：mainnav、子导航：subnav、顶导航：topnav、边导航：sidebar、左导航：leftsidebar、右导航：rightsidebar、菜单：menu、子菜单：submenu、标题:title、摘要:summary。div+css常用功能命名规范。功能命名：结合页面结构，可以在设置样式时遵循一定的规则按照功能命名，具体如下：标志：logo、广告：banner、登陆：login、登录条：loginbar、注册：register、搜索：search、功能区：shop、标题：title、加入：joinus、状态：status、按钮：btn、滚动：scroll、标签页：tab、文章列表：list、提示信息：msg、当前的:current、小技巧：tips、图标:icon、注释：note、指南：guild、服务：service、热点：hot、新闻：news、下载：download、投票：vote、合作伙伴：partner、友情链接：link、版权：copyright。Flex弹性布局基本原理。弹性布局，即Flex布局，是CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持Flex布局。Flex语法如下：flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis：项目的长度。1、百分比分别设置：flex:0050%;，flex:0033.3%;。2、上下左右四块都设置：flex:00100px;。3、侧边栏设置：flex:0020%;内容设置flex:1;，页脚设置flex:0010%;。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生常用经典布局：代码详见教材第182页。常用弹性布局：代码详见教材第189页。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计搭建页面框架。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第5-6学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：表格基本知识。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑（1）表格在哪些场景下使用？（2）表格由哪些元素组成？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示表格基本属性及使用效果图。打开教材提供的网页案例，演示表格基本属性及使用效果。打开教材提供的网页案例，演示细边框表格效果。打开教材提供的网页案例，演示细边框表格效果。打开教材提供的网页案例，演示设置表格宽度、列宽度和行高度页面效果。打开教材提供的网页案例，演示隔行变色表格效果。打开教材提供的网页案例，演示鼠标移上去行变色效果。设疑：表格除了演示的样式，还具有哪些个性化样式？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生搜索“表格的作用”，让学生了解，如何将复杂的信息以简洁的形式展示出来，使得信息的传递更加清晰和明了。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生创建一个有表头，表体和表脚的表格；创建三个三行三列的表格，第一个要求第一行合并单元格，第二个要求第一列合并单元格，第三个要求第1、2两行的第1、2两列合并单元格；使用三种方法完成细边框表格的制作；使用百分比设置表格的宽度和高度；制作一个11行4列的表格，要求该表格在网页中居中显示，表格是细边框表格，表格整体宽度为960像素。该表格有表头，并且给第一、二、四列的表头设置宽度，第一、二列单元格内容居中；制作一个四行三列的表格，要求使用CSS3:nth-child()选择器设置表格隔行底色不同，达到隔行变色效果；制作一个四行三列的表格，要求使用伪类选择器:hover实现鼠标移动到某行，某行就改变颜色。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。表格的常用标签。（1）<table>标签网页中的表格使用<table>标签表示，以<table>标记开始，以</table>标记结束。表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。<table> 表示表格<thead> 表示表头<tbody> 表示表格主体<tfoot> 表示表脚<tr> 表示一行<th> 表示标题行单元格<td> 表示单元格<col> 表示一列<colgroup> 表示一组列<caption> 表示表格标题（2）单元格标签<td>及属性<td>表示表格中的单元格，包括如下属性：colspan：规定单元格可横跨的列数；rowspan：规定单元格可横跨的行数；headers：规定与单元格相关的表头，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕阅读器使用。任务中所表示的列内合并单元格、行内合并单元格以及合并两行两列需要用到colspan和rowspan属性。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生表格基本知识：代码详见教材第194页。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计搭建页面框架。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第7-8学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：使用表格制作个人简历。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑个人简历一般需要放哪些内容？哪些信息是企业感兴趣的？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示个人简历页面效果。设疑：制作个人简历分几个步骤？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生复杂的事情简单化，简单的事情流程化，流程化的事情标准化，标准化的事情制度化。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生要求使用表格以及相关元素制作一个个人简历，其中个人简历整体上使用表单呈现，主要内容放置在表格中，具体单元格的内容根据要求需要使用到单选按钮、复选框、无序列表、有序列表以及超链接等元素。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。细边框表格的三种做法。（1）背景设置式：通过将表格背景色设置为黑色，将单元格背景设置为白色，并且将单元格之间的距离cell_spaceing设置为大于0的数，从而让边框显示为黑色，cell_spaceing值越大，表格框线越粗。（2）边框设置式：通过直接设置表格的边框来实现细边框表格，为了方便查看，通过不同颜色的线条来显示边框线，tableborder是表格外一圈边框，tdborder是单元格边框thborder是表头边框。即在设置边框时如果表格外边框只设置上、右边框，单元格只设置下、左边框，保证边框不重复设置即可。（3）层叠式：为表格<td>、<th>标签设置了边框线后，因内边框的线条重复设置，导致内边框线条较粗，影响美观，所以在表格CSS样式中需要设置border-collapse属性。form表单单选按钮、复选按钮分组。表单中的单选框radio，name相同的是一组，比如以下代码：<form><inputtype="radio"name="sex"value="male">男<inputtype="radio"name="sex"value="female">女<inputtype="radio"name="age"value="adult">已成年<inputtype="radio"name="age"value="child">未成年</form>cellspacing和cellpadding的区别。cellpadding:从其名称看，此属性与padding类似。cellpadding用来设置单元格中文本内容和边框之间的距离，类似于内边距。cellspacing:cell是单元格的意思，从字面意思是设置单元格之间或者单元格与外围边框的距离。此属性类似于margin外边距。colspan和rowspan的相关知识。row行，column列，span跨度colspan=列跨度，代表合并列rowspan=行跨度，代表合并行border-collapse属性的相关知识。border-collapse属性设置表格的边框是否被合并为一个单一的边框。separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。collapse如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。当border-collapse设置为collapse时，表格自身的border与cellspacing属性便没有作用了。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生使用表格制作个人简历：代码详见教材第206页。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计搭建页面框架。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第9-10学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：使用表格制作QQ邮箱。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑QQ邮箱可以采用DIV+CSS进行制作吗？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示QQ邮箱效果。设疑：QQ邮箱界面在浏览器大小变化的过程中，具有哪些特性？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生登录自己的邮箱，作为课程案例进行临摹，提升自己的应变能力。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生使用表格制作QQ邮箱。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。表格的宽度和高度的百分比设置。浏览器本身是有宽度和高度的，设置HTML的width:100%;和height:100%;，就可以获取浏览器的宽度和高度。后面<body>和<table>的宽度和高度也就有了依赖，即，表格的宽高百分比设置就可以与浏览器的宽度高度保持一定的比例关系。html,body{width:100%;height:100%}。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生使用表格制作QQ邮箱：代码详见教材第212页。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计制作页面内容。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第11-12学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：制作自适应网站头部和banner；制作自适应网站底部导航；制作自适应网站主页面菜单。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑网页制作中常用的长度单位有哪些？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示自适应网站首页效果。打开教材提供的网页案例，演示自适应网站“作者”网页效果。打开教材提供的网页案例，演示自适应网站“商城”网页效果图。打开教材提供的网页案例，演示自适应网站“我的”网页效果图。设疑：一般的app具有哪些常用的栏目？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生搜索“庖丁解牛”了解典故，让学生了解，人只要掌握了客观规律，灵活运用，就能从必然中解放出来，获得真正的自由。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生制作自适应网站头部和banner；制作自适应网站底部导航；制作自适应网站主页面菜单。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。rem单位基本知识。（1）rem是CSS3新增的一个相对单位（rootem，根em）。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前所有的浏览器（ie8及以下版本除外）都支持rem。（2）em的计算方法：需转换的px值/自适应对象宽度px值*10。（3）通常在写移动端页面的时候，我们都会设置viewport，保证页面缩放没有问题，最常见的viewport的meta标签如下：<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（4）文本字号不建议使用rem。<meta>标签属性的相关知识。<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">width=device-width宽度等于当前设备的宽度initial-scale=1.0初始缩放比例，默认为1（倍）minimum-scale=1.0/maximum-scale=1.0最小/大缩放比例1（倍）user-scalable=no是否允许用户缩放页面（yes/no）1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生制作自适应网站头部和banner：代码详见教材第224页。制作自适应网站底部导航：代码详见教材第224页。制作自适应网站主页面菜单：代码详见教材第224页。1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计制作页面内容。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

七、教学过程设计（第13-14学时，共16学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生通过在线学习平台发布课程学习内容：制作自适应网站index.html页面；制作自适应网站author.html页面。1、通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。2、问题设疑成熟的app数据在加载时候，出现什么效果（瀑布流）？查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《移动web开发》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：5分钟教学内容师生活动教学方法教学手段教师学生打开教材提供的网页案例，演示自适应网站首页效果。打开教材提供的网页案例，演示自适应网站“作者”网页效果。打开教材提供的网页案例，演示自适应网站“商城”网页效果图。打开教材提供的网页案例，演示自适应网站“我的”网页效果图。设疑：“作者”网页有哪些地方需要改进？1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生访问当当网，下载书籍封面及简介，作为案例制作文字和图片素材，同时可以了解当前较热的书籍有哪些。1、引导学生通过网络获取并总结答案，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生制作自适应网站index.html页面；制作自适应网站author.html页面。1、引导学生借助在线课程平台获取知识进行自主探究；2、案例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：实践训练时间：10分钟教学内容师生活动教学方法教学手段教师学生提出以下问题，学生自行百度获取答案。如何将顶部菜单栏、底部工具栏固定在某个位置？采用position:fixed;属性固定顶部和底部菜单。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、小组分工协作。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：引例实现时间：30分钟教学内容师生活动教学方法教学手段教师学生制作自适应网站index.html页面：代码详见教材第228页。制作自适应网站author.html页面：代码详见教材第228页1、教师分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生课后作业：在线学习视频、期末项目设计制作页面内容。1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，