网页设计第4章.ppt
- 文档编号:18763970
- 上传时间:2023-11-02
- 格式:PPT
- 页数:40
- 大小:952KB
网页设计第4章.ppt
《网页设计第4章.ppt》由会员分享,可在线阅读,更多相关《网页设计第4章.ppt(40页珍藏版)》请在冰点文库上搜索。
第4章列表,清华大学出版社,主要内容,重点掌握列表的嵌套,掌握定义列表,了解菜单列表和目录列表,4.1列表简介,列表(List)-在制作网页时,列表经常被用到写提纲和品种说明书。
通过列表标记的使用能使这些内容在网页中条理清晰、层次分明、格式美观的表现出来。
本章将重点介绍列表标记的使用。
-顾名思义就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。
-常用的列表有无序列表、有序列表和定义列表三种。
另外,还有不太常用的目录列表和菜单列表。
4.1列表简介,表4-1列表类型及其标记符号,4.2无序列表,无序列表(UnorderedList)-是一个没有特定顺序的相关条目(也成为列表项)的集合。
-在无序列表中,各个列表项之间属并列关系,没有先后顺序之分,它们之间以一个项目符号来标记。
4.2无序列表,基本语法:
项目名称项目名称项目名称,4.2无序列表,语法说明:
-在HTML文件中,可以利用成对的标记来插入无序列表,其中间的列表项标签(list-items)用来定义列表项序列。
-使用无序列表标签的TYPE属性,用户可以指定出现在列表项前的项目符号的样式,其取值以及相对应的符号样式如下:
disc:
指定项目符号为一个实心圆点(IE浏览器的默认值是disc)。
circle:
指定项目符号为一个空心圆点。
square:
指定项目符号为一个实心方块。
4.2无序列表,示例代码(代码位置4-1.html),无序列表班级新闻最新课程表关于普通话考试的通知钢琴名曲音乐欣赏-献给爱丽丝中国奥运屈辱史div+css高级应用学习,4.2无序列表,实例代码4-1.html的执行效果如图4-1所示。
4.3有序列表4.3.1有序列表及其编号样式,有序列表(OrderedList)-有序列表(OrderedList)是一个有特定顺序的相关条目(也成为列表项)的集合。
在有序列表中,各个列表项有先后顺序之分,它们之间以编号来标记。
4.3.1有序列表及其编号样式,4.2无序列表,基本语法:
项目名称项目名称项目名称,4.3.1有序列表及其编号样式,语法说明:
-在HTML文件中,可以利用成对的标记来插入有序列表,其中间的列表项标记用来定义列表项顺序。
-使用有序列表标记的type属性,用户可以指定出现在列表项前的项目编号的样式,其取值以及相对应的编号样式如下:
“1”:
指定项目编号为阿拉伯数字(IE浏览器的默认值是disc);“a”:
指定项目编号为小写英文字母;“A”:
指定项目编号为大写英文字母;“i”:
指定项目编号为小写罗马数字;“I”:
指定项目编号为大写罗马数字。
4.3.1有序列表及其编号样式,示例代码,有序列表报名报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
4.3.1有序列表及其编号样式,程序4-2的执行效果如图4-2所示。
改变程序中type属性的值后,列表项前的项目编号将按指定的样式显示。
4.3.2编号起始值,通常,在指定列表的编号样式后,浏览器会从“1”、“a”、“A”、“i”或“I”开始自动编号。
而在使用有序列表标记的start属性后,用户则可改变编号的起始值。
start属性值是一个整数,表示从哪一个数字或字母开始编号。
例如,设置start=3,则有序列表的列表项编号将从“3”、“c”、“C”、“”或“”开始编号。
4.3.2编号起始值,示例代码,编号起始值的指定报名报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
4.3.2编号起始值,程序4-3的执行效果如图4-3所示。
此时,尽管列表类型type=A,start的值仍需取阿拉伯数字3,而不能取大写英文字母C。
4.3.3列表项样式,除了对列表标记进行属性设置外,我们还可以对列表项标记进行属性设置。
使用列表项标记的type属性,用户可以指定单个列表项的符号(对于无序列表而言)或编号(对于有序列表而言)。
在列表标记的type属性和列表项标记的type属性发生冲突的情况下,所指定的单个列表项遵循的type属性进行显示。
4.3.3列表项样式,示例代码程序4-4在程序4-2的基础上指定了第二个列表项的样式。
报名报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
4.3.3列表项样式,程序4-4的执行效果如图4-4所示。
第二个列表项的样式变为阿拉伯数字“2”。
4.3.3列表项样式,所指定的单个列表项只有样式发生了变化,其顺序值大小不变。
列表项标记的type属性只影响当前列表项,后续的列表项标记将恢复遵循列表中设置的type属性。
列表项标记type属性的指定,即使用于无序列表也使用于有序列表。
此处,不再针对无序列表举例。
4.3.4列表项编号,列表项标记的type属性只能改变当前列表项的符号或编号的样式,并不会改变其值的大小。
而使用列表项标记的value属性,可以改变当前列表项的编号大小,并会影响其后所有列表项的编号大小。
但该属性只适用于有序列表。
4.3.4列表项编号,示例代码和程序4-3类似,此时尽管列表类型type=A,value的值仍需取阿拉伯数字5,而不能取大写英文字母E。
报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
4.3.4列表项编号,程序4-5的执行效果如图4-5所示。
第二个列表项以后从字母“E”开始编号。
4.4嵌套列表,列表还可以嵌套使用,也就是一个列表中还可以包含有多层子列表。
在网页文件中,对于内容层次较多的情况,使用嵌套列表不仅使网页的内容布局更加合理美观,而且使其内容看起来更加清晰、明了。
嵌套的列表可以是无序列表的嵌套,也可以是有序列表的嵌套,还可以是无序列表和有序列表的混合嵌套。
4.4嵌套列表,程序4-6是嵌套列表的一个简单实例,该实例中实现了有序列表的嵌套。
报名报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
参加测试的学生须填写河南省普通话水平测试报名表一份(准考证号码不用填写);填写准考证一份(编号不用填写),所填姓名和出生年月等须与身份证一致;提交小一寸彩色证件照3张(照片不能是打印版、不能是生活照,3张照片必须统一底片),其中两张照片贴在报名表和准考证上,另一张用钢笔在背面写上校名、系别和姓名,与表格一起上交。
培训测试(注:
具体时间和地点按河南财经学院测试站发回的准考证上所列。
),4.4嵌套列表,程序4-6的执行效果如图4-6所示。
在嵌套列表中也可以根据需要更改某层列表或某层单个列表项的符号(或编号)的样式或其值的大小。
4.5定义列表,定义列表(DefinitionList)-在HTML文件中,只要在适当的地方插入标记,即可自动生成定义列表(DefinitionList)。
-它的每一项前既没有项目符号,也没有编号,它是通过缩进的形式使内容层次清晰。
4.5定义列表,基本语法:
4.5定义列表,语法说明:
-标记用来创建定义列表;-标记用来创建列表中的上层项目,此标记只能在标记中使用。
显示时标记定义的内容将左对齐;-标记用来创建列表中的下层项目,此标记也只能在标记中使用。
显示时标记定义的内容将相对于标记定义的内容向右缩进。
4.5定义列表,示例代码,报名报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
培训培训时间:
3月31日(星期六)。
培训地点:
河南财经学院4号楼503教室(如有变动,以通知为准)。
注意事项:
报考同学请自带普通话水平测试指导用书(新版),可到学而优等书店购买。
4.5定义列表,程序4-7用标记定义了上层项目“报名”和“培训”,并用标记分别定义了其相应的下层项目,他们之间以缩进的形式使层次清晰。
程序4-7的执行效果如图4-7所示。
4.6菜单列表和目录列表,菜单列表(MenuList)通常用于显示一个简单的单列列表,一般不做嵌套。
目录列表(DirectoryList)通常用于显示一个多列的文件列表,可做嵌套。
他们的使用均和无序列表类似,并且可以看着是无序列表的一种特殊形式。
一般不建议使用此两项列表。
4.6菜单列表和目录列表,基本语法:
项目名称项目名称项目名称项目名称项目名称项目名称,4.6菜单列表和目录列表,示例代码,班级新闻最新课程表关于普通话考试的通知钢琴名曲音乐欣赏-献给爱丽丝中国奥运屈辱史div+css高级应用学习普通话考试报名通知,4.6菜单列表和目录列表,示例代码,报名时间:
3月1621日,逾期不予受理。
报名地点:
所在院系办公室。
报名费用:
按物价局规定85元/人/次(含培训费用),报名时交齐。
提交资料及注意事项:
参加测试的学生须填写河南省普通话水平测试报名表一份(准考证号码不用填写);达芬奇密码填写准考证一份(编号不用填写),所填姓名和出生年月等须与身份证一致;提交小一寸彩色证件照3张(照片不能是打印版、不能是生活照,3张照片必须统一底片),其中两张照片贴在报名表和准考证上,另一张用钢笔在背面写上校名、系别和姓名,与表格一起上交。
4.6菜单列表和目录列表,程序4-8中采用了菜单列表和目录列表,并使用目录列表做了嵌套,读者可以把他们改为无序列表进行效果比较。
程序4-8的执行效果如图4-8所示。
4.7小实例,综合本章知识,以前面实例为基础写的小实例程序4-9见光盘。
该实例使用了有序列表不同样式的多层嵌套,层次清晰的表达了普通话考试的通知。
读者可以试着把它改为无序列表的嵌套或有序列表与无序列表的混合嵌套。
请从光盘中运行之。
小结,本章主要介绍了无序列表、有序列表、列表的嵌套、定义列表、菜单列表和目录列表等的使用。
通过本章的学习,读者应以无序列表和有序列表为基础,重点掌握列表的嵌套使用,同时也应熟悉定义列表的使用,为在设计中制作出层次清晰、页面美观的网页打下坚实的技术基础。
ThankYou!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计