第7章 表格与页面布局.ppt

1、第7章表和页面布局，本章的要点，1 .表的功能和基本结构2 .表的页面布局中的作用用Dreamweaver制作各种表4.CSS布局的概要5 .使用AP要素进行布局6 .使用框架进行布局.1.使用AP要素进行布局表格标题第一行第一个单元格第一行第二个单元格、第二行第一个单元格第一行第二个单元格、1.1表格标签及其属性，要定义整个表格，必须将表格的全部内容放在中间。 1.1表格标签及其属性、属性： Align :对齐Bordercolor :表格框的颜色Bgcolor的设定：背景色Background的设定：背景图案控制框和边界线Frame的设定：表格最外侧的4个边界线Rules :显示是否显示单

2、元格间的边界线的方法(像素) Cellpadding控制表分割线和数据之间的空白。 (像素)控制表格高度或宽度Width :设置表格列宽，像素或百分比Height :设置表格行高，像素或百分比，1.1表格标记及其属性，Frame :控制表格最外侧的四个框线，1.1表格标记及其属性，和控制外观： none-无默认边界rows定义行边界cols，仅列边界all定义所有边界，包括1.1表标记及其属性：表的行属性。 Height设置当前行的高度。 Width :设置当前行宽度像素Bgcolor :设置当前行背景颜色Background :设置当前行背景模式Bordercolor :设置当前行边框颜色，

3、1.1表标记及其属性，表矩阵单元格内容属性的定义： Rowspan :行合并，纵向Align :单元内容的水平对齐Valign :单元内容的垂直对齐Height :控制单元的高度，像素数Width :控制单元宽度，像素数Bgcolor :背景色Background的设定：背景图案的设定，2页布局中的表的只要在版面设计表中包含多个版面设计单元格的版面设计单元格中添加web内容，例如文本、图像和其他多媒体信息，版面设计表和版面设计单元格的合作就能形成页面的版面设计。 web版面设计通过实际设计版面设计表和版面设计单元，两者间的位置配置、表的大小、前后顺序的设计通常直接决定版面设计整体的质量。 表效

4、果示例：表可以实现多种效果，练习：请描述以下HTML文件在浏览器中的显示效果，aabbcccdeefeffgghiijkkmmnnn，练习：创建HTML代码，完成表， 请在Dreamweaver中创建各种表。除了使用“插入”列的“布局”类别中的“表”按钮添加表之外，还可以使用属性检查器修改表的基本属性(主要是行、列属性等属性定义CSS样式3.1创建简单的表格、演示和3.2嵌套的表格。 嵌套表是表单元格中的内容是另一个表，通常用于实现复杂的布局效果。 演示，3.3制作复制表。 复杂的表是包含组合的单元格的表。 演示，3.4表的页面布局示例，演示1演示2，4.css布局的概要，CSS页面布局使用分

5、层样式表技术来组织页面内容。 CSS布局的基本组件是div标签，大多数情况下用作文本、图像或其他页面元素的容器。 在创建CSS布局时，设计者必须将div标签放在页面上的另一个位置，并将内容添加到标签中。 div标签可以显示在网页上的任何地方。在CSS布局中，可以以绝对方式(指定x和y坐标)和相对方式(指定与其他页面元素的距离)放置div标签。 4.CSS布局的概要、CSS布局的创建有多种方法。 最常见的方法是使用Dreamweaver提供的预先设计的CSS布局。 使用Dreamweaver的绝对位置元素(AP元素)创建CSS布局。 手动插入div标签来创建页面布局。7.3.2嵌入式CSS布局、

6、演示、使用7.3.3元素的布局，在Dreamweaver中是“绝对定位”元素，是使用CSS绝对定位技术创建的容器AP元素可以包含可以放置在HTML文档正文中的文本、图像和其他内容。 使用AP元素进行布局时，可以将一个AP元素放置在另一个AP元素的前后，隐藏一个AP元素显示另一个AP元素，或在画面上移动AP元素。 使用7.3.3元素进行布局(续)的演示1演示2、7.4.1帧指的是帧，这是在浏览器的窗口中显示多个网页的技术，通过在超链接上指定目标帧，在帧之间显示内容之间的帧最典型的框架结构是各种各样的在线帮助系统，通常采用目录结构，左侧采用帮助主题，右侧采用帮助内容。单击左侧的超链接时，对应的内容会显示在右侧框架中。 什么是7.4.1帧(续)，帧结构的优点是导航清晰，下载速度快。 框架的缺点是很难在特定的页面上设置书签。 (如果站点的观众是所有的互联网用户，建议不要使用框架。 如果网站的观众是特定的群组，例如，如果教育网站是目标特定的学生群组，您可以根据需要选择是否使用框架。 )7.4.1帧(续)指的是，可以使用插入在列布局