《《网页工程师认证-网页项目训练》第一章 Web标准与CSS布局概述.ppt》由会员分享，可在线阅读，更多相关《《网页工程师认证-网页项目训练》第一章 Web标准与CSS布局概述.ppt（40页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页工程师认证-网页项目训练第一章 Web标准与CSS布局概述 Four short words sum up what has lifted most successful Four short words sum up what has lifted most successful individuals above the crowd: a little bit more. individuals above the crowd: a little bit more. -author -author -date-date第一章 Web标准与CSS布局概述 教学要求 (1) 了解什么是We
2、b标准及其构成和发展。 (2) 了解CSS语法结构。 (3) 了解CSS布局和传统table布局的区别。第一章 Web标准与CSS布局概述 教学重难点 (1) Web标准 (2) CSS语法结构第一章 Web标准与CSS布局概述 提问 (1) Web是什么？ (2) CSS是什么？ (3) XHTML是什么？第一章 Web标准与CSS布局概述 1.1 Web标准的构成和发展Web标准：即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。网页的构成：结构、表现和行为 结构化标准语言：主要包括XHTML和XML 表现标准语言：主要包括CSS 行为标准：主
3、要包括对象模型、ECMA Script1.1 Web标准的构成和发展 结构化标准语言： XML: (Extensible Markup Language)即可扩展标记语言，它与HTML一样，都是SGML (Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。1.1 Web标准的构成和发展 结构化标准语言： XHTML: (The Extensible HyperText Markup Language)即可扩展超文本标识语言。HTML是一种基本的WEB网页设计
4、语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。1.1 Web标准的构成和发展 表现标准语言： CSS是Cascading Style Sheets(层叠样式表)的简称。目前遵循的是W3C于1998年5月12日推荐的CSS 2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。1.
5、1 Web标准的构成和发展 行为标准： DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。1.1 Web标准的构成和发展 行为标准： ECMAScript是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为J
6、avaScript或JScript，但实际上后两者是ECMA-262标准的扩展。1.1 Web标准的构成和发展对网站浏览者的好处：1.1 Web标准的构成和发展 对网站所有者的好处：1.2 HTML基本语法 HTML元素构成了HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签告诉浏览器如何去显示页面。 从结构上讲，HTML文件由元素(element)组成，组成HTML文件的元素有多种，用于组织文件的内容和知道文件的输出格式。1.2 HTML基本语法 1）一般标签 一般标记由一个起始标签和一个结束标签所组成。例如：受控文字 2）空标签
7、虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。1.2 HTML基本语法 1.文件结构标签： 2.区段落式标签： 3.字符格式标签： 4.列表标签： 5.链接标签： 6.多媒体标签： 7.表格标签： 8.表单标签： 9.层标签：1.3 从HTML转向XHTML (1) Xhtml中的dtd 过渡型：Transitional 严格型：Strict 框架型：Frameset1.3 从HTML转向XHTML (2) 需要为标签添加一个命名空间 (3)所有的标签和标签的属性都必须小写，属性值可以大写 (4)属性值必须用双引号括起来 (5)所有的标签都必须关闭，空标签也需要
8、关闭 (6)不允许属性简写 (7)如果使用的文档类型是严格型，则在xhtml文档中许多定义外观的属性是不允许使用。1.4 CSS的语法结构 CSS属性与选择符 CSS的语法结构仅仅由3部分组成：选择符、属性和值。 例如：body margin-top:20px; body为选择符，margin-top是属性，20px是值。1.4 CSS的语法结构 ID和Class选择符 ID选择符用#标识，在网页中每个ID只可用1次。 例如：呵呵 则CSS中要求如下书写：#Nelson width:200px;color:red;1.4 CSS的语法结构 ID和Class选择符 Class选择符用.标识，在网
9、页中每个Class只可用多次。 例如：呵呵 则CSS中要求如下书写：.Nelson width:200px;color:red;1.4 CSS的语法结构 类型选择符 类型选择符是指将已有的网页标签类型来作为名称的选择符。 例如： body margin-top:20px; 1.4 CSS的语法结构 群组选择符 群组选择符是指将一组对象进行相同样式的定义。 例如： body,div,span margin-top:20px; 注意：这里body和div中间用的是小逗号1.4 CSS的语法结构 包含选择符 包含选择符是指将某一对象中的子对象进行单独的样式定义。 例如： .Nelson li mar
10、gin-top:20px; 注意：这里Nelson和li中间用的是空格 应用如下：哇哈哈，OTZ1.4 CSS的语法结构 组合选择符 例如： .Nelson li,#nie li margin-top:20px; 那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。1.4 CSS的语法结构 标签指定选择符 如果享用id或class，也想同时使用标签选择符。可以按如下格式： 例如： p#nie margin-top:20px; 那么id为nie样式下的p标签的margin-top属性都为20px了。 例如： p.nie margin-top:20
11、px; 那么class为nie样式下的p标签的margin-top属性都为20px了。1.4 CSS的语法结构 伪类及伪对象 伪类及伪对象是一种特殊的类和对象。它由CSS自动支持，属于CSS的一种扩展类型和元素，名称不能被用户自定义，使用时只能按标准格式进行应用。 例如： a:hover color:green; 那么鼠标移动到超链接上，链接文字就编程绿色了。1.4 CSS的语法结构 通配选择符 通配符是指用字符代替不确定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符选择用*作为关键字。 例如： * font-size:12px; 那么网页中所有没自定义的文本信息的字体大小默认为
12、12像素。1.5 应用CSS到网页中 外联样式表 内嵌样式表body margin-top:20px;1.6 CSS布局和table布局的区别实际上，传统的table布局方式只是利用了html的table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。表格布局的最大缺陷为大量样式设计代码混杂在表格单元格之中，使得可读性降低，维护成本也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致浏览器下载及解析速度很慢。1.6 CSS布局和ta
13、ble布局的区别 这是一段典型的表格布局的html源代码：td width=51% rowspan=2 background=#000000文本显示 1.6 CSS布局和table布局的区别利用css来布局的代码：在表示页面中定义个div，并使用此div的class名称：.example float:left; margin-top:10px; margin-right:20px; margin-bottom:10px; margin-left:10px; background-color:blue; text-align:center; line-height:160%
14、; width:50%;1.7 常见问题 (1)什么是网站重构？ 即将现有不符合Web标准的网站转向Web标准去重新设计。 (2)什么样的网站才符合Web标准？ 能通过w3c代码验证。 验证地址：http:/jigsaw.w3.org/css-validator/1.7 常见问题 (3)Web标准的商业价值是什么？ A.加速开发 B.易于维护，增加机会 C.拓展访问渠道 D.节约宽带成本 E.提高用户体验 F.转变被证明是值得的1.7 常见问题 (4)初学Web标准的几个误区 A.不是为了通过校验才标准化 B.不要用传统的表格思维来套div C.不必为了每块内容都建立ID D.不要因为一点受挫
15、就轻言放弃1.7 常见问题 (5)使用Web标准后表格还有用吗？ A.关于表格，主要用于数据的读取输出等。 B.关于其他元素，可以配合Div+CSS布局来使用1.7 常见问题 (6)可以继续使用Html来设计网页吗？ 当然，Html也是W3C标准之一！ (7)学习CSS布局比表格难吗？ 其实不难，只是概念的转换而已。 Web标准只是相对于html来说，有了更多的标签来使用，当然可以继续使用html了。1.7 常见问题 (8)CSS布局是否必须就要手写代码？ 嗯，目前是的，不过DW已经提供了所见即所得的设计模式。 (9)为什么能直接过度到XML？ XML是未来数据的描述格式，在时机成熟，XML会取代XHTML和HTML成为未来网站构建中实现内容层的一环。1.7 常见问题 (10)使用Web标准之后就不再存在兼容性问题了吗？ 并非如此，Web标准只能是尽可能的减少各种浏览器之间兼容性所带来的问题。本章小结 (1) 让学生了解Web标准及其构成和发展。 (2) 让学生了解CSS语法结构。 (3) 让学生了解CSS布局和传统table布局的区别。作业 (1) CSS布局和传统table布局的区别？ (2) 为什么要用Web标准？