3.1-表的应用(二)-《网页设计制作》.pptVIP

DreamWeaver表格妙用 网页制作 DreamWeaver表格妙用 线框制作 页面设计中的层次感 1、线框制作 在DreamWeaver里，表格被更多的应用在布局网页，定位内容上。其实除了这些“大功能”的运用，通过各种变通的方法，表格还能实现很多在设计中一般难以达到的效果。 “线框”对象在网页中是经常见到的，比如一条细线，一个方框等等都在包含之列。在某些效果的协调制作中，“线框”的修饰是必不可少的。 1 跨幅细线的制作 步骤： 插入一行一列的表格； 将其中的“边框”，“边距”，“间距”值全部设定为0 ； 切换到单元格的属性设置窗口，将单元格的“背景颜色”设定为“红色”（为最终细线的颜色，可自由设置），同时把“高”设置为“1”， 2?细线边框的制作 细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？ 细线边框的制作步骤： 将属性板中，“边框”、“边距”设置为“0”，“间距”设置为“1”。 将表格的“背景色”设定为“红色”，同时将单元格的“背景色”设定为同网页背景色-“白色”， 3 隔距边框的制作 “隔距边框”在网页中主要用来排列各个栏目或频道的项目列表用的，为了方便大家理解，先把制作完成以后的效果图给大家展示下，如下：? 下面是相应的制作过程，（以制作三框隔距为例说明） 首先在网页中插入一个1行3列的表格对象，在插入过程中直接把“边框”设定为0， “边距”设定为1 ，“间距”设定为2，； 将3个单元格对象的“背景色”设定为“红色”，注意该颜色即隔距边框的颜色。 依次在三个单元格中插入一个表格对象，将“边框”，“间距”，“边距”全部设定为“0”，同时在属性板中将每个表格的背景颜色均设定为同网页背景色“白色”； 2、页面设计中的层次感 （ 1 ）新建一个页面文件，然后在编辑区域中插入一个 2 × 1 的表格，并设置表格的基本属性参数 （ 2 ）设置表格。将光标置于第一行的单元格中，再将单元格的背景颜色设置为 #69A538，并应用同样的方法将第二行单元格的背景颜色设置为 #8FCB5A。设置完成后将光标至于第一行的单元格中，然后在此单元格中插入一个 1 × 5 的表格，并设置表格的基本属性参数 （ 3 ）录入文字并设置单元格：在新插入的表格的所有单元格中输入文字，然后选中所有单元格，设置单元格的相关属性（背景色#728d43，字体颜色#e1f0d0） （ 4 ）改变其中一个单元格的文字颜色和背景颜色，使其突出显示（背景色#8fcb5a，字体颜色#ffffff） 表格使用经验 经验（一）：为什么说表格比图层排版要好？ 一开始学DW的朋友，都比较喜欢用图层排版，其主要原因是图层可以把对象放到你想放的任意位置，并且只需拖动鼠标，看起来非常轻松，但用F12预览就面目全非，后悔了吧？还是用表格排版吧。 层的定位方式与表格的不同，层采取的定位方式是动态定位方式，它的定位靠的是两个参数Left和Top，这两个参数设置层框架与浏览器的边框的的距离，无论你是在最大化，还是在不同的分辨率下他都始终在一个位置，而表格在不同的情况下它将有所变化。 表格使用经验 经验（二）：如何消除分辨率的差异？ 怎样让你的网页兼容性更好，你只需把表格的宽度设为100%即可该决这个问题。 表格使用经验 经验（三）：为什么我的表格在预览时发生变化？ 我们经常会在做完表格排版后预览，发现表格的样子变了，不是有的高度变长了，就是宽度变宽了。出现这个情况的原因是，你在排版的时候，把表格高度或长度用鼠标拖长或拖短过，这样DW就会在你网页代码中自动加入一些宽的长度代码或高度代码。由于在排版的过程中，经常会这样做，所以你的网页代码加了许多的这些高和宽的代码，当你预览的时候浏览器就会按这些代码来显示，于是就会出现表格样子发生变化。 好在DW为你提供了决办法，点属性面板的“清除行高”（除掉表格中定义高度的Html语句） ，而“清除列宽”（除掉表格中定义宽度的Html语句）你最好少用，用不好会弄巧成拙? 表格使用经验 经验（四）：关于表格背景图片的一个技巧。 大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小。 表格使用经验 经验（五）：如何利用表格实现画中画，也就是页中页效果？ 网页的排版大多使用表格，利用一个表格单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。 例如 ＜html＞　　＜head＞　　＜title＞范例＜/title＞　　＜bod