网页设计教程教你作简单网页表格.docVIP

当前位置：学院首页 主页制作 Dreamweaver 正文 DWMX 2004从零开始：表格定位网页(2) 转自： 时间：2003-11-17 19:46:17 文/赵江 　　使用表格可以清晰地显示列表的数据，实际上表格的作用远远不止显示数据，它在网页定位上一直起着重要的作用，尤其是对于使用非IE浏览器的网友来说，使用表格定位的网页比使用图层定位的网页更具有优势。 　　一、创建表格 　　第一步：在Dreamweaver MX 2004中运行“Insert→Table”命令，弹出属性设置窗口，其中“Rows”和“Columns”分别对应着表格的行数和列数，“Table width”表示表格的宽度，而“Border thickness”则是边框的宽度，同时还可以设定表格的样式，根据自己的需要来设置表格的相应属性即可。 　　小提示：表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的60%，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。 　　第二步：点击窗口中的“OK”按钮之后即可在Dreamweaver MX 2004中新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行调整。 　　二、基本使用 　　在创建了上述的表格之后，我们就可以对它进行调整使用。比如我们需要制作图1所示的表格，就可以先插入一个四行三列的表格，然后对其进行下述操作。 　　第一步：在表格第一列的上面两个单元格中按下并拖动鼠标，此时可以选中两个单元格。接着点击属性模板中的“Merges selected cells using spans”按钮，这样就把选中的两格合并成为一个单元格。按照这种方法再将表格第一行右侧的两个单元格合并为一个单元格。 　　小提示：选中一个单元格之后点击属性面板中的“Splits cellsintosrows or columns”按钮可以把单元格拆分为多个行或者列。 　　第二步：将表格第一列的三个单元格全部选中，再将属性模板中的背景颜色(Bg)一项设置为“#FFFF00”，这样表格第一列中的单元格背景全部变为黄色。 　　第三步：在表格中输入相应的文本，为了美观可以在属性面板中进行居中设置。 　　第四步：为了使表格产生立体效果，可以将整个表格选中，然后在属性面板中设定表格边框的宽度(Border)为7，并且将边框颜色(Border color)设置为蓝色即可。 　　小提示：通常选取整个表格比较困难，在此提供四种常用的方法：1.把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。2.运行“Modify→Table→Insert Table”命令选择整个表格。3.在单元格中右击鼠标，并且从弹出菜单中选择“Table→Insert Table”命令选取整个表格。4.用鼠标点击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。 　　完成上述操作之后，我们就可以在Dreamweaver MX 2004中定制出颇具专业水准的表格了。 　　三、表格定位 　　其实表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页。下面就来看看图2所示的网站是如何通过表格实现的。 　　1.标题和导航区 　　网页最上部由两个大的表格组成：上面表格是图片区，下面是导航区。图片区为一行一列，通过“Insert→Image”命令插入网站的标题图以及Logo图标。导航区则是一个一行九列的表格，分别输入输入各个子栏目的名称，然后通过“Insert→Hyper Link”命令来创建每个导航栏目的链接。 　　2.正文区 　　正文区总得说来是由一个一行三列的大表格构建而成，其中每一列再通过插入单独的表格或者拆分的方法来形成多个区域并输入相应的信息。比如最左边一列就可以插入一个5行一列的表格，分别用来显示Logo图标以及相应的文字内容；中间一列可以拆分为3至4个单元格，每个单元格用于显示不同栏目的主要内容提示；右边一列也可以拆分为5个区域显示不同的内容。这样在一个大表格中划分出多个小单元格组成了网页的主要内容。至于具体的单元格操作在此就不再赘述，大家可以自己试着体会一下。 　　虽然通过表格可以实现最基本的网页定位，但是这种方法也并不是没有缺点，它的最大问题在于表格内容下载比较耗时，往往要等一个表格中全部内容下载完成后才能显示该表格内容，因此尤其要注意表格的嵌套使用，尽量不要嵌套过多的表格以影响页面的下载速度