《第4章_用HTML布局网页.ppt》由会员分享，可在线阅读，更多相关《第4章_用HTML布局网页.ppt（45页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章用HTML布局网页l创建表格创建表格l表格属性设置表格属性设置l使用表格布局网页使用表格布局网页l创建框架创建框架l框架控制框架控制l使用框架布局网页使用框架布局网页本章主要内容：本章主要内容：网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社4.1 创建表格创建表格表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。4.1.1 表格标记表格标记表格由标记来定义。每个表格均
2、有若干行（由标记定义），每个表格可以定义第一行的单元格为表头（由标记定义），其余每行被分割为若干单元格（由标记定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。4.1.1 表格标记表格标记基本语法：基本语法：head1head2row1,cell1row1,cell2row2,cell1row2,cell24.1.2 表格标题表格标题表格标题，就是对表格内容的简单说明，用标记来定义。基本语法：基本语法：表格标题语法解释：语法解释：标记在表格标记范围内，表格标题一般显示在表格上方，是对表格内容的简略说明。4.1.
3、3 划分表格结构划分表格结构创建表格时，如果希望拥有一个表头行，一些带有数据的行，以及位于底部的一个总计行。thead元素用于对HTML表格中的表头内容进行分组，tfoot元素用于对HTML表格中的总计行（页脚）内容进行分组，tbody元素用于对HTML表格中的数据主体内容进行分组。基本语法：基本语法：4.1.3 划分表格结构划分表格结构语法解释：语法解释：（1）标记定义表格的表头，用于组合HTML表格的表头内容。（2）标记定义表格的页脚（脚注或表注），用于组合HTML表格中的表注内容。（3）标记表格主体（正文），用于组合HTML表格的主体内容。（4）如果使用、以及标记划分表格，就必须使用全部
4、的元素。它们的出现次序是：、，这样浏览器就可以在收到所有数据前呈现页脚了，必须在标记范围内部使用这些标签。4.2 表格属性设置表格属性设置本节介绍表格、行和单元格标记中常用属性的设置，控制表格的显示效果。4.2.1 标记属性标记属性通过标记属性值可以控制表格的显示效果，表格标记常用的属性及其含义如表4-1所示。属性描述align规定表格相对周围元素的水平对齐方式。bgcolor规定表格的背景颜色。border规定表格边框的宽度。cellpadding规定单元边沿与其内容之间的空白。cellspacing规定单元格之间的空白。frame规定外侧边框的哪个部分是可见的。rules规定内侧边框的哪个
5、部分是可见的。summary规定表格的摘要。width规定表格的宽度。4.2.1 标记属性标记属性1 1 设置表格水平对齐属性设置表格水平对齐属性在水平方向上，可以设置表格的对齐方式为：居左、居中、居右。如果没特别进行设置，则默认为居左排列。基本语法：基本语法：语法解释：语法解释：属性可选的值有left、center和right，代表表格出现在窗口的左侧、中间和右侧位置。4.2.1 标记属性标记属性2 2 设置表格背景色属性设置表格背景色属性表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法：基本语法：语法解释：语法解释：bgcolor
6、属性规定表格的背景颜色。颜色描述方式为rgb(x,x,x)、#xxxxxx或colorname。例如，如果设置表格背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。设置形式如下。4.2.1 标记属性标记属性3 3 设置表格边框宽度属性设置表格边框宽度属性默认情况下表格边框为0，可以通过给表格添加border属性及属性值，实现为表格设置边框线宽度的目的。基本语法：基本语法：语法解释：语法解释：border的值为像素数，数字越大边框越宽。例如，设置表格的边框宽度为5个像素，设置形式如下。4.2.1 标记属性标记属性4 4 设置单元格间距和单元格边距属性设置单元格间距和单
7、元格边距属性通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。单元格边距是指单元格中的内容与单元格边框的距离，通过设置cellpadding属性来调整。基本语法：基本语法：语法解释：语法解释：cellspacing属性设置单元格和单元格之间的间距，cellpadding属性设置文本与边框之间的距离，值为像素数，值越大间距越大。例如，设置表格的单元格间距为5，单元格边距为10，设置形式如下。4.2.1 标记属性标记属性5 5 设置表格宽度属性设置表格宽度属性默认情况下，表格的宽度会根据内容自动调整。基本语法：基本语法：语法解释：语法解释：表格的宽
8、度可以是像素数也可以是百分比。例如，设置表格的宽度为600像素，设置形式如下。4.2.2 标记属性标记属性标记定义HTML表格中的行。通过标记属性值可以控制表格中行的显示效果，标记常用的属性及其含义如表4-2所示。属性描述align定义表格行的内容对齐方式。bgcolor规定表格行的背景颜色。valign规定表格行中内容的垂直对齐方式。4.2.2 标记属性标记属性1 1 设置行水平对齐方式属性设置行水平对齐方式属性基本语法：基本语法：语法解释：语法解释：align属性规定表格行中内容的水平对齐方式。属性可选的值及其含义如下所述。left，左对齐内容（默认值）。right，右对齐内容。cente
9、r，居中对齐内容（th元素的默认值）。justify，对行进行伸展，这样每行都可以有相等的长度。char，将内容对准指定字符。4.2.2 标记属性标记属性2 2 设置行背景颜色属性设置行背景颜色属性bgcolor属性用来设置表格中该行单元格的背景颜色，默认为白色。基本语法：基本语法：语法解释：语法解释：把个color属性规定表格行中单元格背景颜色。属性可选的值及其含义如下所述。颜色描述方式为rgb(x,x,x)、#xxxxxx或colorname。例如，如果设置行背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。4.2.2 标记属性标记属性3 3 设置行垂直对齐方式
10、属性设置行垂直对齐方式属性本属性用于设置表格行中内容的垂直对齐方式。基本语法：基本语法：语法解释：语法解释：valign的值可以设置的值有top（居上）、botton（居下）和middle（居中），默认情况下是居中。4.2.3 标记属性标记属性标记中的属性用于设置表格中的标准单元格的一些特性。常见的属性设置如表4-3所示。属性描述align规定单元格内容的水平对齐方式。bgcolor规定单元格的背景颜色。colspan规定单元格可横跨的列数。height规定表格单元格的高度。rowspan规定单元格可横跨的行数。valign规定单元格内容的垂直对齐方式。width规定表格单元格的宽度。4.2.
11、3 标记属性标记属性1 1 设置单元格跨列设置单元格跨列本属性用于设置表格中某一单元格跨几个列进行合并（横向合并）基本语法：基本语法：语法解释：语法解释：colspan的值就是单元格进行横向合并时所跨的列数，例如某一个单元格和它右面两个单元格合并，colspan的值设为3。4.2.3 标记属性标记属性2 2 设置单元格跨行设置单元格跨行本属性用于设置表格中某一单元格跨几个行进行合并（纵向合并）基本语法：基本语法：语法解释：语法解释：rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一个单元格和它下面两个单元格合并，rowspan的值设为3。4.3 使用表格布局网页使用表格布局网页
12、网页是网站构成的基本元素。在设计网页时，不但要考虑色彩的搭配、文字的变化和图片的处理等，而且还要考虑另一个非常重要的因素网页的布局。4.3.1 网页布局类型网页布局类型下面简单讨论一下网页布局类型。网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型等。1“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。2拐角型这种结构与
13、上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。3标题正文型这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。4.3.1 网页布局类型网页布局类型4左右框架型这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。5上下框架型与上面类似，区别仅仅在于是一
14、种上下分为两页的框架。6综合框架型上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。7封面型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。4.3.2 网页布局实例网页布局实例 程序4-10是一个利用表格嵌套进行网页布局的实例banner图片4.4 创建框架创建框架框架技术可以将浏览器分割成多个小窗口，各窗口就会扮演不同的角色，并且在每个小窗口
15、中，可以显示不同的网页，实现不同的功能。这样就可以很方便地利用框架在浏览器中浏览不同的网页。4.4.1 定义框架定义框架框架的基本结构主要分为框架集和框架两个部分。它是利用标记与标记来定义。其中标记用于定义框架集，而标记则用于定义框架。基本语法：基本语法：4.4.1 定义框架定义框架语法解释：语法解释：标记和标记中的省略号表示这两个标记中的具体属性，常用的属性本章将结合具体实例进行详细讲解。标记不可以和标记一起使用，否则将出现显示异常。标记在使用时直接包含在标记中即可。标记主要用来定义框架，用来控制所代表的窗口框架。之间放置不支持Frame功能的浏览器显示的文本提示。4.4.2 利用框架分割窗
16、口利用框架分割窗口常见的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。4.4.2 利用框架分割窗口利用框架分割窗口1 1水平分割窗口水平分割窗口rows属性可以定义窗口的水平分割。基本语法：基本语法：4.4.2 利用框架分割窗口利用框架分割窗口语法解释：语法解释：（1）rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。（2）设置高度数值的方式有两种：采用整数设置，
17、单位为像素（px），语法如下：用百分比设置，语法如下：4.4.2 利用框架分割窗口利用框架分割窗口2 2垂直分割窗口垂直分割窗口cols属性可以定义窗口的垂直分割。基本语法：基本语法：语法解释：语法解释：窗口垂直分割的宽度设置与水平设置时高度设置方式相同，这里不再赘述。4.4.3 框架的嵌套框架的嵌套如果进行网页布局时需要创建同时包含横向和纵向的框架，那么就需要利用框架的嵌套创建复杂的框架集。进行框架嵌套时，就是在一个框架集中包含了另外一个框架集。也就是在一个框架集中原来应该为标记的位置由框架集标记代替。4.4.4 框架的初始化框架的初始化框架初始化是指为各个框架指定初始显示的页面，也就是在标
18、记中使用src属性指定框架中最初显示的页面。指定页面可以使用相对路径也可以使用绝对路径。基本语法：基本语法：语法解释：语法解释：的src属性值设置为初始显示页面的路径。4.4.5 创建浮动框架创建浮动框架在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记，同样，我们会用src属性来设置框架中显示文件的路径。基本语法：基本语法：语法解释：语法解释：在的src属性中设置显示页面的路径。与框架不同，浮动框架标记可以包含在标记范围内。4.4.5 创建浮动框架创建浮动框架标记中常见的属性如表4-4所示。属性描述align规定框架的水平对齐方式。width
19、规定浮动框架窗口的宽度。height规定浮动框架窗口的高度。src规定显示网页文件的路径。name规定框架的名称。noresize规定框架尺寸是否可以调整。scrolling规定框架滚动条。frameborder规定框架边框。4.5 框架控制框架控制本节将详细介绍通过设置标记和标记中的各种属性，来控制框架的显示效果。4.5.1 控制框架边框控制框架边框1 1框架的隐藏框架的隐藏基本语法：基本语法：或语法解释：语法解释：标记中的frameborder属性可以控制框架的边框。属性可选的值为0或1，值为0时没有边框，值为1时生成3D边框（此为默认值）。只有将所有相邻的框架的边框都设置为0是，才能隐藏
20、边框。标记中的frameborder属性可以控制框架集中所有子窗口的边框。4.5.1 控制框架边框控制框架边框2 2框架的边框框架的边框基本语法：基本语法：语法解释：语法解释：标记中的border属性可以控制框架边框的宽度，单位为像素。4.5.1 控制框架边框控制框架边框3 3框架滚动条和不可移动性框架滚动条和不可移动性基本语法：基本语法：语法解释：语法解释：标记中的scrolling属性值为yes、no或auto。当值为yes时，强制为框架添加滚动条。当值为no时，框架内不加滚动条。当为auto是根据内容的多少，需要时自动添加滚动条（默认值）。当把鼠标滑到框架边框时，可以通过拖动调整框架大小
21、，noresize属性可以固定框架的位置和大小。4.5.2 控制框架子窗口控制框架子窗口1 1定义子窗口名称定义子窗口名称基本语法：基本语法：语法解释：语法解释：标记中的name属性用来指定框架的名称。指定框架名称后可以指定超链接的target属性值为框架名称，当单击超链接时，在指定框架内显示超链接目标。4.5.2 控制框架子窗口控制框架子窗口2 2设置子窗口边距设置子窗口边距基本语法：基本语法：语法解释：语法解释：marginwidth属性可以控制框架内容和框架左右边框之间的距离，marginheight属性则控制框架内容和框架上下边框之间的距离。这两属性的取值单位都是像素。4.6 使用框架
22、布局网页实例使用框架布局网页实例程序4-21是一个利用框架布局网页的实例，这个程序运用了框架嵌套实现了一个类似于程序4-10的网页布局4.6使用框架布局网页实例程序4-21外层框架设置了三个水平分割的子窗口，3个子窗口的高度分别是70像素、300像素和40像素，第2个子窗口又被垂直分割成两个子窗口宽度分别为172像素和600像素。顶部初始化网页为程序4-21top，程序4-21bottom和程序4-21right内容与它内容相似。banner图片banner图片4.6使用框架布局网页实例左侧导航栏初始化程序为程序4-21left，注意程序中链接的target属性值为右侧框架名称“right”。栏目1导航栏目2导航