用表格做网页

用表格做网页，表格在网页制作中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。

插入第一个表格

我们看一下这个网页，虽然看起来很复杂，但主要是利用表格制作的。去掉文字和图形，可以看到其表格框架为下面这个样子。

下面我们就利用表格制作这个网页。启动Dreamweaver后，自动产生一个空文档。我们先来定义网页尺寸，不同的分辨率所查看的网页最终结果是不一样的，为了照顾更多的上网者，我们设置640×480分辨率（图3），单击状态栏上的窗口尺寸箭头，在弹出的列表中选择“600×300 （640×480），Maximized”，窗口就小了，做出的网页在640×480分辨率下会显示正常，编辑区大小为600×300，我们编辑的网页宽度就定为600，高度可以大些，在浏览器中显示时会有竖直滚动条。设置页面尺寸我们看一下网页的布局，共有三个主要表格，最上面的表格放置logo图标和banner广告条，中间的表格为主要栏目切换条，最下面的表格为网页正文。根据网页布局，我们先来制作最上面的表格。单击“对象面板”中的插入表格图标，弹出“Insert Table”对话框。设置行数（Rows）为1，列数（Columns）为2，表格宽度（Width）为590Pixels，表格线宽度（Border）为0，另两个选项“Cell Padding”表示表格内文本与表格线的距离，“Cell Spacing”表示表格单元格之间的距离，这里我们不做设置，单击“OK”，表格就插进来了。

“插入表格”对话框

将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为

