当前位置导航:炫浪网>>网络学院>>网页制作>>Dreamweaver教程

深入学习和使用 Dreamweaver

1、用表格做网页

  表格在网页制作中有着举足轻重的地位,很多网站的页面都是以表格为框架制作的,这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能,灵活、熟练地使用表格,会使你在网页制作中如虎添翼。

(1)插入第一个表格

  我们看一下这个网页,虽然看起来很复杂,但主要是利用表格制作的(图1)。去掉文字和图形,可以看到其表格框架为下面这个样子(图2)。

页面的效果   页面的表格结构

图1 页面的效果(点击放大)             图2 页面的表格结构(点击放大)

  下面我们就利用表格制作这个网页。 启动Dreamweaver后,自动产生一个空文档。我们先来定义网页尺寸,不同的分辨率所查看的网页最终结果是不一样的,为了照顾更多的上网者,我们设置640×480分辨率(图3),单击状态栏上的窗口尺寸箭头,在弹出的列表中选择“600×300 (640×480),Maximized”,窗口就小了,做出的网页在640×480分辨率下会显示正常,编辑区大小为600×300,我们编辑的网页宽度就定为600,高度可以大些,在浏览器中显示时会有竖直滚动条。

设置页面尺寸

图3 设置页面尺寸

  我们看一下网页的布局,共有三个主要表格,最上面的表格放置logo图标和banner广告条,中间的表格为主要栏目切换条,最下面的表格为网页正文。 根据网页布局,我们先来制作最上面的表格。

  单击“对象面板”中的插入表格图标,弹出“Insert Table”对话框(图4)。设置行数(Rows)为1,列数(Columns)为2,表格宽度(Width)为590Pixels,表格线宽度(Border)为0,另两个选项“Cell Padding”表示表格内文本与表格线的距离,“Cell Spacing”表示表格单元格之间的距离,这里我们不做设置,单击“OK”,表格就插进来了。

“插入表格”对话框

图4 “插入表格”对话框

  将光标定位在表格的第一个单元格内,可以看到状态栏左侧的标签选择器处显示为“{body}{table}{tr}{td}”,其中table表示表格,tr表示表格中的行,td表示单元格,现在td被加粗显示,说明光标处在单元格内。单击一下{table},标签选择器处显示为“{body}{table}{tr}{td}”(图5),再看编辑区内的表格,表格周围为一圈黑线,表示表格被选中了,四周还有几个黑色的小方块,是表格拖放手柄,可以用来改变表格的大小。

用标签选择器选择表格

图5 用标签选择器选择表格

  选中表格后,我们查看一下属性面板,可以看到刚刚设置的一些表格属性,行数(Rows)为1,列数(Cols)为2,表格宽度(W)为590Pixels。以后要改变表格的属性,就可以在属性面板中进行了(图6)。

表格的属性面板

图5 表格的属性面板

  按Ctrl+S,将此文件保存在D盘myweb文件夹下。

  接下来我们在表格中插入图形。在第一个单元格内单击,然后按下Ctrl+Alt+I键,弹出插入图片对话框,选择事先做好的logo图片,单击“Select”,图片就插到第一个单元格中了。

  在属性面板中可以看到,此图片宽度为170像素,我们可以将第一个单元格的宽度也调整为170像素宽。按一下右方向键,光标就定位在第一个单元格中了,这时属性面板中显示的是第一个单元格的属性,我们在宽度输入框中填入170,再敲一下回车,第一个单元格就刚好容纳下所插图形了。同样,我们可以在第二个单元格中插入Banner 图形,第一个表格就做好了(图7)。

点击可看到浏览效果

图7 点击可看到浏览效果

相关内容
赞助商链接