表格_典型实例

典型实例—温馨设计装饰公司主页

参考书目：

《新编Dreamweaver 8 中文版商业网站设计入门与提高》

P87页6.6 典型实例—温馨设计装饰公司主页

下面以温馨设计装饰公司主页的制作为例，介绍使用表格布局网页的方法。

素材文件：6-6img文件夹

操作步骤：

步骤1：新建一个html文件，保存为bg.htm，标题设置为“温馨设计装饰公司主页”。

单击【属性】面板中的【页面属性】按钮，打开【页面属性】对话框，设置页面【背景颜色】为#FFCCCC（也可根据自己的审美设置）；上边距、下边距设置为0像素。如图所示：

步骤2：单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为760像素的1行*1列的表格，设置填充、间距和边框都为“0”，然后在【属性】面板中设置表格为【居中对齐】。

步骤2 图

步骤3：将光标定位于表格中，单击【常用】插入栏中的【图像】按钮，在表格中插入图像，图像为6-6img\logo.jpg。

步骤4：在页面空白处单击鼠标取消图像的选中状态，然后单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为760像素高为35像素的1行*1列的表格，然后在【属性】面板中进行相应的设置，如下图所示。

步骤5：将光标定位于新插入的表格中，并在【属性】面板中设置单元格【水平】方向和【垂直】方向都是居中对齐。

步骤6：将光标定位于新插入的表格中，单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为100%的1行*5列的表格，然后在【属性】面板中设置表格的【高】为25像素，【间距】为3、【边框】为0、【背景颜色】为白色#FFFFFF。

步骤7：将光标依次定位于新插入表格的第1至第4个单元格中，并在【属性】面板中将单元格的【宽】都设置为12%、水平方向和垂直方向都是居中对齐。

步骤8：在单元格中输入导航文本，并将文本的大小设置为14像素。

步骤9：在页面空白处单击鼠标，单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为760像素的1行*3列的表格，设置填充、间距和边框都为“0”，在【属性】面板中设置表格为【居中对齐】，表格【背景颜色】为白色#FFFFFF。

步骤10：将光标定位于第1列单元格中，设置【水平】为居中对齐，【垂直】为顶端对齐，【宽】为125像素，然后单击【常用】插入栏中的【图像】按钮，在单元格中插入一幅图像，图像为6-6img\left.jpg

步骤11：将光标定位于第2列单元格，在【属性】面板中将【宽】设置为10像素，并单击【背景】文本框右边的【浏览】按钮，为单元格选择一幅背景图像，图像为6-6img\bg.jpg.

步骤12：将光标定位于第3列单元格，，设置【水平】为居中对齐，【垂直】为顶端对齐，然后单击【常用】插入栏中的【图像】按钮，在单元格中插入一幅图像，图像为6-6img\gs.jpg.

步骤13：按一下键盘上向右的方向键，取消图像选中状态的同时将光标移动到图像右侧，然后单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为100%的2行*2列的表格，设置表格【填充】为3、【间距】为3、【边框】为“0”。

步骤14：在第1行第2列和第第2行第1列单元格中分别插入一幅图像。图像分别是6-6img文件夹下的yh.jpg和zw.jpg。

步骤15：然后将鼠标依次定位于第1行第1列和第2行第2列单元格中，单击【属性】面板中【左对齐】按钮，然后分别输入相应的文本。

步骤16：在文档右下角的空白处单击鼠标，将光标定位于第3个表格外侧。

步骤17：单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为760像素、高为33像素的1行*1列的表格，设置填充、间距和边框都为“0”，然后在【属性】面板中设置表格为【居中对齐】。

步骤18：将光标定位于新插入的表格中，设置单元格【水平】为居中对齐、【垂直】为底部对齐。

步骤19：单击【常用】插入栏中的【表格】按钮，在页面中插入一个宽为100%，高为25像素的1行*1列的表格，并在【属性】面板中设置【填充】为3、【间距】为3，【背景颜色】为白色#FFFFFF。

步骤20：将光标定位于新插入的表格中，在【属性】面板中设置单元格【水平】和【垂直】方向都是居中对齐。

步骤21：接着在单元格中输入版权信息，然后选中所有的文本并在【属性】面板的【样式】下拉列表中选择【STYLE1】选项。

步骤22：至此整个页面制作完毕，保存网页。并浏览网页。