《用表格做网页.docxVIP

用表格做网页，表格在网页制作中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。　插入第一个表格　我们看一下这个网页，虽然看起来很复杂，但主要是利用表格制作的。去掉文字和图形，可以看到其表格框架为下面这个样子。　下面我们就利用表格制作这个网页。 启动Dreamweaver后，自动产生一个空文档。我们先来定义网页尺寸，不同的分辨率所查看的网页最终结果是不一样的，为了照顾更多的上网者，我们设置640×480分辨率（图3），单击状态栏上的窗口尺寸箭头，在弹出的列表中选择“600×300 （640×480），Maximized”，窗口就小了，做出的网页在640×480分辨率下会显示正常，编辑区大小为600×300，我们编辑的网页宽度就定为600，高度可以大些，在浏览器中显示时会有竖直滚动条。设置页面尺寸　　我们看一下网页的布局，共有三个主要表格，最上面的表格放置logo图标和banner广告条，中间的表格为主要栏目切换条，最下面的表格为网页正文。 根据网页布局，我们先来制作最上面的表格。　　单击“对象面板”中的插入表格图标，弹出“Insert Table”对话框。设置行数（Rows）为1，列数（Columns）为2，表格宽度（Width）为590Pixels，表格线宽度（Border）为0，另两个选项“Cell Padding”表示表格内文本与表格线的距离，“Cell Spacing”表示表格单元格之间的距离，这里我们不做设置，单击“OK”，表格就插进来了。?　“插入表格”对话框　将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为“{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下{table}，标签选择器处显示为“{body}{table}{tr}{td}”（图5），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。用标签选择器选择表格　　选中表格后，我们查看一下属性面板，可以看到刚刚设置的一些表格属性，行数（Rows）为1，列数（Cols）为2，表格宽度（W）为590Pixels。以后要改变表格的属性，就可以在属性面板中进行了。?　表格的属性面板　按Ctrl+S，将此文件保存在D盘myweb文件夹下。　接下来我们在表格中插入图形。在第一个单元格内单击，然后按下Ctrl+Alt+I键，弹出插入图片对话框，选择事先做好的logo图片，单击“Select”，图片就插到第一个单元格中了。　在属性面板中可以看到，此图片宽度为170像素，我们可以将第一个单元格的宽度也调整为170像素宽。按一下右方向键，光标就定位在第一个单元格中了，这时属性面板中显示的是第一个单元格的属性，我们在宽度输入框中填入170，再敲一下回车，第一个单元格就刚好容纳下所插图形了。同样，我们可以在第二个单元格中插入Banner 图形，第一个表格就做好了。　制作第二个表格　下面我们制作栏目切换条。　这是一个一行、五列的表格，我们用上面的方法插入，表格的宽度也设为590Pixels，Border为1，单元格间距“Cell Spacing”为0。“插入表格”对话框　　将光标定位在某一单元格中，按下Ctrl+A键，选中所插入的表格，在属性面板中设置表格高度（H）为20 Pixels。　表格的属性　下面我们进行各种颜色设置，使表格有背景色和立体效果。先设置表格背景色，单击属性面板的最下排颜色选择按钮“Bg”，从弹出的颜色列表中选择一种绿色（#A3C06D）。　接下来设置表格边框高亮度效果（Light Brdr）的颜色，单击颜色选择按钮，从颜色列表中选择一种深颜色，这里我们选择“#003300”，用同样方法设置表格阴影效果（Dark Brdr）颜色为#FFFFFF，表格就变成了这个样子。　在属性面板上设置立体效果　我们把最后一个单元格背景设置为另一个颜色，表示此项为当前激活的选项。在最后一个单元格内单击鼠标，此时属性面板变为当前单元格的属性，用上面的方法设置背景颜色为#CCCC33，这里再告诉你一个选择颜色的方法，当单击颜色选择按钮后，鼠标指针变为一个吸管的样子，这时就可以在屏幕上吸取颜色了，你可以直接到我们的例子中吸取所需颜色。如果你懒得这样做，就直接在颜色输入框中键入“#CCCC33”。　　设置单元格背景　你可能会问这样一个问题，最后一个单元格刚才是绿色，现在又是黄色了，这是怎么回事？这要从表格（table）、表格行（tr）和单元格（td）的格式的优先级