《Bootstrap网站开发实战》教学教案

教学教案课程名称:bootstrap网站开发实战教案周次第1周课次第1次课学时安排2学时本次课题BootStrap入门教学目标知识目标：Bootstrap的文件Bootstrap的基本模板能力目标：理解Bootstrap的基本模板理解Bootstrap的文件功能了解Bootstrap开发的常用方法教学重点难点Bootstrap的基本模板训练项目（任务）或案例用Bootstrap框架技术实现第一个网页：HelloWorld!在互联网中查找常用网站，并分析他们的网站类型教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业课后复习bootstrap框架的基本用法，读css文件源码教学后记学生对bootstrap框架有了一定的了解，对于能快速构建网页的技术也充满了学习兴趣。教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作基于bootstrap框架的简单页面学习目的：熟练掌握bootstrap框架的下载方法，会在网页中使用bootstrap框架。二、引入本门课的主要任务点（时间：15分钟）任务1：课程基本情况介绍开设本门课的背景课程主要内容就业前景考核方式及课程要求三、学生自己操作训练（时间：20分钟）任务2：进入bootstrap官网，初步了解课程内容任务3：赏析利用bootstrap框架框架制作的优秀站点四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：bootstrap框架的工作原理知识点2：与前导课程的关系知识点3：努力的方向五、进一步介绍课程内容及训练任务（时间：30分钟）任务1：bootstrap框架下载及站点的搭建15分任务2：Bootstrap的基本模板15分六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）bootstrap入门（2）bootstrap模板（3）简单页面的实现七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后作业（2）预习周次第2周课次第1次课学时安排2时本次课题项目一博客网站-导航条设计教学目标知识目标：导航导航条能力目标：理解导航及导航条的实现方法学会制作不同类型的导航条教学重点难点导航条的实现训练项目（任务）或案例制作三种不同类型、风格的导航条教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业改造学院网站的导航条教学后记同学们都能完成学习任务，设计页面基本符合规范教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作导航学习目的：熟练掌握导航的制作方法，会在网页中使用导航。二、引入本次课任务，并演示过程（时间：40分钟）任务1：导航导航的概念导航的html代码结构导航的css样式导航的美化三、学生自己操作训练（时间：50分钟）任务2：制作导航任务3：美化导航四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：导航知识点2：样式知识点3：美化五、进一步加强训练（时间：65分钟）训练项目1：添加下拉菜单的导航训练项目2：带背景图的下拉菜单六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）导航的实现步骤（2）下拉菜单的实现（3）美化七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后练习（2）预习

周次第3周课次第3次课学时安排4学时本次课题项目一博客网站媒体对象教学目标知识目标：Bootstrap组件-媒体对象能力目标：学会使用Bootstrap媒体对象进行内容排版教学重点难点Bootstrap媒体对象训练项目（任务）或案例设计文章列表页，用Bootstrap媒体对象对其进行页面排版。教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用Bootstrap媒体对象对学院网站新闻中心文章列表进行排版教学后记媒体对象在页面中经常用到，效率非常高。教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作媒体对象页面学习目的：熟练掌握使用媒体对象的方法，会在网页中使用媒体对象。二、引入本次课任务，并演示过程（时间：40分钟）任务1：媒体对象媒体对象基本结构默认样式对齐方式CSS美化三、学生自己操作训练（时间：50分钟）任务2：制作媒体对象页面任务3：css美化四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：媒体对象原理知识点2：基本结构知识点3：对齐方式五、进一步加强训练（时间：65分钟）训练项目1：美化界面训练项目2：下拉菜单的显示六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）媒体对象列表（2）css美化（3）代码优化七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后作业（2）预习

