(精品)网页设计与制作第6章列表与框架.ppt

《(精品)网页设计与制作第6章列表与框架.ppt》由会员分享，可在线阅读，更多相关《(精品)网页设计与制作第6章列表与框架.ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第6章章 列表与框架列表与框架学习目标：学习目标：1.用用CSS设置列表设置列表2.灵活使用内联框架灵活使用内联框架6.1 列表列表标签描述描述备注备注定定义有序列表。有序列表。定定义无序列表。无序列表。定定义列表列表项。用于用于与与之内之内定定义定定义列表。列表。定定义定定义项目。目。定定义定定义的描述。的描述。已已废弃。被弃。被 代替代替已已废弃。被弃。被 代替。代替。2010网页设计与制作2第6章6.1.1 有、无序列表的基本格式有、无序列表的基本格式o有序列表有序列表基本格式：基本格式：列表项列表项1列表项列表项2列表项列表项no无序列表无序列表基本格式：基本格式：列表项列表项1列表

2、项列表项2列表项列表项n2010网页设计与制作3第6章6.1.2有、无序列表的标记属性有、无序列表的标记属性属性属性使用范围使用范围取取值描述描述compact与与compact规定列表呈定列表呈现的效果比正常的效果比正常情况更小巧情况更小巧start数值数值规定有序列表起始定有序列表起始的编号的编号type与与1、A、a、I、i规定有序列表表定有序列表表项符号符号与与disc、square、circle规定无序列表表定无序列表表项符号符号为、2010网页设计与制作4第6章6.1.3 定义列表定义列表o基本格式：基本格式：定义项定义项1定义描述定义描述1定义项定义项2定义描述定义描述2定义项定

3、义项n定义描述定义描述n2010网页设计与制作5第6章6.1.4 列表的嵌套列表的嵌套o格式举例：格式举例：列表项列表项1列表项列表项1列表项列表项2列表项列表项n列表项列表项n 2010网页设计与制作6第6章6.1.5 CSS中的列表属性中的列表属性属性属性取值取值描述描述list-styledisc outside none简写属性。用于把所有用于列表的属性写属性。用于把所有用于列表的属性设置于一个声明中。默置于一个声明中。默认取取值：list-style-imageURL、none将将图象象设置置为列表列表项标志。志。list-style-positioninside、outside设置

4、列表中列表置列表中列表项标志的位置。志的位置。list-style-type请见下页请见下页设置列置列表表项符号符号的的类型。型。2010网页设计与制作7第6章6.1.6 list-style-type属性取值属性取值1值描述描述none无表无表项符号。符号。disc实心心圆。circle空心空心圆。square实心方心方块。decimal数字。数字。decimal-leading-zero0开开头的数字。的数字。(01,02,03,等。等。)lower-roman小写小写罗马数字数字(i,ii,iii,iv,v,等。等。)upper-roman大写大写罗马数字数字(I,II,III,IV,V

5、,等。等。)lower-alpha小写英文字母小写英文字母The marker is lower-alpha(a,b,c,d,e,等。等。)upper-alpha大写英文字母大写英文字母The marker is upper-alpha(A,B,C,D,E,等。等。)lower-greek小写希腊字母小写希腊字母(alpha,beta,gamma,等。等。)lower-latin小写拉丁字母小写拉丁字母(a,b,c,d,e,等。等。)upper-latin大写拉丁字母大写拉丁字母(A,B,C,D,E,等。等。)2010网页设计与制作8第6章6.1.6 list-style-type属性取值属性

6、取值2值描述描述hebrew传统的希伯来的希伯来编号方式号方式armenian传统的的亚美尼美尼亚编号方式号方式georgian传统的的乔治治亚编号方式（号方式（an,ban,gan等）等）cjk-ideographic简单的表意数字的表意数字hiragana标记是：是：a,i,u,e,o,ka,ki,等。（日文片假名）等。（日文片假名）katakana标记是：是：A,I,U,E,O,KA,KI,等。（日文片假名）等。（日文片假名）hiragana-iroha标记是：是：i,ro,ha,ni,ho,he,to,等。（日文片假名）等。（日文片假名）katakana-iroha标记是：是：I,RO

