IDIV+CSS网页布局.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网页布局 授课班级 院级公共选修课 课时 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和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样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码 4.HTML标签（标记） (X)html是一种标签语言，标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。 成对的标签： head{...}/head body{...}/body div{...}/div span{...}/span p{...}/p ...... 单一的标签： img src= / br / ....... 按xhtml规范，标签必须用小写。 5.CSS基本思想和格式 CSS全称是Cascading Style Sheet，层叠样式表。它是一种用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS出现的根本原因，就是解决HTML中内容与表现代码混杂在一起的情况，使HTML内容与表现形式分开来。（X