“{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下{table}，标签选择器处显示为“{body}{table}{tr}{td}”（图5），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。用标签选择器选择表格选中表格后，我们查看一下属性面板，可以看到刚刚设置的一些表格属性，行数（Rows）为1，列数（Cols）为2，表格宽度（W）为590Pixels。以后要改变表格的属性，就可以在属性面板中进行了。

表格的属性面板

按Ctrl+S，将此文件保存在D盘myweb文件夹下。

接下来我们在表格中插入图形。在第一个单元格内单击，然后按下Ctrl+Alt+I键，弹出插入图片对话框，选择事先做好的logo图片，单击“Select”，图片就插到第一个单元格中了。

在属性面板中可以看到，此图片宽度为170像素，我们可以将第一个单元格的宽度也调整为170像素宽。按一下右方向键，光标就定位在第一个单元格中了，这时属性面板中显示的是第一个单元格的属性，我们在宽度输入框中填入170，再敲一下回车，第一个单元格就刚好容纳下所插图形了。同样，我们可以在第二个单元格中插入Banner 图形，第一个表格就做好了。

制作第二个表格

下面我们制作栏目切换条。

这是一个一行、五列的表格，我们用上面的方法插入，表格的宽度也设为590Pixels，Border为1，单元格间距“Cell Spacing”为0。“插入表格”对话框将光标定位在某一单元格中，按下Ctrl+A键，选中所插入的表格，在属性面板中设置表格高度（H）为20 Pixels。

表格的属性

下面我们进行各种颜色设置，使表格有背景色和立体效果。先设置表格背景色，单击属性面板的最下排颜色选择按钮“Bg”，从弹出的颜色列表中选择一种绿色（#A3C06D）。接下来设置表格边框高亮度效果（Light Brdr）的颜色，单击颜色选择按钮，从颜色列表中选择一种深颜色，这里我们选择“#003300”，用同样方法设置表格阴影效果（Dark Brdr）颜色为#FFFFFF，表格就变成了这个样子。

在属性面板上设置立体效果

我们把最后一个单元格背景设置为另一个颜色，表示此项为当前激活的选项。在最后一个单元格内单击鼠标，此时属性面板变为当前单元格的属性，用上面的方法设置背景颜色为#CCCC33，这里再告诉你一个选择颜色的方法，当单击颜色选择按钮后，鼠标指针变为一个吸管的样子，这时就可以在屏幕上吸取颜色了，你可以直接到我们的例子中吸取所需颜色。如果你懒得这样做，就直接在颜色输入框中键入

“#CCCC33”。

设置单元格背景

你可能会问这样一个问题，最后一个单元格刚才是绿色，现在又是黄色了，这是怎么回事？这要从表格（table）、表格行（tr）和单元格（td）的格式的优先级说起。如果我们同时对表格、表格行和表格单元格设置了不同格式，比如设置了不同的背景颜色，那么那一个优先显示呢？其优先级为：表格单元格>表格行>表格，也就是td>tr>table，所以这里我们将此单元格的颜色设置为黄色，而将整个表格颜色设置为绿色，则在整个表格中只有这个单元格颜色为黄色，其他单元格颜色都为绿色。最后我们在此表格内加上文字和相应的链接，第二个表格就完成了。

表格的嵌套

在这个例子中，下面部分是一个大表格，这个表格共有三行两列，一些单元格中还插入了一个新的表格。下面我们开始制作，先在第二个表格下插入一个三行两列，宽为590Pixels的表格。先看看这条红线是怎么做出来的。在第一行第一个单元格内单击，然后向右拖动鼠标，将第一行的两个单元格选中，按下M键，选中的单元格被合并为一个单元格。合并单元格在属性面板中，设置此行高度H为1，背景颜色为红色。再按下Ctrl+Tab键，调出HTML源代码编辑窗口，显示光标所在位置的源代码为：我们将单元格内的占位字符“ ”删除，关闭HTML编辑窗口，表格第一行就显示为一条红线了。用表格产生红线下面我们制作中间左侧的栏目。在第二行第一个单元格内单击鼠标，设置此单元格宽度为110Pixels，然后在此单元格内插入一个表格。按下Ctrl+Alt+T键，设置行数（Rows）为6，列数为1，border=0，单击宽度（Width）后面的下拉列表，从中选择“Percent”（百分比），在文本框中输入100，单击“OK”，所插入的表格刚好充满第一个单元格。

在单元格中嵌套表格

注意：嵌套表格的宽度受表格单元的限制，也就是说所插入的表格宽度不会大于容纳它的单元格宽度，即不会大于110Pixels。比如我们现在看一下表格内的单元格有多宽，可以将光标定位在第一个单元格内，然后单击属性面板下的这个按钮，就会将表格宽度从百分比相对值转换为实际像素值，可以看到单元格宽度为108Pixels，再点一个旁边的按钮，又将表格宽度转换为百分比相对值。表格宽度值的转换你可能要问，为什么单元格宽度不是110Pixels呢？这是因为表格线本身宽度为1，两侧框线就占去了2个像素，所以单元格实际宽度为108Pixels。在计算表格或单元格宽度和高度时应该注意这一点。我们刚插入的表格添加背景图。选中此表格，在属性面板中单击背景图选项右侧的图标，，弹出图片选择对话框，选一个带过渡色的横条图片，这个图片就被平铺在表格内了。

给表格添加背景图

注意，这个图片是事先处理好的，其宽度与表格宽度相同。

好了，你可以在这个子表格内写上文字，设置字的大小为2，居中对齐，并加上链接。其中“报刊杂志”条目不用加链接，字的颜色也可设置得不同，表示当前页面属于此条目。最后一个内插入一个动态Gif图，在图的属性中，设置Alt为“给我来信”，链接为“mailto:ketang.pc@https://www.360docs.net/doc/5011989460.html,”，这样在浏览器中，就会启动发送邮件窗口，便于网友直接给你来信。

加入邮件链接好，最后再看一下页面吧！表格的编辑我们再来制作右侧的表格。在主表格第二行的第二个单元格内插入一个七列四行的表格，表格宽还是100%Percent，边框的高亮颜色为黑色，边框的阴影颜色为白色，表格线宽度为1，背景色为#E9FCDA，这就是完成后的效果。

各列的宽度可以根据需要进行调整，方法是将鼠标指针置于列间的竖线上，鼠标指针变为左右双向键头，按下鼠标左键拖动就可以改变列宽了。

改变列宽

如果想让所有的列都一样宽，可以设置各列宽度，这里有四列，所以可以先将鼠标指针置于表格上面，当鼠标变为向下箭头时单击，就可选中此列，然后设置此列宽度为25%Percent，用同样的方法设置其他列的宽度也占表格总宽度的25%，所有列就都一样宽了。里面的内容和链接就由你自己完成了。

因为这个表格是页面的主体内容，行和列数都可能会调整，比如内容又增加了不少，我们该如何操作呢？

如果要添加一行，可以将光标定位在表格内的某一行内，单击鼠标右键，在弹出的菜单中选择“Table”下的“Insert Row”，就在光标所在行的上面增加了一个空白行（最简便的方法是按下Ctrl+M键）。如果想在表格最下面添加一行，可以将光标定位在末行的最后一个单元格内，按一下Tab键就可以了。同样，我们利用右键菜单中的Table->Insert Column命令增加列。

要是增加的行数或列数较多，有更方便的方法，在表格框线上单击，将表格选中，在属性面板中显示当前表格行数为7，列数为4，我们直接将或改为行数为15，列数为5，回车。

如果要删除某一行或某一列，那就很简单了。

比如我们要将某一行删除，可将鼠标指针放在该行的左框线处，鼠标指针变为一个向右的黑箭头，按一下鼠标，该行就被选中了，按一下“Delete”键，这一行就被删除了。合并单元格同样，要删除某一列，可以将鼠标放在表格上面的框线上，当鼠标变为向下箭头时，单击选中某一列，按“Delete”就将选中列删除。合并单元格

利用鼠标拖动也可以选中几行或几列，选中的行或列可以进行复制、剪切或删除等操作。这些操作都很简单，这里就不多讲了。

完成整个页面

好，页面的大部分都设计完成了，还有下面这个表格，如果你已经听明白了，就可以跳过去不听了，如果想加深印象，就再跟我完成它。

将光标定位在最后一行的某一单元格中，然后点一下标签选择器中的{tr}，标签选择器显示为“{body}{table}{tr}{td}”，表示此行被选中，单击属性面板中的合并单元格按钮，此行变为一个单元格。在此单元格内插入一个一列二行的表格，选定表格，在属性面板中设置表格对齐方式Align为居中对齐（Center），设置其宽度为60%。设置表格对齐方式然后将光标定位在第一行内，单击属性面板中的拆分单元格按钮，弹出“Split Cell”对话框，选择“Columns”，表示拆分为列，单击“OK”，第一行就被拆为两列，通过拖动调整单元格宽度。

拆分单元格

在第一个单元格内输入“添加到收藏夹”，使文字居中，Size为2，选中文字，在属性面板中的链接（Link）中输入：“javascript.:window.external.AddFavorite

('https://www.360docs.net/doc/5011989460.html,','笨象先行')”，这样在浏览器点击此链接时，会弹出对话框，可以将你的主页加到收藏夹中。按下Tab键，光标跳到下一个单元格，输入文字“笨象先生欢迎您经常光临！”，设置字体颜色为#CC0033，字的大小为2，文字为斜体，并将“笨象先生”四个字加粗显示。选中这句话，按下Ctrl+Tab 键，切换到HTML编辑器窗口

.页面尺寸：

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。

2.整体造型：

什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然

不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

3.页头：

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

4.文本：

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5.页脚：

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

6.图片

图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

7.多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

。