《DIVCSS网页布局》.docVIP

签署栏 设计人 专业（教研室）主任 时 间 时 间 《DIV+CSS网页布局》目录 1. 第一次课教学设计：XHTML CSS基础知识与体验 1 1-1 教案头 1 1-2 教学设计 1 2. 第二次课教学设计：Div+CSS布局入门 6 2-1 教案头 6 2-2 教学设计 6 3. 第三次课教学设计：常用网页布局形式 9 3-1 教案头 9 3-2 教学设计 9 4. 第四次课教学设计：CSS导航菜单设计 13 4-1 教案头 13 4-2 教学设计 13 5. 第五次课教学设计：超链接 16 5-1 教案头 16 5-2 教学设计 16 6. 第6次课教学设计：HTML列表 19 6-1 教案头 19 6-2 教学设计 19 6. 第7次课教学设计：综合项目 21 7-1 教案头 21 7-2 教学设计 21 1. 第一次课教学设计：XHTML CSS基础知识与体验 1-1 教案头 课次名称：DIV+CSS网页布局 1.关于HTML和XHTML HTML和XHTML都是由W3C组织（全球万维网联盟）制定的，它们是同一种标签语言的不同阶段。HTML标准较宽松，易混乱，不符合标准化的发展趋势；XHTML是HTML的“严谨版”，对格式要求更规范。 主要区别： （1）在XHTML中标记名称和属性名称必须小写； （2）在XHTML中标记必须严格嵌套； （3）在XHTML中标记必须封闭； （4）在XHTML中空元素的标记也必须封闭； （5）在XHTML中属性值用双引号括起来； （6）在XHTML中属性值必须用完整形式； 2.文档类型 因为存在着HTML和XHTML的区别，所以在创建文件之初就应该选择对应的文档类型。 现在一般使用XHTML文档类型，包括“严格类型”和“过渡（transitional）类型”两种，其中“过渡类型”能兼容以前版本定义而在新版本已经废弃的标签和属性，一般建议使用“过渡类型”。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 以上语句声明了使用过渡类型文档。 3.语言编码 meta http-equiv=Content-Type content=text/html; charset= gb2312 / 它标示文档的语言编码，这里的gb2312告诉浏览器，本文档采用简体中文gb2312编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管采用哪种编码，包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码html是一种标签语言，标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。 head{...}/head body{...}/body div{...}/div span{...}/span p{...}/p ...... 单一的标签： img src= / br / ....... 按xhtml规范，标签必须用小写。 h2{ font-family:宋体; font-size:10pt; color:red; } CSS的基本思想就是首先指定对什么“对象”进行设置，然后指定对此对象的那个方面的“属性”进行设置，最后给出该设置的“值”。的怪CSS样式表由3个基本部分组成，即：对象（标签名称）、属性和属性值。 6.初试牛刀-Hello，Class !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleHello Class/title style type=”text/css” p{ color:blue; font-family: Arial,宋体sans-serif； font-size:10pt; } /style /head body h2Hello, Class!/h2 pWelcome to my class/p pI hope you succeed/p /body /htmlp{ color:blue; } （2）类别选择器 自定义选择器名称，选择器前缀用点号，在标签内使用时用”class=xxx”。如： .red{ color:red;font-size:20px; }