（中职）Web前端设计基础 项目九-1电子教案

1、（中职）Web前端设计基础 项目九-1电子教案（中职）Web前端设计基础 项目九-1电子教案（中职）Web前端设计基础 项目九-1电子教案教学课题项目9 CSS 3修饰表格表单9.1项目描述、9.2知识准备授课班级授课时间教学目标知识目标1.掌握CSS 3美化背景；2.掌握CSS 3美化边框。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美化文本、段落和图片的方法以及 CSS

2、 3美化超链接和项目列表，制作出美观大方的网页菜单。任何一个页面都有不同的背景和基调，而对于单个元素，边框效果随处可见，表格和表单也是网页中最常见的元素，想要使网页页面达到整齐美观的视觉效果，就需要用CSS来进行美化。本项目学习使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。教学重点1.CSS 3美化背景；2.CSS 3美化边框。教学难点1.CSS 3美化背景；2.CSS 3美化边框。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页中背景及边框的效果，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。

3、技能学习单元格列行单元格列行单元格列行一、使用CSS美化背景单元格列行单元格列行单元格列行网页背景通常有设置背景颜色和设置背景图片两种方法。1设置背景颜色在CSS 3中，设置背景颜色的属性是background-color，格式如下： background-color:transparent | color;【例9-1】为网页以及段落设置背景颜色实例，代码如下所示。1 2 3 4 5 CSS设置背景颜色6 7 body8 background-color: CadetBlue;9 10 p11 background-color:rgb(154,205,50);12 color:#ffffff;

4、13 line-height: 30px;14 text-align: center;15 16 17 18 19 风高秋月白，雨霁晚霞红20 21 在Chrome浏览器中预览，效果如图所示。2设置背景图片在CSS 3中，设置背景图片的属性是background-image。格式如下：background-image:none | url(url);background-repeat用于设置图片的重复方式，格式如下：background-repeat:repeat | repeat-x | repeat-y | no-reapeatbackground-attachment设置好背景图片后，如

5、果文字部分较长，则会出现滚动条，当拖动滚动条向下浏览文字的时候，初始可见的背景图片就会看不到了。要解决这个问题，就要使用background-attachment属性，该属性用来设置背景图片是否随着文档一起滚动，格式如下：background-attachment:scroll | fixedbackground-position默认情况下，背景图片的位置是从元素的左上角开始的，但实际的网页设计中，可以根据需要，直接指定图片的出现位置，这就用到了background-position，该属性用于指定背景图片在元素中的位置，属性值的设置可以分为四类：绝对定位位置、百分比定义位置、垂直对齐值和水平

6、对齐值。格式如下：background-position: | | top | center | bottom | left | rightbackground-origin在默认情况下，background-position属性总是以元素左上角原点作为背景图像的起始点，而用background-origin可以改变这种定位方式，格式如下：Background-origin:border | padding |content;background-clip该属性指定背景的绘制区域，格式如下：background-clip:border-box | padding-box | content-b

7、ox;【例9-2】为网页以及网页元素设置背景图片实例，代码如下所示。1 2 3 4 5 CSS设置背景图片6 7 body8 background-color: black;9 background-image: url(images/03.jpg);10 background-size:400px 500px;11 background-position:0px 200px;12 background-repeat: repeat-x;13 background-attachment: fixed; 14 15 div16 color: #ffffff;17 width: 300px;18

8、border: 10px dashed #ffb90f;19 padding:35px;20 margin: 150px;21 background-image:url(images/04.jpg);22 background-size:cover;23 background-clip:padding-box;24 25 26 27 28 29 虞美人30 春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改，问君能有几多愁，恰似一江春水向东流。31 32 33 水调歌头34 明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高

9、处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。35 36 37 在Chrome浏览器中预览，效果如图所示。二、使用CSS美化边框边框就是元素的边线，每个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框的外观，在CSS3中分别使用border-style、border-width和border-color三个属性来设置。1边框样式类属性设置边框样式类属性，格式如下：border-style:none|hidden|dotted|dashed|solid|double|g

10、roove|ridge|inset|outset;2边框颜色设置边框颜色的格式如下：border-color:color;3边框宽度设置边框宽度的格式如下：border-width:medium | thin|think | ;4边框的简写属性border等简写属性集合了上面介绍的三种属性，格式如下：border:border-width | border-style | border-color;【例9-3】制作不同样式的边框实例，代码如下所示。1 2 3 4 5 不同的边框类型 6 7 p.none border-style:none;border-color: black;border-

11、width: 1px;8 p.dotted border-style:dotted;border-color: pink;border-width: 2px;9 p.dashed border-style:dashed;border-color: orange;border-width: 3px;10 p.solid border-style:solid;border-color: yellow;border-width: 4px;11 p.double border-style:double;border-color: green;border-width: 5px;12 p.groove

12、border-style:groove;border-color: blue;border-width: 6px;13 p.ridge border-style:ridge;border-color: purple;border-width: 7px;14 p.inset border-style:inset;border-color:ivory;border-width: 8px;15 p.outset border-style:outset;border-color: red;border-width: 9px;16 p.difference17 border-top-style:outs

13、et;border-top-color:red;border-top-width: 2px;18 border-bottom-style:outset;border-bottom-color:blue;border-bottom-width: 4px;19 border-left-style:outset;border-left-color:green;border-left-width: 6px;20 border-right-style:outset;border-right-color:yellow;border-right-width: 8px;21 22 p.easyBorder:b

14、lack 2px double;23 24 25 26 无边框。27 虚线边框。28 虚线边框。29 实线边框。30 双边框。31 凹槽边框。32 垄状边框。33 嵌入边框。34 外凸边框。35 四条边框都不同。36 用简单写法37 38 在Chrome浏览器中预览，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查

15、看教学效果。知识归纳本节课学习了使用CSS3对背景和边框的美化方法。属性属性值说明background-color背景颜色background-imagenone| url(url)背景图片background-repeatrepeat|repeat-x|repeat-y| no-reapeat背景图片重复background-attachmentscroll |fixed背景图片随文字滚动background-position| top | center | bottom | left| right背景图片位置background-size| cover| contain背景图片大小back

16、ground-originborder| padding| content背景图片的起始点background-clipborder-box| padding-box| content-box背景图片绘制区域border边框属性border-stylenone| dotted |dashed |solid| doubled| groove |ridge |inset |outset边框样式border-color边框颜色border-widthmedium thin think length边框宽度教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列_是设置背景颜色的属性。A background-color B background-imageC background-repeat D backgroun