-《网页设计与制作(Dreamweaver-CC)(第3版)》模块3--网页布局.pptx

DreamweaverCC网页设计与制作（3版）;;任务描述

通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。;具体操作：

（1）将素材中的renwu8文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“奋扬青春”，站点文件夹为D:\renwu8，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#ccc，左、上边距为0；在“链接”分类选项卡中设置链接颜色为黑色，变换图像链接颜色为红色，已访问链接颜色为绿色，始终无下划线，页面属性设置如图3-1所示。

图3-1页面属性设置;具体操作：

（2）选择“插入→表格(table)”命令，设置表格大小为1行2列，表格宽度为1200像素，其他项为0，如图3-1所示，单击“确定”按钮插入表格。

（3）单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”，如图3-3所示。

图3-2“表格”对话框图3-3“表格”属性面板;具体操作：

（4）将光标定位到表格第1个单元格中，在属性面板中设置宽度为1000，选择“插入→图像”命令，在打开的“选择图像源文件”对话框中选择“renwu8_01.gif”文件，单击“确定”按钮插入图像,如图3-4所示。

图3-4第一个表格效果

（5）将光标定位到第2列单元格，在“代码”视图中为单元格添加背景图像“renwu8_02.gif”；代码如图3-5所示。再次光标定位该单元格，选择“插入→表格”命令，设置表格大小为4行1列，表格宽度为100%，其他项为0，单击“确定”按钮插入嵌套表格tab1；分别设置嵌套单元格的第1、2、3、4行行高为38、40、40、40，如图3-6所示。

图3-5第2列单元格的背景图像代码

图3-6第2列单元格的嵌套表格;具体操作：

（6）光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项，在单元格中输入◆，然后在单元格中输入文字“设为首页”；同样的方法，??第3行和第4行输入“◆联系我们”和“◆加入收藏”，效果如图3-7所示。

图3-7表格效果1

（7）将光标定位到表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行1列，表格宽度为1200像素，其他项为0，单击“确定”按钮，插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为41，如图3-8所示。

图3-8表格效果2;具体操作：

（7）将光标定位到第二个表格，在“代码”视图中为表格添加背景图像“renwu8_03.gif”,代码如图3-9所示。再次光标定位该表格，选择“插入→表格”命令，设置表格大小为1行9列，表格宽度为100%，其他项为0，单击“确定”按钮，插入嵌套表格tab2；分别设置嵌套表格的第1列列宽373，第9列列宽为113，第2列到第8列平均分配列宽为102，高均为41；如图3-10所示。

图3-9第2个表格代码

图3-10第2个表格的嵌套表格设置

（8）在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示，分别为7个单元格的文本内容套用ys01样式，如图3-11所示。

图3-11第2个表格效果;具体操作：

（9）将光标定位到第2个表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行3列，表格宽度为1200像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为542，第三个表格的布局图和参数如图3-12所示。

图3-12第3个表格的布局参数值;具体操作：

（10）分别设置第三个表格的第1列和第3列列宽为100，第