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

第七章CSS样式应用教学目标l了解标准化网站设计理念l熟悉CSS网页布局的基本知识，能用CSS规划和布局网页l理解CSS盒模型，了解边界距、填充距和边框等属性的含义l熟练掌握Dreamweaver的“CSS样式定义”操作技能l学会在代码视图中修改简单的CSS代码l了解CSS的滤镜，会利用滤镜修饰文字和图片l熟悉文字、图片、表格和表单等主要元素的定位和修饰方法用模板创建网页实例主体标签控制着整个网站的全局外观，根据CSS样式继承性原则，凡没有特别设定，其它标签的外观将由主体标签决定。具体操作下如：1、打开“新建CSS样式”对话框，选择“选择器类型”为“标签”，选择“标签”为“body”；2、单击“确定”，将打开“body的CSS样式定义”对话框；3、在“类型”属性中，“字体”设定为“'lucidagrande','lucidasansunicode','宋体','新宋体',arial,verdana,sans-serif”，“大小”设定为“12像素”，“行高”设定为“150%”，“颜色”设定为“#333”；4、在“背景”属性中，“背景颜色”设定为“#c1c1c1”；5、在“区块”属性中，“文本对齐”设定为“左对齐”；用模板创建网页实例代码视图内容显示如下：body{font-family:'lucidagrande','lucidasansunicode','宋体','新宋体',arial,verdana,sans-serif;font-size:12px;line-height:150%;color:#333;background:#c1c1c1;text-align:left;}用CSS模板创建“公司简介”页面1.按“Shift+F11”，在“CSS样式”视图中，单击“新建CSS样式”按钮；2.选择器类型为“高级”，选择器列表框中输入“#img-right-top”，“定位在”选择“mycss.css”。3.单击“确定”按钮，在随后打开的“#img-right-topCSS样式定义”对话框中设定相关属性；4.在“类型”属性中，“粗细”设定为“粗体”；5.在“区块”属性中，“文本对齐”设定为“居中”；6.在“方框”属性中，“宽”设定为“240像素”，“浮动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“1像素”；用CSS模板创建“公司简介”页面mycss.css代码视图内容显示如下：#img-right-top{float:right;width:240px;text-align:center;margin:1px;font-weight:bold;}用CSS模板创建“公司简介”页面7.在“CSS样式”视图中，选中“#right-m”，单击“编辑样式”按钮，打开“#right-mCSS样式定义”对话框；8.在“方框”属性中，“宽”修改为“615像素”，去掉“边界”的“全部相同”选择，并将“右”设定为“10像素”，单击“确定”按钮；9.返回到“公司页面”设计视图，选中图片，插入“img-right-top”DIV标签，并在图片下放输入图片标题；“产品介绍”页面1.用“mydwt”模板，新建一个文档，并以“chanpin.htm”为文件名保存该文档；2.在第一个可编辑区域（EditRegion1）中，删除“EditRegion1”字样，并插入图像文件“a2.gif”；3.在第二个可编辑区域（EditRegion2）中，删除“EditRegion2”字样，并插入图像文件“chanpin1.jpg”和“chanpin2.jpg”；4.在图像文件“chanpin2.jpg”后面回车，输入相关文字；5.新建“#img-right-m”层，其中“宽”设定为“200像素”，“浮动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“1像素”，单击“确定”按钮；“产品介绍”页面mycss.css代码视图内容显示如下：#img-right-m{float:right;width:200px;margin:1px;}6.返回文档设计视图，选中在前面步骤3中插入的两图片，单击“插入”菜单中的“布局对象”子菜单中的“DIV标签”插入“img-right-m”DIV标签；7.将文字设定为“项目列表”，并为每行列表文字建立相应的链接；“产品介绍”页面从预览结果看，有两点不符合我们的设计要求：列表文字的行间距太近，同时也太靠左；图片应该再靠左一些。解决方案：对“li”标签进行CSS样式设定；调整“img-right-m”的位置。1.按“Shift+F11”，在“CSS样式”视图中，单击“新建CSS样式”按钮；2.选择器类型为“标签”，标签列表框中选中“li”，“定位在”选择“mycss.css”；3.单击“确定”按钮，在随后弹出的对话框中，设定“类别”属性中的“行高”为“300%”；4.在“定位”属性中，“类型”设定为“相对”，“上”设定为“5%”，“左”设定为“5%”；“产品介绍”页面mycss.css代码视图内容显示如下：li{line-height:300%;position:relative;left:5%;top:5%;}5.在“样式”面板的#img-right-m上单击鼠标右键打开“#img-right-mCSS样式定义”对话框；6.在“定位”属性中，“类型”设定为“相对”，“溢出”设定为“自动”，“上”设定为“10%”，“右”设定为“10%”，单击“确定”按钮；“产品介绍”页面mycss.css代码视图内容显示如下：#img-right-m{float:right;width:200px;margin:1px;position:relative;top:10%;right:10%;overflow:auto;}“供货业绩”页面1.用“mydwt”模板，新建一个文档，并以“yeji.htm”为文件名，保存该文档；2.在第一个可编辑区域（EditRegion1）中，删除“EditRegion1”字样，并插入图像文件“a2.gif”；3.在第二个可编辑区域（EditRegion2）中，删除“EditRegion2”字样，输入两段文字；4.新建“#img-ghyj”层，其中“宽”设定为“600像素”，“浮动”设定为“无”，“清除”设定为“两者”，单击“确定”按钮；“供货业绩”页面mycss.css代码视图内容显示如下：#img-ghyj{clear:both;float:none;width:600px;}5.新建“#img-ghyj-s”层，其中：“类型”属性中的“颜色”设定为“#000000”；“区块”属性中的“文本对齐”设定为“居中”；“方框”属性中的“宽”设定为“200像素”，“高”设定为“100”，“浮动”设定为“左对齐”，“清除”设定为“无”；“定位”属性中的“类型”设定为“相对”；“扩展”属性中的“过滤器”设定为“Blur(add=true,direction=135,strength=10)”，单击“确定”按钮；“供货业绩”页面mycss.css代码视图内容显示如下：#img-ghyj-s{height:100px;width:200px;color:#000000;text-align:center;clear:none;float:left;position:relative;filter:Blur(add=true,direction=135,strength=10);}“供货业绩”页面6.返回文档设计视图，在两个段落之间，插入“img-ghyj”DIV标签并回车；7.连续插入三个“img-ghyj-s”DIV标签，期间系统将弹出提示对话框，单击“确定”即可；8.删除“此处显示idimg-ghyj的内容”字样；9.在上述三个“img-ghyj-s”层中分别插入图片文件b1.jpg、b2.jpg和b3.jpg，并输入图片标题，同时删除“此处显示idimg-ghyj-s的内容”字样；10.“img-ghyj”层下面再次插入一个“img-ghyj”DIV标签，并在该层中，连续插入三个“img-ghyj-s”DIV标签，三个层中分别插入图片文件b4.jpg、b5.jpg和b6.jpg，并输入图片标题，同时删除“此处显示xxxxxx的内容”字样；校验CSS样式表CSS官方网站免费提供三种方式的CSS样式表的校验服务：通过URL校验你的层叠样式表使用滚动文本框校验你的层叠样式表通过上载校验你的层叠样式表网址：校验CSS样式表“通过上载校验你的层叠样式表”的方式，校验我们的“mycss.css”：1.打开IE浏览器，在地址栏输入：并回车；2.打开网页后，向下拉，找到“W3CCSS校验服务”，如图所示；校验CSS样式表3.单击“通过上载……”链接，打开“校验器”网页；单击“浏览”按钮，在随后弹出的“选择文件”对话框中，选择“mycss.css”文件。4.单击“提交此样式表以校验”按钮，开始校验；校验结束，显示“CSS校验结果”，如图所示；校验CSS样式表校验完毕，根据校验报告，修正错误。由上述校验报告可知，目前我们的mycss.css文件中有一个错误，即第96行的“filter:Blur(add=true,direction=135,strength=10);”错误原因：CSS滤镜不被大部分浏览器所支持！解决办法：去掉滤镜功能。