表格的应用二《网页设计制作》

《表格的应用二《网页设计制作》》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、DreamWeaver表格妙用网页制作DreamWeaver表格妙用线框制作页面设计中的层次感1、线框制作在DreamWeaver里，表格被更多的应用在布局网页，定位内容上。其实除了这些“大功能”的运用，通过各种变通的方法，表格还能实现很多在设计中一般难以达到的效果。“线框”对象在网页中是经常见到的，比如一条细线，一个方框等等都在包含之列。在某些效果的协调制作中，“线框”的修饰是必不可少的。1>跨幅细线的制作步骤：插入一行一列的表格；将其中的“边框”，“边距”，“间距”值全部设定为0；切换到单元格的属性设置窗口，将单元格的“背景颜色”设定为“红色”（为最终细线的颜色，可自由设置）

2、，同时把“高”设置为“1”，2>细线边框的制作细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？细线边框的制作步骤：将属性板中，“边框”、“边距”设置为“0”，“间距”设置为“1”。将表格的“背景色”设定为“红色”，同时将单元格的“背景色”设定为同网页背景色-“白色”，3>隔距边框的制作“隔距边框”在网页中主要用来排列各个栏目或频道的项目列表用的，为了方便大家理解，先把制作完成以后的效果图给大家展示下，如下：下面是相应的制作过程，（以制作三框隔距为例说明）首先在网页中插入一个1行3列的表格对象，在插入过程中直接把“边框

3、”设定为0，“边距”设定为1，“间距”设定为2，；将3个单元格对象的“背景色”设定为“红色”，注意该颜色即隔距边框的颜色。依次在三个单元格中插入一个表格对象，将“边框”，“间距”，“边距”全部设定为“0”，同时在属性板中将每个表格的背景颜色均设定为同网页背景色“白色”；2、页面设计中的层次感（1）新建一个页面文件，然后在编辑区域中插入一个2×1的表格，并设置表格的基本属性参数（2）设置表格。将光标置于第一行的单元格中，再将单元格的背景颜色设置为#69A538，并应用同样的方法将第二行单元格的背景颜色设置为#8FCB5A。设置完成后将光标至于第一行的单元格中，然后在此单元格中插入一

4、个1×5的表格，并设置表格的基本属性参数（3）录入文字并设置单元格：在新插入的表格的所有单元格中输入文字，然后选中所有单元格，设置单元格的相关属性（背景色#728d43，字体颜色#e1f0d0）（4）改变其中一个单元格的文字颜色和背景颜色，使其突出显示（背景色#8fcb5a，字体颜色#ffffff）表格使用经验经验（一）：为什么说表格比图层排版要好？一开始学DW的朋友，都比较喜欢用图层排版，其主要原因是图层可以把对象放到你想放的任意位置，并且只需拖动鼠标，看起来非常轻松，但用F12预览就面目全非，后悔了吧？还是用表格排版吧。层的定位方式与表格的不同，层采取的定位方式是动态定位方式

5、，它的定位靠的是两个参数Left和Top，这两个参数设置层框架与浏览器的边框的的距离，无论你是在最大化，还是在不同的分辨率下他都始终在一个位置，而表格在不同的情况下它将有所变化。表格使用经验经验（二）：如何消除分辨率的差异？怎样让你的网页兼容性更好，你只需把表格的宽度设为100%即可该决这个问题。表格使用经验经验（三）：为什么我的表格在预览时发生变化？我们经常会在做完表格排版后预览，发现表格的样子变了，不是有的高度变长了，就是宽度变宽了。出现这个情况的原因是，你在排版的时候，把表格高度或长度用鼠标拖长或拖短过，这样DW就会在你网页代码中自动加入一些宽的长度代码或高度代码。由于在排

6、版的过程中，经常会这样做，所以你的网页代码加了许多的这些高和宽的代码，当你预览的时候浏览器就会按这些代码来显示，于是就会出现表格样子发生变化。好在DW为你提供了决办法，点属性面板的“清除行高”（除掉表格中定义高度的Html语句），而“清除列宽”（除掉表格中定义宽度的Html语句）你最好少用，用不好会弄巧成拙?表格使用经验经验（四）：关于表格背景图片的一个技巧。大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小。表格使用经验经验（五）：如何利用表格实现画中画，也就是页中页效果？网页的排版大多使用表格，利用

7、一个表格单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。例如＜html＞　　＜head＞　　＜title＞范例＜/title＞　　＜body＞　　＜tableborder="1"width="100%"＞　　＜tr＞　　＜td＞＜IFRAMEsrc="example.htm"width="300"hei