自从鸣涧上次给阿蒙卖了一个关子后,家里的电话总是响个不停,阿蒙按照上次鸣涧所说的方法制作出来的主页,总是感觉没有别人的好,版面格式编排设计也不满意,心里很不平衡。打了一百多个电话后,鸣涧终于不耐烦了,“好了,好了,我求求你千万别打电话了。在网页制作过程中,表格的应用是非常广泛的,在表格中组织和编排文本图形会更加灵活,可以制作别具一格的网页作品,我现在就告诉你如何使用表格吧。”
还别说,阿蒙一边听着电话那边鸣涧说,一边在电脑上操作,就基本掌握表格使用了,“哈哈,原来如此简单”。放下电话后,阿蒙决定自己再温习一下,仔细琢磨琢磨如何在Dreamweaver中使用表格。
插入第一个表格
我们要设计的网页的布局是,在页面最上方放置Logo和Banner广告条,中间的部分为栏目导航,下方为网页正文。单击“对象面板”中的插入表格图标,弹出“Insert Table”对话框(如图1)。设置Rows(行数)为“1”,Columns(列数)为“2”,表格Width(宽度)为“75Percent”, Border(表格线宽度)为“0”,完成后单击“OK”按钮。
dnet.com/school/web//2002/01/15/image/02801t01.jpg"图1
表格的属性
将光标放置在表格的第一个单元格中,此时在状态栏左侧的标签选择器处会显示“{body}{table}{tr}{td}”,如果点击“table”则选择整个表格,“tr”选中当前行,“td”选中单元格,现在“td”被加粗显示,说明光标处在单元格内。单击一下{table},此时表格周围显示一圈黑线,表示表格被选中,四周同时有黑色方块,可以拖动来改变表格的大小。
选中表格后,打开“属性”,可以查看表格属性,如果要改变表格属性,可以在“属性”中进行相关的修改(如图2)。
dnet.com/school/web//2002/01/15/image/02801t02.jpg"图2
插入图形
在第一个单元格内插入Logo图片,然后选中图片,发现图片宽度为205个像素,然后调整此单元格宽度也为205像素,这样单元格刚好可以容纳刚才插入的图形。完成后,再次选中图片,在“属性”中设置图形“Border”值为“1”。同样道理将Banner图形插入第二个单元格,同时选择第二个单元格,并在“属性”面板中单击“居中对齐”方式,使Banner图形居中显示。
制作栏目导航
打算设计栏目为5个,所以插入一个1行5列的表格,此时设置表格“boder”值为1,“Cell Spacing(单元格间距)”为“0”。选中插入的表格,在“属性”面板中设置表格高度(H)为“30 Pixels”(如图3)。
dnet.com/school/web//2002/01/15/image/02801t03.jpg"图3
制作立体导航
选中表格,在“属性”面板中设置“Cellspace”为“1”,设置“Bg Color(背景颜色)”值为“#000000”,“Brdr color”为“#FFFFFF”。接着单击状态栏“tr”,选中当前行,在“属性”面板中,设置“BG”为“#99CC99”,“Brdr”为“#FFFFFF”(如图4),这样就可以制作出一个带有立体效果的单航边框了。然后在表格中加入栏目名称,并使文字居中显示。
dnet.com/school/web//2002/01/15/image/02801t04.jpg"图4
设计正文区
在正文区域插入一个3行2列的表格,然后选中第一行两个单元格,点击鼠标右键,执行“Table/Merge cell”命令合并两个单元格并设置其背景色(BG)为“#CCCC99”。接着调节第2、3行的列宽,并合并2行2列、3行2列,并将正文插入到合并后的表格中。再设定左侧1列BG值为“#009966”,同时还可以根据自己的需要插入新的表格,并设定相关的内容,这里就不多说了。
基本设计好了,阿蒙觉着自己的主页漂亮多了。于是赶紧向鸣涧报告战果,当然啦,还得告诉鸣涧下次可得快些去他那里,否则电话就别想消停^_^。