7、,HA,NI,HO,HE,TO,等。（日文片假名）等。（日文片假名）2010网页设计与制作9第6章6.2 框架框架o通过使用框架，你可以在同一个浏览器窗口中显示通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份不止一个页面。每份HTML文档称为一个框架，并文档称为一个框架，并且每个框架都独立于其他的框架。且每个框架都独立于其他的框架。o框架结构标记框架结构标记n框架结构标签（框架结构标签（）定义如何将窗口分割）定义如何将窗口分割为框架为框架 n每个每个 frameset 定义了一系列行或列定义了一系列行或列 nrows/columns 的值规定了每行或每列占据屏幕的面的值规定了每行

8、或每列占据屏幕的面积积o框架标签框架标签frame 标签定义了放置在每个框架中的标签定义了放置在每个框架中的 HTML 文档。文档。2010网页设计与制作10第6章6.2.1 框架的一般格式框架的一般格式Your browser does not handle frames!2010网页设计与制作11第6章6.2.2 框架结构标记框架结构标记1.框架结构标记：框架结构标记：，这是双标记。，这是双标记。2.frameset定义如何将窗口分割为框架。定义如何将窗口分割为框架。3.每个每个 frameset 定义了一系列行或列。定义了一系列行或列。属性属性值描述描述colspixels定义框架集中列

9、的数目和尺寸。定义框架集中列的数目和尺寸。%*rowspixels定义框架集中行的数目和尺寸。定义框架集中行的数目和尺寸。%*2010网页设计与制作12第6章6.2.3 框架标记框架标记1.框架标记框架标记是单标记。是单标记。2.frame定义了放置在每个框架中的定义了放置在每个框架中的HTML文档。文档。属性属性取取值描述描述frameborder0、1规定是否定是否显示框架周示框架周围的的边框。框。longdescURL规定一个包含有关框架内容的定一个包含有关框架内容的长描述的描述的页面。面。marginheightpixels定定义框架的上方和下方的框架的上方和下方的边距。距。margi

10、nwidthpixels定定义框架的左框架的左侧和右和右侧的的边距。距。namename规定框架的名称。定框架的名称。noresizenoresize规定无法定无法调整框架的大小。整框架的大小。scrollingyes、no、auto规定是否在框架中定是否在框架中显示示滚动条。条。srcURL规定在框架中定在框架中显示的文档的示的文档的 URL。2010网页设计与制作13第6章6.2.4 内联框架标记内联框架标记o用于创建内联框架（即行内框架）。用于创建内联框架（即行内框架）。属性属性值描述描述alignleft、right、top、middle、bottom不不赞成使用。成使用。请使用使用样

11、式代替。式代替。规定如何根据周定如何根据周围的元素来的元素来对齐此框架。此框架。frameborder1、0规定是否定是否显示框架周示框架周围的的边框。框。heightpixels、%规定定 iframe 的高度。的高度。longdescURL规定一个定一个页面，面，该页面包含了有关面包含了有关 iframe 的的较长描述。描述。marginheightpixels定定义 iframe 的的顶部和底部的部和底部的边距。距。marginwidthpixels定定义 iframe 的左的左侧和右和右侧的的边距。距。nameframe_name规定定 iframe 的名称。的名称。scrolling

12、yes、no、auto规定是否在定是否在 iframe 中中显示示滚动条。条。srcURL规定在定在 iframe 中中显示的文档的示的文档的 URL。widthpixels、%定定义 iframe 的的宽度。度。2010网页设计与制作14第6章6.2.5 注意事项注意事项onoframes标记是双标记。标记是双标记。1.可为那些不支持框架的浏览器显示文本。如果可为那些不支持框架的浏览器显示文本。如果浏览器能处理框架，就不会显示出浏览器能处理框架，就不会显示出noframes中的文本。中的文本。2.noframes必须位于必须位于 frameset之内。之内。o使用框架的弊端：使用框架的弊端：1.开发人员必须同时跟踪更多的开发人员必须同时跟踪更多的HTML文档文档 2.很难打印整张页面很难打印整张页面 2010网页设计与制作15第6章