周次第4周课次第4次课学时安排4时本次课题项目一博客网站-列表组、按钮组教学目标知识目标：列表组按钮组能力目标：学会使用列表组、按钮组进行网页布局教学重点难点列表组训练项目（任务）或案例利用列表组制作侧边栏教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业教学后记列表的内容很实用，学生很感兴趣，效果良好教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：列表组、按钮组学习目的：熟练掌握列表组方法，会在网页中使用按钮组。二、引入本次课任务，并演示过程（时间：40分钟）任务1：列表组的应用列表组徽章链接按钮三、学生自己操作训练（时间：50分钟）任务2：制作侧边栏列表组任务3：优化代码四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：列表知识点2：连接知识点3：徽章五、进一步加强训练（时间：65分钟）训练项目1：按钮组训练项目2：按钮工具栏六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）列表组（2）按钮组（3）个性定制七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后作业（2）预习周次第5周课次第5次课学时安排4学时本次课题项目一博客网站-媒体对象教学目标知识目标：Bootstrap组件-媒体对象能力目标：学会使用Bootstrap媒体对象进行内容排版教学重点难点Bootstrap媒体对象训练项目（任务）或案例设计文章列表页，用Bootstrap媒体对象对其进行页面排版。教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用Bootstrap媒体对象对学院网站新闻中心文章列表进行排版教学后记媒体对象在页面中经常用到，效率非常高。教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作媒体对象页面学习目的：熟练掌握使用媒体对象的方法，会在网页中使用媒体对象。二、引入本次课任务，并演示过程（时间：40分钟）任务1：媒体对象媒体对象基本结构默认样式对齐方式CSS美化三、学生自己操作训练（时间：50分钟）任务2：制作媒体对象页面任务3：css美化四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：媒体对象原理知识点2：基本结构知识点3：对齐方式五、进一步加强训练（时间：65分钟）训练项目1：美化界面训练项目2：下拉菜单的显示六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）媒体对象列表（2）css美化（3）代码优化七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后作业（2）预习

周次第6周课次第6次课学时安排2学时本次课题项目一博客网站-缩略图教学目标知识目标：缩略图能力目标：学会使用Bootstrap缩略图进行布局设计教学重点难点Bootstrap缩略图设计训练项目（任务）或案例使用Bootstrap缩略图设计一个照片展示页。教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用Bootstrap缩略图设计学院网站的学院风采页面教学后记缩略图在图片展示页面中非常好用，学生很快就掌握了教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：缩略图学习目的：熟练掌握缩略图的使用方法，会在网页中应用。二、引入本次课任务，并演示过程（时间：20分钟）任务1：缩略图缩略图的基本结构默认样式（3）自定义内容三、学生自己操作训练（时间：25分钟）任务2：构建一个展示个人风采的页面任务3：添加标题及说明任务4：css美化四、归纳完成本次任务用到的知识点（时间：5分钟）知识点1：缩略图的定义知识点2：缩略图的基本结构知识点3：css美化五、进一步加强训练（时间：30分钟）训练项目1：警告框训练项目2：进度条六、对本次任务的完成情况及用到的知识技巧进行总结（时间：3分钟）（1）缩略图（2）警告框（3）css美化七、布置下一次课的课前准备及课后作业（时间：2分钟）（1）课后练习（2）预习

