网站的设计不仅体现在具体内容与细节的设计制作上,也需要对框架进行整体的把握。 在进行网站设计时需要对网站的版面与布局进行整体性的规划。 本章主要内容: ● 网页布局的类型 ● 用表格进行网页布局 ● 用CSS 进行网页布局 5.网页布局的类型 1 在网页布局的设计上,根据用户的使用习惯与设计经验已经形成了一些常见的布局类 型。网页布局类型主要从用户使用的方便性、界面大方美观、网页特色等方面考虑。下面介 绍一些常见的网页布局类型。 1.“国”字型 “国”字型布局是一种常见的网页布局类型。这种布局类型是在网页的上、下各设计一个 通幅广告条,左面是主菜单或导航条,右面是友情链接或其他链接的内容,中间是网页的主要 内容。这样布局可以充分利用网页的版面,信息量较大。“国”字型布局效果如图5-1所示。 图5-1 “国”字型布局 1022.“厂”字型 “厂”字型布局是在网页的上部放置Logo和Banner,在网页的左边放置导航条与其他 链接,在网页的右下方放置网页的主要内容。这种布局的好处是网页的各部分布局非常集 中,可以在一个区域突出网页的重要内容;网页中的内容主次分明,很有层次感。“厂”字型 布局效果如图5-2所示。 图5-2 “厂”字型布局 3.“框架”型 “框架”型布局是指以框架网页的形式实现网页的布局。框架网页的功能是将浏览器窗 口划分为若干区域,每个区域可以分别显示不同的网页,这样框架就可以实现网页的布局。 与其他网页布局类型不同,其他网页布局都是在一个网页上实现的,而框架布局是在几 个不同的网页上实现布局,然后再通过框架网页集合在一起。“框架”型布局效果如图5-3 所示。 图5-3 “框架”型布局 103 4.“封面”型 “封面”型布局一般出现在网站的首页,页面上通常是一些精美的平面设计结合一些小 的动画,放上几个简单的链接或者仅仅是一个“进入”链接,甚至直接在首页的图片上设计链 接。“封面”型布局的网页结构常常很简单,需要使用精美的封面效果来体现网页的内容。 “封面”型布局效果如图5-4所示。 图5-4 “封面”型布局 5.用表格进行网页布局 2 表格可以用来控制页面布局,通过在表格里放置内容,用户能够把对象放置到页面的 指 定位置,创建更复杂的视觉结构。表格是一种可以让设计人员初步控制站点布局的HTML 元素 。 扫一扫 5.1 在页面中插入表格 2. 新建一个HTML 文档,选择“插入”|Table命令,弹出Table对话框,如图5-5所示。这 视频讲解 里插入一个4行3列的表格,表格宽度为500 像素,边框粗细为1像素,单元格边距和间 距 都为0,在“标题”文本框中输入文字“一个简单的表格”。然后单击“确定”按钮,页面中将 出 现一个表格,效果如图5-6所示 。 专家点拨:在网页中插入表格有3种常用方法,分别是选择“插入”|Table命令、单 击 “插入”面板的HTML 选项卡中的Table按 钮 和直接按Ctrl+Alt+T 组合键。 在图5-5所示的Table对话框中可以看到,在插入表格时可以对表格宽度、边框粗细 、 单元格边距和间距、页眉以及表格标题等参数进行设置。下面对这些参数进行详细介绍 。 1. 表格宽度 表格宽度能以百分比和像素两种单位进行设置。以百分比为单位进行设置在浏览网页 104 图5-5 Table对话框 图5-6 表格效果 时按照网页浏览区的宽度为基准,而以像素为单位进行设置则是表格的实际宽度。在不同 的情况下需要使用不同的单位,例如在表格嵌套时多以百分比为单位。 专家点拨:表格的宽度和高度可以通过浏览器窗口百分比或者绝对像素值来定义,比 如设置宽度为窗口宽度的100%,那么当浏览器窗口大小变化的时候表格的宽度也随之变 化;如果设置宽度为760 像素,那么无论浏览器窗口大小为多少,表格的宽度都不会变化。 2. 边框粗细 边框粗细用来设置表格边框的粗细,在插入表格时表格边框的默认值为1像素,如果把 表格边框的值设置为0,表格的边框则为虚线,如图5-7所示,这样在浏览网页时就看不到表 格的边框了。如果把表格边框的值设置为5像素,那么表格的边框就变得宽了许多,如图5-8 所示。 图5-7 边框值为0 图5-8 边框值为5像素 1053.单元格边距 单元格边距表示单元格中的内容与边框距离的大小,如果单元格边距为默认值,其单元 格中的内容与边框的距离很近,如图5-9所示。如果把单元格的边距设置为8像素,在单元 格中的内容与边框之间就存在了一定的距离,如图5-10 所示。 图5-9 单元格边距为默认值图5-10 单元格边距为8像素 4. 单元格间距 单元格边距和单元格间距是两个不同的概念,单元格间距是指单元格与单元格、单元格 与表格边框的距离。两者的单位都是像素,在默认情况下边距的值为1像素,间距的值为2 像素。图5-11 所示为把单元格间距设置为8像素的表格外观。 图5-11 单元格间距为8像素 5. 页眉设置 页眉设置其实就是为表格选择一个加粗文字的标题栏,这样对于要求标题以默认粗体 显示的表格省去了每次手动执行加粗的动作,提高了工作效率。用户可以将页眉设置为无、 左部、顶部,或者左部和顶部同时设置。图5-12 和图5-13 所示分别为将页眉设置在左部和 顶部时的效果。 图5-12 页眉设置在左部图5-13 页眉设置在顶部 6. 辅助功能 辅助功能的作用主要是为表格和表格的内容提供一些简单的文本描述。用户可以在 “标题”文本框中为表格设置一个标题,在“对齐标题”下拉列表中选择一种标题的对齐方式, 在“摘要”文本域中输入对所创建表格的简单描述信息。 5.2 设置表格和单元格属性 2. 表格由单元格组成,而表格和单元格的属性完全不同。选择不同的表格对象,“属性”面 板将会显示相应的选项参数,修改这些参数可以得到不同风格的表格。 1. 设置表格属性 时单击可以选中整个表格,在“属性”面板中显 将鼠标指针移至表格下方,当光标变为 示表格的各种属性,如图5-14 所示。 106 图5-14 表格的“属性”面板 下面分别对表格中的属性进行说明。 (1)“表格”文本框:用于输入表格的名称,用户可以在此输入一个名称为表格命名。 (2)行和列:可以重新设置表格中行和列的数量。 (3)宽:设定表格的宽度,宽度可以在“表格”对话框中设置,单位有“百分比”和“像素” 两种。一般情况下不需要设置表格的高度。 (4)CelPad文本框:即单元格边距,是单元格内容与单元格边框之间的像素数。 (5)CelSpace文本框:即单元格间距,是相邻的单元格之间的像素数。 (6)Border文本框:用于设置表格的边框厚度。在大部分浏览器中,表格的边框都会 和“清除行高” 按钮:这两个按钮可以将表格中所有明确指定 的行高或列宽删除。 采用立体效果方式,但在整理网页而使用的布局表格文档中最好不要显示边框,将Border 值设置为0。 (7)Align下拉列表:用于设置表格在文档中的位置,包括“默认”“左对齐”“居中对齐” “右对齐”4个选项。 (8)Clas 下拉列表:用于设置表格样式。 (9)“清除列宽”按钮 (10)“将表格宽度转换成像素”按钮 和“将表格宽度转换成百分比”按钮 :前者将 表格中每列的宽度设置为以像素为单位的当前宽度,还将整个表格的宽度设置为以像素为 单位的当前宽度。后者将表格中每列的宽度或高度设置为按占文档窗口宽度百分比表示的 当前宽度,还将整个表格的宽度设置为按占文档窗口宽度百分比表示的当前宽度。 (11)“原始档”文本框:用于设置原始表格设计图像的Fireworks源文件路径。 2.设置单元格属性 在任一单元格内单击,“属性”面板中将显示图5-15所示的单元格“属性”设置区域,其 各选项的作用如下。 图5-15 单元格的“属性”面板 (1)“合并所选单元格,使用跨度”按钮 :将选定的多个单元格、选定的行或列的单元 格合并成一个单元格。 :将选定的一个单元格拆分成多个单元格。注意, (2)“拆分单元格为行或列”按钮 一次只能对一个单元格进行拆分,若选择多个单元格,此按钮禁用。 (3)“水平”和“垂直”下拉列表:前者用于设置行或列中内容的水平对齐方式。其下拉 1 07 列表中包括“默认”“左对齐”“居中对齐”“右对齐”4个选项。一般将标题行的所有单元格设 置为“居中对齐”方式。后者用于设置行或列中内容的垂直对齐方式。其下拉列表中包括 “默认”“顶端”“居中”“底部”和“基线”5个选项。一般采用“居中”对齐方式。 (4)“宽”和“高”文本框:用于设置单元格的宽度和高度。 (5)“不换行”复选框:设置单元格文本是否换行。如果选中此复选框,当输入的数超 出单元格的宽度时会自动增大单元格的宽度来容纳数据。 (6)“标题”复选框:选中此复选框,将行或列的每个单元格的格式设置为表格标题单 元格的格式。 (7)“背景颜色”文本框:用于设置单元格的背景颜色。 5.2.3 表格标签 前面介绍了如何在Dreamweaver设计视图下创建表格,为了让读者对表格有更深刻的 理解,本节介绍表格标签。与表格相关的标签有<table>、<tr>、<td>等,分别表示表 格、行、列。 1.<table>标签 <table>标签表示一个表格的开始。每一个<table>标签都需要一个</table>标签 关闭。其相关的属性如下。 ● width:表格的宽度。 ● height:表格的高度。 ● border:表格边框的线宽。 ● cellpadding:表格边框之间的填充宽度。 ● cellspacing:表格边框之间的间距。 ● bordercolor:边框的颜色。 ● background:表格背景的图片。 ● bgcolor:表格背景的颜色。 ● align:表格的对齐方式,可以是left、center、right等值。 例如,下面是一个表格的代码: <table width="500" height="200" border="2" cellspacing="1" cellpadding="2" bordercolor="#CC0000" bgcolor="#0033FF" align="center"></table> 这些代码表示开始一个表格,宽500像素、高200像素,边框宽度为2像素,边框之间的 填充为1像素,外边框和内边框的间距为2像素,边框颜色为红色,背景颜色为蓝色,居中 对齐。专 家点拨:表格的宽度值和高度值如果是一个数字,例如<tablewidth="500">,则 尺寸单位为像素;如果是一个百分比,例如<tablewidth="50%">,则尺寸单位为百分比, 表示宽度或高度占上一级元素的百分比。 2.<tr>标签 <tr>标签表示表格的一行,具有和<table>标签相同的高度、宽度、背景等属性。每 一个<tr>标签都需要一个</tr>标签关闭。 1 08 3.<td>标签 <td>标签表示表格的一个单元格,具有和<table>标签相同的高度、宽度、背景等属 性。每一个<td>标签都需要一个</td>标签关闭。 例如下面是网页中一个表格的代码: < table width ="500" height ="200" border ="2" cellpadding ="1" cellspacing ="1" bordercolor="#0000FF" bgcolor="#999999"> <tr> <td bgcolor="#990033">设置单元格背景</td> <td>灰色背景</td> <td>黄色背景</td> </tr> <tr> <td> </td> <td align="center">居中对齐</td> <td align="left">左对齐</td> </tr> </table> 表格的显示效果如图5-16所示。 图5-16 表格效果 5.2.4 用表格布局网页 表格是最常用的网页布局实现方式,在表格中可以很容易地对表格的行和列进行调整, 从而方便地实现网页布局。本节通过实例介绍使用表格进行网页布局的方法。 网页布局实例效果如图5-17所示。这个页面是由4个表格组成的,在某些单元格中又 嵌套了表格,布局示意图如图5-18所示。其中,表1为网页的顶部,包括网站的Logo及 Banner;表2是网站导航条;表3是页面的主体区,包括左侧的文章列表、右侧的其他链接和 下部的搜索条,其中又分别嵌套了小表格;表4是网页的底部,是网站的版权栏。 下面详细介绍本实例的制作步骤。 1.创建第一个表格 (1)新建一个HTML网页文件,将文件另存为“5.2.4.html”。选择“插入”|Table命 令,在弹出的Table对话框中设置表格为1行2列,宽为760像素,边框粗细、单元格边距和 单元格间距均为0,如图5-19所示。单击“确定”按钮,即创建了一个表格。 扫一扫 视频讲解 109 图5-17 网页布局实例效果 图5-18 布局示意图 (2)单击“标签选择器”上的<table> 标签选中表格,然后打开“属性”面板,设置对齐方 式为“居中对齐”,如图5-20 所示。 (3)单击表格的第一个单元格,在“属性”面板中设置单元格的宽为180 像素、高为60 像素,设置背景颜色为蓝色。单击第二个单元格,在“属性”面板中设置单元格的背景颜色为 红色,效果如图5-21 所示。 110 图5-19 Table对话框 图5-20 修改表格属性 图5-21 第一个表格的效果 2. 创建第二个表格 (1)将光标定位在整个表格的后面,按Enter键把光标移到表格的下面,单击“插入”面 板的HTML 选项卡中的Table按钮 ,插入一个1行1列、宽为760 像素的表格。 专家点拨:这次插入的表格继承了前面设置的部分属性,在Table对话框中不用再设 置边框粗细、单元格边距和单元格间距等属性。 (2)打开“CSS 设计器”面板,在“源”选项组中单击“添加CSS 源”按钮 ,在弹出的列 表中选择“在页面中定义”选项。单击“选择器”选项组中的“添加选择器”按钮 bimage, - ,在文本框 中输入.如图522 所示。在“属性”选项组中单击“背景”按钮 设置区域中单击background-images选项后的“浏览”按钮 ,然后在显示的选项 ,在弹出的“选择图像源文件”