第章网页布局表格.docx

第章网页布局表格.docx

《第章网页布局表格.docx》由会员分享，可在线阅读，更多相关《第章网页布局表格.docx（13页珍藏版）》请在冰豆网上搜索。

第章网页布局表格

第章-网页布局-表格

————————————————————————————————　作者：

————————————————————————————————日期:

ﻩ

第４章网页的版面设计和布局

 在确定了网站的主题和结构之后，就可以开始着手网页的制作了。

为了提高网页的视觉吸引力，有效地传达信息，给人以审美的感受,在制作网页之前,进行网页的设计和布局就显得尤为重要。

网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计原则。

但是,由于表现形式、运行方式和社会功能的不同,网页设计和布局又有其自身的规律。

本章将探讨如何对网页的版面进行设计和布局。

4．1网页的版面设计

一个成功的网页版面首先需要优秀的设计，然后辅以优秀的制作。

设计是网页的核心和灵魂,一个相同的设计方案可以有多种制作表现的方式。

网页的主要目的不仅是向人们传递它的信息,同时也向获取这些信息的人们传递着自己蕴含的文化。

例如：

众所周知的新浪网、网易、谷歌等网站的页面设计都非常朴实,没有太多花哨的效果，但它们的页面只需要看一眼就能够让人马上识别它是谁,就是因为它们不仅向访问者传达了网页的信息,更显示出自己独特的风格。

网页版面的设计，是技术与艺术的结合,内容与形式的统一。

设计布局合理、美观大方的页面是每个网页设计者的目标。

目前，网页排版布局常用的技术一般有以下几种：

１．使用CSS控制整体格式 

使用CＳS（Cａｓｃaｄｉng ＳtｙleSheets，层叠样式表）布局技术能完全精确的定位文本和图片。

它最大的特点是可以使网页的表现和版面结构相脱离,大量减少网页中重复使用的HTML代码，从而减小网页的体积,这对于在网上传输非常有利。

同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能，这就意味着用户可以经常改变网站的界面（包括文字、色彩、背景图片等）,而每次只需要上传一个体积很小的CＳS文件就行了。

目前，ＣSS运用的好坏也是判断一个网站优秀与否的重要指标。

２. 使用表格定位 

利用表格工具,用户可以通过绘制并重新安排页面结构来快速地设计页面。

使用表格来定位文字和图片,制作直观，而且效果也不错。

但值得注意的是，当页面很大的时候,一定不要在整个网页上用一个大的表格嵌套很多小表格，用户最好先将页面分用几个小表格。

这样,在用户浏览网页的时候收到多少表格显示多少表格,浏览者可以在等待的时候先看收到的部分。

但是如果觉得分别显示页面会破坏整体的美感，那就选用大表格吧。

３.选择使用框架 

框架（Ｆramｅ）也叫帧页，是制作网页时较为常用的一种技术。

该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个网页的内容，并分别设置大小、有无滚动条等信息。

这样就方便了设计网站的结构,可以在上方的框架里放置网站的ＬOＧO，在左边的框架里显示导航栏，而在下方的框架里安置版权信息。

当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。

而且浏览时,可以指定链接的网页在哪个框架里显示，从而避免了网页上相同内容的重复下载。

４.使用模板

在完成了所有的构思以后,可以先做一个模板网页，在这个网页里包括了所有网页的公共元素,如：

LOGO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mａil地址、滚动的状态栏、广告条、版权信息等等。

之后,用户就可以基于模板创建新的页面,然后在模板更改时自动更新这些页面的布局。

4.2用表格布局网页

表格在网页设计中占据着重要的地位。

它是处理数据时最常用的一种形式。

同时，表格也是Ｄｒeamweaver对文本和图形进行页面布局时强有力的工具。

能否熟练地运用表格将直接影响到网页作品外观的好坏,因此学习运用表格也是学习制作网页的一个重要内容。

通过表格可以精确地控制各网页元素在网页中的位置,通过在表格中放置相应的图片或其他内容,即可有效地组合成符合设计效果的页面，使得网页中的元素得以方便地固定在设计的位置上。