周次第7周课次第7次课学时安排4学时本次课题项目一博客网站-响应式页面设计教学目标知识目标：响应式的原理响应式的实现方法能力目标：学会使用Bootstrap进行响应式网页设计教学重点难点Bootstrap响应式网页设计训练项目（任务）或案例使用Bootstrap设计一个响应式网页。教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用Bootstrap的响应式工具改造学院网站首页教学后记响应式的设计解决了多终端的问题，学生学习兴趣隆厚，效果很好教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作基于bootstrap框架的响应式页面学习目的：熟练掌握bootstrap框架的响应式方法，会在网页中使用响应式工具。二、引入本次课任务，并演示过程（时间：40分钟）任务1：响应式页面响应式的原理媒体查询响应式工具Css样式的调用三、学生自己操作训练（时间：50分钟）任务2：制作响应式导航条任务3：制作响应式新闻页面四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：响应式原理知识点2：媒体查询知识点3：响应式类五、进一步加强训练（时间：65分钟）训练项目1：辅助类训练项目2：浮动、清除浮动六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）响应式（2）媒体查询（3）css美化七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后练习（2）预习周次第8周课次第2次课学时安排4学时本次课题项目一博客类网站-前台界面设计教学目标知识目标：Bootstrap框架的基本css组件插件能力目标：能够自行设计并制作博客类网站的前台显示页面教学重点难点Bootstrap的综合应用训练项目（任务）或案例博客类网站的前台显示页面教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业完善博客类网站的前台显示页面教学后记自行设计博客的前台页面很有挑战性，大部分同学完成得很好，少数有待提高教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作博客类网站前台页面学习目的：熟练掌握bootstrap框架制作网页方法，会在网页中使用bootstrap框架的组件、插件等。二、引入本次课任务，并演示过程（时间：40分钟）博客首页的实现，分为导航条、内容区、左侧列表、中间日志列表、右侧内容、尾部、响应式这七个部分。首先需要搭建Bootstrap环境。环境搭建部分，请大家阅读1.3.1这一节的内容。环境搭建完成后再进行下面的步骤。1.导航条的实现步骤1：新建index.html页面，登录Bootstrap官方网站（https：//），选择“组件”—“导航条”选项，或者直接在浏览器地址栏中输入https：///components/#navbar，选择复制代码步骤3：登录Bootstrap官方网站（https：//），选择“组件”—“导航条”—“反色的导航条”选项，或者直接在浏览器地址栏中输入https：///components/#navbar-inverted，如图1-55所示。修改代码为：<navclass="navbarnavbar-inverse">，步骤4：登录Bootstrap官方网站（https：//），选择“组件”—“导航条”—“固定在顶部”选项，或者直接在浏览器地址栏中输入https：///components/#navbar-fixed-top2.中间内容区的实现步骤1：登录Bootstrap官方网站（https：//），选择“全局CSS样式”—“栅格系统”选项，复制表示3栏的代码，如图1-58和图1-59所示的标示部分。注意：一定要把row包在container这个类的div中。步骤2：修改代码中每栏的宽度步骤3：将最外面的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。请大家登录Bootstrap官方网站（https：///css/#grid-example-fluid）查看。3.左侧列表的实现步骤1：登录Bootstrap官方网站（https：//），选择“组件”—“列表组”选项，或者直接在浏览器地址栏中输入https：///components/#list-group，如图1-62所示。选择带有超链接的样式步骤2：根据运行效果图，修改代码内容，去掉第一项的active类。4.中间日志列表的实现步骤1：登录Bootstrap官方网站（https：//），选择“组件”—“面板”选项，或者直接在浏览器地址栏中输入https：///components/#panels，如图1-64所示。创建一个面板，复制代码步骤2：登录Bootstrap官方网站（https：//），选择“组件”—“媒体对象”选项，或者直接在浏览器地址栏中输入https：///components/#media，如图1-66所示。创建一个媒体对象，复制代码步骤3：登录Bootstrap官方网站（https：//），选择“全局CSS样式”—“栅格系统”选项，或者直接在浏览器地址栏中输入https：///css/#grid，分2栏。步骤4：登录Bootstrap官方网站（https：//），选择“组件”—“Glyphicons字体图标”选项，或者直接在浏览器地址栏中输入https：///components/#glyphicons，选择合适的字体图标步骤5：复制多个媒体对象的内容代码步骤6：登录Bootstrap官方网站（https：//），选择“组件”—“分页”选项，或者直接在浏览器地址栏中输入https：///components/#pagination，如图1-70所示。选择一种合适的分页样式，5.右侧内容的实现步骤1：公告的实现。登录Bootstrap官方网站（https：//），选择“组件”—“面板”—“带有标题的面板”选项，或者直接在浏览器地址栏中输入https：///components/#panels步骤2：登录Bootstrap官方网站（https：//），选择“组件”—“列表组”—“带有标题的面板”选项，或者直接在浏览器地址栏中输入https：///components/#list-group。复制代码，并根据效果图修改代码。步骤3：去掉.panel-body，面板标题会和表格连接起来，没有空隙。步骤4：名片和友情链接的实现6.尾部定制样式的实现步骤1：尾部的HTML结构代码如下：<divclass="container-fluidfooter"> <divclass="row"> <divclass="col-md-12"> Copyright©<ahref="">SHINE博客</a>|ICP备111号-2 </div> </div></div>步骤2：新建一个index.css样式，引入样式，代码如下：<linkhref="css/index1.css"rel="stylesheet">步骤3：自定义的index.css样式。7.响应式的实现步骤1：登录Bootstrap官方网站（https：//），选择“全局CSS样式”—“响应式工具”选项，或者直接在浏览器地址栏中输入https：///css/#responsive-utilities，步骤2：在手机端要隐藏右侧的名片和友情链接博文列表页面的实现分析步骤1：新建document.html页面。内容部分，分2栏。步骤2：内容部分左侧的效果。登录Bootstrap官方网站（https：//v3.），选择“JavaScript插件”—“标签页”选项，或者直接在浏览器地址栏中输入https：///javascript/#tabs，根据效果图修改代码。步骤3：页面内容右侧效果如图1-81所示。登录Bootstrap官方网站（https：//v3.bootcss.com），选择“组件”—“列表”—“徽章”选项，或者直接在浏览器地址栏中输入https：///components/#badges，下载中心页面的实现分析1.本站热门下载资源步骤1：新建download.html页面。步骤2：登录Bootstrap官方网站（https：//），选择“组件”—“缩略图”选项，或者直接在浏览器地址栏中输入https：///components/#thumbnails，如图1-89所示。选择一种合适的样式，根据效果图修改代码内容。步骤3：根据效果图，添加和修改对应的代码内容。2.右侧搜索资源的表单步骤1：登录Bootstrap官方网站（https：//），选择“全局CSS样式”—“表单”选项，或者直接在浏览器地址栏中输入https：///css/#forms选择并复制内联表单样式代码三、学生自己操作训练（时间：50分钟）任务2：制作首页任务3：实现内容页四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：导航条知识点2：栅格布局知识点3：文字排版五、进一步加强训练（时间：65分钟）训练项目1：制作文章列表页训练项目2：站点页面的整体优化六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）站点的整体规划（2）导航条（3）页面的布局七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后练习（2）预习周次第9周课次第9次课学时安排4学时本次课题项目二表单设计教学目标知识目标：文本框的设置单选按钮、复选框选择列表对表单进行排版。能力目标：能够设计制作表单教学重点难点Bootstrap制作表单训练项目（任务）或案例设计制作用户注册表单教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业改造学院网站的用户登录表单教学后记表单的内容是网页中重要的内容，大家都很重视，效果良好教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：制作用户注册表单页面学习目的：熟练掌握制作表单方法，会在网页中使用表单控件。二、引入本次课任务，并演示过程（时间：40分钟）任务1：表单的基本结构表单页的布局表单元素--输入框、密码框、文件表单提交方式--提交按钮1表单属性的设置三、学生自己操作训练（时间：50分钟）任务2：制作表单任务3：美化表单四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：表单控件知识点2：表单元素知识点3：css样式五、进一步加强训练（时间：65分钟）训练项目1：内联表单训练项目2：表单中的输入框组六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）表单的基本属性（2）表单控件的灵活应用（3）css样式的调用七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后练习（2）预习周次第10周课次第10次课学时安排4时本次课题项目2商业专题网站制作（上）教学目标知识目标：基于bootstrap框架定制网站能力目标：学会利用Bootstrap框架个性化定制网站教学重点难点Bootstrap个性化定制网站训练项目（任务）或案例专题网站教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业观看专题网站操作步骤说明书，完成商业类网站教学后记教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：专题网站学习目的：熟练掌握栅格的布局方法，会在网页中使用组件和插件。能自己定义样式定制网站二、引入本次课任务，并演示效果（时间：5分钟）三、任务分解步骤导航条的实现步骤1：进入Bootstrap官方网站，选择“组件”—“导航条”选项，复制导航条代码内容。步骤2：根据导航条效果图修改代码中的导航条部分。步骤3：需要设置的样式是导航条颜色和固定到顶部，导航条内容居中。步骤4：定制样式index.css。解决显示效果出现的问题1：logo图片比较靠下。}步骤5：修改导航条搜索模块。公司介绍的实现步骤1：登录Bootstrap官方网站（https：//），选择“组件”—“巨幕”选项，或者直接在浏览器地址栏中输入https：///components/#jumbotron步骤2：定制样式index.css。解决显示效果问题：去掉巨幕和导航条之间的边距。步骤3：定制样式index.css。解决显示效果问题：巨幕Banner背景图片。步骤4：制作巨幕的内容，使用全局CSS3样式—栅格系统。步骤5：解决显示效果问题：公司简介需要靠右边一点，使用Bootstrap框架中的偏移功能。步骤6：定制样式index.css。解决效果显示问题：图片底部对齐。步骤7：定制样式index.css。定制标题和文字内容的样式。步骤8：制作巨幕的响应式。大屏幕的巨幕效果已经完成。现在需要制作中屏幕、平板电脑、手机端的效果。步骤9：定制样式index.css。解决效果显示问题：设置文字内容的高度。解决方案的实现步骤1：解决方案内容。使用栅格系统制作，步骤2：定制样式index.css。解决效果显示问题：设置灰色背景。实现代码如下：.gray-bg{ background-color:#f2f2f2;}步骤3：定制样式index.css。解决效果显示问题：设置巨幕banner下边距。使用粗体标记的代码是按照效果图修改后的代码步骤4：定制样式index.css。解决效果显示问题：定义标题和文字内容的样式。步骤5：解决效果显示问题：文字居中，需要在结构中使用栅格系统和偏移。步骤6：网站建设这一区域的显示效果●将步骤6的代码复制六份，并按照效果图修改里面的文字部分。步骤7：定制样式index.css。解决效果显示问题。步骤8：解决大屏幕、中屏幕、小屏幕效果显示问题：使用响应式工具。步骤9：修改图标，自定义样式。●定制index.css。四、任务2：学生搭建项目（时间：10分钟）五、任务3：导航条制作（时间：30分钟）学生使用框架制作导航条教师解决问题，并提供文档步骤六、总结学生出现的问题和重要的知识点和技能技巧（时间：10分钟）七、任务4BANNER制作（时间：45分钟）学生使用框架制作教师解决问题，并提供文档步骤八、总结学生出现的问题和重要的知识点和技能技巧（时间：10分钟）九、任务5解决方案（时间：45分钟）学生使用框架制作导航条教师解决问题，并提供文档步骤十、总结学生出现的问题和重要的知识点和技能技巧（时间：10分钟）周次第11周课次第11次课学时安排4时本次课题项目2商业专题网站制作（下）教学目标知识目标：基于bootstrap框架定制网站能力目标：学会利用Bootstrap框架个性化定制网站教学重点难点Bootstrap个性化定制网站训练项目（任务）或案例专题网站教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业观看专题网站操作步骤说明书，完成商业类网站教学后记教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：专题网站学习目的：熟练掌握栅格的布局方法，会在网页中使用组件和插件。能自己定义样式定制网站二、引入本次课任务，并演示效果（时间：5分钟）三、任务分解步骤成功案例的实现成功案例的实现主要使用的Bootstrap框架是栅格系统、响应式，大部分效果需要定制样式。步骤1：成功案例的标题区域部分的效果与解决方案的效果样式一致步骤2：成功案例的图片列表部分，采用栅格系统制作。步骤3：定制index.css。解决效果显示问题。●解决效果显示问题1：设置上边距。实现代码如下：.case-list{ margin-top:75px;}●解决效果显示问题2：缩放图片。实现代码如下：.case-listimg{ width:100%;}步骤4：解决成功案例在大屏幕、中屏幕、小屏幕端的效果显示问题。使用全局CSS3样式—响应式工具。步骤5：定制index.css。解决效果显示问题。●解决效果显示问题1：去掉图片的边距。实现代码如下：.case-list.col-lg-3{ padding:0px;}●解决效果显示问题2：添加左、右边距。使用粗体标记的代码是按照效果图修改后的代码。实现代码如下：.case-list{ margin-top:75px; padding-left:15px; padding-right:15px;}步骤6：定制index.css。自定义超小屏幕端响应式样式。实现代码如下：@media(max-width:500px){ .case-list.col-xs-6{ width:100%; }}步骤7：解决效果显示问题：制作遮罩文字。步骤8：定制index.css。使用定位，解决效果显示问题。合作伙伴的实现分析步骤1：合作伙伴的标题这部分效果和成功案例一样，步骤2：定制index.css。解决效果显示问题。●解决效果显示问题1：定义背景。实现代码如下：.blue-bg{ background-color:#2c8fba;}●解决效果显示问题2：定义文字。实现代码如下：.blue-bg.common-title{ color:#fff;}.blue-bg.common-detail{ color:#fff;}步骤3：解决效果显示问题：设置图片的排列，采用栅格系统。实现代码如下：<divclass="rowlogo-list"><divclass="col-lg-2"><ahref=""class="logo02"></a></div><divclass="col-lg-2"><ahref=""class="logo03"></a></div><divclass="col-lg-2"><ahref=""class="logo04"></a></div><divclass="col-lg-2"><ahref=""class="logo05"></a></div><divclass="col-lg-2"><ahref=""class="logo06"></a></div></div>步骤4：定制index.css。使用定位，解决效果显示问题。●解决效果显示问题1：引入图片样式。实现代码如下：.logo-lista{ display:block; width:200px; height:180px; background:url(../images/logos.png)lefttopno-repeat; margin:0auto;}●解决效果显示问题2：设置图片排列居中。实现代码如下：.logo-list.col-lg-2{ width:20%;}●解决效果显示问题3：图片定位。实现代码如下：.logo-list.logo02{ background-position:left-180px;}.logo-list.logo03{ background-position:left-360px;}.logo-list.logo04{ background-position:left-540px;}.logo-list.logo05{ background-position:left-720px;}步骤5：定制index.css。解决大屏幕、中屏幕、小屏幕端效果显示问题。采用全局CSS3样式—响应式工具。实现代码如下：@media(max-width:1200px){ .logo-list.col-lg-2{ width:33%; float:left;}}@media(max-width:992px){ .logo-list.col-lg-2{ width:50%; float:left;}}@media(max-width:768px){ .logo-list.col-lg-2{ width:100%;}}步骤6：定制index.css。使用定位，解决下边距效果显示问题。使用粗体标记的代码是按照效果图修改后的代码。实现代码如下：.logo-list{ margin-bottom:40px;}友情链接的实现分析步骤1：构建内容结构主要采用栅格系统。省略的内容与使用粗体标记的结构一样，请复制三份，修改文字内容即可。步骤2：定制index.css。解决效果显示问题。●解决效果显示问题1：设置内容的上、下边距。实现代码如下：.links-list{ margin-top:72px; margin-bottom:72px;}●解决效果显示问题2：定义文字样式。实现代码如下：.links-listdt{ font-size:20px; color:#191919; line-height:1; margin-bottom:10px;}.links-listdd{ line-height:30px;}.links-listdda{ color:#a0a0a0;}步骤3：解决大屏幕、中屏幕、小屏幕效果显示问题。省略的内容与使用粗体标记的结构一样，请复制三份即可。尾部版权的实现步骤1：采用栅格系统和全局CSS3样式中的响应式工具来布局结构。步骤2：定制index.css。解决效果显示问题。步骤3：定制index.css。解决小屏幕端效果显示问题。三、学生练习四、总结学生出现的问题和重要的知识点和技能技巧（时间：10分钟）五、对本次任务的完成情况及用到的知识技巧进行总结（时间：10分钟）六、布置下一次课的课前准备及课后作业（时间：5分钟）（1）课后作业（2）预习周次第12周课次第12次课学时安排4学时本次课题项目2商业专题网站制作表格设计教学目标知识目标：表格设计的方法能力目标：学会使用Bootstrap进行表格设计教学重点难点Bootstrap表格设计训练项目（任务）或案例使用Bootstrap设计一个表格。教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用Bootstrap设计一个课程表教学后记表格可以在一定程度上简化我们的工作，学生很快掌握教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：表格学习目的：熟练掌握表格的使用方法，会编写带表格的网页页面。二、引入本次课任务，并演示过程（时间：20分钟）任务1：表格表格的基本格式边框背景色条纹状表格鼠标悬停三、学生自己操作训练（时间：25分钟）任务2：设计一个显示产品信息的简单表格任务3：设置边框任务3：美化四、归纳完成本次任务用到的知识点（时间：5分钟）知识点1：表格的html结构知识点2：边框知识点3：背景五、进一步加强训练（时间：30分钟）训练项目1：嵌套表格训练项目2：带表格的面板六、对本次任务的完成情况及用到的知识技巧进行总结（时间：3分钟）（1）表格（2）嵌套（3）面板里的表格七、布置下一次课的课前准备及课后作业（时间：2分钟）（1）课后练习（2）预习

