《用html布局网》ppt课件

《《用html布局网》ppt课件》由会员分享，可在线阅读，更多相关《《用html布局网》ppt课件（45页珍藏版）》请在金锄头文库上搜索。

1、第4章 用表格和框架布局网页,创建表格 表格属性设置 使用表格布局网页 创建框架 框架控制 使用框架布局网页,网页布局方法,表格 CSS+DIV 使用框架,4.1.1 表格标记,表格由 标记来定义。每个表格均有若干行（ ），每个表格可以定义第一行的单元格为表头（），其余每行被分割为若干单元格（ ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 实例：4-1.html,4.1.1 表格标记, head1 head2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2

2、, cell 2 ,4.1.2 表格标题,基本语法： 表格标题 语法解释： 标记在表格标记范围内，表格标题一般显示在表格上方，是对表格内容的简略说明。 实例：4-2.html,4.2.1 标记属性,4.2.2 标记属性,4.2.3 标记属性,4.2.3 标记属性,1 设置单元格跨列 本属性用于设置表格中某一单元格跨几个列进行合并（横向合并） 基本语法： 语法解释： colspan的值就是单元格进行横向合并时所跨的列数，例如某一个单元格和它右面两个单元格合并，colspan的值设为3。 实例： 4-8.html,4.2.3 标记属性,2 设置单元格跨行 本属性用于设置表格中某一单元格跨几个行进行

3、合并（纵向合并） 基本语法： 语法解释： rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一个单元格和它下面两个单元格合并，rowspan的值设为3。 实例： 4-9.html,画出以下表格, Food Drink Sweet A B C ,画出以下表格, Menu Food Drink Sweet A B C ,画出以下表格, Table Menu Food A Drink B Sweet C ,Table,没有 cellpadding： First Row Second Row ,带有 cellpadding： First Row Second Row ,4.3 使用表格布局

4、网页,网页是网站构成的基本元素。在设计网页时，不但要考虑色彩的搭配、文字的变化和图片的处理等，而且还要考虑另一个非常重要的因素网页的布局。,网页布局实例 程序4-10 烤鸭店,框架,框架可以将一个浏览器窗口划分为多个区域，而且每个区域都可以显示不同的html文件，从而实现了一个网页内显示多个html文件的目的。,框架网页：框架/index.html,1.html,2.html,3.htmll,实现思想,通常将一些不需要更新的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。,框架和框架集,框架网页：由两个部分组成，即框架集和框架。 框架集(Frameset

5、):是在一个文档内定义一组框架结构的html网页，它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等 框架(Frames):指在网页中定义的一个区域，每个区域可以分别显示不同的网页，每个框架就是一个单独的网页文档 创建框架集和创建框架是同步的，只要创建了框架就一定会形成框架集;同样，创建了框架集就一定会具有框架。,4.4 创建框架,框架技术可以将浏览器分割成多个小窗口，各窗口就会扮演不同的角色，并且在每个小窗口中，可以显示不同的网页，实现不同的功能。这样就可以很方便地利用框架在浏览器中浏览不同的网页。,4.4.1 定义框架,框架的基本结构主要分为框架集和框

6、架两个部分。它是利用标记与标记来定义。其中标记用于定义框架集，而标记则用于定义框架。,语法解释： 标记不可以和标记一起使用，否则将出现显示异常。标记在使用时直接包含在标记中即可。 标记主要用来定义框架，用来控制所代表的窗口框架。 之间放置不支持Frame功能的浏览器显示的文本提示。,基本语法： ,4.4.2 利用框架分割窗口,常见的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。,4.4.2 利用框架分割窗口,1水平分割窗口 rows属性可以定义窗口的水平分割。 基本语法： 实例： 4-

7、11.html,语法解释： rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。 设置高度数值的方式有两种： 采用整数设置，单位为像素（px），语法如下： 用百分比设置，语法如下： ,4.4.2 利用框架分割窗口,2垂直分割窗口 cols属性可以定义窗口的垂直分割。 基本语法： 语法解释： 窗口垂直分割的宽度设置与水平设置时高度设置方式相同 实例： 4-12.html,4.4.3 框架的嵌套,如果进行网页布局时需要创建同时包含横向和纵向的框架，那么就需要利用框架的嵌套创建复

8、杂的框架集。 进行框架嵌套时，就是在一个框架集中包含了另外一个框架集。也就是在一个框架集中原来应该为标记的位置由框架集标记代替。 实例：4-13.html,4.4.4 框架的初始化,框架初始化是指为各个框架指定初始显示的页面 基本语法： 语法解释： 的src属性值设置为初始显示页面的路径。 实例： 4-14.html,4.4.5 创建浮动框架,在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法： 语法解释： 在的src属性中设置显示页面的路径。与框架不同，浮动框架标记可以包含在标记

