网页的排版 表格篇.docx

1、网页的排版 表格篇网页的排版 表格篇网页离不开表格，决大多数的表格都是以表格为主体制作的表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了网页设计师的水平。使用表格能使你的网页变得更加的清楚，使人看起来更有条理、更加直观，但它的使用有一个小小的缺陷：它会使你的网页显示的速度变慢一点。我们知道一般的文字显示是逐行显示的，即文字从服务器上传了过来，尽管不全，但它还是会将传到的部分先显示出来，以方便浏览，而用了表格就不同了，表格一定要等到整个表格的内容全部传过来了之后，

2、才能在客户端的屏幕上显示出来，即表格是整个一块儿出现的。因此我们在使用表格的同时要注意，如果表格包含的内容不是很多，就可以利用表格来更好的工作，但如果表格中包含的内容很多，此时最好别用表格结构，否则它会使你的网页出来的速度奇慢无比。表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。下面看看我们使用表格制作的页面的实例这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。1

3、、在插入栏中选择按钮或“插入”菜单选“表格”。系统弹出表格对话框。行：2。列：2。其余的参数都保留其默认值。 2、在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。4、单击左边的单元格，然后输入文字，并调整大小，如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽可。6、在右边下单元格内插入图片。页

4、面的基本样子有了。但是单元格周围的立体边框还存在。7、光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。将表格的边框属性：border=“0”选择“上”格式，设计一个三行三列的表格，初看好像表格的界面并没有多大的变化，但是我们再看看“两者”面板下的源代码，发现第一行的标记和下面两行的标记不同。如果我们再在表格中输入文字，发现第一行的文字默认居中，并且是粗体显示，而下面两行的文字还是默认靠左排列，没有粗体效果。 驯服不听话的网页表格在使用Dreamweaver制作主页的时候往往需要

5、改变表格的高度。然而有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原来的样子。出现这种情况的原因在于我们已经为表格提供了一个固定的高度，当我们要改变表格的高度，尤其是压缩表格的时候，表格的高度仍然保持原来的设定值，其直观表象就是无论你怎样拖动表格的边框，表格的高度都不会变化。在这种情况下，我们只需要去除掉表格高度的设定，然后拖动表格的边框就可以了。那么应该如何去除表格的高度设置呢? 首先需要选定表格。比较简单的方法是，将光标移动到表格内，然后按“Ctrl+A”组合键，选定了表格以后，在属性框中点击一下“清除行高”图标（图中加框处的按钮），表格的高度设定值就被取消了。这时表

6、格的高度会按照表格的内容自动匹配高度。 当然删除表格高度的方法不只上述一种方法，我们也可以选中表格，在表格的属性框中直接删除掉表格的高度值。 表格排序功能 教育信息化时代，考试成绩也要求上网公布。考试成绩制作成一个HTML文件，将成绩按名次排列，可是所有的成绩已经用Dreamweaver MX制作好了，若先用Execl按要求排序，再导入到Dreamweaver MX制作。在Dreamweaver MX中，您可以对一列的内容进行简单排序，也可以对两列的内容进行更为复杂的排序。不能对那些包含有合并单元格的表格进行排序。下面就看一下具体的排序过程吧！1.将光标移动到表格内任一单元格内，或选定表格，单

7、击“命令/排序表格”，打开排序表格对话框。2.在对话框中进行选择： 导入数据变成表格有的时候，我们经常需要把一些信息一些资料发布到网上以便联系，但是随着客户资料的越来越多，你的网上更新也越来越力不从心了？ dreamweaver本身就提供了数据导入与排序的方法。1、 例如我们现在手头有个kehu.txt文件，里面是*公司客户联系单2、 （1）打开DW MX，新建一个html页面，选择菜单栏插入/表格对象/导入表格式数据。（2）出现导入表格式数据窗口，单击“浏览”按钮，选择存放数据的文本文件，在定界符该项中要和文本文件里的分隔符相对应，因为kehu.txt文件里用的是逗号，所以选择了逗号，其它各

8、项可根据各位需要进行选择修改。（3） “确定”。 去除DW MX 2004表格宽度辅助Dreamweaver MX 2004新增加了表格宽度辅助线功能，让我们在编辑网页表格的时候能清楚地看到表格中各单元的宽度以及变化，很直观。但是如果我们不想让Dreamweaver MX 2004自动显示宽度辅助线，该怎么办呢？下面介绍三种办法。 取消表格宽度辅助线显示以后，如果想再次显示，只要按方法二、三设置好“表格宽度”显示即可。方法一选中表格，点击宽度辅助线数字和小三角形，从菜单中选择“隐藏表格宽度”。方法二点击工具栏上的视图图标，从下拉菜单中选择“可视化助理”，把“表格宽度”前面的钩去掉。方法三选择菜