周次第13周课次第13次课学时安排4时本次课题项目三后台管理网站教学目标知识目标：Bootstrap插件的运行原理标签页轮播能力目标：理解轮播的程序运行原理学会使用标签页和轮播进行网页布局教学重点难点标签页和轮播的实现训练项目（任务）或案例制作包含标签页和轮播的页面--浏览器的历史页教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业使用标签页和轮播对学院网站进行升级改造教学后记标签页和轮播的进一步学习使得布局更为容易。但同时新知识也造成一定的混乱，需要学生课后去消化、理解。通过练习去提高。教学过程设计旁注一、告知本次课主要内容和学习目的（时间：5分钟）主要内容：标签页、轮播学习目的：熟练掌握使用bootstrap框架插件方法，会在网页中使用标签页和轮播框架。二、引入本次课任务，并演示过程（时间：40分钟）任务1：标签页标签页的原理标签页导航的设计标签页内容的设计Css美化三、学生自己操作训练（时间：50分钟）任务2：制作浏览器一览的页面任务3：美化页面四、归纳完成本次任务用到的知识点（时间：10分钟）知识点1：标签页js知识点2：css实现知识点3：优化五、进一步加强训练（时间：65分钟）训练项目1：轮播界面设计训练项目2：轮播的切换及优化六、对本次任务的完成情况及用到的知识技巧进行总结（时间：6分钟）（1）标签页（2）轮播（3）优化七、布置下一次课的课前准备及课后作业（时间：4分钟）（1）课后练习（2）预习

