2022年美化我的网页-css+div布局页面教案.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挑选文档工具栏中的“ 拆分” 视图下的 大的 <div>,既#container 包裹起来,代码如图<div id= ”container”> 页面层容器</div> <body>标签,将全部页面用一个 3-1 所示；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规章定义“ 对话框,如图 35 所示1 名师归纳总结 - - - - - - -第 1 页,共 10 页精选学习资料 - - - - - - - - - 图 34 新建 CSS规章对话框图 35 新建 CSS规章对话框在 body 的 CSS规章定义对话框的分类列表中挑选方框,设置“ 填充“ 全部为0,边界全部为 0,设置完成后单击确定按钮；视图如图 36 所示；2 名师归纳总结 - - - - - - -第 2 页,共 10 页精选学习资料 - - - - - - - - - 4定义 #container 块的样式；单击“CSS 样式面板“ 右下方的“ 新建CSS规章” 按钮,打开“ 新建 CSS规章” 对话框；在挑选器类型中挑选“ 复合内容基于挑选的内容 ” ,在挑选器名称文本框中输入“#container ”,在“ 规就定义” 项中挑选“ 仅限于该文档”,如图 37 所示,单击确定按钮,弹出“ #container 的 CSS规章定义对话框；图 37 新建 CSS规章对话框在“#container的 CSS规章定义对话框中的分类列表框中挑选方框选项,设置 padding 全部为 0,margin 的 left为-350,如图所示分类列表框中挑选定位选项, 设置为,为,如图所示,设置完成后,单击确定按钮,添加样式后的拆分视图如图所示；3 名师归纳总结 - - - - - - -第 3 页,共 10 页精选学习资料 - - - - - - - - - 图 “ 的规章定义”设置对话框中的方框选项图“ 的规章定义” 对话框中的“ 定位” 选 项设置4 名师归纳总结 - - - - - - -第 4 页,共 10 页精选学习资料 - - - - - - - - - 图 添加样式后的拆分视图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规章定义对话框5 名师归纳总结 - - - - - - -第 5 页,共 10 页精选学习资料 - - - - - - - - - 图 312 完善 banner 层后的拆分视图（2） 在 leftbar层中插入图片文字并编辑CSS样式表； 在“ 设计” 视图中将“ 侧边栏” 文字删除； 挑选“ 插入图像” 命令或按【ctrl+alt+I】组合键,打开“ 挑选图像源文件” 对话框,插入“ 图像”,在” 挑选图像源文件“ 对话框中挑选“images” 文件夹中的 , 单击“ 确定” 按钮； 分别在插入图像下方输入 leftbar.txt 中的文字,如图 3-13 所示图 313 在 leftbar 层中插入图片和文字后的拆分视图 参照步骤 24,新建 #leftbar 和#leftbar p 的 CSS样式表；新建#leftbar 的 CSS样式表,在 #leftbar 的 CSS规章定义” 对话框中的6 名师归纳总结 - - - - - - -第 6 页,共 10 页精选学习资料 - - - - - - - - - “ 分类” 列表框中挑选 “ 方框” 选项,设置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 值为 30px,设置完成后,单击“ 确定” 按钮；添加#leftbar p 和#leftbar 样式后的“ 拆分” 视图如图 3-14 所示；图 314 添加 #leftbar 和#leftbar p 样式后的拆分视图（3） 在 content 层中插入文字并编辑CSS样式表content.txt,并编在“ 设计” 视图中将“ 页面主体” 文字替换成排格式,如图 3-15 所示；7 名师归纳总结 - - - - - - -第 7 页,共 10 页精选学习资料 - - - - - - - - - 图 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-repeat”为no-repeat,” background-positionx ” 为 right ,”background-positiony” 为bottom,设置完成后,单击“ 确定” 按钮；新建#content p 和#content h4 的 CSS样式表,在 CSS规章定义” 对话框中的“ 分类” 列表框中挑选“ 方框” 选项,设置“padding ” 的 left 值为 20px, “ padding ” 的 right 值为 15px,设置完成后,单击“ 确定” 按钮；添加 #content #content p 和#content h4 样式后的“ 拆分” 视图如图 3-16 所示；8 名师归纳总结 - - - - - - -第 8 页,共 10 页精选学习资料 - - - - - - - - - 图 316 添加#content 、#content p和#content h4样式后的“ 拆分” 视图（4）在#footer 层中插入图像并编辑 CSS 样式表； 在“ 设计” 视图中将“ 页面底部” 文字删除； 挑选“ 插入图像” 命令或按【像源文件” 对话框,插入“ 图像”ctrl+alt+I】组合键,打开“ 挑选图,在” 挑选图像源文件“ 对话框中挑选“images” 文件夹中的 , 单击“ 确定” 按钮；#footer的 CSS规参照步骤 24,新建 #footer的 CSS样式表,在“就定义” 对话框中的“ 分类” 列表框中挑选“ 方框” 选项,设置“ padding ”全部值分别为 3px,0,3px,0,“ margin” 的全部为 0,”width”为 100%,”clear”为 both；设置完成后,单击“ 确定” 按钮,添加 视图如图 3-17 所示；#footer 样式后的“ 拆分”图 317 添加 #footer样式后的“ 拆分” 视图5、div+CSS布局网页成效图div+CSS布局网页成效图如图 3-18 所示；9 名师归纳总结 - - - - - - -第 9 页,共 10 页精选学习资料 - - - - - - - - - 图 318 div+CSS 布局网页成效图10 名师归纳总结 - - - - - - -第 10 页,共 10 页