9、单“查看可视化助理”，把“表格宽度”前面的钩去掉。 消除任意缩放浏览器窗口对网页的影响一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目了，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。 大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的5

10、0%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。 删除, 恢复，重复 输入数据到表格能够节省大量的操作时间，但是Dreamweaver中最有用的一个功能是它的历史窗口。在这个窗口中，一旦打开文档，随后执行的每一个操作都被记录下来，这样，你就可以跟踪操作行为并且简单地undo或者重复最后一步。但是不能保存超过50步,这是个默认数

11、值。要提高这个数值，选择“编辑/首选参数”，确认处于“普通”功能页面，在 历史步骤最大值 字段中输入一个较高数值。请注意，设定的保存步骤数目越大，消耗的内容就越大。 解决在Dreamweaver中不支持中文文件名的方法用Dreamweaver制作网页时，如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的，在用IE浏览器浏览时可能显示不出来。以至于大家不得不将用到的素材全改为英文文件名，然后再在Dreamweaver中引用。随着素材的增多，因为是英文文件名，要查找某个文件是多么不方便呀！经过摸索，发现Dreamweaver可以插入以中文命名的素材、也可以链接以中文命名的网页。在插入

12、素材或链接网页后切换到代码窗口，将乱码文件名改为相应的中文文件名即可。注意：“属性”面板中已显示出插入或链接的中文文件名，但在代码窗口中显示的是乱码，你只需按照“属性”面板所显示的文件名将代码中的乱码改正过来即可。这样再用IE浏览器浏览就可以显示出来。 Dreamweaver 表格经验谈经验（一）：为什么说表格比图层排版要好？一开始学DW的朋友，都比较喜欢用图层排版，其主要原因是图层可以把对象放到你想放的任意位置，并且只需拖动鼠标，看起来非常轻松，但用F12预览就面目全非，后悔了吧？还是用表格排版吧。层的定位方式与表格的不同，层采取的定位方式是动态定位方式，它的定位靠的是两个参数Left和To

13、p，这两个参数设置层框架与浏览器的边框的的距离，无论你是在最大化，还是在不同的分辨率下他都始终在一个位置，而表格在不同的情况下它将有所变化。尤其当你用表格的同时又用图层排版，这样的效果会让你痛苦一辈子。图层没用吗？当然有用，一般用它来做一些特效，用的好可以让你的主页锦上添花。经验（三）：为什么我的表格在预览时发生变化？我们经常会在做完表格排版后预览，发现表格的样子变了，不是有的高度变长了，就是宽度变宽了。出现这个情况的原因是，你在排版的时候，把表格高度或长度用鼠标拖长或拖短过，这样DW就会在你网页代码中自动加入一些宽的长度代码或高度代码。由于在排版的过程中，经常会这样做，所以你的网页代码加了许

14、多的这些高和宽的代码，当你预览的时候浏览器就会按这些代码来显示，于是就会出现表格样子发生变化。好在DW为你提供了决办法，按Ctrl+F3后用鼠标点击表格边框出来表格属性面板，点属性面板的Clear row heiht（除掉表格中定义高度的Html语句） ，而Clear Column Wedths（除掉表格中定义宽度的Html语句）你最好少用，用不好会弄巧成拙，如果你的网页中用到割过的图片，此时用它来消除图片间的空隙非常有效。 经验（六）：如何利用表格实现画中画，也就是页中页效果？网页的排版大多使用表格，利用一个表单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表

15、格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。我写个最简单的例子代码： 范例 插入被嵌入页的关键代码是：。example.htm是被嵌入的页面，标签还有一些可用的参数设置如下：marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=20，单位是pix，下同。marginheight:网页中内容在表格顶部预留的高度；hspace:网页右上角的的横坐标；vspace:网页右上角的纵坐标；frameborder:是否显示边缘；填1表示是，填0表示否scrolling:是否出现滚动条；

