《Web编程基础》教案-模块4 制作网站的动态页面3-定义列表.docx

《《Web编程基础》教案-模块4 制作网站的动态页面3-定义列表.docx》由会员分享，可在线阅读，更多相关《《Web编程基础》教案-模块4 制作网站的动态页面3-定义列表.docx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块4创立网站最新动态页面课程名称Web编程基础课 时2课时授课班级软件技术、计算机应用、移动开发专业授课地点一体化教室授课形式做学教一体教学单元模块4-3定义列表及列表的应用教学目标知识目标掌握定义列表的使用；掌握CSS设置列表样式的方法。能力目标能够定义列表的使用并运用CSS修饰列表样式素质目标激发学生学习兴趣引导学生团队合作教学重点难 点及措施教学重难点：灵活应用定义列表，以及样式修饰。措施：通过上机操作加强学习和补充案例进行巩固。教学方法做学教一体任务驱动线上线下混合教学教学任务制作列表条目nr教学 环节教学内容教学方式学生 活动新课 引入在浏览网页时，经常会看到如图4-7所不的 页面

2、效果，小米官网首页的最底端的局部，“帮 助中心”、“服务支持”、“线下门店”都是标题， 下层对应的内容都是围绕上层这个标题进行描讲授思考 参与 讨论font-size: 14px;)/*实验区定义结束*/*评论区定义开始*/.barmargin-bottom: 10px;).bar spanfont-size: 13px;cursor: pointer;).bar atext-decoration: none;font-size: 13px;color: #333;border: Ipx saddlebrown solid;padding: 2px 12px;margin-right: 5px

3、;background-color: blanchedalmond;border-radius: 4px;).bar imgvertical-align: middle;)/*评论区定义结束*/*泉水简介开始*/.info h4font-weight: 500;font-size: 16px;color: green;margin:5px Opx;).info pfont-size: 14px;text-indent: 2em;line-height: 1.8em;/*泉水简介结束*/班级学习园地dd实验名称：v/span泉水硬度比拟dd实验准备：v/span肥皂水、黑虎泉水、琵琶泉 水、吸管

4、、玻璃杯步骤：分别在杯子里倒入相同质量的泉 水；在杯子里各加入10滴肥皂水；静置等结果。dd现象：琵琶泉水的沉淀物多于黑虎泉水 的沉淀物。结论：经屡次实验得出琵琶泉水矿物质 多于黑虎泉水的矿物质。 实验员： 七组  · 叶 芽 !-评论区想看 v/aa href=#看过/a评价:/span!-泉水信息简介黑虎泉简介Vp黑虎泉(BlackTiger Spring),位于山东省济南市历下区 解放阁南护城河南岸陡崖下，在济南市黑虎泉西路。黑虎泉为一天然洞 穴，高2米，深3米，宽1.7米，泉水主要来自洞穴的东南方向。洞穴由青 石垒砌，洞穴隐露在岩壁下。琵琶泉简介 琵琶

5、泉(Pipa Spring)位于环城公园东南隅，黑虎泉西 侧。清七十二泉记收录。因水声淙淙，犹如琵琶扬韵而得名。1965年整 修为长6米、宽5米、深2米的石砌方池，水自池底岩孔涌出，由北岸溢 出，跌宕下泻，迸落河中，立于琵琶桥上赏泉听音，别有幽默。 感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用述的。这种页面布局就可以采用自定义列表实 现。dt _名词或标题r1个/多个dd, 解释、说明dtA帮助中心服务支持线下门店J(冰户管理)售后政策小米之家7(购物指南)自助服务服务网点拉(订单操作)相关下载授权体蛇店/专区狂9于小米解小米入小米资者关系业社会者任洁举报关注我们新浪微博官方微信联

6、系我们公鬓基全会图4-7定义列表的例如新知讲解定义列表常用于对名词或术语进行解释和描 述，定义列表的列表项前面没有任何工程符号。 在HTML中，使用标记创立定义列表， 其基本语法格式如下：名词1名词1描述l名词1描述2v/dd说明：(1) 标记用来定义名词或术语，预览 时vdtv/dt标记中定义的内容默认样式为左对 齐。(2) 标记用来描述名词或者术语， 预览时vdd标记中定义的内容默认样式是 相对于标记定义的内容向右缩进一定 的距离。(3) 里面只能包含vdt和, 和里面可以放任何标记。(4) 和个数没有限制，经常是一个 对应多个。讲授认真 听讲 做好 笔记特色服务F码通道礼物码防伪查询【例

7、4-4】定义列表的应用vtitle 定义歹！J 表HTML制作网页的标准语言，控制 网页的结构v/ddCSS层叠样式表，控制网页的样 式 v/ddJavaScriptvdd脚本语言，控制网页的 行为v/dd运仃结果如图4-8所小。,一 口 x定义列表X +OT C 。127.0.0.1:8848/Web 编程基础/A ：HTML制作网页的标准语言，控制网页的结构CSS层叠样式表，控制网页的样式JavaScript脚本语言，控制网页的行为图4-8定义列表课堂实践学生做中学，教师巡视逐个指导，并监督、验收。集中问题集体讲解、评估讨论实训任务实施过程；给出参考的解决方案；考核学生训练结果。教师 巡视

8、 单独 指导动手 实践， 做中 学任务 2： CSS 修饰 列表例如 演示列表最主要用的有两种类型，无序列表 和有序列表,我们除了使用列表自带的属性 修饰列表，最主要的途径是应用CSS样式修饰列 表，CSS列表属性如表4-1所小。表4-1 CSS列表属性属性例如说明list-style-t ypeullist-style-type: afar;用于定义列表 工程符号的类 型list-style-i mageul list-style-image: url(img/icon.jpg);使用图像作为 列表工程符号list-style-p ositionul list-style-type: dis

