![《网站前端技术》(梁玲)621-7 教案 第29课 开发者商务网站建设(四)_第1页](http://file4.renrendoc.com/view/86373cc06e5d397b70594202827802f6/86373cc06e5d397b70594202827802f61.gif)
![《网站前端技术》(梁玲)621-7 教案 第29课 开发者商务网站建设(四)_第2页](http://file4.renrendoc.com/view/86373cc06e5d397b70594202827802f6/86373cc06e5d397b70594202827802f62.gif)
![《网站前端技术》(梁玲)621-7 教案 第29课 开发者商务网站建设(四)_第3页](http://file4.renrendoc.com/view/86373cc06e5d397b70594202827802f6/86373cc06e5d397b70594202827802f63.gif)
![《网站前端技术》(梁玲)621-7 教案 第29课 开发者商务网站建设(四)_第4页](http://file4.renrendoc.com/view/86373cc06e5d397b70594202827802f6/86373cc06e5d397b70594202827802f64.gif)
![《网站前端技术》(梁玲)621-7 教案 第29课 开发者商务网站建设(四)_第5页](http://file4.renrendoc.com/view/86373cc06e5d397b70594202827802f6/86373cc06e5d397b70594202827802f65.gif)
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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【学生】
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 五上数学总复习(教案)2023-2024学年数学五年级上册 北师大版
- 沪科版物理九年级全一册12.1温度与温度计教学设计
- 呼吸内科医师晋升副主任医师病例分析专题报告三篇
- 2019年苏科版八年级物理下册《第六章 物质的物理属性-6.1物体的质量》教案
- 英语阅读抽题附有答案
- 西华三高2023年信息技术学业水平练习题第7 套附有答案
- 熔化焊与热切割附有答案
- 四年级上册数学教学设计-第一单元第三课时《人 口 普 查》北师大版
- 物理八年级沪科版6.2怎样描述力教案
- 小学综合实践活动《我的问卷我设计-综合实践方法指导课》课件
- 2024年山西中考历史试卷试题评析解读及答案解析
- 精神科疾病诊疗指南
- 2024年交管12123学法减分考试题库和答案
- 小学数学跨学科学习
- 轮胎滚动阻力及其优化策略
- (正式版)YBT 6328-2024 冶金工业建构筑物安全运维技术规范
- (正式版)HGT 6270-2024 防雾涂料
- 【“互联网+”医疗服务在老年人群中的应用探究进展4500字(论文)】
- 知识图谱API数据质量评估方法
- 2023-2024学年江苏省苏州市姑苏区振华中学七年级(上)段考数学试卷二(含解析)
- 2024虚拟电厂管理规范
评论
0/150
提交评论