表格由一行或多行组成;每行又由一个或多个单元格组成。

当选定了表格或表格中有插入点时,Ｄrｅａmｗeaver会显示表格宽度和每个表格列的列宽,宽度旁边是表格标题菜单与列标题菜单的箭头。

使用这些菜单可以快速访问与表格相关的常用命令,用户可以启用或禁用宽度和菜单。

图4-１　显示表格宽度和表格列宽度

4.2．１　　创建表格

利用Ｄrｅamweavｅr创建新表格时，可执行下述具体步骤。

1）在“文档”　窗口的“设计”视图中，将插入点放在需要创建表格的位置。

２）执行下列操作之一:

方法一:

选择主窗口“插入”菜单中的“表格”命令。

方法二:

在“插入”面板的“常用”类别中,单击“表格”按钮。

方法三：

按组合键Cｔｒｌ+Alt＋T。

3）在弹出的“表格”对话框中设置“表格”的属性，如图4-9所示，然后单击“确定”创建表格。

图４－2　表格设置对话框

“表格”对话框中各主要选项的功能如下：

（1）“行数”:

用来设置生成表格的行数。

（2）“列数”:

用来设置生成表格的列数。

（３）“表格宽度”:

用来设置生成表格的宽度，可以填入数值，宽度的单位有两个选项——百分比和像素。

当选择百分比时，表格的宽度会随浏览器窗口的大小而改变。

例如设置宽度为窗口宽度的60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化,但是无论浏览器窗口怎么变化，都不会出现水平滚动栏;如果设置宽度为400像素，那么无论浏览器窗口大小为多少,表格的宽度都不会变化。

当浏览器窗口特别小（即其宽度不足以显示一个完整的表格）时,浏览器窗口就会出现水平滚动栏。

（4）“边框粗细”：

用来设置生成表格的边框宽度，以像素为单位。

如果没有明确指定边框粗细的值,则大多数浏览器都将其默认为1;如果不想在浏览器窗口中显示表格的边框，可将边框粗细定义为0。

（5）“单元格边距”:

用来设置单元格边框与单元格内容之间的像素数。

如果没有明确指定单元格边距的值,则大多数浏览器都将其默认为1；如果不想在浏览器窗口中显示单元格边距，可将单元格边距定义为0。

（６）“单元格间距”:

用来设置单元格与单元格之间的像素数。

如果没有明确指定单元格间距的值,则大多数浏览器都将其设置为２；如果不想在浏览器窗口中显示单元格间距，可将单元格间距定义为0。

（7）“标题”：

定义页眉样式,“无”表示对表格不启用列或行标题;“左对齐”表示可以将表格的第一列作为标题列,以便为表格中的每一行输入一个标题；“顶对齐”表示可以将表格的第一行作为标题行,以便为表格中的每一列输入一个标题；“两者兼有”表示用户能够在表格中输入列标题和行标题。

（8）“标题”：

定义一个显示在表格外的表格标题。

（9）“摘要”：

可以在这里对表格进行注释。

屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。

４．2.2　　设置表格属性

１．设置表格属性

选中一个表格后，可以通过“表格属性”面板再次编辑表格属性,如图４-3所示。

图4-3“表格属性”面板

“表格属性”面板中的各项参数的功能介绍如下：

（1）“行”和“列”：

用来设置表格中行和列的数量。

（2）“宽”:

表格的宽度,以像素为单位或表示为占浏览器窗口宽度的百分比，宽度的单位可以通过图标或设置。

（３）“填充”：

用来设置单元格边距,即单元格内容与单元格边框之间的像素数。

（4）“间距”：

用来设置单元格间距，即相邻的表格单元格之间的像素数。

（5）“对齐”：

用来确定表格相对于同一段落中的其它元素的显示位置，即设置表格的对齐方式，默认的对齐方式一般为左对齐。

（6）“边框”:

用来设置表格边框的宽度。

（7）“类”：

对该表格设置一个ＣSS类。

（８）“清除列宽”和“　清除行高”:

从表格中删除所有明确指定的行高或列宽。

（9）“将表格宽度转换成像素”和“将表格高度转换成像素”:

将表格中每列的宽度或高度设置为以像素为单位的宽度，还可以将整个表格的宽度设置为以像素为单位的宽度。

（10）“将表格宽度转换成百分比”和“将表格高度转换成百分比”:

　将表格中每个列的宽度或高度设置为按占“文档”窗口宽度百分比表示的宽度，还可以将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的宽度。

2．设置单元格、行或列属性

把光标移动到某个单元格内,或选定行或列，就可以利用相应的属性面板对单元格、行或列的属性进行设置，如图4-4所示。

图4-４“单元格属性”面板

　“单元格属性”面板中各项参数的主要功能介绍如下:

（1）“水平”：

用来设置单元格内元素的水平对齐方式。

用户可以将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式（通常,常规单元格为左对齐，标题单元格为居中对齐）。

（2）“垂直”:

用来设置单元格内的垂直对齐方式，用户可以将内容对齐到单元格的顶端、中间、底部或基线，或者指示浏览器使用其默认的对齐方式（通常是居中对齐）。

（3）“高”、“宽”：

用来设置单元格的宽度和高度,可以像素为单位或百分比为单位。

若指定百分比,则需在值后面使用百分比符号；若要让浏览器根据单元格的内容或根据其它列和行的宽度和高度来确定适当的宽度或高度,将此域留空即可。

默认情况下,浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。

（4）“不换行”:

可以防止单元格中较长的文本自动换行，从而使给定单元格中的所有文本都在一行上。

如果启用了“不换行”,则当用户键入数据或将数据粘贴到单元格时，该单元格会加宽来容纳所有数据。

通常,单元格在水平方向扩展以容纳单元格中最长的单词或最宽的图像，然后根据需要在垂直方向进行扩展以容纳其它内容。

（5）“标题”：

使选择的单元格成为标题单元格,单元格内的文字自动以标题格式显示出来。

默认情况下，表格标题单元格的内容为粗体并且居中。

（6）“背景颜色”:

使用颜色选择器设置背景单元格的背景颜色。

4.2.3表格的基本操作

对于表格、行、列、单元格属性的设置首先是以选择这些对象为前提的。

1.选择表格元素

1）选择整个表格

方法一：

单击表格的左上角、表格的上边缘或下边缘的任何位置或者行或列的边框。

需要注意的是,当用户可以选择表格时，鼠标指针会变成表格网格图标。

方法二:

单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择　标签。

方法三:

将光标置于表格中的某个单元格中，然后选择“修改”菜单下的子菜单“表格”中的“选择表格”命令。

方法四:

将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“选择表格”命令。

方法五：

将光标置于表格中的某个单元格中，再按两次组合键Ctｒl+A。

2）选择单个单元格

方法一：

将光标置于所要选择的单元格中，按一次组合键Ｃtｒl＋A。

方法二:

将光标置于所要选择的单元格中，向右拖动鼠标。

方法三:

将光标置于所要选择的单元格中,选择“编辑”菜单中的“全选”命令。

方法四：

按住Cｔｒｌ键,单击所要选择的单元格，若再单击一次,则取消对单元格的选择。

方法五:

单击单元格,然后在“文档”窗口左下角的标签选择器中选择＜ｔd>标签。

3）选择多个单元格

方法一:

按住Ctrl键,单击所要选择的所有单元格。

方法二:

将光标置于单元格中,拖动鼠标,选择多个单元格。

方法三:

如果要选择整行,将光标置于该行的左边缘，当光标变成“→”形状时单击鼠标左键。

方法四:

如果要选择整列，将光标置于该列的上边缘，当光标变成“↓”形状时单击鼠标左键。

4）选择全部单元格

方法一：

将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。

方法二：

将光标置于第1个单元格中，按住Shiｆt键，再单击最后一个单元格。

方法三：

将光标置于第1行的左边缘，当光标变成“→”形状时，向下拖动鼠标至最后一行。

方