9、c; list-style-position: outside;定义列表工程 符号的位置， 属性值inside , outsidelist-styleul list-style:cjk-earthly-b ranch inside;列表样式定义 的简写方法， 即同时定义多 个参数【例4-5】 CSS美化列表例如代码： ulwidth: 300px;list-style:decimal-leading-zero inside;border: Ipx solid blue;padding: 5px;background-color: blue;)limargin-bottom: 5px;borde

10、r: Ipx solid red;padding: 5px;background-color: aliceblue;)新员工培训安排li培训目的培训内容v/li运行效果如图4-9所示。外层父元素ul背景爱丽丝蓝色子元素li背景浅天蓝色图4-9 CSS美化列表学生模仿练习实训任务（附件实训任务指导） 学生练习实训指导内容，充分理解掌握列表的创 建，及使用css修饰美化列表样式。1 .学生练习，教师巡视。2 .教师指出学生模仿过程中可能出错和已经出 错的知识点，并进行重点评析，加深印象，强化 记忆。巡视， 个别指导， 工程 考核 评价团队 讨论， 动手操作， 做中学,做 好实 训总 结小结巩固本课

11、时知识点学完知识点后，教师带着学生对本课时所学知识 点进行回顾。1 .有序列表和无序列表2 .嵌套列表的定义3 .定义列表的使用4 . CSS修饰美化列表通过网络教学平台预习新内容通过网络教学资源平台，预习超链接。演示 归纳 讲解认真 听取 教师 总结 评价教学评价1 .教师巡回指导学生课程过程中出现的问题，并予以指导。2 .教师根据巡回指导过程中发现的情况，进行全过程评价并总结。3 .学生实训过程中，以小组为单位，解决不了难点向老师请教。4 .小组完成情况，实现相互评价，取长补短。5 .学生认真听取教师全过程评价和总结。布置作业学习平台完成线上预习、讨论、过程性考核定义列表在概念理解上难度不

12、大，但是能真正灵活运用却需要勤 教学反思 学苦练，见多识广，积累经验。在学习的过程中，充分培养学生 的创新精神。附件：实训任务指导书实训目的】1 .理解列表项的用途；2 .掌握定义列表的灵活使用；3 .熟练掌握CSS美化修饰列表样式;【实训内容】实训任务3：制作班级学习园地【任务描述】制作班级网站中的班级学习园地版块，页面中左侧为实验图片，右侧罗列实 验相关条目，页面下方是对背景知识的详细介绍，页面效果如图4-20所示。班级学习园地实验名称：泉水硬度匕取实验准备：月巴皂水、黑虎泉水、琵琶泉水、吸管、玻璃杯步骤：分别在杯子里倒入相同质量的泉水；在杯子里各加入10 滴月巴皂水；静置等结果。现象：琵

13、琶泉水的沉淀物多于黑虎泉水的沉淀物。结论：经屡次实验得出琵琶泉水矿物质多于黑虎泉水的矿物 质。实验员：七组叶芽想看| I看过)评价：黑虎泉简介黑虎泉(Black Tiger Spring),位于山东省济南市历下区解放阁南护城河南岸陡崖下，在济 南市黑虎泉西路。黑虎泉为一洞穴，高2米深3米，宽1.7米泉水主要来自洞穴的东南方 向。洞穴由青石垒砌，洞穴隐露在岩壁下。琵琶泉简介琵琶泉(Pipa Spring)位于环城公园东南隅，黑虎泉西侧。清七十二泉记收录。因水声 淙淙，犹如琵琶扬韵而得名。1965年整修为长6米、宽5米、深2米的石砌方池，水自池底岩孔涌 出，由北岸溢出，跌宕下泻，迸落河中，立于琵琶

14、桥上赏泉听音，别有幽默。图4-20班级学习园地效果【实训任务指导】1 .页面中上半局部的实验环节，使用定义列表Vdl制作，将实验图片作为要 被解释、说明的名词或主题，使用Vdt制作，其他实验相关条目作为解释dt的 具体内容，使用dd制作。2 .对dt设置向左浮动，使得出与其他dd块结构构成水平布局，为了避 免右侧向左侧环绕，将左侧盒子高度设置与右侧内容同高。3 .应用超链接制作“想看”、“看过”，当用户单击两个条目时，可跳转到 相应页面，此处，通过空链接ahref=#”调试程序，并设置超链接的样式。任务3实现的主要代码：!DOCTYPE htmlhtmlheadmeta charset=Hut

15、f-8Htitle班级学习园地v/titlestyle type=ntext/cssnbody,div,dl,dt,dd,h 1 ,h2,h3,h4,p margin: Opx;padding: Opx;)bodycolor: #333;).mainwidth: 600px;border: Ipx solid blue;padding: lOpx;).main h3font-size: 22px;margin-bottom: Wpx;border-bottom: Ipx solid #CCCCCC;padding-bottom: lOpx;)/*实验区定义开始*/dlpadding: lOpx Opx;margin-bottom: lOpx;)dtfloat: left;height: 200px;margin-right: lOpx;/* background-color: #elelel; */)dt imgborder: Ipx solid saddlebrown;padding: 2px;border-radius: 18px;)dd spanfont-weight: bold;)ddmargin-bottom: 5px;line-height: 150%;