本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页静态网站设计网络技术系：李毓丽HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页使用表格使用表格制作表格制作表格添加或删除行和列添加或删除行和列格式化表格格式化表格为表格添加题注为表格添加题注嵌套表格嵌套表格HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页 表格在网页中除了作为一个显表格在网页中除了作为一个显示对象以外，还有一个重要的作示对象以外，还有一个重要的作用就是用于排版页面内容用就是用于排版页面内容制作表格制作表格HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格标记表格标记标标 记记 描描 述述在在HTMLHTML文档中创始一个文档中创始一个表格表格在表格中创建一行在表格中创建一行在一行中创建一个单元在一行中创建一个单元格格在一行中创建一个标题在一行中创建一个标题单元格单元格 为表格创建题注为表格创建题注HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页基本语法基本语法 与与与与标记不标记不标记不标记不同的地方是同的地方是同的地方是同的地方是之间的之间的之间的之间的内容会内容会内容会内容会加粗加粗加粗加粗且默认且默认且默认且默认居中居中居中居中显示，而显示，而显示，而显示，而之间的之间的之间的之间的内容则内容则内容则内容则不加粗不加粗不加粗不加粗且默且默且默且默认认认认居左居左居左居左显示显示显示显示HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格示例表格示例 示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格中每一行使用一个表格中每一行使用一个表示；行中的表示；行中的每一列使用一个每一列使用一个或或表表示示添加或删除行和列可以分添加或删除行和列可以分别通过添加或删除行和列别通过添加或删除行和列标记来实现标记来实现添加或删除行和列添加或删除行和列HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页添加或删除行和列实现方法添加或删除行和列实现方法添加新行添加新行添加新行添加新行 可以通过插入额外的可以通过插入额外的可以通过插入额外的可以通过插入额外的 和和和和 标记来添加新的一行标记来添加新的一行标记来添加新的一行标记来添加新的一行在表内创建新列在表内创建新列在表内创建新列在表内创建新列 可以通过对每一行添加可以通过对每一行添加可以通过对每一行添加可以通过对每一行添加 或或或或 标记在表格中创建新的列标记在表格中创建新的列标记在表格中创建新的列标记在表格中创建新的列删除表中的行和列删除表中的行和列删除表中的行和列删除表中的行和列 可以通过删除包围指定行和列的可以通过删除包围指定行和列的可以通过删除包围指定行和列的可以通过删除包围指定行和列的 标记和标记和标记和标记和 标记来删除表格中标记来删除表格中标记来删除表格中标记来删除表格中的列和行的列和行的列和行的列和行HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格的格式化包括以下一些内容：表格的格式化包括以下一些内容：表格的格式化包括以下一些内容：表格的格式化包括以下一些内容： 为表格添加边框及设置边框粗细及边框为表格添加边框及设置边框粗细及边框为表格添加边框及设置边框粗细及边框为表格添加边框及设置边框粗细及边框颜色颜色颜色颜色 为表格添加背景图像或背景颜色为表格添加背景图像或背景颜色为表格添加背景图像或背景颜色为表格添加背景图像或背景颜色 指定表格的对齐方式指定表格的对齐方式指定表格的对齐方式指定表格的对齐方式 设置表格的宽度、高度设置表格的宽度、高度设置表格的宽度、高度设置表格的宽度、高度 设置表格单元格内容与边框的间距及单设置表格单元格内容与边框的间距及单设置表格单元格内容与边框的间距及单设置表格单元格内容与边框的间距及单元格之间的间距元格之间的间距元格之间的间距元格之间的间距 指定行、列的背景图像或背景颜色指定行、列的背景图像或背景颜色指定行、列的背景图像或背景颜色指定行、列的背景图像或背景颜色 指定行、列内容的对齐方式指定行、列内容的对齐方式指定行、列内容的对齐方式指定行、列内容的对齐方式 设置行、列的边框颜色设置行、列的边框颜色设置行、列的边框颜色设置行、列的边框颜色 设置行、列的宽度和高度设置行、列的宽度和高度设置行、列的宽度和高度设置行、列的宽度和高度 单元格的跨行和跨列设置单元格的跨行和跨列设置单元格的跨行和跨列设置单元格的跨行和跨列设置格式化表格格式化表格HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格属性表格属性属属属属 性性性性 描描描描 述述述述borderborderborderborder设置表格边框宽度，单位为像素（默设置表格边框宽度，单位为像素（默设置表格边框宽度，单位为像素（默设置表格边框宽度，单位为像素（默认不显示边框），设置认不显示边框），设置认不显示边框），设置认不显示边框），设置border=0border=0border=0border=0将取将取将取将取消边框消边框消边框消边框widthwidthwidthwidth设置表格宽度，单位为像素或设置表格宽度，单位为像素或设置表格宽度，单位为像素或设置表格宽度，单位为像素或浏览器浏览器浏览器浏览器窗口窗口窗口窗口的百分比的百分比的百分比的百分比heightheightheightheight设置表格高度，单位为像素或设置表格高度，单位为像素或设置表格高度，单位为像素或设置表格高度，单位为像素或浏览器浏览器浏览器浏览器窗口窗口窗口窗口的百分比的百分比的百分比的百分比BordercolorBordercolorBordercolorBordercolor、bordercolordarkbordercolordarkbordercolordarkbordercolordark、bordercolorlightbordercolorlightbordercolorlightbordercolorlight设置表格边框颜色设置表格边框颜色设置表格边框颜色设置表格边框颜色/ / / /亮边框颜色（左上亮边框颜色（左上亮边框颜色（左上亮边框颜色（左上边框颜色）边框颜色）边框颜色）边框颜色）/ / / /暗边框颜色（右下边框颜暗边框颜色（右下边框颜暗边框颜色（右下边框颜暗边框颜色（右下边框颜色）色）色）色）bgcolorbgcolorbgcolorbgcolor设置表格的背景颜色设置表格的背景颜色设置表格的背景颜色设置表格的背景颜色backgroundbackgroundbackgroundbackground设置表格的背景图像设置表格的背景图像设置表格的背景图像设置表格的背景图像cellspacingcellspacingcellspacingcellspacing设置相邻单元格之间的间距设置相邻单元格之间的间距设置相邻单元格之间的间距设置相邻单元格之间的间距cellpaddingcellpaddingcellpaddingcellpadding设置单元格边框与内容的间距设置单元格边框与内容的间距设置单元格边框与内容的间距设置单元格边框与内容的间距alignalignalignalign设置表格的水平对齐（默认左对齐）设置表格的水平对齐（默认左对齐）设置表格的水平对齐（默认左对齐）设置表格的水平对齐（默认左对齐）HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格标记属性设置语法表格标记属性设置语法 table border=“value” cellpadding=“value”HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格标记属性示例表格标记属性示例 示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页行标记行标记属性属性属属属属 性性性性 描描描描 述述述述alignalignalignalign设置行中各单元格内容的水平对设置行中各单元格内容的水平对设置行中各单元格内容的水平对设置行中各单元格内容的水平对齐方式（默认左对齐）齐方式（默认左对齐）齐方式（默认左对齐）齐方式（默认左对齐）valignvalignvalignvalign行中各单元格内容内容的垂直对行中各单元格内容内容的垂直对行中各单元格内容内容的垂直对行中各单元格内容内容的垂直对齐方式（默认居中对齐齐方式（默认居中对齐齐方式（默认居中对齐齐方式（默认居中对齐bgcolorbgcolorbgcolorbgcolor设置行的背景颜色设置行的背景颜色设置行的背景颜色设置行的背景颜色backgroundbackgroundbackgroundbackground设置行的背景图像设置行的背景图像设置行的背景图像设置行的背景图像bordercolorbordercolorbordercolorbordercolor设置行的边框颜色设置行的边框颜色设置行的边框颜色设置行的边框颜色bordercolorlbordercolorlbordercolorlbordercolorlightightightight设置行的亮边框颜色（右下边框设置行的亮边框颜色（右下边框设置行的亮边框颜色（右下边框设置行的亮边框颜色（右下边框颜色）颜色）颜色）颜色）bordercolordbordercolordbordercolordbordercolordarkarkarkark设置行的暗边框颜色（左下边框设置行的暗边框颜色（左下边框设置行的暗边框颜色（左下边框设置行的暗边框颜色（左下边框颜色）颜色）颜色）颜色）HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页行标记属性设置语法行标记属性设置语法tr background=“image_path”HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页行标记属性示例行标记属性示例 示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页、标记属性标记属性属属属属 性性性性 描描描描 述述述述alignalignalignalign设置单元格内容的水平对齐方式（设置单元格内容的水平对齐方式（设置单元格内容的水平对齐方式（设置单元格内容的水平对齐方式（tdtdtdtd的默认左对的默认左对的默认左对的默认左对齐，齐，齐，齐，thththth的默认居中对齐）的默认居中对齐）的默认居中对齐）的默认居中对齐）valignvalignvalignvalign设置单元格内容的垂直对齐（默认居中对齐）设置单元格内容的垂直对齐（默认居中对齐）设置单元格内容的垂直对齐（默认居中对齐）设置单元格内容的垂直对齐（默认居中对齐）bgcolorbgcolorbgcolorbgcolor设置单元格的背景颜色设置单元格的背景颜色设置单元格的背景颜色设置单元格的背景颜色backgroundbackgroundbackgroundbackground设置单元格的背景图像设置单元格的背景图像设置单元格的背景图像设置单元格的背景图像bordercolorbordercolorbordercolorbordercolor设置单元格的边框颜色设置单元格的边框颜色设置单元格的边框颜色设置单元格的边框颜色bordercolorlightbordercolorlightbordercolorlightbordercolorlight设置单元格的亮边框颜色（右下边框颜色）设置单元格的亮边框颜色（右下边框颜色）设置单元格的亮边框颜色（右下边框颜色）设置单元格的亮边框颜色（右下边框颜色）bordercolordarkbordercolordarkbordercolordarkbordercolordark设置单元格的暗边框颜色（左上边框颜色）设置单元格的暗边框颜色（左上边框颜色）设置单元格的暗边框颜色（左上边框颜色）设置单元格的暗边框颜色（左上边框颜色）width width width width 设置单元格的宽度，单位为像素或设置单元格的宽度，单位为像素或设置单元格的宽度，单位为像素或设置单元格的宽度，单位为像素或表格宽度表格宽度表格宽度表格宽度的百的百的百的百分比分比分比分比height height height height 设置单元格的高度设置单元格的高度设置单元格的高度设置单元格的高度rowspanrowspanrowspanrowspan设置单元格的跨行操作设置单元格的跨行操作设置单元格的跨行操作设置单元格的跨行操作colspancolspancolspancolspan设置单元格的跨列操作设置单元格的跨列操作设置单元格的跨列操作设置单元格的跨列操作nowrapnowrapnowrapnowrap当文本的宽度超过单元格宽度时，不允许文本在当文本的宽度超过单元格宽度时，不允许文本在当文本的宽度超过单元格宽度时，不允许文本在当文本的宽度超过单元格宽度时，不允许文本在单元格内换行。所有文本在一行内显示单元格内换行。所有文本在一行内显示单元格内换行。所有文本在一行内显示单元格内换行。所有文本在一行内显示HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页单元格宽度属性解释单元格宽度属性解释如果没有设置单元格宽度，则浏览如果没有设置单元格宽度，则浏览如果没有设置单元格宽度，则浏览如果没有设置单元格宽度，则浏览器将会根据单元格中的内容来自动器将会根据单元格中的内容来自动器将会根据单元格中的内容来自动器将会根据单元格中的内容来自动调整单元格的宽度调整单元格的宽度调整单元格的宽度调整单元格的宽度如果设置了单元格宽度，但没有设如果设置了单元格宽度，但没有设如果设置了单元格宽度，但没有设如果设置了单元格宽度，但没有设置置置置nowarpnowarpnowarpnowarp属性，则单元格中的内容属性，则单元格中的内容属性，则单元格中的内容属性，则单元格中的内容在超出了单元格宽度设置允许的情在超出了单元格宽度设置允许的情在超出了单元格宽度设置允许的情在超出了单元格宽度设置允许的情况下自动对文本进行换行显示况下自动对文本进行换行显示况下自动对文本进行换行显示况下自动对文本进行换行显示如果设置了单元格宽度，但同时又如果设置了单元格宽度，但同时又如果设置了单元格宽度，但同时又如果设置了单元格宽度，但同时又设置了设置了设置了设置了nowarpnowarpnowarpnowarp属性，则此时，单元属性，则此时，单元属性，则此时，单元属性，则此时，单元格宽度设置不起作用，所有文本将格宽度设置不起作用，所有文本将格宽度设置不起作用，所有文本将格宽度设置不起作用，所有文本将在一行内显示在一行内显示在一行内显示在一行内显示HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页单元格标记属性设置语法单元格标记属性设置语法HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页单元格标记属性示例单元格标记属性示例示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格各标记属性设置的注意事项表格各标记属性设置的注意事项表格标记中的表格标记中的表格标记中的表格标记中的bordercolorlightbordercolorlightbordercolorlightbordercolorlight、bordercolordarkbordercolordarkbordercolordarkbordercolordark颜色显示的位置正好颜色显示的位置正好颜色显示的位置正好颜色显示的位置正好跟行标记及单元格标记中的这两个属性跟行标记及单元格标记中的这两个属性跟行标记及单元格标记中的这两个属性跟行标记及单元格标记中的这两个属性相反相反相反相反 内层的边框颜色设置会和外层的边框内层的边框颜色设置会和外层的边框内层的边框颜色设置会和外层的边框内层的边框颜色设置会和外层的边框颜色混合成另一种颜色颜色混合成另一种颜色颜色混合成另一种颜色颜色混合成另一种颜色同时设置背景颜色和背景图像时，背景同时设置背景颜色和背景图像时，背景同时设置背景颜色和背景图像时，背景同时设置背景颜色和背景图像时，背景颜色将被背景图像覆盖掉颜色将被背景图像覆盖掉颜色将被背景图像覆盖掉颜色将被背景图像覆盖掉只有较新版的浏览器才支持背景颜色和只有较新版的浏览器才支持背景颜色和只有较新版的浏览器才支持背景颜色和只有较新版的浏览器才支持背景颜色和背景图像的设置，不支持背景图像的设背景图像的设置，不支持背景图像的设背景图像的设置，不支持背景图像的设背景图像的设置，不支持背景图像的设置的浏览器会显示浏览器的默认背景颜置的浏览器会显示浏览器的默认背景颜置的浏览器会显示浏览器的默认背景颜置的浏览器会显示浏览器的默认背景颜色来代替图像色来代替图像色来代替图像色来代替图像HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页背景图像属性设置的规则背景图像属性设置的规则选择基本上不传达信息的小选择基本上不传达信息的小巧而精致的图像巧而精致的图像选择带有较少形状、模式或选择带有较少形状、模式或颜色的简单图像颜色的简单图像 选择能够突出文档意图的选择能够突出文档意图的图像图像在尽可能多的浏览器中查看在尽可能多的浏览器中查看带有表格背景图像的带有表格背景图像的HTMLHTML文文档，确保跨浏览器的兼容性档，确保跨浏览器的兼容性HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页背景颜色属性设置的规则背景颜色属性设置的规则如果文本颜色是深色的，应该选择浅如果文本颜色是深色的，应该选择浅如果文本颜色是深色的，应该选择浅如果文本颜色是深色的，应该选择浅色作为背景颜色色作为背景颜色色作为背景颜色色作为背景颜色如果文本颜色是浅色的，应该选择深如果文本颜色是浅色的，应该选择深如果文本颜色是浅色的，应该选择深如果文本颜色是浅色的，应该选择深色作为背景颜色色作为背景颜色色作为背景颜色色作为背景颜色选择在美学角度来看令人愉快的颜色选择在美学角度来看令人愉快的颜色选择在美学角度来看令人愉快的颜色选择在美学角度来看令人愉快的颜色如果表述的主题是快节奏或激动人心如果表述的主题是快节奏或激动人心如果表述的主题是快节奏或激动人心如果表述的主题是快节奏或激动人心的，应该选择明快的颜色的，应该选择明快的颜色的，应该选择明快的颜色的，应该选择明快的颜色如果表述的是慢节奏和基调忧郁的内如果表述的是慢节奏和基调忧郁的内如果表述的是慢节奏和基调忧郁的内如果表述的是慢节奏和基调忧郁的内容，应该选择暗淡的颜色容，应该选择暗淡的颜色容，应该选择暗淡的颜色容，应该选择暗淡的颜色始终选择始终选择始终选择始终选择216 216 216 216 种无抖动颜色之一种无抖动颜色之一种无抖动颜色之一种无抖动颜色之一HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格题注作用：表格题注作用：概括表格的内容概括表格的内容提供关于表格内容的一些信息提供关于表格内容的一些信息基本语法基本语法 语法解释语法解释 标记之间的就是表格标记之间的就是表格的标题，这个标记必须在的标题，这个标记必须在标记对之内使用标记对之内使用为表格添加题注为表格添加题注HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页标记对齐属性标记对齐属性属属 性性 描描 述述align设置水平对齐方式，取设置水平对齐方式，取值：值：left/center/rightleft/center/right，默认取，默认取centercentervalign 设置垂直对齐方式，取设置垂直对齐方式，取值：值：top/bottomtop/bottom，默认，默认取取toptopHTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格题注设置示例表格题注设置示例 示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页在网页中，排版通常需在网页中，排版通常需要通过表格的嵌套来完要通过表格的嵌套来完成成表格的嵌套是指在一个表格的嵌套是指在一个表格的表格的单元格单元格中插入另中插入另一个表格一个表格嵌套表格嵌套表格HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页表格嵌套设置示例表格嵌套设置示例示例代码示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页在网页排版中使用嵌套表格在网页排版中使用嵌套表格的原因有二的原因有二： 一是利于简化表格制作：网页的排版有时会很一是利于简化表格制作：网页的排版有时会很一是利于简化表格制作：网页的排版有时会很一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，复杂，在外部需要有一个表格控制总体布局，复杂，在外部需要有一个表格控制总体布局，复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来如果这时一些内部排版的细节也通过总表格来如果这时一些内部排版的细节也通过总表格来如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制实现，容易引起行高列宽等的冲突，给表格制实现，容易引起行高列宽等的冲突，给表格制实现，容易引起行高列宽等的冲突，给表格制作带来困难作带来困难作带来困难作带来困难 二是提高浏览器响应速度：浏览器在解析网页二是提高浏览器响应速度：浏览器在解析网页二是提高浏览器响应速度：浏览器在解析网页二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才的时候，是将整个表格的结构下载完毕之后才的时候，是将整个表格的结构下载完毕之后才的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，显示表格，如果不使用嵌套，表格非常复杂，显示表格，如果不使用嵌套，表格非常复杂，显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才表格下载耗时相对长，浏览者要等很长时间才表格下载耗时相对长，浏览者要等很长时间才表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容能看到网页的内容能看到网页的内容能看到网页的内容HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页小小 结结 制作表格时需要同时使用制作表格时需要同时使用制作表格时需要同时使用制作表格时需要同时使用或或或或 标记对标记对标记对标记对 表格的内容必须放置在表格的内容必须放置在表格的内容必须放置在表格的内容必须放置在或或或或 之间之间之间之间 每一行必须使用一个每一行必须使用一个每一行必须使用一个每一行必须使用一个 标记对标记对标记对标记对 行中的所有列都必须放置在行中的所有列都必须放置在行中的所有列都必须放置在行中的所有列都必须放置在 标记对之间标记对之间标记对之间标记对之间 通过表格、行及单元格标记的属性，可通过表格、行及单元格标记的属性，可通过表格、行及单元格标记的属性，可通过表格、行及单元格标记的属性，可以对表格进行格式化，如设置显示边框、以对表格进行格式化，如设置显示边框、以对表格进行格式化，如设置显示边框、以对表格进行格式化，如设置显示边框、边框宽度、边框颜色等边框宽度、边框颜色等边框宽度、边框颜色等边框宽度、边框颜色等HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页在排版网页时通常需要嵌套表格，在排版网页时通常需要嵌套表格，所谓表格的嵌套，是指在一个表所谓表格的嵌套，是指在一个表格的单元格中插入另一个表格格的单元格中插入另一个表格小小 结结HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页思考题思考题1. 1. 在显示表格边框，应如何设置在显示表格边框，应如何设置？2. 2. 如何设置表格的宽度、高度、如何设置表格的宽度、高度、对齐方式、边框颜色、单元格对齐方式、边框颜色、单元格间距及单元格边距？间距及单元格边距？ 3. 3. 如何设置单元格的对齐方式、如何设置单元格的对齐方式、背景颜色、背景图像背景颜色、背景图像? ?4. 4. 在网页排版时，应如何嵌套表在网页排版时，应如何嵌套表格格? ?HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页使用框架结构使用框架结构框架概述框架概述框架结构组成标记框架结构组成标记框架集标记框架集标记框架标记框架标记不支持框架标记不支持框架标记浮动框架浮动框架框架与链接框架与链接HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架概述框架概述HTML HTML 框架允许在浏览器中同时显框架允许在浏览器中同时显示多个示多个HTMLHTML文档文档多个页面能够同时在同一浏览器多个页面能够同时在同一浏览器可独立滚动的窗口中显示可独立滚动的窗口中显示用来把浏览器窗口分成几个独立用来把浏览器窗口分成几个独立的部分的部分每一部分可以分别包含一个单独每一部分可以分别包含一个单独的的HTML HTML 文档文档借助于框架分割浏览器窗口可以显借助于框架分割浏览器窗口可以显著改进外观和可用性著改进外观和可用性HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架的特征框架的特征可以水平或垂直分割可以水平或垂直分割垂直框架具有垂直边框垂直框架具有垂直边框水平框架具有水平边框水平框架具有水平边框也可以在框架中嵌套框架也可以在框架中嵌套框架在定义框架间的交互之前在定义框架间的交互之前必须先设定布局必须先设定布局HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页使用框架的优点使用框架的优点使网页内容看起来更美观使网页内容看起来更美观减少了网站的下载时间减少了网站的下载时间提高了网站的可用性提高了网站的可用性导航部分仍然可见，因为内容在导航部分仍然可见，因为内容在单独的框架中改变单独的框架中改变框架允许开发者将内容与导航和框架允许开发者将内容与导航和结构元素分离结构元素分离有助于轻松、快速地更新内容有助于轻松、快速地更新内容HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页使用框架的缺点使用框架的缺点老版本的浏览器不支持框架老版本的浏览器不支持框架开发者需要创建并组织多个文件来充开发者需要创建并组织多个文件来充实页面，使站点创建更复杂实页面，使站点创建更复杂框架结构的框架结构的Web Web 站点不允许访问者在站点不允许访问者在一个框架结构的文档中为页面加入书一个框架结构的文档中为页面加入书签签框架结构的框架结构的Web Web 站点会增加服务器负站点会增加服务器负载，导致过多的文档请求载，导致过多的文档请求框架结构的框架结构的Web Web 站点会使搜索引擎产站点会使搜索引擎产生问题生问题在框架结构的在框架结构的Web Web 站点中很难跟踪一站点中很难跟踪一个页面个页面HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页创建框架创建框架确定要创建的框架大小确定要创建的框架大小创建框架集文档，确定各框架创建框架集文档，确定各框架的位置和特性的位置和特性指定框架和其中的内容指定框架和其中的内容格式化框架格式化框架预先为在非框架结构的浏览器预先为在非框架结构的浏览器中显示框架做好准备中显示框架做好准备 注意：使用框架结构时，注意：使用框架结构时，注意：使用框架结构时，注意：使用框架结构时，HTMLHTMLHTMLHTML文档中不能出现文档中不能出现文档中不能出现文档中不能出现标记对，此时标记对，此时标记对，此时标记对，此时需要由需要由需要由需要由代代代代替替替替HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架结构组成标记框架结构组成标记框架集标记框架集标记：主主要是定义浏览器窗口的分割要是定义浏览器窗口的分割方式，以及各分割窗口（框方式，以及各分割窗口（框架）的大小架）的大小框架标记框架标记：定义各定义各分割窗口中显示的内容，并分割窗口中显示的内容，并能对各分割窗口进行格式化能对各分割窗口进行格式化HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架集标记框架集标记框架分割窗口方式框架分割窗口方式：左右（水平）分割左右（水平）分割上下（垂直）分割上下（垂直）分割嵌套分割：浏览器窗口既嵌套分割：浏览器窗口既存在左右分割，又存在上存在左右分割，又存在上下分割下分割 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页左右分割左右分割基本语法基本语法 frameset ” . .HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页语法解释语法解释 colscols属性决定了窗口的分割方属性决定了窗口的分割方式为左右分割；式为左右分割；“value”“value”定义定义各个框架的大小，单位可以是各个框架的大小，单位可以是像素，也可以是百分比；像素，也可以是百分比；valuevalue的个数决定了的个数决定了标记的个标记的个数，即窗口的个数，而数，即窗口的个数，而valuevalue的的值则决定了相应窗口的大小值则决定了相应窗口的大小HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页左右分割示例左右分割示例 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页上下分割上下分割基本语法基本语法: . HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页语法解释语法解释语法解释语法解释 rows rows属性决定了窗口的分割方式为属性决定了窗口的分割方式为上下分割；上下分割；“value”“value”定义各个框架定义各个框架的大小，单位可以是像素，也可以的大小，单位可以是像素，也可以是百分比；是百分比；valuevalue的个数决定了的个数决定了标记的个数，即窗口的个数，标记的个数，即窗口的个数，而而valuevalue的值则决定了相应窗口的大的值则决定了相应窗口的大小小HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页上下分割示例上下分割示例 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页 嵌套分割嵌套分割基本语法基本语法 .HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页嵌套分割示例嵌套分割示例 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页嵌套分割示例结果嵌套分割示例结果HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页对框架边框的格式化对框架边框的格式化属属属属 性性性性 属性值属性值属性值属性值描描描描 述述述述borderborderborderbordern n n n设置设置设置设置所有所有所有所有框架边框宽度，此属性必须框架边框宽度，此属性必须框架边框宽度，此属性必须框架边框宽度，此属性必须和和和和frameborderframeborderframeborderframeborder一起使用才有效一起使用才有效一起使用才有效一起使用才有效bordercolorbordercolorbordercolorbordercolor以以以以RGBRGBRGBRGB颜色值或颜色英文名设置所有框颜色值或颜色英文名设置所有框颜色值或颜色英文名设置所有框颜色值或颜色英文名设置所有框架边框颜色架边框颜色架边框颜色架边框颜色framespacingframespacingframespacingframespacingn n n n设置所有框架边框宽度，此属性必须设置所有框架边框宽度，此属性必须设置所有框架边框宽度，此属性必须设置所有框架边框宽度，此属性必须和和和和frameborderframeborderframeborderframeborder一起使用才有效一起使用才有效一起使用才有效一起使用才有效FrameBorderFrameBorderFrameBorderFrameBorder0 0 0 0所有框架都不显示边框（用于所有框架都不显示边框（用于所有框架都不显示边框（用于所有框架都不显示边框（用于IEIEIEIE浏览浏览浏览浏览器）器）器）器）1 1 1 1所有框架都显示边框（用于所有框架都显示边框（用于所有框架都显示边框（用于所有框架都显示边框（用于IEIEIEIE浏览器），浏览器），浏览器），浏览器），默认为默认为默认为默认为1 1 1 1yesyesyesyes所有框架都显示边框（用于所有框架都显示边框（用于所有框架都显示边框（用于所有框架都显示边框（用于NavigateNavigateNavigateNavigate浏览器）浏览器）浏览器）浏览器）nononono所有框架都不显示边框（用于所有框架都不显示边框（用于所有框架都不显示边框（用于所有框架都不显示边框（用于NavigateNavigateNavigateNavigate浏览器浏览器浏览器浏览器HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架标记框架标记基本语法基本语法 frameset cols=“value,value,” frame src=url name=“frame_name” frame src=url name=“frame_name” . . HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页语法解释语法解释 src src属性用于设置在框架窗属性用于设置在框架窗口中显示的内容来自的文件；口中显示的内容来自的文件；namename属性用于标记框架名称，属性用于标记框架名称，以便于其他对象对它的引用，以便于其他对象对它的引用，如作为链接的一个目标窗口如作为链接的一个目标窗口框架标记框架标记HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页标记属性设置示例标记属性设置示例 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页属属属属 性性性性 属性值属性值属性值属性值描描描描 述述述述SrcSrcSrcSrcURLURLURLURL设置在框架中显示的文件的路径设置在框架中显示的文件的路径设置在框架中显示的文件的路径设置在框架中显示的文件的路径NameNameNameName设置设置设置设置Frame Frame Frame Frame 名称，以便于其它对象对它的引用名称，以便于其它对象对它的引用名称，以便于其它对象对它的引用名称，以便于其它对象对它的引用FrameBorderFrameBorderFrameBorderFrameBorder0 0 0 0不显示边框（用于不显示边框（用于不显示边框（用于不显示边框（用于IEIEIEIE浏览器）浏览器）浏览器）浏览器）1 1 1 1显示边框（用于显示边框（用于显示边框（用于显示边框（用于IEIEIEIE浏览器），浏览器），浏览器），浏览器），默认为默认为默认为默认为1 1 1 1yesyesyesyes显示边框（用于显示边框（用于显示边框（用于显示边框（用于NavigateNavigateNavigateNavigate浏览器）浏览器）浏览器）浏览器）nononono不显示边框（用于不显示边框（用于不显示边框（用于不显示边框（用于NavigateNavigateNavigateNavigate浏览器）浏览器）浏览器）浏览器）ScrollingScrollingScrollingScrollingyesyesyesyes显示滚动条显示滚动条显示滚动条显示滚动条nononono不显示滚动条不显示滚动条不显示滚动条不显示滚动条autoautoautoauto根据页面的长度自动判断是否显示滚动条，根据页面的长度自动判断是否显示滚动条，根据页面的长度自动判断是否显示滚动条，根据页面的长度自动判断是否显示滚动条，默默默默认自动认自动认自动认自动NoresizeNoresizeNoresizeNoresize设置框架能否改变大小设置框架能否改变大小设置框架能否改变大小设置框架能否改变大小MarginwidthMarginwidthMarginwidthMarginwidthn n n n以像素为单位，设置框架边框与页面内容的左以像素为单位，设置框架边框与页面内容的左以像素为单位，设置框架边框与页面内容的左以像素为单位，设置框架边框与页面内容的左右页边距右页边距右页边距右页边距MarginheighMarginheighMarginheighMarginheight t t tn n n n以像素为单位，设置框架边框与页面内容的上以像素为单位，设置框架边框与页面内容的上以像素为单位，设置框架边框与页面内容的上以像素为单位，设置框架边框与页面内容的上下的页边距下的页边距下的页边距下的页边距bordercolorbordercolorbordercolorbordercolor以以以以RGBRGBRGBRGB颜色值或颜色英文名设置框架边框颜色颜色值或颜色英文名设置框架边框颜色颜色值或颜色英文名设置框架边框颜色颜色值或颜色英文名设置框架边框颜色标记属性标记属性HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架属性说明框架属性说明使用框架的属性，可设置框使用框架的属性，可设置框架显示的内容以及对框架进架显示的内容以及对框架进行格式化行格式化对框架的格式化包括更改边对框架的格式化包括更改边框、调整页边距和指定颜色框、调整页边距和指定颜色以及由访问者对它的使用实以及由访问者对它的使用实行控制行控制标记属性标记属性HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页 code/frame_tol.htm code/frame_tol.html l 框架综合示例代码框架综合示例代码HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页浮动框架浮动框架浮动框架是一种特殊的框架页浮动框架是一种特殊的框架页面，其作为面，其作为HTMLHTML文档的文档的一部分一部分，就象图像一样出现在就象图像一样出现在HTMLHTML文档文档中。浮动框架允许将一个中。浮动框架允许将一个HTMLHTML文档插入到另一个文档插入到另一个HTMLHTML文档内文档内部的部的某个区域某个区域。使用浮动框架时必须设置该框使用浮动框架时必须设置该框架的大小，即框架的高度和宽架的大小，即框架的高度和宽度度HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页基本语法基本语法 iframeset 浮动框架浮动框架HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页 语法解释参见下表语法解释参见下表属属属属 性性性性 属性值属性值属性值属性值描描描描 述述述述srcsrcsrcsrcURLURLURLURL设置浮动框架中显示页面源文件的路径设置浮动框架中显示页面源文件的路径设置浮动框架中显示页面源文件的路径设置浮动框架中显示页面源文件的路径widthwidthwidthwidthn n n n设置浮动框的宽度设置浮动框的宽度设置浮动框的宽度设置浮动框的宽度heightheightheightheightn n n n设置浮动框的高度设置浮动框的高度设置浮动框的高度设置浮动框的高度namenamenamename设置浮动框的名称，以便于其他对象引用它设置浮动框的名称，以便于其他对象引用它设置浮动框的名称，以便于其他对象引用它设置浮动框的名称，以便于其他对象引用它alignalignalignalign设置浮动框相对于浏览器窗口的对齐方式设置浮动框相对于浏览器窗口的对齐方式设置浮动框相对于浏览器窗口的对齐方式设置浮动框相对于浏览器窗口的对齐方式frameborderframeborderframeborderframeborder设置浮动框架显示状态，与普通框架同设置浮动框架显示状态，与普通框架同设置浮动框架显示状态，与普通框架同设置浮动框架显示状态，与普通框架同framespacingframespacingframespacingframespacing设置浮动框架边框宽度，与普通框架同设置浮动框架边框宽度，与普通框架同设置浮动框架边框宽度，与普通框架同设置浮动框架边框宽度，与普通框架同scrollingscrollingscrollingscrolling设置浮动框架滚动条显示属性，与普通框架设置浮动框架滚动条显示属性，与普通框架设置浮动框架滚动条显示属性，与普通框架设置浮动框架滚动条显示属性，与普通框架同同同同noresizenoresizenoresizenoresize设置浮动框架尺寸调整属性，与普通框架同设置浮动框架尺寸调整属性，与普通框架同设置浮动框架尺寸调整属性，与普通框架同设置浮动框架尺寸调整属性，与普通框架同bordercolorbordercolorbordercolorbordercolor设置浮动框架边框颜色，与普通框架同设置浮动框架边框颜色，与普通框架同设置浮动框架边框颜色，与普通框架同设置浮动框架边框颜色，与普通框架同marginheightmarginheightmarginheightmarginheightn n n n浮动框架边框与页内容上下间距，与普通框浮动框架边框与页内容上下间距，与普通框浮动框架边框与页内容上下间距，与普通框浮动框架边框与页内容上下间距，与普通框架同架同架同架同marginwidthmarginwidthmarginwidthmarginwidthn n n n浮动框架边框与页内容左右间距，与普通框浮动框架边框与页内容左右间距，与普通框浮动框架边框与页内容左右间距，与普通框浮动框架边框与页内容左右间距，与普通框架同架同架同架同HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页浮动框示例浮动框示例 HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页框架与链接框架与链接框架的一个重要目的是在框架的一个重要目的是在不同的框架中显示不同的不同的框架中显示不同的页面，通过链接目标窗口页面，通过链接目标窗口的设置可实现这一目的的设置可实现这一目的具体实现方法：将框架的具体实现方法：将框架的框架名属性值作为超链接框架名属性值作为超链接的的targettarget的属性值的属性值HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页普通框架与链接示例普通框架与链接示例示例示例HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页浮动框架与链接示例效果浮动框架与链接示例效果浮动框架与链接示例浮动框架与链接示例HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页小小 结结框架的作用是将浏览器窗口分割成若框架的作用是将浏览器窗口分割成若干个区域，每个区域可分别显示不同干个区域，每个区域可分别显示不同的页面的页面框架对浏览器窗口的分割方式有：左框架对浏览器窗口的分割方式有：左右分割、上下分割和嵌套分割右分割、上下分割和嵌套分割框架的组成标记有框架的组成标记有和和使用框架结构时，使用框架结构时，HTMLHTML文档中不能出文档中不能出现现。需需要由要由代替代替HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页窗口分割方式以及和框架窗口的大小需要由窗口分割方式以及和框架窗口的大小需要由标记的标记的rowsrows或或colscols属性来确定，属性来确定，左右分割时使用左右分割时使用colscols属性，上下分割时使用属性，上下分割时使用rowsrows属性属性框架的显示内容以及框架的格式化由框架的显示内容以及框架的格式化由标记来完成标记来完成通过命名框架，使用框架可作为超链接的目通过命名框架，使用框架可作为超链接的目标窗口标窗口浮动框架是一种特殊的框架，它是某个浮动框架是一种特殊的框架，它是某个HTMLHTML文档的一部分，设置浮动框架需要设置它的文档的一部分，设置浮动框架需要设置它的大小大小浮动框架的许多属性与普通框架的相同浮动框架的许多属性与普通框架的相同小小 结结HTML表格框架PPT课件本节小结本节小结本节小结本节小结思考题思考题框架框架表格表格主页思考题思考题1. 1. 框架的具有什么作用？框架的具有什么作用？2. 2. 框架有哪几种分割方式？框架有哪几种分割方式？ 3.3.如何设置左右分割和上下分割如何设置左右分割和上下分割? ?4. 4. 如何设置框架显示内容如何设置框架显示内容? ?5. 5. 如果设置框架作为超链接的目标窗如果设置框架作为超链接的目标窗口？口？6. 6. 什么是浮动框架，它与普通框架有什么是浮动框架，它与普通框架有什么异同点什么异同点? ?HTML表格框架PPT课件