《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第7课 使用HTML5添加列表_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第7课 使用HTML5添加列表_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第7课 使用HTML5添加列表_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第7课 使用HTML5添加列表_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第7课 使用HTML5添加列表_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课使用HTML5添加列表的第课使用HTML5添加列表的基基本本PAGE873173217321使用HTML5添加列表第课PAGE973212使用HTML5添加列表第73212使用HTML5添加列表第课PAGE1

课题使用HTML5添加列表课时2课时（90min）教学目标知识技能目标：（1）掌握无序列表、有序列表及自定义列表标签的使用方法（2）学习列表嵌套的方法思政育人目标：（1）培养学生敢于尝试的勇气（2）使学生学会多角度看待问题，了解事物的多面性教学重难点教学重点：学习无序列表、有序列表及自定义列表的标签教学难点：在HTML5网页中操作列表嵌套教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（24min）第2节课：导入新知（4min）知识讲解（19min）

课堂练习（18min）

课堂小结（2min）作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】提出问题，引出新知识点如今，随着技术的不断发展，数据量变得非常的复杂，单个模块已经无法满足其需求，所以引入新的数据结构：列表试问：列表的定义是什么？列表又分为哪几种类型？HTML5中的列表与之前学习的列表有什么不同吗？同学们使用过列表吗【学生】思考、发言【教师】总结发言列表是一种复杂的数据结构，在HTML5中分为有序、无序和自定义三大类，跟之前编程语言中的列表有异曲同工之处，列表在网页中应用广泛，除文字列表、图文列表外，导航条、菜单栏等常见模块一般也是用列表实现的通过提问的方式，让学生了解HTML5中列表的概念，激发学生的求知欲知识讲解

（24min）【教师】讲述无序列表无序列表无序列表会将列表项的内容依次排列，并在每一个列表项前添加项目符号（默认为实心圆）。无序列表的列表项之间没有先后、主次、轻重之分。在HTML5中，使用<ul>标签标记无序列表，它还有一个用于标记列表项的子标签<li>，一个<ul>标签中可以包含一个或多个<li>标签。具体格式为：<ul> <li>…</li> …… <li>…</li></ul>【学生】聆听、思考【教师】演示【例4-1】的操作流程，实现图4-1的效果使用无序列表制作商品分类栏（部分代码），页面效果如图4-1所示<p>商品分类</p><ul> <li>家用电器</li> <li>手机/数码</li> <li>家具/家居/家装/厨具</li> <li>男装/女装/童装</li> <li>美妆/清洁</li></ul>图4-1商品分类栏的页面效果【学生】模仿参考代码，编写程序【教师】讲述有序列表有序列表有序列表中的列表项是有先后顺序的，列表项前的项目符号为数字序号，默认为阿拉伯数字。在HTML5中，使用<ol>标签标记有序列表，使用子标签<li>标记列表项，具体格式为：<ol> <li>…</li> …… <li>…</li></ol>对于强调列表项排列顺序的内容，如排行榜、新闻列表等，可以使用有序列表结构。列表项的排序方式可使用<ol>标签的属性设置，常用属性及其含义如下（1）reversed。表示列表的顺序为降序，属性值为reversed。（2）start。表示列表排序的起始值，属性值为数值。（3）type。表示列表序号的类型，属性值有1、A、a、Ⅰ、ⅰ。【学生】聆听、思考【教师】演示【例4-2】的操作流程，实现图4-2的效果使用有序列表制作电影票房排行榜（部分代码），页面效果如图4-2所示。<p>2010年内地电影票房总排行榜</p><ol> <li>阿凡达——13.28亿</li> <li>唐山大地震——6.73亿</li> <li>让子弹飞——6.61亿</li> <li>非诚勿扰2——4.81亿</li> <li>盗梦空间——4.6亿</li></ol>图4-2电影票房排行榜的页面效果【教师】演示【例4-3】的操作流程，实现图4-3的效果更改有序列表的排序方式（部分代码），页面效果如图4-3所示。<p>2008年北京奥运会乒乓球男子单打前三名：</p><olreversed="reversed"start="3"type="i"> <li>季军：王励勤</li> <li>亚军：王皓</li> <li>冠军：马琳</li></ol>图4-3更改有序列表排序方式的页面效果<li>标签也可以设置属性value和type。其中，value表示列表项的序号，属性值为数值。当使用value属性修改某个列表项的编号后，后续的列表项会重新编号。因此，可以使用value属性指定两个编号相同的列表项（如有必要）。【学生】聆听、思考、记录通过讲解知识点，让学生进一步了解HTML5中的有序列表和无序列表，为后面的知识打下基础课堂练习