周次第14周课次第14次课学时安排4学时本次课题项目三后台管理页面—后台首页教学目标知识目标：综合应用bootstrap框架能力目标：能利用综合应用bootstrap框架进行网站后台设计教学重点难点综合应用bootstrap框架训练项目（任务）或案例设计后台管理页面教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业教学后记如何快速的制作出页面后台是工作中的重点，学生很快完成教学过程设计旁注告知本次课主要内容和学习目的后台首页主要分为导航条、警告框、网站统计数据、网站热帖、今日访客统计图表、服务器状态进度条、团队留言板、发表留言、团队联系方式及尾部。给学生展示效果。二、引入本次课任务，并演示过程1.导航条制作步骤1：建立后台首页index.html，构建导航条基本内容。选择“官方文档”—“组件”—“导航条”选项，复制导航条代码，并根据效果图修改相关代码内容。步骤2：导航条图标样式的设置。选择“官方文档”—“组件”—“Glyphicons字体图标”（查找对应字体图标）。根据效果图修改相关代码内容。这里只列出修改后的代码部分，步骤3：新建其他页面。在导航条中设置其他三个页面的超链接。新建三个页面，分别为：用户管理页面user_list.html，内容管理页面content.html，标签管理页面tag.html。根据效果图修改相关代码内容。2.后台界面警告框制作步骤1：利用栅格系统制作一个一行一列的容器。步骤2：登录Bootstrap官方网站（https：//），选择“JavaScript插件”—“警告框”选项，或者直接在浏览器地址栏中输入https：///javascript/#alerts。步骤3：根据效果图修改代码的文字内容。步骤4：制作事件处理动作，即单击“稍后处理”就关闭警告框。为关闭按钮添加data-dismiss="alert"属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从DOM中删除。3.后台界面网站统计数据和热帖制作步骤1：网站统计数据和网站热帖这两部分内容，需要采用栅格系统并分2栏。步骤2：为网站统计数据和网站热帖这两部分内容添加面板。选择“官方文档”—“组件”—“面板”选项，选择带标题面板，步骤3：根据网站统计数据和网站热帖这两部分内容的效果图，修改代码内容。步骤4：后台界面网站统计数据。登录Bootstrap官方网站（https：//），选择“全局CSS样式”—“表格”选项，或者直接在浏览器地址栏中输入https：//v3.bootcss.com/css/#tables，选择鼠标悬停效果样式，并复制代码。步骤5：根据后台界面网站统计数据效果图的内容，修改代码内容。步骤6：网站热帖制作。选择“官方文档”—“组件”—“列表组”选项。步骤7：根据网站热帖的效果样式，修改现有样式。如果没有.panel-body，面板标题会和表格连接起来，没有空隙。删除如下代码：<divclass="panel-body">Panelcontent</div></div>步骤8：根据网站热帖效果图，修改代码内容。省略部分的代码和粗体标识代码一样，复制代码即可。4.后台界面今日访客统计图表制作今日访客统计图表制作需要用到图表插件—chart.js。图表插件的使用方法如下：①登录网站（http：///），下载插件chart.js。②在index.html文件中引入chart.js。<scriptsrc="js/Chart.js"></script>③引入画布。实现代码如下：<divclass="col-md-6"><divclass="panelpanel-default"><divclass="panel-heading">今日访客统计</div><divclass="panel-body"><canvasid="canvas"class="col-md-12"></canvas></div></div></div>④引入写好的JavaScript文件。实现代码如下：<scriptsrc="js/script.js"></script>5.后台界面服务器状态进度条制作步骤1：服务器状态进度条的制作，需要使用栅格系统和面板。步骤2：进度条制作。登录Bootstrap官方网站（https：//），选择“组件”—“进度条”选项，或者直接在浏览器地址栏中输入https：///components/#progress，选择条纹效果样式，复制条纹效果代码。步骤3：根据后台界面服务器状态进度条效果图的内容，修改代码内容。6.团队留言板步骤1：根据团队留言板这部分内容的比例，使用栅格系统。步骤2：选项“组件”—“媒体对象”选项。选择合适的媒体对象效果样式，复制代码。步骤3：根据团队留言板效果图的内容，修改代码内容，并将相同的代码复制三份。步骤4：把Well用在元素上，就能有嵌入（inset）的简单效果。需要给类media再加上一个well类。实现代码如下：<divclass="mediawell">步骤5：新建一个index.css样式，并定制index.css样式。解决效果显示问题：图标变小。步骤6：在媒体对象中，使用well类，设置对齐方式，使用.wh类。7.留言表单的制作步骤1：选择官网—“全局CSS样式”—“表单”选项，选取一种合适的表单效果样式，复制代码，并根据留言表单效果修改内容步骤2：定制index.css。定义mar样式，解决效果显示问题：上边距。8.团队联系方式的制作步骤：根据团队联系方式的效果图和文字内容，选项“组件”—“面板”和“列表组”选项。这里还需要选择“组件”—“图标”选项。9.尾部的制作三、学生自己操作训练四、归纳完成本次任务用到的知识点五、进一步加强训练六、对本次任务的完成情况及用到的知识技巧进行总结七、布置下一次课的课前准备及课后作业（1）课后作业（2）预习

