表格CSS实例步骤.doc

用表格布局网页过程
1）单击“文件|新建”命令，新建一个空白文档，并将文档保存为index.html。
2）插入背景图片（图片位于素材images/back.jpg）
3）插入1行1列的表格，表格宽度为764像素，其他设置如下图所示。

4）单击“确定”按钮插入表格，在属性面板中将“对齐”设置为“居中对齐”，背景颜色为#ffffff。（注意：确保表格是选中的）

5）将光标移到单元格中，插入一个2行1列的表格，宽度为759像素，并属性面板中将对齐设置为居中对齐。
6）将光标移到第1行单元格中，单击“插入|媒体|Flash”命令，在对话框中选中文件“images/banner.swf”，单击确定插入flash动画。
7）选中flash文件，在“属性”面板中单击“播放”按钮，可以播放插入的flash动画。
8）将光标移到第2行单元格中，插入“images/navi.gif”，完成后，效果如下

9）将光标移到顶部flash部分表格的外面，插入一个1行2列的表格，宽度为759像素，在属性面板中将对齐设置为居中对齐。（记主体信息表）
10）将光标移到第1列单元格中，在属性面板中将宽设置为157像素，“垂直”设置为“顶端”，插入一个5行1列的表格（表格的宽度157像素）（此表格记为表格1）。
11）将光标移到表格1的第1行单元格中，在“属性”面板中设置背景图片为“images/left01.gif”，其宽157，高200，垂直为顶端，效果如下

12）将光标移到表格1的第1行单元格中，插入1行1列的表格，宽105，高112，对齐为居中对齐。（记此表为表2）

13）将光标移到表2的单元格中，单击“插入|标签”命令，打开“标签选择器”对话框，如图所示。

14）选择如上图所示，单击插入按钮，插入标签，后单击“关闭”
15）在“代码视图”中，将光标移到<marquee>标签中，设置“scrollamount”属性值为2，direction属性为up，height属性为112，。Onmouseover和Onmouseout属性，将光标移到<marquee>与</marquee>之间，然后输入相应的文字，比如“欢迎光临”具体代码如下：

16）将光标移到表格1的第2行单元格中（滚动信息下面的单元格），在属性面板中，设置背景图片为“images/left_02.gif”，然后设置单元格的高度为151像素，垂直设置为“顶端”
17）将光标移到表格1的第3行单元格中，在属性面板中，设置背景图片为“images/left_03.gif”，然后设置单元格的高度为181像素，垂直设置为“顶端”
18）将光标移到表格1的第3行单元格中，插入1行1列的表格，宽度为90%，对齐设置为居中。
19）将光标移到新插入的表格中，插入7行7列的表格，宽度为100%，单元格间距为2。
20）合并7行7列的表格的第一行，并在合并后的单元格中输入“<<<2011-11>>>”，设置单元格的对齐方式为“居中对齐”，并在其他的单元格中输入相应的文字

21）将光标移到表格1的第4行单元格中，在属性面板中，设置背景图片为“images/left_041.gif”，然后设置单元格的高度为235像素，垂直设置为“顶端”
22）将光标移到表格1的第4行单元格中，插入1行1列的表格，宽度为152像素，对齐设置为左对齐。并输入相关文字，如下图

21）将光标移到表格1的第5行单元格中，在属性面板中，设置背景图片为“images/left_04.gif”，然后设置单元格的高度为235像素，垂直设置为“顶端”
22）将光标移到表格1的第5行单元格中，插入1行1列的表格，宽度为152像素，对齐设置为左对齐。并输入相关文字，如下图

23）将光标移到页面中，在属性面板中，将垂直设置为“顶端”，背景颜色设置为“#e0f4fa”。
24）将光标移到右边单元格，插入一个2行1列的表格（记表3），宽度602像素。
25）将光标移到表3的第1行单元格中，插入“images/life_banner.jpg”。
26）将光标移到表3的第2行单元格中，插入一个3行1列的表格（记表4），宽度为584像素，在属性面板中，对齐设置为“居中对齐”，效果如下图。

27）将光标移到表4的第1行单元格中，插入“images/right_01.gif”，效果如下图

28）将光标移到表4的第2行单元格中，在属性面板中，设置背景图像为“images/right_02.jpg”，,垂直设置为“顶端”，效果如下图

29）将光标移到表4的第2行单元格中，插入1行1列的表格（记表5），宽度88%，属性面板中的对齐设置为“居中对齐”。
30）在表5中，插入相关文字和图片，排版
31）将光标移到表4的第3行单元格中，插入“image