1、1美化我的网页-css+div 布局页面（教案）实训目的：1、学会 css 样式的创建、编辑和应用2、学会 AP div 的创建和参数的设置3、学会使用 css+div 布局和美化网页。实训步骤：1、将素材库 chaprter3 中的 SX7 文件夹复制到 D： 根目录下。运行dreamweaver cs5 ,新建站点“网页特效制作” ，站点文件夹为 D:SX7。打开站点根目录新建空白文档 index.html,修改标题为“CSS+DIV 布局网页” 。2、制作基本结构（1）选择文档工具栏中的“拆分”视图下的标签，将所有页面用一个大的,既#container 包裹起来，代码如图 3-1 所示。
2、页面层容器（2）在#container 块中写入 div 的基本结构，将页面层容器文字替换为如下代码，如图 32 所示：横幅图片侧边栏页面主体页面的底部（3）选择“窗口CSS 样式”命令或按【shift+f11】组合键打开“CSS 样式”面板，如图 33 所示， 图 33“CSS 样式”面板单击“CSS 样式面板右下方”的“新建 CSS 规则”按钮 ，打开新建 CSS 规则对话框。在选择器类型中选择“标签（重新定义 html 元素） “，在选择器名称“文本框中输入”body”,在”规则定义“项中选择”仅限该文档“，如图 34 所示，单击”确定“按钮，弹出”body 的 CSS 规则定义“对话框
3、，如图 35 所示2 图 34 新建 CSS 规则对话框 图 35 新建 CSS 规则对话框在 body 的 CSS 规则定义对话框的分类列表中选择方框，设置“填充“全部为 0，边界全部为 0，设置完成后单击确定按钮。视图如图 36 所示。3（4）定义#container 块的样式。单击 “CSS 样式面板“右下方的“新建 CSS规则”按钮 ，打开“新建 CSS 规则”对话框。在选择器类型中选择“复合内容（基于选择的内容） ”，在选择器名称文本框中输入“#container” ，在“规则定义”项中选择“仅限于该文档” ，如图 37 所示，单击确定按钮，弹出“#container 的 CSS 规
4、则定义对话框。 图 37 新建 CSS 规则对话框在“#container 的 CSS 规则定义对话框中的分类列表框中选择方框选项，设置 padding 全部为 0，margin 的 left 为-350，如图所示分类列表框中选择定位选项，设置为，为，如图所示，设置完成后，单击确定按钮，添加样式后的拆分视图如图所示。4图“的规则定义”对话框中的方框选项设置图“的规则定义”对话框中的“定位”选项设置5图 添加样式后的拆分视图4、充实内容（1） 在 banner 层中插入图片并编辑 CSS 样式表。 在“设计”视图中将“横幅图片”文字删除。 选择“插入图像”命令或按【ctrl+alt+I】组合键，
5、打开“选择图像源文件”对话框，选择“images”文件夹中的 banner.gif,单击“确定”按钮。参照步骤 2（4） ，新建#banner 的 CSS 样式表，在“#banner 的 CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”全部值为 0， “margin”的全部为 0，如图 311 所示。设置完成后，单击“确定”按钮，完善 banner 层后的“拆分”视图如图 3-12 所示。 图 311 #banner 的 CSS 规则定义对话框6 图 312 完善 banner 层后的拆分视图（2） 在 leftbar 层中插入图片文字并编辑 CSS 样式表。
6、 在“设计”视图中将“侧边栏”文字删除。 选择“插入图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，插入“图像” ，在”选择图像源文件“对话框中选择“images”文件夹中的 selfpic.jpg 和 selfpic2.jpg,单击“确定”按钮。 分别在插入图像下方输入 leftbar.txt 中的文字，如图 3-13 所示 图 313 在 leftbar 层中插入图片和文字后的拆分视图 参照步骤 2（4） ，新建#leftbar 和#leftbar p 的 CSS 样式表。7新建#leftbar 的 CSS 样式表，在#leftbar 的 CSS 规则定义”对话
7、框中的“分类”列表框中选择“方框”选项，设置width“为 150px,”float”为 left， “padding”的值分别为 20px,0，30px,0,“margin”的全部为 0，在分类列表框中选择“类型”选项，设置“font-size”为 12px;在分类列表框中选择” 区块 ”选项，设置”text-align”为 center.设置完成后，单击“确定”按钮。新建#leftbar p 的 CSS 样式表，在#leftbar 的 CSS 规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的 left 值为12px, “padding”的 right 值为 3
8、0px,设置完成后，单击“确定”按钮。添加#leftbar p 和#leftbar 样式后的“拆分”视图如图 3-14 所示。 图 314 添加#leftbar 和#leftbar p 样式后的拆分视图（3） 在 content 层中插入文字并编辑 CSS 样式表 在“设计”视图中将“页面主体”文字替换成 content.txt,并编排格式，如图 3-15 所示。8 图 315 在 content 层中插入文字后的“拆分”视图 参照步骤 2（4） ，新建#content、#content p 和#content h4 的 CSS样式表。新建#content 的 CSS 样式表，在#conten
9、t 的 CSS 规则定义”对话框中的“分类”列表框中选择“方框”选项，设置width“为 550px,”float”为 left， “padding”的值分别为 20px,0，30px,0,“margin”的全部为 0，在分类列表框中选择“类型”选项，设置“font-size”为 12px;在分类列表框中选择” 区块 ”选项，设置”text-align”为 center.分类列表框中选择背景选项，设置“background-images”为”images/bg1.jpg,”background-repeat”为 no-repeat,”background-position(x)”为 right
10、， ”background-position(y)”为 bottom,设置完成后，单击“确定”按钮。新建#content p 和#content h4 的 CSS 样式表，在 CSS 规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的 left 值为 20px, “padding”的 right 值为 15px,设置完成后，单击“确定”按钮。添加#content #content p 和#content h4 样式后的“拆分”视图如图 3-16 所示。9 图 316 添加#content、#content p 和#content h4 样式后的“拆分”视图（4） 在
11、#footer 层中插入图像并编辑 CSS 样式表。 在“设计”视图中将“页面底部”文字删除。 选择“插入图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，插入“图像” ，在”选择图像源文件“对话框中选择“images”文件夹中的 footer.gif,单击“确定”按钮。参照步骤 2（4） ，新建#footer 的 CSS 样式表，在“#footer 的 CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”全部值分别为 3px,0，3px,0， “margin”的全部为 0， ”width”为 100%， ”clear”为 both。设置完成后，单击“确定”按钮，添加#footer 样式后的“拆分”视图如图 3-17 所示。 图 317 添加#footer 样式后的“拆分”视图5、div+CSS 布局网页效果图div+CSS 布局网页效果图如图 3-18 所示。10 图 318 div+CSS 布局网页效果图
