《DIV+CSS网页布局》

签署栏设计人专业（教研室）主任时间时间《DIV+CSS网页布局》课程单元教学设计目录1.第一次课教学设计：XHTMLCSS基础知识与体验...................................11-1教案头.....................................................................................................................11-2教学设计.................................................................................................................12.第二次课教学设计：Div+CSS布局入门...................................................62-1教案头.....................................................................................................................62-2教学设计.................................................................................................................63.第三次课教学设计：常用网页布局形式....................................................93-1教案头.....................................................................................................................93-2教学设计.................................................................................................................94.第四次课教学设计：CSS导航菜单设计..................................................134-1教案头...................................................................................................................134-2教学设计...............................................................................................................135.第五次课教学设计：超链接....................................................................165-1教案头...................................................................................................................165-2教学设计...............................................................................................................166.第6次课教学设计：HTML列表.............................................................196-1教案头...................................................................................................................196-2教学设计...............................................................................................................196.第7次课教学设计：综合项目................................................................217-1教案头...................................................................................................................217-2教学设计...............................................................................................................211/271.第一次课教学设计：XHTMLCSS基础知识与体验1-1教案头课次名称：DIV+CSS网页布局授课班级院级公共选修课课时2上课地点机房教学目标能力目标知识目标1.能看懂Doctype和Head区代码含义；2.能给HTML标签添加CSS样式1.了解XHTML和CSS基础知识；2.理解CSS基本思想与格式2.熟悉在HTML中引入CSS的方式；学生任务任务1：在页面中引入CSS样式；任务2：编写第一个HTML+CSS页面；资料参考教材：网上相关教程。资料：◆图书馆相关书籍；◆练习所需要的素材及源文件；◆网上其它材料。1-2教学设计步骤教学内容教学方法手段学生活动时间分配告知1.本门课程的课程标准、授课计划及考核标准；2.职业素质训导（纪律、座姿、课前准备工作及课后整理工作）3.三大约定：（1）上课不迟到早退，有事请假。（2）不在教室内吃零食。（3）上课不睡觉，不玩游戏，未经同意不上网。4.本次课基本教学内容及成果展示讲授法、演示法;多媒体广播、网络听讲、观看相关材料，授受并理解本单元项目的内容。10分钟讲授一、XHTML和CSS基础知识1.关于HTML和XHTMLHTML和XHTML都是由W3C组织（全球万维网联盟）制定的，它们是同一种标签语言的不同阶段。HTML标准较宽松，易混乱，不符合标准化的发展趋势；XHTML是HTML的“严谨版”，对格式要求更规范。主要区别：（1）在XHTML中标记名称和属性名称必须小写；（2）在XHTML中标记必须严格嵌套；讲授、演示1.听讲、理解所学内容；10分钟2/27步骤教学内容教学方法手段学生活动时间分配（3）在XHTML中标记必须封闭；（4）在XHTML中空元素的标记也必须封闭；（5）在XHTML中属性值用双引号括起来；（6）在XHTML中属性值必须用完整形式；2.文档类型因为存在着HTML和XHTML的区别，所以在创建文件之初就应该选择对应的文档类型。现在一般使用XHTML文档类型，包括“严格类型”和“过渡（transitional）类型”两种，其中“过渡类型”能兼容以前版本定义而在新版本已经废弃的标签和属性，一般建议使用“过渡类型”。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN以上语句声明了使用过渡类型文档。3.语言编码metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/它标示文档的语言编码，这里的gb2312告诉浏览器，本文档采用简体中文gb2312编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管采用哪种编码，页面包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码4.HTML标签（标记）(X)html是一种标签语言，标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。成对的标签：head{...}/headbody{...}/bodydiv{...}/divspan{...}/spanp{...}/p......3/27步骤教学内容教学方法手段学生活动时间分配单一的标签：imgsrc=/br/.......按xhtml规范，标签必须用小写。5.CSS基本思想和格式CSS全称是CascadingStyleSheet，层叠样式表。它是一种用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS出现的根本原因，就是解决HTML中内容与表现代码混杂在一起的情况，使HTML内容与表现形式分开来。（X）HTML与CSS的关系就是“内容结构”与“表现形式”的关系，由（X）HTML确定网页的结构内容，由CSS来决定页面的表现形式。h2{font-family:宋体;font-size:10pt;color:red;}CSS的基本思想就是首先指定对什么“对象”进行设置，然后指定对此对象的那个方面的“属性”进行设置，最后给出该设置的“值”。的怪CSS样式表由3个基本部分组成，即：对象（标签名称）、属性和属性值。6.初试牛刀-Hello，Class!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/titleHelloClass/titlestyletype=”text/css”p{color:blue;font-family:Arial,宋体,sans-serif；4/27步骤教学内容教学方法手段学生活动时间分配font-size:10pt;}/style/headbodyh2Hello,Class!/h2pWelcometomyclass/ppIhopeyousucceed/p/body/html7.基本CSS选择器CSS样式表由3个基本部分组成，即：对象（标签名称）、属性和属性值。其中“对象”指定了对哪些网页元素进行设置，我们称它为“选择器”。通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。选择器的类型：（1）标签选择器用HTML标签的名称作为CSS选择器的名称，即可声明所有该HTML标签的样式。如：p{color:blue;}（2）类别选择器自定义选择器名称，选择器前缀用点号，在标签内使用时用”class=xxx”。如：.red{color:red;font-size:20px;}但在HTML标签内要声明使用了哪种类别选择器，如pclass=”red”class选择器/p可以将一个类别选择器用于多个标签内，也可在同一标签内使用多个类别选择器，用空格分开即可。（3）ID选择器用法与类别选择器相同，但只能在HTML页面中使用一次。如：#green{5/27步骤教学内容教学方法手段学生活动时间分配color:#009900;font-size: