美化我的网页-css+div布局页面教(学)案.pdfVIP

美化我的网页 css+div 布局页面（教案） 实训目的： 1、 学会 css 样式的创建、编辑和应用 2 、 学会 AP div 的创建和参数的设置 3 、 学会使用 css+div 布局和美化网页。 实训步骤： 1、将素材库 chaprter3 中的 SX7 文件夹复制到 D ： 根目录下。运行 dreamweaver cs5 ,新建站点“网页特效制作”，站点文件夹为 D:\SX7 。打开站点 根目录新建空白文档 index.html, 修改标题为“CSS+DIV 布局网页”。 2、制作基本结构 （1）选择文档工具栏中的“拆分”视图下的body 标签，将所有页面用一个大 的div, 既#container 包裹起来，代码如图 31 所示。 div id= ”container ” 页面层容器 /div （2 ）在#container 块中写入 div 的基本结构，将页面层容器文字替换为如下 代码，如图 3—2 所示： div id= ”banner ”横幅图片 /div div id= ”leftbar ”侧边栏 /div div id= ”content ”页面主体 /div div id= ”footer ”页面的底部 /div （3 ）选择“窗口→CSS 样式”命令或按【shift+f11 】组合键打开“CSS 样式”面板， 如图 3—3 所示， ◆ 图 3—3 CSS“ 样式”面板 单击“CSS 样式面板右下方”的“新建CSS 规则”按钮 ，打开新建 CSS 规则对话 框。在选择器类型中选择“标签（重新定义 html 元素）“，在选择器名称“文本框中 输入”body ”,在 ”规则定义“项中选择”仅限该文档“，如图3—4 所示，单击”确定 “按钮，弹出”body 的 CSS 规则定义“对话框，如图 3—5 所示 ◆ 图 3—4 新建 CSS 规则对话框 ◆ 图 3—5 新建 CSS 规则对话框 在 body 的 CSS 规则定义对话框的分类列表中选择方框， 设置“填充“全部为0 ， 边界全部为 0 ，设置完成后单击确定按钮。视图如图 3—6 所示。 （4 ）定义#container 块的样式。单击“CSS 样式面板“右下方的“新建CSS 规 则”按钮 ，打开“新建CSS 规则”对话框。在选择器类型中选择“复合内容（基 于选择的内容），”在选择器名称文本框中输入“ #container ，”在“规则定义”项中选 择“仅限于该文档”，如图 3— 7 所示，单击确定按钮，弹出“ #container 的 CSS 规则定义对话框。 ◆ 图 3—7 新建 CSS 规则对话框 在“#container 的 CSS 规则定义对话框中的分类列表框中选择方框选项， 设置 padding 全部为 0 ，margin 的 left 为-350 ＰＸ，如图３－８所示分类列表框中 选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为５ ０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎ ｅｒ样式后的拆分视图如图３－１０所示。 图３――８“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的方框选项设 置 图３－９“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的“定位”选项设 置 图３－１０ 添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图 4 、 充实内容 （1） 在 banner 层中插入图片并编辑 CSS 样式表。 ① 在“设计”视图中将“横幅图片”文字删除。 ② 选择“插入→图像”命令或按【ctrl+alt+I 】组合键，打开“选择图像源文