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

《表格的应用二《网页设计制作》.ppt》由会员分享，可在线阅读，更多相关《表格的应用二《网页设计制作》.ppt（25页珍藏版）》请在三一办公上搜索。

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、嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。,例如,htmlheadtitle范例/titlebodytable border=1 width=100%trtdIFRAME src=example.htm width=300 heitht=100/IFRAME/td/tr/table/body/html,表格使用经验,经验（六）：在使用表格中应注意那些问题？1.整个表格不要都套在一个表格里，尽量拆分成多个表格。2.表格的嵌套层次尽量要少，最好嵌套表格不超过3层。3.单一表格的结构尽量整齐。,