《网页工程师认证-网页项目训练》第一章 Web标准与CSS布局概述.ppt

计算机技术系软件教研室 《网页工程师认证》《网页项目训练》 主讲人：聂宇 第一章 Web标准与CSS布局概述 教学要求 (1) 了解什么是Web标准及其构成和发展。 (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 行为标准：主要包括对象模型、ECMA Script 1.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网页设计语言，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.1 Web标准的构成和发展 行为标准： DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 1.1 Web标准的构成和发展 行为标准： ECMAScript是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的扩展。 1.1 Web标准的构成和发展 对网站浏览者的好处： 文件下载与页面显示速度更快 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士） 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、有哪些信誉好的足球投注网站机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本 1.1 Web标准的构成和发展 对网站所有者的好处： 更少的代码和组件，容易维护 带宽要求降低（代码更简洁），成本降低 更容易被搜寻引擎有哪些信誉好的足球投注网站到 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性 1.2 HTML基本语法 HTML元素构成了HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签告诉浏览器如何去显示页面。 从结构上讲，HTML文件由元素(element)组成，组成HTML文件的元素有多种，用于组织文件的内容和知道文件的输出格式。 1.2 HTML基本语法 1）一般标签 一般标记由一个起始标签和一个结束标签所组成。例如：x受控文字/x 2）空标签 虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。 1.2 HTML基本语法 1.文件结构标签：html,head,body 2.区段落式标签：title,hi,br,p,pre,address 3.字符格式标签：b,I,tt,font,center,blink,big