用HTML布局网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.html 2.html 3.htmll
实现思想
• 通常将一些不需要更新的元素放在一个框架内作为单独 的网页文档，这个文档是不变的，其他经常更新的内容 放在主框架内。
导航（不变）
导航（不变）
内容（变化）
框架和框架集
• 框架网页：由两个部分组成，即框架集和框架。 • 框架集(Frameset):是在一个文档内定义一组框架结构的 html网页，它定义了一个网页中的框架数目、每个框架的 大小、载入每个框架的网页源和每个框架的其他属性等 • 框架(Frames):指在网页中定义的一个区域，每个区域可以 分别显示不同的网页，每个框架就是一个单独的网页文档 • 创建框架集和创建框架是同步的，只要创建了框架就一定 会形成框架集;同样，创建了框架集就一定会具有框架。
4.2.3 <td>标记属性
2． 设置单元格跨行
本属性用于设置表格中某一单元格跨几个行进行合并（纵向合并） 基本语法：
<td rowspan ="">
语法解释： rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一 个单元格和它下面两个单元格合并，rowspan的值设为3。 实例： 4-9.html
4.5.1 控制框架边框
2．框架的边框
基本语法：
<frameset border=””>
语法解释： <frameset>标记中的border属性可以控制框架边框的宽度，单位为像素 。 实例： 4-17.html
4.5.1 控制框架边框
1．框架的隐藏
基本语法：
<frame frameborder=” ”>或<frameset frameborder=” ”>
4.1.2 表格标题
基本语法：
<caption>表格标题</caption>
语法解释： <caption>标记在表格标记范围内，表格标题一般显示在表格上方，是对 表格内容的简略说明。
实例：4-2.html
4.2.1 <table>标记属性
属性
align
bgcolor border
描述
规定表格相对周围元素的水平对齐方式。
4.4.5 wk.baidu.com建浮动框架
属性 align width height src name noresize scrolling frameborder 描述 规定框架的水平对齐方式。 规定浮动框架窗口的宽度。 规定浮动框架窗口的高度。 规定显示网页文件的路径。 规定框架的名称。 规定框架尺寸是否可以调整。 规定框架滚动条。 规定框架边框。
4.4 创建框架
框架技术可以将浏览器分割成多个小窗口，各窗口就 会扮演不同的角色，并且在每个小窗口中，可以显示不同 的网页，实现不同的功能。这样就可以很方便地利用框架 在浏览器中浏览不同的网页。
4.4.1 定义框架
框架的基本结构主要分为框架集和框架两个部分。它是利用 <frameset>标记与<frame>标记来定义。其中<frameset>标记用于定义 框架集，而<frame>标记则用于定义框架。 语法解释： 基本语法： 1. <frameset>标记不可以和<body>标记 <html> 一起使用，否则将出现显示异常。 <frameset……> <frameset>标记在使用时直接包含在 <frame …… /> <html>标记中即可。 <frame …… /> 2. <frame>标记主要用来定义框架，用 <frame …… /> 来控制所代表的窗口框架。 </frameset> 3. <noframe> </noframe>之间放置不支 <noframe> </noframe> 持Frame功能的浏览器显示的文本提 示。 </html>
语法解释： <frame>标记中的frameborder属性可以控制框架的边框。属性可选的值 为0或1，值为0时没有边框，值为1时生成3D边框（此为默认值）。 只有将所有相邻的框架的边框都设置为0是，才能隐藏边框。 <frameset>标记中的frameborder属性可以控制框架集中所有子窗口的边 框。 实例： 4-16.html
4.5.1 控制框架边框
3．框架滚动条和不可移动性
基本语法：
<frame scrolling=” ” noresize>
语法解释： scrolling属性值为yes、no或auto。 Yes:强制为框架添加滚动条。 No:框架内不加滚动条。 Auto:是根据内容的多少，需要时自动添加滚动条（默认值）。 当把鼠标滑到框架边框时，可以通过拖动调整框架大小，noresize属性 可以固定框架的位置和大小。 实例： 4-18.html
属性 align bgcolor valign 描述 定义表格行的内容对齐方式。 规定表格行的背景颜色。 规定表格行中内容的垂直对齐方式。
4.2.3 <td>标记属性
属性 align 描述 规定单元格内容的水平对齐方式。
bgcolor
规定单元格的背景颜色。 规定单元格可横跨的列数。
规定表格单元格的高度。 规定单元格可横跨的行数。 规定单元格内容的垂直对齐方式。 规定表格单元格的宽度。
4.3 使用表格布局网页
网页是网站构成的基本元素。在设计网页时，不但要考 虑色彩的搭配、文字的变化和图片的处理等，而且还要考 虑另一个非常重要的因素——网页的布局。 网页布局实例 程序4-10 烤鸭店
框架
框架网页：框架/index.html • 框架可以将一个浏览器窗口划分为多个区域，而且每 个区域都可以显示不同的html文件，从而实现了一个 网页内显示多个html文件的目的。
Menu Food A Drink B Sweet C
画出以下表格
<table border="1"> <caption>Table</caption> <tr> <th rowspan="3">Menu</th> <th>Food</th> <td>A</td> </tr> <tr> <th>Drink</th> <td>B</td> </tr> <tr> <th>Sweet</th> <td>C</td> </tr> </table>
框架初始化是指为各个框架指定初始显示的页面 基本语法： <frameset cols="宽度1，宽度2,…,* "> <frame src="url"> <frame src="url"> … </frameset> 语法解释： <frame>的src属性值设置为初始显示页面的路径。 实例： 4-14.html
规定表格的背景颜色。 规定表格边框的宽度。
cellpadding
cellspacing frame rules summary width
规定单元边沿与其内容之间的空白。
规定单元格之间的空白。 规定外侧边框的哪个部分是可见的。 规定内侧边框的哪个部分是可见的。 规定表格的摘要。 规定表格的宽度。
4.2.2 <tr>标记属性
4.4.5 创建浮动框架
在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么 这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe> ，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法：
<iframe src="url"></iframe>
语法解释： 在<iframe>的src属性中设置显示页面的路径。与框架不同，浮 动框架标记可以包含在<body>标记范围内。 实例： 浮动框架/index.html 4-15.html
colspan
height
rowspan
valign width
4.2.3 <td>标记属性
1． 设置单元格跨列
本属性用于设置表格中某一单元格跨几个列进行合并（横向合并 ） 基本语法：
<td colspan ="">
语法解释： colspan的值就是单元格进行横向合并时所跨的列数，例如某一 个单元格和它右面两个单元格合并，colspan的值设为3。 实例： 4-8.html
4.4.3 框架的嵌套
如果进行网页布局时需要创建同时包含横向和纵向的 框架，那么就需要利用框架的嵌套创建复杂的框架集。 进行框架嵌套时，就是在一个框架集中包含了另外一 个框架集。也就是在一个框架集中原来应该为<frame>标 记的位置由框架集标记代替。 实例：4-13.html
4.4.4 框架的初始化
4.4.2 利用框架分割窗口
常见的窗口分割方式包括：水平分割、垂直分割和嵌 套分割。具体采用哪种分割方式，取决于实际需要，可用 <frameset>标记中的rows（水平分割）或cols（垂直分割 ）属性来进行分割。
4.4.2 利用框架分割窗口
1．水平分割窗口
rows属性可以定义窗口的水平 分割。 基本语法： 语法解释： 1. rows属性的值代表各子窗口的高 度，第一个子窗口高为高度1， 第二个子窗口高为高度2，依此 类推，而最后一个*，则代表最 后一个子窗口的高度，值为其他 子窗口高度分配后所剩余的高度 。 2. 设置高度数值的方式有两种： 采用整数设置，单位为像素（ px），语法如下： <frameset rows="100， 200，*"> 用百分比设置，语法如下： <frameset rows="20％， 50％，*">
4.1.1 表格标记
<table> <tr> <th> head1</th> <th> head2</th> …… </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> …… </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> …… </tr> …… </table>
Table
Food Menu Drink Sweet A B C
<h4>没有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> <h4>带有 cellpadding：</h4> </tr> <table border="1" <tr> cellpadding="10"> <td>Second</td> <tr> <td>Row</td> <td>First</td> </tr> <td>Row</td> </table> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
画出以下表格
<table border="1"> <tr> <th colspan ="3"> Menu </th> </tr> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <tr> <td>A</td> <td>B</td> <td>C </td> </tr> </table>
<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
画出以下表格
<table border="1"> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
Food A
Drink B
Sweet C
第4章 用表格和框架布局网页
创建表格 表格属性设置
使用表格布局网页
创建框架 框架控制 使用框架布局网页
网页布局方法
• 表格 • CSS+DIV • 使用框架
4.1.1 表格标记
表格由 <table>标记来定义。每个表格均有若干行（ <tr> ），每个表格可以定义第一行的单元格为表头（<th> ），其余每行被分割为若干单元格（ <td> ）。字母 td 指 表格数据（table data），即数据单元格的内容。数据单 元格可以包含文本、图片、列表、段落、表单、水平线、 表格等。 实例：4-1.html
实现思想
• 通常将一些不需要更新的元素放在一个框架内作为单独 的网页文档，这个文档是不变的，其他经常更新的内容 放在主框架内。
导航（不变）
导航（不变）
内容（变化）
框架和框架集
• 框架网页：由两个部分组成，即框架集和框架。 • 框架集(Frameset):是在一个文档内定义一组框架结构的 html网页，它定义了一个网页中的框架数目、每个框架的 大小、载入每个框架的网页源和每个框架的其他属性等 • 框架(Frames):指在网页中定义的一个区域，每个区域可以 分别显示不同的网页，每个框架就是一个单独的网页文档 • 创建框架集和创建框架是同步的，只要创建了框架就一定 会形成框架集;同样，创建了框架集就一定会具有框架。
4.2.3 <td>标记属性
2． 设置单元格跨行
本属性用于设置表格中某一单元格跨几个行进行合并（纵向合并） 基本语法：
<td rowspan ="">
语法解释： rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一 个单元格和它下面两个单元格合并，rowspan的值设为3。 实例： 4-9.html
4.5.1 控制框架边框
2．框架的边框
基本语法：
<frameset border=””>
语法解释： <frameset>标记中的border属性可以控制框架边框的宽度，单位为像素 。 实例： 4-17.html
4.5.1 控制框架边框
1．框架的隐藏
基本语法：
<frame frameborder=” ”>或<frameset frameborder=” ”>
4.1.2 表格标题
基本语法：
<caption>表格标题</caption>
语法解释： <caption>标记在表格标记范围内，表格标题一般显示在表格上方，是对 表格内容的简略说明。
实例：4-2.html
4.2.1 <table>标记属性
属性
align
bgcolor border
描述
规定表格相对周围元素的水平对齐方式。
4.4.5 wk.baidu.com建浮动框架
属性 align width height src name noresize scrolling frameborder 描述 规定框架的水平对齐方式。 规定浮动框架窗口的宽度。 规定浮动框架窗口的高度。 规定显示网页文件的路径。 规定框架的名称。 规定框架尺寸是否可以调整。 规定框架滚动条。 规定框架边框。
4.4 创建框架
框架技术可以将浏览器分割成多个小窗口，各窗口就 会扮演不同的角色，并且在每个小窗口中，可以显示不同 的网页，实现不同的功能。这样就可以很方便地利用框架 在浏览器中浏览不同的网页。
4.4.1 定义框架
框架的基本结构主要分为框架集和框架两个部分。它是利用 <frameset>标记与<frame>标记来定义。其中<frameset>标记用于定义 框架集，而<frame>标记则用于定义框架。 语法解释： 基本语法： 1. <frameset>标记不可以和<body>标记 <html> 一起使用，否则将出现显示异常。 <frameset……> <frameset>标记在使用时直接包含在 <frame …… /> <html>标记中即可。 <frame …… /> 2. <frame>标记主要用来定义框架，用 <frame …… /> 来控制所代表的窗口框架。 </frameset> 3. <noframe> </noframe>之间放置不支 <noframe> </noframe> 持Frame功能的浏览器显示的文本提 示。 </html>
语法解释： <frame>标记中的frameborder属性可以控制框架的边框。属性可选的值 为0或1，值为0时没有边框，值为1时生成3D边框（此为默认值）。 只有将所有相邻的框架的边框都设置为0是，才能隐藏边框。 <frameset>标记中的frameborder属性可以控制框架集中所有子窗口的边 框。 实例： 4-16.html
4.5.1 控制框架边框
3．框架滚动条和不可移动性
基本语法：
<frame scrolling=” ” noresize>
语法解释： scrolling属性值为yes、no或auto。 Yes:强制为框架添加滚动条。 No:框架内不加滚动条。 Auto:是根据内容的多少，需要时自动添加滚动条（默认值）。 当把鼠标滑到框架边框时，可以通过拖动调整框架大小，noresize属性 可以固定框架的位置和大小。 实例： 4-18.html
属性 align bgcolor valign 描述 定义表格行的内容对齐方式。 规定表格行的背景颜色。 规定表格行中内容的垂直对齐方式。
4.2.3 <td>标记属性
属性 align 描述 规定单元格内容的水平对齐方式。
bgcolor
规定单元格的背景颜色。 规定单元格可横跨的列数。
规定表格单元格的高度。 规定单元格可横跨的行数。 规定单元格内容的垂直对齐方式。 规定表格单元格的宽度。
4.3 使用表格布局网页
网页是网站构成的基本元素。在设计网页时，不但要考 虑色彩的搭配、文字的变化和图片的处理等，而且还要考 虑另一个非常重要的因素——网页的布局。 网页布局实例 程序4-10 烤鸭店
框架
框架网页：框架/index.html • 框架可以将一个浏览器窗口划分为多个区域，而且每 个区域都可以显示不同的html文件，从而实现了一个 网页内显示多个html文件的目的。
Menu Food A Drink B Sweet C
画出以下表格
<table border="1"> <caption>Table</caption> <tr> <th rowspan="3">Menu</th> <th>Food</th> <td>A</td> </tr> <tr> <th>Drink</th> <td>B</td> </tr> <tr> <th>Sweet</th> <td>C</td> </tr> </table>
框架初始化是指为各个框架指定初始显示的页面 基本语法： <frameset cols="宽度1，宽度2,…,* "> <frame src="url"> <frame src="url"> … </frameset> 语法解释： <frame>的src属性值设置为初始显示页面的路径。 实例： 4-14.html
规定表格的背景颜色。 规定表格边框的宽度。
cellpadding
cellspacing frame rules summary width
规定单元边沿与其内容之间的空白。
规定单元格之间的空白。 规定外侧边框的哪个部分是可见的。 规定内侧边框的哪个部分是可见的。 规定表格的摘要。 规定表格的宽度。
4.2.2 <tr>标记属性
4.4.5 创建浮动框架
在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么 这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe> ，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法：
<iframe src="url"></iframe>
语法解释： 在<iframe>的src属性中设置显示页面的路径。与框架不同，浮 动框架标记可以包含在<body>标记范围内。 实例： 浮动框架/index.html 4-15.html
colspan
height
rowspan
valign width
4.2.3 <td>标记属性
1． 设置单元格跨列
本属性用于设置表格中某一单元格跨几个列进行合并（横向合并 ） 基本语法：
<td colspan ="">
语法解释： colspan的值就是单元格进行横向合并时所跨的列数，例如某一 个单元格和它右面两个单元格合并，colspan的值设为3。 实例： 4-8.html
4.4.3 框架的嵌套
如果进行网页布局时需要创建同时包含横向和纵向的 框架，那么就需要利用框架的嵌套创建复杂的框架集。 进行框架嵌套时，就是在一个框架集中包含了另外一 个框架集。也就是在一个框架集中原来应该为<frame>标 记的位置由框架集标记代替。 实例：4-13.html
4.4.4 框架的初始化
4.4.2 利用框架分割窗口
常见的窗口分割方式包括：水平分割、垂直分割和嵌 套分割。具体采用哪种分割方式，取决于实际需要，可用 <frameset>标记中的rows（水平分割）或cols（垂直分割 ）属性来进行分割。
4.4.2 利用框架分割窗口
1．水平分割窗口
rows属性可以定义窗口的水平 分割。 基本语法： 语法解释： 1. rows属性的值代表各子窗口的高 度，第一个子窗口高为高度1， 第二个子窗口高为高度2，依此 类推，而最后一个*，则代表最 后一个子窗口的高度，值为其他 子窗口高度分配后所剩余的高度 。 2. 设置高度数值的方式有两种： 采用整数设置，单位为像素（ px），语法如下： <frameset rows="100， 200，*"> 用百分比设置，语法如下： <frameset rows="20％， 50％，*">
4.1.1 表格标记
<table> <tr> <th> head1</th> <th> head2</th> …… </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> …… </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> …… </tr> …… </table>
Table
Food Menu Drink Sweet A B C
<h4>没有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> <h4>带有 cellpadding：</h4> </tr> <table border="1" <tr> cellpadding="10"> <td>Second</td> <tr> <td>Row</td> <td>First</td> </tr> <td>Row</td> </table> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
画出以下表格
<table border="1"> <tr> <th colspan ="3"> Menu </th> </tr> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <tr> <td>A</td> <td>B</td> <td>C </td> </tr> </table>
<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
画出以下表格
<table border="1"> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
Food A
Drink B
Sweet C
第4章 用表格和框架布局网页
创建表格 表格属性设置
使用表格布局网页
创建框架 框架控制 使用框架布局网页
网页布局方法
• 表格 • CSS+DIV • 使用框架
4.1.1 表格标记
表格由 <table>标记来定义。每个表格均有若干行（ <tr> ），每个表格可以定义第一行的单元格为表头（<th> ），其余每行被分割为若干单元格（ <td> ）。字母 td 指 表格数据（table data），即数据单元格的内容。数据单 元格可以包含文本、图片、列表、段落、表单、水平线、 表格等。 实例：4-1.html