9、范围内。 实例： 浮动框架/index.html 4-15.html,4.4.5 创建浮动框架,4.5.1 控制框架边框,2框架的边框 基本语法： 语法解释： 标记中的border属性可以控制框架边框的宽度，单位为像素。 实例： 4-17.html,4.5.1 控制框架边框,1框架的隐藏 基本语法： 或 语法解释： 标记中的frameborder属性可以控制框架的边框。属性可选的值为0或1，值为0时没有边框，值为1时生成3D边框（此为默认值）。只有将所有相邻的框架的边框都设置为0是，才能隐藏边框。 标记中的frameborder属性可以控制框架集中所有子窗口的边框。 实例： 4-16.html

10、,4.5.1 控制框架边框,3框架滚动条和不可移动性 基本语法： 语法解释： scrolling属性值为yes、no或auto。 Yes:强制为框架添加滚动条。 No:框架内不加滚动条。 Auto:是根据内容的多少，需要时自动添加滚动条（默认值）。 当把鼠标滑到框架边框时，可以通过拖动调整框架大小，noresize属性可以固定框架的位置和大小。 实例： 4-18.html,4.5.2 控制框架子窗口,1定义子窗口名称 基本语法： 语法解释： 标记中的name属性用来指定框架的名称。指定框架名称后可以指定超链接的target属性值为框架名称，当单击超链接时，在指定框架内显示超链接目标。 实例：

11、4-19.html,4.5.2 控制框架子窗口,2设置子窗口边距 基本语法： 语法解释： marginwidth属性可以控制框架内容和框架左右边框之间的距离，marginheight属性则控制框架内容和框架上下边框之间的距离。这两属性的取值单位都是像素。 实例： 4-20.html,4.6 使用框架布局网页实例,程序4-21是一个利用框架布局网页的实例，这个程序运用了框架嵌套实现了一个类似于程序4-10的网页布局,程序4-21 框架/index.html,小结,创建表格 表格属性设置 使用表格布局网页 创建框架 框架控制 使用框架布局网页,作业,P99 4.7上机练习与指导,4.1.3 划分表

12、格结构,基本语法： 实例：4-3.html,4.1.3 划分表格结构,语法解释： （1）标记定义表格的表头，用于组合 HTML 表格的表头内容。 （2）标记定义表格的页脚（脚注或表注），用于组合 HTML 表格中的表注内容。 （3）标记表格主体（正文），用于组合 HTML 表格的主体内容。 （4）如果使用 、 以及 标记划分表格，就必须使用全部的元素。它们的出现次序是：、，这样浏览器就可以在收到所有数据前呈现页脚了，必须在 标记范围内部使用这些标签。,4.2.1 标记属性,1 设置表格水平对齐属性 在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列

13、。 基本语法： 语法解释： 可选的值有left 、center 和right 实例： 4-4.html,4.2.1 标记属性,2 设置表格背景色属性 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 基本语法： 语法解释： bgcolor属性规定表格的背景颜色。颜色描述方式为rgb(x,x,x) 、#xxxxxx或colorname 。 例如，如果设置表格背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。设置形式如下。 ,4.2.1 标记属性,3 设置表格边框宽度属性 默认情况下表格边框为0，可以通过给表格添加bo

14、rder属性及属性值，实现为表格设置边框线宽度的目的。 基本语法： 语法解释： border的值为像素数，数字越大边框越宽。 例如，设置表格的边框宽度为5个像素，设置形式如下。 ,4.2.1 标记属性,4 设置单元格间距和单元格边距属性 cellspacing: 调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。 cellpadding : 调整单元格边距,即单元格中的内容与单元格边框的距离， 。 基本语法： 语法解释： 例如，设置表格的单元格间距为5，单元格边距为10，设置形式如下： ,4.2.1 标记属性,5 设置表格宽度属性 默认情况下，表格的宽度会根据内容自动调整。 基

15、本语法： 语法解释： 表格的宽度可以是像素数也可以是百分比。 例如，设置表格的宽度为600像素，设置形式如下。 ,4.2.2 标记属性,1 设置行水平对齐方式属性 基本语法： 语法解释： left：左对齐内容（默认值）。 right：右对齐内容。 center：居中对齐内容（th 元素的默认值）。 justify：对行进行伸展，这样每行都可以有相等的长度。 char ：将内容对准指定字符。 实例： 4-5.html,4.2.2 标记属性,2 设置行背景颜色属性 基本语法： 语法解释： 把个color属性规定表格行中单元格背景颜色。,4.2.2 标记属性,3 设置行垂直对齐方式属性 本属性用于设置表格行中内容的垂直对齐方式。 基本语法： 语法解释： top（居上）、botton（居下）和middle（居中），默认情况下是居中。 实例： 4-7.html,