下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
PAGE1PAGE1PAGE2PAGE2
课题第32课创建WJ自制女装品牌店网站（下）课时2课时（90min）教学目标知识技能目标：熟悉Web前端技术的应用素质目标：锻炼实践能力，提升工作竞争力教学重难点教学重点：制作购物车页教学难点：制作登录页教学方法讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→实战演练（33min）→课堂评价（10min）第2节课：实战演练（35min）→课堂评价（10min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务查看主页的购物车页面和登录页面，分析其功能以及实现方法【学生】完成课前任务通过课前任务，让学生提前分析购物车页面和登录页面的功能和实现方法，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况实战演练（33min）14.4制作购物车页面14.4.1页面分析【教师】展示“购物车页面”，并提问学生主页共分为哪些模块，每个模块新的功能是什么购物车页在购物网站中是必不可少的，通常需要使用js实现商品数量、价格等的计算。本网站购物车页的页面效果如图所示。【教师】打开项目展示“购物车页面”【学生】观看效果、思考、举手回答【教师】讲解购物车页面模块及功能本页面可分为4部分，分别为顶部信息栏、页眉、购物车列表模块和页脚。其中，顶部信息栏、页眉和页脚都与主页相同，购物车列表模块放置在<main>标签中。14.4.2制作页面【教师】讲解页面模块实现思路，演示步骤中较为容易出错的地方，之后让学生动手制作此部分,可以互相帮助或咨询老师1．设置页面头部信息并制作与主页相同的模块步骤1打开网站项目wjshop中的cart.html文件。步骤2在<head>标签中设置页面头部信息，具体可参考主页头部信息的代码。同样应将主页头部信息中链接到样式表文件index.css的代码改为链接到cart.css文件的代码，具体可参考以下代码。…（详见教材）步骤3将index.html文件中的顶部信息栏模块、页眉与页脚的代码复制并粘贴到cart.html文件的<body>标签中。此时的页面效果与全部商品页初步效果（即图14-19）大致相同。…（详见教材）2．制作购物车列表模块步骤1在<header>标签与<footer>标签之间添加<main>标签，并在其中输入代码，构建购物车列表模块的结构。…（详见教材）步骤2在<body>标签之后输入以下代码，链接js文件。…（详见教材）步骤3在cart.css文件中设置商品列表模块的样式。…（详见教材）步骤4在cart.js文件中输入以下代码，制作购物车模块的交互效果。…（详见教材）、讨论通过教师的讲解，让学生再动手制作项目，使学生掌握购物车页面的制作方法课堂评价（10min）【教师】统一讲解学生遇到的问题，纠正学生的错误【学生】通过讲解学生出现的问题，可以让多数学生避免犯同样的错误第二节课实战演练（35min）14.5制作登录页14.5.1页面分析网站的登录页一般由几个简单的模块组成，重点实现登录与注册功能，它们通常可以通过js代码实现两个功能之间的切换。本页面可分为3部分，分别为页眉、登录与注册模块和页脚。【教师】展示图“全部商品页的效果”，并提问学生主页共分为哪些模块，每个模块新的功能是什么14.3.1页面分析全部商品页用于展示网站提供的所有商品，便于用户随心所欲地进行选购。本网站全部商品页的页面效果如图所示。【教师】打开项目展示“全部商品页”【学生】观看效果、思考、举手回答【教师】讲解商品页模块及功能本页面可分为4部分，分别为顶部信息栏、页眉、商品列表模块和页脚。其中，顶部信息栏与主页相似，右侧的登录与注册按钮改为购物车与用户名按钮；页眉和页脚都与主页相同，商品列表模块放置在<main>标签中。14.3.2制作页面【教师】讲解页面模块实现思路，演示步骤中较为容易出错的地方，之后让学生动手制作此部分,可以互相帮助或咨询老师1．设置页面头部信息并制作与主页相同的模块步骤1打开网站项目wjshop中的login.html文件。步骤2在<head>标签中设置页面头部信息，具体可参考主页头部信息的代码。同样应将主页头部信息中链接到样式表文件index.css的代码改为链接到login.css文件的代码，具体可参考以下代码。步骤3将index.html文件中页眉与页脚的代码复制并粘贴到list.html文件的<body>标签中。需要注意的是，应删除页眉搜索框部分的代码。2．制作登录与注册模块步骤1在<header>标签与<footer>之间添加<main>标签，并在其中输入代码，构建登录与注册模块的结构。步骤2在login.css文件中设置登录与注册模块的样式。此时页面效果如图所示。步骤3在<body>标签之后输入以下代码，制作登录与注册模块的交互效果。【学生】通过教师引导学生制作登录页，引发学生主动思考能力，动手制作项目可培养学生的编程能力课堂评价（10min）【教师】统一讲解学生遇到的问题，纠正学生的错误【学生】通过讲解学生出现的问题，可以让多数学生避免犯同样的错误课堂小结（3min）【教师】简要总结本节课的要点本节课主要讲解了购物网站的制作方法，通过本节课的学习，学生应重点掌握以下内容。（1）规划和创建一个网站。
（2）设计并制作购物网站的主页。其中包括页面头部信息、页面整体结构、顶部信息栏、页眉、Banner、购物导览模块、热销榜单模块、公司头条模块、页脚。（3）设计并制作全部商品页。其中包括页面头部信息、商品列表模块。（4）【学生】总结回顾知
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年食品原料采购合同规范范本2篇
- 2025年度物流园区绿色物流推广承包合同3篇
- 2025年度环保型批灰技术合作合同协议
- 二零二五年度旅行社与旅游保险合作框架协议3篇
- 二零二五年度不动产抵押贷款债权让与合同模板3篇
- 二零二五版绿城物业智能安防系统升级合同4篇
- 2025版全新注塑机购销合同（含设备安装与调试）
- 2025年食品添加剂与添加剂原料供货协议书3篇
- 2025版小额贷款公司合作协议范本2篇
- 二零二五年度企业员工沟通技巧培训合同8篇
- 室上性心动过速-医学课件
- 建设工程法规及相关知识试题附答案
- 中小学心理健康教育课程标准
- 四年级上册脱式计算400题及答案
- 新课标人教版小学数学六年级下册集体备课教学案全册表格式
- 人教精通版三年级英语上册各单元知识点汇总
- 人口分布 高一地理下学期人教版 必修第二册
- 教案：第三章 公共管理职能（《公共管理学》课程）
- 诺和关怀俱乐部对外介绍
- 玩转数和形课件
- 保定市县级地图PPT可编辑矢量行政区划(河北省)
评论
0/150
提交评论