《网站前端技术》（梁玲）621-7 教案 第29课 开发者商务网站建设（四）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第29课开发者商务网站建设（四）课时2课时（90min）教学目标知识技能目标：掌握制作一级列表页、二级列表页、详情页和订单列表页的具体操作素质目标：锻炼从全局视角看问题，客观辩证地思考和处理问题的科学思维方式教学重难点教学重点：制作一级与二级列表页，制作商品详情页教学难点：制作订单列表页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→课堂讨论（10min）第2节课：→传授新知（27min）→课堂讨论（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解制作一级列表页、二级列表页、详情页和订单列表页等相关内容。【学生】完成课前任务通过课前任务，使学生了解本节课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题一级列表页包含哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）6.3制作其他页面【教师】讲解制作一级列表页、二级列表页的具体操作6.3.1制作一级列表页【实现目标】【教师】ppt展示“一级列表页二级分类导航区域”“一级列表页热门商品展示区域”“一级列表页分类商品展示区域”图片（详见教材），并讲解一级列表页从上到下分为头部区域、二级分类导航区域、热门商品展示区域、分类商品展示区域、脚部区域和返回顶部按钮。其中，脚部区域和返回顶部按钮同首页，头部区域中的轮播图更换为一级列表页相关图片。【课堂互动】✈【教师】提问一级列表页制作过程中需要注意些什么问题？✈【学生】聆听、思考、回答（1）二级分类导航包含当前一级分类下的所有二级分类名称，当鼠标单击二级分类时，将跳转到当前页中相应的商品展示区域。（2）热门商品展示区域包含所有当前一级分类下的热门商品，当鼠标悬浮于某商品图片上时，图片向左向上移动5px，同时显示阴影，阴影向右向下偏移5px，阴影半径为2px，阴影颜色为#999。（3）分类商品展示区域包含所有二级分类导航中的商品类型，每一个类型包含一个宣传图和对应的商品列表。（4）页面的跳转效果如下：①各banner图与分类商品展示区域的宣传图都链接到二级列表页，即smallClass.html；②各商品链接到商品详情页，即com.html；③二级导航通过锚链接定位到当前页相应分类商品展示区域。（5）其他交互效果同首页。【知识扫描】（1）HTML相关知识点：锚链接。（2）CSS3相关知识点：①边框阴影；②2D转换。【实现步骤】1使用HTML5布局一级分类列表页，页面名称为bigClass.html。12实现单击二级分类导航跳转到当前页相应区域的效果。2（1）将分类商品展示区域的宣传图放在<a>标签中，并设置name属性。例如，设置第一张图片的代码如下：<aname="1"class="big-show-small"> <imgsrc="img/yangrong.jpg"/></a>（2）将二级分类导航中的分类名称设置为<a>标签，其href属性为锚链接。例如，第一个二级分类导航的代码如下：<ahref="#1"class="big-nav">羊绒衫</a>3设置页面的CSS样式。首先在css文件夹中创建bigClass.css文件，将其与index.css文件都关联至本页面；然后在bigClass.css文件中输入样式代码。其中，设置鼠标悬浮于热门商品展示区域时交互效果的CSS样式代码如下：3.big-hot:hover{ box-shadow:5px5px2px#999; transform:translate(-5px,-5px);}4设置与首页相同的静态交互效果，将“jquery-1.12.1.js”和“fun.js”文件都关联至本页面。46.3.2制作二级列表页【实现目标】【教师】ppt展示“二级列表页排序和筛选行效果”“二级列表页商品展示区域效果”图片（详见教材），并讲解二级列表页从上到下分为头部区域、排序和筛选行、商品展示区域和脚部区域。其中，头部区域为首页的一部分，脚部区域同首页。【课堂互动】✈【教师】提问二级列表页制作过程中需要注意哪些问题？✈【学生】聆听、思考、回答①交互效果同首页；②单击商品列表中的各商品时，跳转到商品详情页，即com.html。【知识扫描】巩固表单控件、超链接标签的使用。【实现步骤】1使用HTML5布局二级分类列表页，页面名称为smallClass.html。12制作排序和筛选行。其中，筛选部分的代码如下：2<inputclass="select1"type="text"><divclass="select">￥</div><divclass="select"></div><inputclass="select1"type="text"><divclass="select">￥</div><divclass="select">筛选：</div>3制作商品展示区域。例如，设置第一个商品的代码如下：3<divclass="big-show-com"> <ahref="com.html"class="big-com-img"> <imgsrc="img/miantao1.jpg"/> </a> <divclass="big-com-wen1">类名名称男女装颜色</div> <divclass="big-com-wen2">售价:￥199.00</div></div>4设置页面的CSS样式。首先在css文件夹中创建smallClass.css文件，将其与“index.css”和“bigClass.css”文件关联至本页面；然后在smallClass.css文件中设置排序和筛选行的样式，代码如下：4#order{ width:1200px; height:50px; padding:020px; margin:20pxauto; border-top:1pxsolid#E7E7E7; border-bottom:1pxsolid#E7E7E7;}.order{ width:auto; height:40px; margin:020px00; line-height:40px; color:#999; float:left;}.select{ width:auto; height:40px; margin:02px; line-height:40px; color:#666; float:right;}.select1{ width:40px; height:20px; margin:10px2px; float:right; display:block;}5将“jquery-1.12.1.js”“fun.js”“index.js”关联至本页面。5【学生】聆听、记录、理解通过教师讲解、课堂互动等方式，使学生了解制作一级与二级列表页的相关流程及操作课堂讨论（10min）【教师】提出以下问题，组织学生分组开展讨论（1）举例说明边框阴影的设置方法。（2）举例说明2D转换的用法。（3）举例说明表单控件的种类。【学生】思考、讨论通过小组讨论，使学生巩固所学知识第二节课问题导入（3min）【教师】提出以下问题制作商品详情页需要哪些模块？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（27min）6.3.3制作商品详情页【教师】讲解商品详情页的具体操作【实现目标】【教师】ppt展示“商品详情页主体区域效果”图片（详见教材），并讲解商品详情页从上到下分为头部区域、主体区域和脚部区域。其中，头部和脚部区域与首页相关部分相同。【课堂互动】✈【教师】提问商品详情页制作过程中需要注意哪些问题？✈【学生】聆听、思考、回答①鼠标单击“立即订购”按钮，可跳转到订单列表页，即indent.html；②交互效果同首页。【知识扫描】HTML相关知识：①表单的action属性和method属性；②表单控件name属性的作用；③列表框及其默认选项；④单选钮及其默认选项；⑤数字型输入框及其默认值；⑥提交按钮。【实现步骤】1使用HTML5布局商品详情页，页面名称为com.html。12制作主体区域。添加一个表单元素，并将表单的提交页面设置为indent.html，代码如下：2<formid="com-news"action="indent.html"method="get"> …</form>最后将HTML文档中所有类名为btns的元素删除。3主体区域中的颜色部分为下拉列表框，将其默认值设置为灰色，代码如下：3<selectname="color"id=""> <optionvalue="灰色"selected="selected">灰色</option> <optionvalue="黑色">黑色</option> <optionvalue="红色">红色</option></select>4主体区域中的型号部分为单选钮，将其默认选项设置为S，代码如下：4<inputtype="radio"name="size"value="S"checked>S<inputtype="radio"name="size"value="M">M<inputtype="radio"name="size"value="L">L<inputtype="radio"name="size"value="xL">xL<inputtype="radio"name="size"value="xxL">xxL5主体区域中的数量部分为数值型输入框，将其默认值设置为1，代码如下：5<inputtype="number"name="num"min="1"max="10"value="1">6主体区域中的“加入购物车”按钮即提交按钮，其表单控件类型为submit，代码如下：6<inputtype="submit"class="place"value="加入购物车">7设置该页面的样式。首先在css文件夹中创建com.css文件，将其与index.css文件一同关联至本页面；然后在com.css文件中设置主体区域的样式，代码如下：7#com-box{ width:1200px; height:300px; margin:50pxauto50px;}……（详见教材）8将“jquery-1.12.1.js”“fun.js”“index.js”文件关联至该页面。8【学生】聆听、记录、理解6.3.4制作订单列表页【教师】讲解制作订单列表页的具体操作【实现目标】【教师】ppt展示“订单列表页主体区域布局”图片（详见教材），并讲解订单列表页从上到下分为头部区域、主体区域与脚部区域。其中，头部和脚部区域与首页相关部分相同。【知识扫描】【课堂互动】✈【教师】提问制作订单列表页时，需要用到哪些方面的知识点？✈【学生】聆听、思考、回答（1）HTML相关知识点：①表格标签；②表格行标签；③表格列标题标签；④表格单元格标签。（2）CSS3相关知识点：边框合并属性。【实现步骤】1使用HTML5布局商品详情页，页面名称为indent.html。12制作主体区域。2HTML文档编辑操作：（1）使用表格显示每个订单信息，部分代码如下：<table> <tr> <th>商品名称</th> <th>商品图片</th> <th>商品颜色</th> <th>商品型号</th>……（详见教材）【提示】另外两个商品的图片地址为“miantao2.jpg”与“miantao3.jpg”。（2）制作翻页模块。<divid="box"> <divclass="page">最后一页</div> <divclass="page">下一页</div> <divclass="page">第n页</div> <divclass="page">上一页</div> <divclass="page">第一页</div></div>CSS文档编辑操作如下：（1）首先在css文件夹中创建indent.css文件，将其与index.css文件一同关联至本页面。（2）设置主体区域的样式。①设置表格元素属性，宽度为1200px；高度为自动被子元素撑开；合并边框；计算尺寸方式为包含边框；顶端边框和底端边框属性均为3px、实心线、蓝色。#indent-box{ width:1200px; height:auto; margin:50pxauto50px; color:#666; border-top:3pxsolid#2DA8E6; border-bottom:3pxsolid#2DA8E6;……（详见教材）②设置表格行元素属性，高度为40px；底端边框为1px、实心线、灰色。tr{ height:40px; line-height:40px; border-bottom:1pxsolid#E0E0E0;}③设置表格单元格元素属性，文本居中；图片高度和宽度均为100px。td{ text-align:center;}tdimg{ width:100px; height:100px;}④设置翻页模块的样式。#box{ width:1200px; height:auto; margin:0auto40px; overflow:hidden;}……（详见教材）3将“jquery-1.12.1.js”“fun.js”“index.js”文件关联至该页面。3【学生】