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

Dreamweaver网页设计制作系列课件。

DreamWeaver表格妙用网页制作

Dreamweaver网页设计制作系列课件。

DreamWeaver表格妙用 线框制作 页面设计中的层次感

Dreamweaver网页设计制作系列课件。

1、线框制作

在DreamWeaver里，表格被更多的应用 在布局网页，定位内容上。其实除了这些 “大功能”的运用，通过各种变通的方法， 表格还能实现很多在设计中一般难以达到 的效果。

Dreamweaver网页设计制作系列课件。

“线框”对象在网页中是经常见到的，比如 一条细线，一个方框等等都在包含之列。 在某些效果的协调制作中，“线框”的修 饰是必不可少的。

Dreamweaver网页设计制作系列课件。

Dreamweaver网页设计制作系列课件。

1> 跨幅细线的制作

Dreamweaver网页设计制作系列课件。

步骤：

插入一行一列的表格； 将其中的“边框”,“边距”,“间距” 值全部设定为0 ; 切换到单元格的属性设置窗口，将单元格 的“背景颜色”设定为“红色”(为最终 细线的颜色，可自由设置),同时把“高” 设置为“1”,

Dreamweaver网页设计制作系列课件。

2> 细线边框的制作

细线边框是网页中定位区分内容常用的一 种方法，配合特定图片的使用，往往能够 达到不错的效果，那么如何制作细线边框 呢？

Dreamweaver网页设计制作系列课件。

Dreamweaver网页设计制作系列课件。

细线边框的制作步骤：

将属性板中，“边框”、“边距”设置为 “0”,“间距”设置为“1”。 将表格的“背景色”设定为“红色”,同 时将单元格的“背景色”设定为同网页背 景色-“白色”,

Dreamweaver网页设计制作系列课件。

3> 隔距边框的制作

“隔距边框”在网页中主要用来排列各个栏 目或频道的项目列表用的，为了方便大家 理解，先把制作完成以后的效果图给大家 展示下，如下：

Dreamweaver网页设计制作系列课件。

下面是相应的制作过程，(以制作三框 隔距为例说明)

首先在网页中插入一个1行3列的表格对象， 在插入过程中直接把“边框”设定为0, “边距”设定为1 ,“间距”设定为2,; 将3个单元格对象的“背景色”设定为 “红色”,注意该颜色即隔距边框的颜色。 依次在三个单元格中插入一个表格对象， 将“边框”,“间距”,“边距”全部设 定为“0”,同时在属性板中将每个表格的 背景颜色均设定为同网页背景色“白色”;

Dreamweaver网页设计制作系列课件。

2、页面设计中的层次感

Dreamweaver网页设计制作系列课件。

Dreamweaver网页设计制作系列课件。

( 1 )新建一个页面文件，然后在编辑区域中插入一个 2 × 1 的 表格，并设置表格的基本属性参数

Dreamweaver网页设计制作系列课件。

( 2 )设置表格。将光标置于第一行的单元格中，再将单元格的背景颜 色设置为 #69A538,并应用同样的方法将第二行单元格的背景颜色 设置为 #8FCB5A。设置完成后将光标至于第一行的单元格中，然后 在此单元格中插入一个 1 × 5 的表格，并设置表格的基本属性参数