WEB标准与CSS.pptVIP

第4章 WEB标准与CSS基础 Teaching Objectives 通过本章学习，应该掌握以下内容： Web标准 网站重构 CSS样式表的应用方式 CSS选择器 4.1 Web标准 什么是标准？ 什么是Web标准？ 目前通常所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言，Web标准中典型的应用模式是DIV+CSS。 网页主要由三部分组成： 结构（Structure）：HTML和XHTML 表现（Presentation）：CSS 行为（Behavior）：JavaScript 如何理解网页的三个组成部分呢？ 有关Web标准的更多内容 W3C制定 DraftProposalRecommendation HTML 4.01/CSS 2.1 XHTML 1.0/1.1 XHTML 2.0去哪里了？ 未来的趋势：HTML 5/CSS 3 有关内容参考第6/7章 4.1 Web标准 4.1.1内容与表现的分离 内容是页面传达信息的基础 表现使得内容的传达变得更加明晰和方便 结构则是内容和表现之间的纽带 【实例4_1.html】 4.1 Web标准 4.1.2 布局思考方式 （1）传统表格布局【实例4_2.html】 （2）Web标准布局【实例4_3.html】 目前，Dreamweaver将“XHTML 1.0 Transitional”作为默认文档类型 4.2 网站重构 4.2.1 什么是网站重构 目的是让网站符合Web标准，简单地说就是不用HTML+table标签来设计页面，改用XHTML+CSS来实现。 网站重构是一种思想，是一种理念，真正的网站重构理应包含结构、表现和行为三个层次的分离 Web标准中，目前使用“XHTML+CSS”设计的网站，目的是使结构和表现彻底分离。 4.2 网站重构 4.2.2 什么是XHTML Extensible HyperText Markup Language 4.2.3利用XHTML改善现有网站 为页面添加正确的DOCTYPE !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 设定一个名字空间 html XMLns=/1999/xhtml 4.2 网站重构 4.2.3利用XHTML改善现有网站 声明编码语言 meta http-equiv=Content-Type content=text/html; charset=GB2312 / 用小写字母书写所有的标签 为图片添加alt属性 给所有属性值加引号 关闭所有的标签 用id属性代替name属性 避免使用已被废弃的HTML元素 4.3 CSS样式表应用 CSS，全称为Cascading Style Sheets，即通常所说的层叠样式表 CSS样式，就是告诉浏览器要如何格式化网页中某个内容的一个规则 CSS是为了简化Web页面的更新工作而诞生的 你所看到的HTML是这样的 html head titleMy Title/title /head body a href=#My Link/a h1My Header/h1 /body /html 浏览器看到的则是这样的 4.3 CSS样式表应用 CSS规则语法 样式表按照其在网页中使用位置和方式的不同，可以分为三种类型： 内部（Intenal Style Sheet） 外部（Extenal Style Sheet） 内嵌（Inline Style Sheet） 4.3 CSS样式表应用 4.3.1 CSS的使用方式 1）外部样式表 可以集中控制和管理多个网页的格式和布局 外部样式表将CSS规则写成一个.css文本文件 调用外部样式表一般是在head标签内使用link标签将样式表文件链接到HTML文件内，如： link href=”4_1.css” rel=”stylesheet” type=”text/css” 4.3 CSS样式表应用 4.3.1 CSS的使用方式 2）内部样式表 内部样式表使用style/style标签把样式表的内容直接放到HTML页面的head区域内定义样式，内部样式表只对所在的网页一次性有效，可针对具体页面进行具体调整 style type=”text/css” !-- p { text-align: left; color: #FF0000; } -- /style 内部样式表和外部样式表可以相互转换，只需要将内容样式表中style与/style之间的代码剪切，保存在一个以.css为后缀名的文本文件中即可 4.3 CSS样式表应用 4.3.1 CSS的使用方式