（15min）【教师】组织趣味游戏【学生】参与课堂练习【教师】公布小组成绩通过课堂练习，加强学生对HTML5中无序列表和有序列表的理解第二节课导入新知

（4min）【教师】复习上一节课内容，引出新的知识点上一节课的内容中，学习了无序列表和有序列表，但是有时候复杂的结构体以及自身特殊的需求，需要我们自定义列表，甚至对列表进行嵌套操作，这就对列表的操作提出了更高的要求【学生】聆听、思考、理解、记忆通过复习上一节课的内容，引起学生的学习兴趣，激发学生对列表操作的思考知识讲解

（19min）【教师】讲述自定义列表自定义列表是一种特殊的列表结构，它包含列表标题与列表内容，列表内容是对列表标题的解释说明。在HTML5中，使用<dl>标签标记自定义列表，它包含<dt>与<dd>两个子标签，<dt>标签标记列表标题，<dd>标签标记列表内容，具体格式为<dl> <dt>列表标题1</dt> <dd>列表内容1.1</dd> <dd>列表内容1.2</dd> <dt>列表标题2</dt> <dd>列表内容2</dd></dl>其中，一个<dl>标签可以包含一个或多个<dt>标签，一个<dt>标签可以包含一个或多个<dd>标签。一个<dt>标签及其下的所有<dd>标签为一个列表项，列表项没有项目符号，它们之间也不强调排列顺序。【教师】演示【例4-4】的操作流程，实现图4-4的效果自定义列表的应用（部分代码），页面效果如图4-4所示。<p>HTML5列表：</p><dl> <dt>无序列表</dt> <dd><ul>标签+<li>标签</dd> <dt>有序列表</dt> <dd><ol>标签+<li>标签</dd> <dt>自定义列表</dt> <dd><dl>标签+<dt>标签+<dd>标签</dd></dl>图4-4自定义列表的页面效果【学生】聆听、思考【教师】讲述使用嵌套列表的方法嵌套列表就是在一个列表的列表项中插入另一个列表。嵌套无序列表可以制作带有子菜单的导航条，嵌套有序列表可以制作分级大纲。嵌套无序列表时，浏览器会根据嵌套的层级修改列表项前面的修饰符。【教师】演示【例4-6】的操作流程，实现图4-6的效果制作测试题内容，页面效果如图4-6所示。图4-6嵌套有序列表的页面效果创建HTML5文档，在<body>标签中输入以下代码，嵌套有序列表制作测试题内容。<ol> <li>关于CSS3，下列说法错误的是（）。 <oltype="A"> <li>CSS3语句由选择器和声明组成</li> <li>CSS3样式不能写在HTML5文档中</li> <li>行内样式只对其所在的标签起作用</li> <li>继承的样式优先级最低</li> </ol> </li></ol>【学生】聆听、思考【教师】询问学生，是否有不理解的地方【学生】回顾内容，提出问题通过讲解知识点，让学生了解HTML5中自定义列表和嵌套列表操作课堂练习

（18min）【教师】布置课堂练习制作“网上书店”页面的导航条本任务实施通过制作“网上书店”页面的导航条，练习无序列表在实际网页制作中的应用【教师】多媒体播放操作流程在DW中打开本书配套素材“项目4”→“任务4.1”→“bsonline”→“main.html”文档，其中已经创建了导航条的容器元素（nav元素）。将其页面标题设置为“网上书店——火热开售【海量图书，欢迎选购】”。在nav元素中的<divclass="menu"></div>标签中输入以下代码，添加无序列表，页面效果如图4-8所示。<ul> <liid="nav_n"><em>网上书店</em></li> <li>文学</li> <li>哲学</li> <li>历史</li> <li>小说</li> <li>少儿</li> <li>教辅</li> <li>网络</li> <li>青春</li> <li>科技</li> <li>艺术</li> <li>管理</li></ul>图4-8添加无序列表后的页面效果本例使用链接样式表添加样式。在头部标签中输入以下代码，链接到样式表文件“main.css”。<linkhref="main.css"rel="stylesheet"type="text/css"/>【学生】观看多媒体，完成课堂练习【教师】巡视课堂，督促学生完成课堂练习【学生】对自己不了解的地方，对老师提出问题【教师】回答学生提问【教师】公布参考案例【教师】总结课堂内容利用练习法，加强学生对HTML5中自定义列表和嵌套列表操作的熟练程度，强化对列表操作方法的使用课

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论