用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 框架的嵌套,如果进行网页布局时需要创建同时包含横向和纵向的框架,那么就需要利用框架的嵌套创建复
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 布局 网页
链接地址:https://www.31doc.com/p-2915747.html