《Web前端开发》教学讲义 Web前端设计基础 项目九-1.docxVIP

教学课题 项目9 CSS 3修饰表格表单—9.1项目描述、9.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3美化背景； 2.掌握CSS 3美化边框。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美化文本、段落和图片的方法以及 CSS 3美化超链接和项目列表，制作出美观大方的网页菜单。 任何一个页面都有不同的背景和基调，而对于单个元素，边框效果随处可见，表格和表单也是网页中最常见的元素，想要使网页页面达到整齐美观的视觉效果，就需要用CSS来进行美化。本项目学习使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。 教学重点 1.CSS 3美化背景； 2.CSS 3美化边框。 教学难点 1.CSS 3美化背景； 2.CSS 3美化边框。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页中背景及边框的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、使用CSS美化背景 单元格 列 行 单元格 列 行 单元格 列 行 网页背景通常有设置背景颜色和设置背景图片两种方法。 1．设置背景颜色 在CSS 3中，设置背景颜色的属性是background-color，格式如下： { background-color:transparent | color;} 【例9-1】为网页以及段落设置背景颜色实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 titleCSS设置背景颜色/title 6 style 7 body{ 8 background-color: CadetBlue; 9 } 10 p{ 11 background-color:rgb(154,205,50); 12 color:#ffffff; 13 line-height: 30px; 14 text-align: center; 15 } 16 /style 17 /head 18 body 19 P风高秋月白，雨霁晚霞红/P 20 /body 21 /html 在Chrome浏览器中预览，效果如图所示。 2．设置背景图片 在CSS 3中，设置背景图片的属性是background-image。格式如下： {background-image:none | url(url);} background-repeat 用于设置图片的重复方式，格式如下： {background-repeat:repeat | repeat-x | repeat-y | no-reapeat} ⑵background-attachment 设置好背景图片后，如果文字部分较长，则会出现滚动条，当拖动滚动条向下浏览文字的时候，初始可见的背景图片就会看不到了。 要解决这个问题，就要使用background-attachment属性，该属性用来设置背景图片是否随着文档一起滚动，格式如下： {background-attachment:scroll | fixed} ⑶background-position 默认情况下，背景图片的位置是从元素的左上角开始的，但实际的网页设计中，可以根据需要，直接指定图片的出现位置，这就用到了background-position，该属性用于指定背景图片在元素中的位置，属性值的设置可以分为四类：绝对定位位置、百分比定义位置、垂直对齐值和水平对齐值。格式如下： {background-position:length | percentage | top | center | bottom | left | right} ⑸background-origin 在默认情况下，background-position属性总是以元素左上角原点作为背景图像的起始点，而用background-origin可以改变这种定位方式，格式如下： {Background-origin:border | padding |content;} ⑹background-clip 该属性指定背景的绘制区域，格式如下： {background-clip:border-box | padding-box | content-box;} 【