表格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）在“代码视图”中，将光标移到标签中，设置“scrollamount”属性值为2，direction属性为up，height属性为112，。Onmouseover和Onmouseout属性，将光标移到与之间，然后输入相应的文字，比如“欢迎光临”具体代码如下：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列的表格的第一行，并在合并后的单元格中输入“”，设置单元格的对齐方式为“居中对齐”，并在其他的单元格中输入相应的文字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行单元格中，插入“images/right_03.gif”，效果如下图32）通过标签选中主体信息表（见步骤10），右移光标一下，插入一个1行1列的表格，宽度759像素，在面板属性中，对齐设置为“居中对齐”。33）将光标移到单元格中，设置背景图片“images/bottom.gif”，高度为62，设置文字的对齐方式为居中，输入版权信息，效果如图：34）保存，按F12预览结果。CSS制作过程1）单击“文件|新建|CSS”新建一个CSS文件，保存为style.css。2）新建CSS规则，创建body标签规则单击确定，具体设置如下图代码如下BODY FONT-SIZE: 12px; LINE-HEIGHT: 120%; FONT-FAMILY: arial,宋体3）新建CSS规则，4）新建CSS规则，5）新建CSS规