16、填1表示是，填0表示否 巧用 Dreamweaver 的表格功能用表格来作网页排版定位，这是从所周知的事，我在这里再向你介绍几种其它的用途。一、用表格制作线条 在Dreamweaver3中虽有插入水平线的功能，但他插入的线条无法改变颜色，对垂直线条更是无能为力了。但我们可以用表格来实现，用表格来制作线条还有一个优点就是可方便地改变线条的粗细、长短和颜色，要是用图象就麻烦多了。下面就是用表格作出来的线条： 考虑到表格是以行为单位来定位的，为了能更方便的定位线条，我们把表格放到层上，这样你就可以任意把线条放到任何位置了。具体作法如下： （1）单击功能面板上的插入层图标，在页面上画一个层，再在功能面

17、板上点击插入表格图标，在弹出的表格面板上把表格的行数和列数均设置为1； （2）选取表格，在表格的属性面板上把“cellpad、“cellspace、“border均设置为“0，把“W设置为“100%，“H设置为2pixels（象素），设置好表格的背景色（也就是线条的颜色）。（3）在单元格中点一下，在单元格的属性面板上把“W设置为“100%，把“H设置为2pixels（象素）； （4）在快速启动栏上点击源代码检示窗图标，在源代码编辑窗中把单元格中的“”（“空格”代码）删去。 到此，一条特定颜色的水平线已画好。若要改变线条颜色，只要改变表格的背景色就行了；若要改变线条高度(即线条的粗细），只要修改

18、（2）、（3）中的“H即可；改变（2）、（3）中的“W，就可改变线条的长度；若要把水平线变为垂直线，只要把（2）、（3）中的“W和“H的值换一下就行了，是不是方便极了。 二、用表格实现图文绕排使一行文字位于图象的两侧，通过调整图象的对齐属性可以很容易实现，但要想使图象位于多行文字的中间，也就是所谓的文字环绕，只能借助于表格（或层）了。 制作方法：1）先插入一个层，其目的是便于这段绕排的文字和图象能拖动定位，当然也可以直接操作第二步； 2）在层上插入一个3行3列的表格，并把第一行的三个单元格、第三行的三个单元格分别合并成一个单元格，便于输入文字；3）在第二行的第二个单元格中插入图片，至于放什么图

19、片（或动画）你自己确定好了； 4）现在你就可以输入文字了，输入文字的一般顺序是先在表格的第一行开始，其次是第二行第一个单元格-第二行第三个单元格-第三行。 三、用表格实现页中页（或称为画中画） 网页的排版大多使用表格，利用一个表格单元可以嵌入一个网页，你知道吗？看下面的示例： 这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对整页进行更新，是不是很方便。我写个最简单的例子代码： 页中页示例 插入嵌入页的关键代码是：。iframesy.htm是被嵌入的页面文件名，这个页可不能忘记上传，标签的

20、作用相当于在网页的指定位置开了一个窗口，窗口的宽度就是“width的值，窗口的高度就是“height的值，一般情况下应与所在单元格的大小一致。标签还有一些可用的参数设置如下： marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=20，单位是pix，下同。 marginheight:网页中内容在表格顶部预留的高度；hspace:网页右上角的的横坐标； vspace:网页右上角的纵坐标； frameborder:是否显示边缘，填“1表示“是”，填“0表示“否”，默认值是“1； scrolling:是否出现滚动条，填“1表示“是”，填“0表示“否”，默认值是“1；

21、在实际制作时，只要把代码“复制到与之间，然后把“iframe.htm 换成你要嵌入的网页文件名就行了，显示页面窗口的大小你根据需要调整吧。如何实现文字的自动换行我们在编制主页的时候，有时候会发现自己制作的主页不能够自动折行（往往是在IE中能够自动折行，而在Netscape中不能），尤其是对一大段文字，必须拖动窗口的滑块跑很久才能看完后面的文字。很是费劲，对不对。如果这样的页面在网络上发布的话，肯定不会受到欢迎的。如何消除这种情况呢？这里我们介绍用表格来定位的方法：我们认为很有效的方法就是采用表格来对文字进行定位。当然这里的表格我们一定要给定它的绝对宽度（直接给定或间接给定宽度），那么输入的长文字便会自动的换行了。这里所说的直接给定表格的宽度，是指我们直接设定表格的width属性值为某一个设定值。如我们可以如下设定：.相对值是指采用相对于上一级表格的宽度，通常用一个百分数来表示。比如我们在一个相对外层的表格中设定了表格的宽度，那么在内层的表格中只要给出一个相对的宽度就相当于已经给定了表格绝对宽度。我们可以看看下面的源代码：. 这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。 如果你有兴趣，可以尝试着试一试