《表格的应用二《网页设计制作》.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.单一表格的结构尽量整齐。,