网页制作电子教案列第七章.ppt

教学目标 l??了解标准化网站设计理念 l?? 熟悉CSS网页布局的基本知识，能用CSS规划和布局网页 l?? 理解CSS盒模型，了解边界距、填充距和边框等属性的含义 l?? 熟练掌握Dreamweaver的“CSS样式定义”操作技能 l?? 学会在代码视图中修改简单的CSS代码 l???了解CSS的滤镜，会利用滤镜修饰文字和图片 l??熟悉文字、图片、表格和表单等主要元素的定位和修饰方 法 用模板创建网页实例 代码视图内容显示如下： body { font-family: lucida grande, lucida sans unicode, 宋体, 新宋体, arial, verdana, sans-serif; font-size:12px; line-height:150%; color: #333; background: #c1c1c1; text-align: left; } 用CSS模板创建“公司简介”页面 按“Shift+F11”，在“CSS样式”视图中，单击“新建CSS样式”按钮； 选择器类型为“高级”，选择器列表框中输入“#img-right-top”，“定位在”选择“mycss.css”。 单击“确定”按钮，在随后打开的“#img-right-top CSS样式定义”对话框中设定相关属性； 在“类型”属性中，“粗细”设定为“粗体”； 在“区块”属性中，“文本对齐”设定为“居中”； 在“方框”属性中，“宽”设定为“240像素”，“浮动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“1像素”； 用CSS模板创建“公司简介”页面 mycss.css代码视图内容显示如下： #img-right-top { float: right; width: 240px; text-align: center; margin: 1px; font-weight: bold; } 用CSS模板创建“公司简介”页面 在“CSS样式”视图中，选中“#right-m”，单击“编辑样式”按钮，打开“#right-m CSS样式定义”对话框； 在“方框”属性中，“宽”修改为“615像素”，去掉“边界”的“全部相同”选择，并将“右”设定为“10像素”，单击“确定”按钮； 返回到“公司页面”设计视图，选中图片，插入“img-right-top”DIV标签，并在图片下放输入图片标题； “产品介绍”页面 用“mydwt”模板，新建一个文档，并以“chanpin.htm”为文件名保存该文档； 在第一个可编辑区域（EditRegion1）中，删除“EditRegion1”字样，并插入图像文件“a2.gif”； 在第二个可编辑区域（EditRegion2）中，删除“EditRegion2”字样，并插入图像文件“chanpin1.jpg ”和“chanpin2.jpg”； 在图像文件“chanpin2.jpg”后面回车，输入相关文字； 新建“#img-right-m”层，其中“宽”设定为“200像素”，“浮动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“1像素”，单击“确定”按钮； “产品介绍”页面 mycss.css代码视图内容显示如下： #img-right-m { float: right; width: 200px; margin: 1px;} “产品介绍”页面 从预览结果看，有两点不符合我们的设计要求： 列表文字的行间距太近，同时也太靠左；图片应该再靠左一些。 解决方案：对“li”标签进行CSS样式设定；调整“img-right-m”的位置。 按“Shift+F11”，在“CSS样式”视图中，单击“新建CSS样式”按钮； 选择器类型为“标签”，标签列表框中选中“li”，“定位在”选择“mycss.css”； 单击“确定”按钮，在随后弹出的对话框中，设定“类别”属性中的“行高”为“300%”； 在“定位”属性中，“类型”设定为“相对”，“上”设定为“5%”，“左”设定为“5%”； “产品介绍”页面 mycss.css代码视图内容显示如下： li { line-height: 300%; position: relative; left: 5%; top: 5%;} 在“样式”面板的#img-right-m上单击鼠标右键打开“#img-right-m CSS样式定义”对话框； 在“定位”属性中，“类型”设定为“相对”，“溢出”设定为“自动”，“上”设定为“10%”，“右”设定为“10%”，单击“确定”按钮； “产品介绍”页面 mycss.css代码视图内容显示如下： #img-right-m { float: right; width: 200px; margi