- 1、本文档共19页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
《网页设计与制作》
教学设计
课程名称:网页设计与制作
授课年级:20年级
授课学期:20学年第一学期
教师姓名:老师
20年月日
课题名称
项目五列表和超链接
计划课时
课时
内容分析
一个网站由多个网页构成,每个网页上都有大量的信息,要想使网页中的信息排列有序、条理清晰,并且网页与网页之间有一定的关联,就需要使用列表和超链接。本项目将对列表标签、CSS列表样式、超链接和链接伪类进行具体讲解。
教学目标
掌握无序、有序及定义列表的使用。
掌握超链接标签的使用。
掌握CSS伪类。
重点及措施
教学重点:利用无序、有序及定义列表制作常见的网页模块;使用超链接定义网页元素;使用CSS伪类实现超链接特效
措施:通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点:使用CSS伪类实现超链接特效
措施:通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主,使用教学PPT讲解。
教
学
过
程
任务5.1列表标签
5.1.1无序列表
内容学习
分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
网页中如何实现无序列表?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
答案:
无序列表使用ul标签定义,内部可以嵌套多个li标签,li是列表项。
知识点讲解
讲解无序列表
(1)教师展示PPT,对无序列表进行具体讲解。
ul是英文unorderedlist的缩写,翻译为中文是无序列表。无序列表是一种不分排序的列表,各个列表项之间没有顺序级别之分。无序列表使用ul标签定义,内部可以嵌套多个li标签,li是列表项。定义无序列表的基本语法格式如下:
ul
li列表项1/li
li列表项2/li
li列表项3/li
...
/ul
li标签嵌套在ul标签中,用于描述具体的列表项,ul标签中至少应包含一个li标签。ul和li标签都拥有type属性,用于指定列表项目符号,不同type属性值可以呈现不同的项目符号,无序列表常用的type属性值及显示效果如表所示。
实例1使用无序列表
若不设置type属性时,列表项目符号显示为默认的“●”,设置type属性后,列表项目符号会按相应的样式显示。
(2)学生自主提问,教师对疑难问题进行解答。
5.1.2有序列表
内容学习
分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
网页中如何实现有序列表?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
答案:
有序列表是一种强调排列顺序的列表,使用ol标签定义,内部可以嵌套多个li标签。
知识点讲解
讲解有序列表
(1)教师展示PPT,对有序列表进行具体讲解。
ol是英文orderedlist的缩写,翻译为中文是有序列表。有序列表是一种强调排列顺序的列表,使用ol标签定义,内部可以嵌套多个li标签。例如,网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下:
ol
li列表项1/li
li列表项2/li
li列表项3/li
...
/ol
在上面的语法中,ol/ol标签用于定义有序列表,li/li标签为具体的列表项,和无序列表类似,每对ol/ol标签中也至少应包含一对li/li标签。
在有序列表中,除type属性之外,还可以为ol标签定义start属性,为li标签定义value属性,它们决定有序列表的项目符号,有序列表相关的属性和描述如表所示。
有序列表相关的属性和描述
实例2使用有序列表
本例定义了两个有序列表。其中,第8~12行代码中的有序列表没有任何属性,第13~17行代码中的有序列表的列表项应用了type和value属性,用于设置特定的列表项目符号。
(2)学生自主提问,教师对疑难问题进行解答。
5.1.3定义列表
内容学习
分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
网页中如何实现定义列表?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
答案:
dl是英文definitionlist短语的缩写,翻译为中文是定义列表。定义列表与有序列表、无序列表不同,它包含了三个标签,即dldtdd。
知识点讲解
讲解定义列表
(1)教师展示PPT,对定义列表进行具体讲解。
dl是英文definitionlist短语的缩写,翻译为中文是定义列表。定义列表与有序列表、无序列表不同,它包含了三个标签,即dldtdd。定义列表的基本语法格式如下:
dl
dt名词1/dt
dd是名词1的描述信息1/dd
dd是名词1的描述信息2/dd
...
dt名词2/dt
dd是名词2的描述信息1/dd
dd是名词2描述信息2/dd
...
/dl
在上面的语法中,dl标签
您可能关注的文档
- 《网页设计与制作(活页式)》 教案 项目6 表格和表单.docx
- 《网页设计与制作(活页式)》 教案 项目1网页设计与制作.docx
- 《网页设计与制作(活页式)》 教案 项目2HTML5简介.docx
- 《网页设计与制作(活页式)》 教案 项目3 CSS样式.docx
- 《网页设计与制作(活页式)》 教案 项目4 盒子模型.docx
- 《网页设计与制作(活页式)》 教案 项目7 布局网页.docx
- 《网页设计与制作(活页式)》 教案 项目8 婚庆网站首页.docx
- 《网页设计与制作(活页式)》 教案全套 傅伟 项目1--8 网页设计与制作 --- 婚庆网站首页.docx
- 《网页设计与制作(活页式)》 课件 项目1 网页设计与制作.pptx
- 《网页设计与制作(活页式)》 课件 项目2 HTML5简介.pptx
文档评论(0)