《HTML5CSS3 网页设计与制作》教案-15 第6章 第 1节 使用 CSS 美化网页

课程教案75第6章应用CSS3样式美化网页课题名称第1节使用CSS美化网页授课班级软件技术等大一上学期授课班级授课学时2授课地点多媒体教室授课形式讲授、演示参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料知识目标掌握与表单相关的HTML标签，能够根据需要在网页中插入表单标签；掌握设置表单样式的CSS代码，能够使用CSS对表单进行美化；能够制作出常见的注册、教学目标登录和留言前台页面；技能目标与表单相关的HTML标签；设置表单样式；素质目标培养学生认真、一丝不苟的学习态度教学常用的表单HTML标签重点教学重点与难点教学使用css定义表单样式难点本次所讲内容选自教材第6章第1节学生须熟练掌握表单相关的HTML标签；学会学情分析在网页中插入表单标签、最后通过本节课的学习能够制作出常见的注册、登录等页面课前预习+课程导入网页主要由HTML、CSS、JavaScript三部分构成，而CSS的主要作用就是美化网页网页上显示的一些漂亮的样式，是由CSS实现的教学过程课中

1、网站基础知识，介绍CSS可以做美化那些内容

2、讲解使用CSS美化网页文字htmlhead lang=Hen,rmeta charset=MUTF-8Mtitlespan标签的应用“title〉style type^*1text/css P{font-size:14px;p.weather,.own span{font-size:36px;font-weight:bold;color:blue;p#mood{font-size:24px;font-weight:bold;color:red;p.spring{font-style:italic;color:green;font-size:28px;font-weight:bold;/style/headbody p春天来了天气span class=nweatherM转暧/span/pr p心精也应之变得span id»Mnioodw明媚/span起来./p p很早就想span class=HspringH换上/span春装，用春天明媚的/p p class=Mownn色彩span装点/span自己./p/body/html通过css设置文本的字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果

3、讲解使用CSS美化网页图片htmlheadmeta charset=UTF-8”〈titleCSS美化图片/titlestyle type=Htext/cssMimg{width:lOOpx;border:3px solidred;.fillet{border-radius:20px;.oval{border-radius:50%;.thumb{border:Ipx solid^ddd;border-radius:4px;padding:5px;}.filter{filter brightness50%;}/style/headbodyh3美化图片/h3img src=Mimg/flh.jpgH alt=火梨花/img class=nfilletM src=Mimg/flh.jpgH alt=火梨花”/img class=novalM src=nimg/flh.jpgn火梨花”/img class=nthumbM src=Mimg/flh.jpg alt=火梨花”/img class=nfilterM src=Mimg/flh.jpg*火梨花”//bodyhtmlheadmeta charset^^UTF-S*^titleCSS美化背景v/titlestyle type^ntext/cssnh3{background-color:cornflowerblue;}.imgs{background-image:urlimg/fq.jpg;width:10Opx;padding:2Opx;background-repeat:repeat;/style/headbodyh3国家富强，民族振兴，人艮幸福./h3p class=imgs”宏强、民主、文明、和谐、自由、平筝、公正、法治、爱国、敬业、诚信、友善/p/body/html

5、讲解使用CSS美化网页边框htmlheadmeta charset=MUTF-8MtitleCSS美化边框〈/titlestyle type=Htext/cssH.first{border-style:dashed doublesolid dotted;border-width:5px;border-color:blue redgoldcyan;background-image:urlimg/fq.jpg;/style/headbodyh3CSS美化边框/h3pclass=first,”富强、民主、文明.和谐，自由、平等、公正.法治、爱国、敬业、诚信.友寿•v/p〉/body

6、讲解使用CSS美化网页表格htmlheadmeta charset=nUTF-8HtitleCSS关化表格-style type=ntext/cssntable{border-collapse:collapse;width:100%;}table,th,七d border:Ipx solidblue;}th{height:3Opx;background-color:powderblue;color:brown;}td{text-align:center/padding:20px;/style/headbodytable姓名性别/thx/trtrtd雷军/tdxtd男/tdx/trtrxtd董明珠/tdxtd女/tdx/tr/table/body/htmlhtmlheadmeta charset=Mutf-8M/style type=ntext/cssM.myinput{border:2px solid;border-color:ID4BFFF;color:12A00FF;/style/headbodyform action=r,http:/www.hubei.com11method=MpostMP用户名〈input name=MtextfieldH type=tMtextM class=nmyinputn/p P密nbsp;cbsp;nbsp;input name=textfield“type=MpasswordMclass=MmyinputM/pPinput name=Hsubmitu type=Msubmitn value=提交style=nfont-size:20px;n课后将之前做过的表单页面使用css进行美化采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在上机教学反思课上学生学会了如何创建站点和简单的网页页面；课后布置了有关站点的作业，并且利用上机时间完成和指导工作。