《项目十一 列表元素的应用ppt课件.pptx》由会员分享,可在线阅读,更多相关《项目十一 列表元素的应用ppt课件.pptx(25页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目十一 列表元素的应用项目十一 列表元素的应用学习目标学习目标会无序列表的使用会有序列表的使用项目十一 列表元素的应用项目项目简介简介该项目要求掌握列表元素的操作与应用,通过该任务的学习,需要掌握不同列表元素对应的元素标签。通过该项目,达到提高学生对文本元素的编辑排版能力,提升对文本信息的操作技巧的目的。本项目要完成的任务:任务一 无序列表的应用任务二 有序列表的应用任务一 无序列表的应用任务描述任务描述该任务要求运用无序列表进行对文本元素编排控制,会插入无序列表元素,会设置type属性设置不同的项目符号。该任务的需求如下所示:在“WebTest项目11”文件夹中新建11-1.html文档,
2、并实现如图11-1所示的页面效果。图11-1 11-1.html页面浏览效果图任务一 无序列表的应用知识知识储备储备HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由组成。无序列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表,其列表标签采用。任务一 无序列表的应用1.无序列表语法 第一项 第二项 第n项任务一 无序列表的应用2. type属性无序列表默认的项目符号为圆点,也可通过TYPE属性改变项目符号形状。(1)disc:默认值,为实心圆(2)circle:为空心圆环(3)square:为正方形任务一 无序列表的应用2. type属性无序列表默认的项目
3、符号为圆点,也可通过TYPE属性改变项目符号形状。(1)disc:默认值,为实心圆(2)circle:为空心圆环(3)square:为正方形任务一 无序列表的应用任务任务实施实施1.新建文档新建 11-1.html文档,并保存到“WebTest/项目11”文件夹中;任务一 无序列表的应用2. 插入无序列表在11-1.html文档的“设计”视图中,把光标定位到页面的第一行位置,并输入“无序列表”文本并按“回车键” 在“窗口”菜单中选中“插入”,打开“插入”面板选择“文本”选项,如图11-2所示点击“ul 项目列表”,在插入的“列表项”处输入第一行文字“诗词鉴赏”,按“回车键”自动生成“列表项”,
4、输入第二行文字,以此类推,输入最后一行文字切换到“代码视图”设置ul标签的type属性为circle。图11-2 插入面板文本选项任务一 无序列表的应用切换到“代码”视图查看生成的HTML代码如下所示:无序列表 诗词鉴赏 散文鉴赏 小说鉴赏 戏剧鉴赏3.保存网页,按F12在浏览器中浏览效果。任务二 有序列表的应用任务描述任务描述该任务要求运用有序列表进行对文本元素编排控制,会插入有序列表元素,会设置type属性设置不同的编号。该任务的需求如下所示:在“WebTest项目11”文件夹中新建11-2.html文档,并实现如图11-3所示的页面效果。图11-3 11-2.html页面浏览效果图任务二
5、 有序列表的应用知识储备知识储备有序列表结构中的列表项是有先后顺序的列表形式,从上到下可以有各种不同的序列编号,ol 是 Ordered List(有序列表)的缩写。与无序列表标签相对。列表项仍由标签记述。任务二 有序列表的应用1.有序列表语法 第一项 第二项 第n项任务二 有序列表的应用2. type属性有序列表默认的编号为数字有序列表(1、2、3),也可通过TYPE属性改变编号类型。(1)1:默认值,数字有序列表。如:1、2、3、4;(2)a:按小写字母顺序排列的有序列表。如:a、b、c、d;(3)A:按大字母顺序排列的有序列表。如:A、B、C、D;(4)i:小写罗马字母。如:i、ii、i
6、ii、iv;(5)I:大写罗马字母。如:I、II、III、IV。任务二 有序列表的应用任务实施任务实施1.新建文档新建 11-2.html文档,并保存到“WebTest/项目11”文件夹中;任务二 有序列表的应用2. 插入有序列表在11-2.html文档的“设计”视图中,把光标定位到页面的第一行位置,并输入“有序列表”文本并按“回车键” 在“窗口”菜单中选中“插入” ,打开“插入”面板选择“文本”选项,如图11-2所示点击“ol 编号列表”,在插入的“列表项”处输入第一行文字“诗词鉴赏”,按“回车键”自动生成“列表项”,输入第二行文字,以此类推,输入最后一行文字切换到“代码视图”设置ol标签的type属性为A。任务二 有序列表的应用切换到“代码”视图查看生成的HTML代码如下所示:有序列表 诗词鉴赏 散文鉴赏 小说鉴赏 戏剧鉴赏3.保存网页,按F12在浏览器中浏览效果。知识拓展网页中,主要使用的是无序列表和有序列表,在Dreamweaver中还有定义列表、目录列表、菜单列表等类型。知识拓展1. 定义列表(1)定义列表语法 知识拓展(2)定义列表举例知识拓展2.目录列表(1)目录列表语法 知识拓展(2)目录列表举例知识拓展3. 菜单列表(1)菜单列表语法 知识拓展(2)菜单列表举例