用html布局网页.pptVIP

第4章 用表格和框架布局网页 创建表格 表格属性设置 使用表格布局网页 创建框架 框架控制 使用框架布局网页 网页布局方法 表格 CSS+DIV 使用框架 4.1.1 表格标记 表格由 table标记来定义。每个表格均有若干行（ tr ），每个表格可以定义第一行的单元格为表头（th），其余每行被分割为若干单元格（ td ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 实例：4-1.html 4.1.1 表格标记 table tr th head1/th th head2/th …… /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td …… /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td …… /tr …… /table 4.1.2 表格标题 基本语法： caption表格标题/caption 语法解释： caption标记在表格标记范围内，表格标题一般显示在表格上方，是对表格内容的简略说明。 实例：4-2.html 4.2.1 table标记属性 4.2.2 tr标记属性 4.2.3 td标记属性 4.2.3 td标记属性 1． 设置单元格跨列 本属性用于设置表格中某一单元格跨几个列进行合并（横向合并） 基本语法： td colspan = 语法解释： colspan的值就是单元格进行横向合并时所跨的列数，例如某一个单元格和它右面两个单元格合并，colspan的值设为3。 实例： 4-8.html 4.2.3 td标记属性 2． 设置单元格跨行 本属性用于设置表格中某一单元格跨几个行进行合并（纵向合并） 基本语法： td rowspan = 语法解释： rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一个单元格和它下面两个单元格合并，rowspan的值设为3。 实例： 4-9.html 4.3 使用表格布局网页 网页是网站构成的基本元素。在设计网页时，不但要考虑色彩的搭配、文字的变化和图片的处理等，而且还要考虑另一个非常重要的因素——网页的布局。 4.4 创建框架 框架技术可以将浏览器分割成多个小窗口，各窗口就会扮演不同的角色，并且在每个小窗口中，可以显示不同的网页，实现不同的功能。这样就可以很方便地利用框架在浏览器中浏览不同的网页。 4.4.1 定义框架 框架的基本结构主要分为框架集和框架两个部分。它是利用frameset标记与frame标记来定义。其中frameset标记用于定义框架集，而frame标记则用于定义框架。 4.4.2 利用框架分割窗口 常见的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用frameset标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。 4.4.2 利用框架分割窗口 1．水平分割窗口 rows属性可以定义窗口的水平分割。 基本语法： frameset rows=高度1，高度2,…,* frame frame … /frameset 实例： 4-11.html 4.4.2 利用框架分割窗口 2．垂直分割窗口 cols属性可以定义窗口的垂直分割。 基本语法： frameset cols=宽度1，宽度2,…,* frame frame … /frameset 语法解释： 窗口垂直分割的宽度设置与水平设置时高度设置方式相同 实例： 4-12.html 4.4.3 框架的嵌套 如果进行网页布局时需要创建同时包含横向和纵向的框架，那么就需要利用框架的嵌套创建复杂的框架集。 进行框架嵌套时，就是在一个框架集中包含了另外一个框架集。也就是在一个框架集中原来应该为frame标记的位置由框架集标记代替。 实例：4-13.html 4.4.4 框架的初始化 框架初始化是指为各个框架指定初始显示的页面 基本语法： frameset cols=宽度1，宽度2,…,* frame src=url frame src=url … /frameset 语法解释： frame的src属性值设置为初始显示页面的路径。 实例： 4-14.html 4.4.5 创建浮动框架 在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记iframe/iframe，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法： iframe src=url/i