教案
序号:4
授课日期
课时数
4
章节名称
任务5页面交互标签、层次语义标签和全局属性
教学内容
重点
页面交互标签、层次语义标签。
难点
页面交互标签的使用。
教学目的与要求
掌握全局属性的应用方法。
教学方法
与手段
教师采用任务驱动法,使用教学PPT辅助授课。
教师操作演示,学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题,通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
(任务5结构标签和分组标签
5.1页面交互标签、5.2层次语义标签:time标签)
实操任务目标发布
制作“书评网”页面
图4-SEQ图\*ARABIC\r11“书评网”网页
图4-SEQ图\*ARABIC2单击“新书速递”栏目时的效果
图4-SEQ图\*ARABIC3单击“销售榜单”栏目时的效果
强化训练——制作“面试应答技巧”网页
图4-SEQ图\*ARABIC4“面试应答技巧”网页
图4-SEQ图\*ARABIC5单击分标题时的效果
准备知识介绍
页面交互标签
details标签和summary标签
details标签:details标签用于描述文档或文档某个部分的细节。
summary标签:与details标签配合使用,作为details的第一个子元素,用于定义details标题。标题是可见的,当用户单击标题时,会显示或隐藏details标签中的其他内容。
子任务:
图4-SEQ图\*ARABIC6单击标题时的效果
progress标签
progress标签:用于定义运行中的任务进度(进程)。
progress标签的属性:
子任务:
图4-SEQ图\*ARABIC7progress标签的使用
meter标签
meter标签:定义度量衡。仅用于已知最大和最小值的度量。比如:磁盘使用情况,查询结果的相关性等。
meter标签的属性:
子任务:
图4-SEQ图\*ARABIC8meter标签的使用
层次语义标签
time标签
time标签:用于定义时间或日期,它不会在浏览器中呈现任何效果,但是该元素能以机器可读的方式对日期和时间进行编码,主要给机器识别,这样用户可以将事件提醒添加到日程表中,搜索引擎也能够生成更智能的搜索结果。
time标签的属性:
子任务:
图4-SEQ图\*ARABIC9time标签的使用
第二学时
(任务5结构标签和分组标签
5.2层次语义标签:mark标签、cite标签,5.3全局属性)
层次语义标签
mark标签
mark标签:定义带有记号的文本,它可实现高亮显示某些字符,以引起用户的注意。
子任务:
图4-SEQ图\*ARABIC10mark标签的使用
cite标签
cite标签:用于定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。
人名不属于作品的标题。
cite标签定义的文本将以斜体显示。
图4-SEQ图\*ARABIC11cite标签的使用
全局属性
draggable属性
draggable属性:规定元素是否可拖动。
false:默认值,表示该元素选中之后不可以进行拖动操作。
true:表示该元素选中之后可以进行拖动操作。
子任务:
图4-SEQ图\*ARABIC12draggable属性的使用
hidden属性
hidden属性:规定元素是否可见。
false:默认值,表示该元素显示。
true:表示该元素被隐藏。
子任务:
图4-SEQ图\*ARABIC13hidden属性的使用
spellcheck属性
spellcheck属性:规定是否对元素的输入内容进行拼写和语法检查。
false:不检测拼写和语法。
true:默认值,检测拼写和语法。
图4-SEQ图\*ARABIC14spellcheck属性的使用
contenteditable属性
contenteditable属性:规定是否可以编辑元素的内容,前提是该元素必须是可获得鼠标焦点且不是只读的。
false:默认值,表示内容不可编辑。
true:表示内容可编辑。
图4-SEQ图\*ARABIC15contenteditable属性的使用
第三学时
实战演练——制作“书评网”网页
案例描述:设计并制作书评网页面,网页效果如下,网页中间的热门书籍图片呈现滚动显示效果。
图4-SEQ图\*A