深入学习和使用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

　　点击可看到浏览效果

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有