网页的设计与制作 第6章列表与框架.ppt

2010网页设计与制作 第6章 第6章 列表与框架 学习目标： 用CSS设置列表 灵活使用内联框架 6.1 列表 6.1.1 有、无序列表的基本格式 有序列表基本格式： ol li列表项1/li li列表项2/li …… li列表项n/li /ol 无序列表基本格式： ul li列表项1/li li列表项2/li …… li列表项n/li /ul 6.1.2有、无序列表的标记属性 6.1.3 定义列表 基本格式： dl dt定义项1/dt dd定义描述1/dd dt定义项2/dt dd定义描述2/dd …… dt定义项n/dt dd定义描述n/dd /dl 6.1.4 列表的嵌套 格式举例： ol li列表项1/li li ul li列表项1/li li列表项2/li …… li列表项n/li /ul /li …… li列表项n/li /ol 6.1.5 CSS中的列表属性 6.1.6 list-style-type属性取值1 6.1.6 list-style-type属性取值2 6.2 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。 框架结构标记frameset 框架结构标签（frameset）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 框架标签frame frame 标签定义了放置在每个框架中的 HTML 文档。 6.2.1 框架的一般格式 frameset cols=25%, 25%,* noframes body Your browser does not handle frames! /body /noframes frame src=URL1 / frame src=URL2 / frame src=URL3 / /frameset 6.2.2 框架结构标记 框架结构标记：frameset，这是双标记。 frameset定义如何将窗口分割为框架。 每个 frameset 定义了一系列行或列。 6.2.3 框架标记 框架标记frame /是单标记。 frame定义了放置在每个框架中的HTML文档。 6.2.4 内联框架标记 iframe用于创建内联框架（即行内框架）。 6.2.5 注意事项 noframes标记是双标记。 可为那些不支持框架的浏览器显示文本。如果浏览器能处理框架，就不会显示出noframes中的文本。 noframes必须位于 frameset之内。 使用框架的弊端： 开发人员必须同时跟踪更多的HTML文档 很难打印整张页面 * * 用于ol与ul之内 备注 已废弃。被ul 代替。 menu 已废弃。被ul 代替 dir 定义定义的描述。 dd 定义定义项目。 dt 定义定义列表。 dl 定义列表项。 li 定义无序列表。 ul 定义有序列表。 ol 描述 标签 规定有序列表表项符号 1、A、a、I、i ol与li 规定有序列表起始的编号 数值 ol start ul与li ol与ul 使用范围 type 规定无序列表表项符号为●、■、○ disc、square、circle 规定列表呈现的效果比正常情况更小巧 compact compact 描述 取值 属性 请见下页 inside、outside URL、none disc outside none 取值 设置列表项符号的类型。 list-style-type 设置列表中列表项标志的位置。 list-style-position 将图象设置为列表项标志。 list-style-image 简写属性。用于把所有用于列表的属性设置于一个声明中。默认取值： list-style 描述 属性 大写拉丁字母(A, B, C, D, E, 等。) upper-latin 小写拉丁字母(a, b, c, d, e, 等。) lower-latin 小写希腊字母(alpha, beta, gamma, 等。) lower-greek 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) upper-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) lower-alpha 大写罗马数字(I, II, III, IV, V, 等。) upper-roman 小写罗马数字(i, ii, iii, iv, v, 等。) lower-roman 0开头的数字。(01, 02, 03, 等。) decimal-leading-zero 数字。 decimal 实心方块。