周次第15周课次第15次课学时安排4学时本次课题项目三后台管理页面—用户列表页面教学目标知识目标：综合应用bootstrap框架能力目标：能利用综合应用bootstrap框架进行网站后台设计教学重点难点综合应用bootstrap框架训练项目（任务）或案例设计后台管理页面教学方法讲授和课堂练习相结合，适当提问，吸引学生的注意力。引入实际项目开发案例，塑造学习编程语言的应用型目标；以能力培养为中心，采用灵活多样的教学方法；实例引入与改造拓宽的结合，注重启发性教学；教学环境bootstrap-3.2.0、hubuilder、sublimeText、chrome课后作业教学后记如何快速的制作出页面后台是工作中的重点，学生很快完成教学过程设计旁注知本次课主要内容和学习目的后台首页主要分为导航条、警告框、网站统计数据、网站热帖、今日访客统计图表、服务器状态进度条、团队留言板、发表留言、团队联系方式及尾部。给学生展示效果。二、引入本次课任务，并演示过程步骤1：新建user_list.html页面。根据用户列表页面效果图，采用栅格系统并分2栏。步骤2：根据左侧导航效果图，选择“组件”—“列表”—“链接效果样式”选项。复制链接效果样式代码，并根据左侧导航效果图文字内容，修改代码。步骤3：右侧内容部分－标题“用户管理”。需要使用页头组件。也可以直接登录https：///components/#header