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

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,DreamWeaver表格妙用,网页制作,DreamWeaver表格妙用,线框制作,页面设计中的层次感,1、线框制作,在DreamWeaver里，表格被更多的应用在,布局网页,，,定位内容,上。其实除了这些“大功能”的运用，通过各种变通的方法，表格还能实现很多在设计中一般难以达到的效果。,“线框”对象在网页中是经常见到的，比如一条细线，一个方框等等都在包含之列。在某些效果的协调制作中，“线框”的修饰是必不可少的。,1 跨幅细线的制作,细线边框的制作步骤：,将属性板中，“边框”、“边距”设置为“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语句）你最好少用，用不好会弄巧成拙?,表格使用经验,经验（四）：关于表格背景图片的一个技巧。,大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小。,表格使用经验,经验（五）：如何利用表格实现画中画，也就是页中页效果？,网页的排版大多使用表格，利用一个表格单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。,例如,htmlheadtitle范例/titlebodytable border=1 width=100%trtd,IFRAME src=example.htm width=300 heitht=100/IFRAME,/td/tr/table/body/html,表格使用经验,经验（六）：在使用表格中应注意那些问题？,1.整个表格不要都套在一个表格里，尽量拆分成多个表格。,2.表格的嵌套层次尽量要少，最好嵌套表格不超过3层。,3.单一表格的结构尽量整齐。,