美化我的网页-+布局页面教案 .docx
精品名师归纳总结美化我的网页 -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 包裹起来，代码如图 3-1 所示。<div id= ”container”>页面层容器</div>2在#container 块中写入 div 的基本结构，将页面层容器文字替换为如下代码，如图 32 所示：<div id= ”banner”>横幅图片 </div><div id= ”leftbar”>侧边栏 </div><div id= ”content”>页面主体 </div><div id= ”footer”>页面的底部 </div>3挑选“窗口 CSS 样式”命令或按【 shift+f11】组合键打开“ CSS 样式” 面板，如图 33 所示， 图 33“ CSS样式”面板单击“ CSS样式面板右下方”的“新建 CSS规章”按钮 ，打开新建 CSS规章对话框。在挑选器类型中挑选“标签重新定义html 元素“，在挑选器名称“文本框中输入” body”, 在”规章定义 “项中挑选” 仅限该文档“，如图 34 所示， 单击”确定“按钮，弹出” 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】组合键，打开“挑选图像源文件”对话框，挑选“ images”文件夹中的 banner.gif,单击“确定”按钮。参照步骤 24，新建 #banner 的 CSS样式表，在“ #banner 的 CSS规章定义”对话框中的“分类”列表框中挑选“方框”选项，设置“padding ” 全部值为 0，“margin”的全部为 0，如图 311 所示。设置完成后，单 击“确定”按钮，完善 banner层后的“拆分”视图如图 3-12 所示。 图 311 #banner 的 CSS规章定义对话框可编辑资料 - - - 欢迎下载精品名师归纳总结 图 312 完善 banner 层后的拆分视图（2） ） 在 leftbar层中插入图片文字并编辑CSS样式表。 在“设计”视图中将“侧边栏”文字删除。 挑选“插入图像”命令或按【 ctrl+alt+I】组合键，打开“挑选图像源文件”对话框，插入“图像” ，在”挑选图像源文件“对话框中挑选“ images”文件夹中的 , 单击“确定”按钮。 分别在插入图像下方输入 leftbar.txt中的文字，如图 3-13 所示 图 313 在 leftbar层中插入图片和文字后的拆分视图 参照步骤 24，新建 #leftbar和#leftbar p的 CSS样式表。新建#leftbar的 CSS样式表，在 #leftbar的 CSS规章定义”对话框中的可编辑资料 - - - 欢迎下载精品名师归纳总结“分类” 列表框中挑选 “方框” 选项，设置width “为 150px, ”float” 为 left，“padding ”的值分别为 20px,0， 30px,0,“ margin”的全部为 0，在分类列表框中挑选“类型”选项，设置“ font-size”为 12px;在分类列表框中挑选 ”区块”选项，设置 ”text-align ”为 center.设置完成后，单击“确 定”按钮。新建#leftbarp 的 CSS样式表，在 #leftbar的 CSS规章定义”对话框中的“分类”列表框中挑选 “方框”选项，设置“padding ”的 left 值为 12px, “padding ”的 right 值为 30px,设置完成后，单击“确定”按钮。添加#leftbar p和#leftbar样式后的“拆分”视图如图 3-14 所示。 图 314 添加#leftbar和#leftbar p样式后的拆分视图（3） ） 在 content层中插入文字并编辑 CSS样式表在“设计”视图中将“页面主体”文字替换成content.txt,并编排格式，如图 3-15 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结 图 315 在 content层中插入文字后的“拆分”视图 参照步骤 24，新建 #content 、#content p和#content h4的 CSS样式表。新建#content的 CSS样式表，在 #content的 CSS规章定义”对话框中的“分类” 列表框中挑选 “方框” 选项，设置width “为 550px, ”float” 为 left，“padding ”的值分别为 20px,0， 30px,0,“ margin”的全部为 0，在分类列表框中挑选“类型”选项，设置“ font-size”为 12px;在分类列表框中挑选 ”区块”选项，设置 ”text-align ”为 center.分类列表框中挑选背景 选项，设置“ background-images”为”images/bg1.jpg,”background-repea”t 为no-repeat”,backgroun-dpositionx ”为 right ，” background-positiony”为bottom,设置完成后，单击“确定”按钮。新建#content p和#content h4的 CSS样式表，在 CSS规章定义”对话框中的“分类”列表框中挑选“方框”选项，设置“padding ”的 left 值为 20px,“ padding ”的 right 值为 15px,设置完成后，单击“确定”按钮。添加 #content#content p和#content h4样式后的“拆分”视图如图 3-16 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结 图 316 添加#content 、#content p和#content h4样式后的“拆分”视图（4） 在#footer 层中插入图像并编辑CSS 样式表。 在“设计”视图中将“页面底部”文字删除 挑选“插入图像”命令或按【 ctrl+alt+I。】组合键，打开“挑选图像源文件”对话框，插入“图像” ，在”挑选图像源文件“对话框中挑选“ images”文件夹中的 , 单击“确定”按钮。参照步骤 24，新建 #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 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结 图 318 div+CSS 布局网页成效图可编辑资料 - - - 欢迎下载
