网页项目训练》第一章Web标准与CSS布局概述ppt课件

1、主讲人：聂宇第一章 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言语的网站设计言语。网页的构成：构造、表现和行为 构造化规范言语：主要包括XHT

2、ML和XML 表现规范言语：主要包括CSS 行为规范：主要包括对象模型、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)即可扩展超

3、文本标识言语。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相结合能协助设计师分别

4、外观与构造，使站点的访问及维护更加容易。1.1 Web规范的构成和开展行为规范：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与阅读器，平台，言语无关的接口，使得他可以访问页面其他的规范组件。简单了解，DOM处理了Netscape的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个规范的方法，让他们来访问他们站点中的数据、脚本和表现层对像。1.1 Web规范的构成和开展行为规范：ECMAScript是一种由欧洲计算机制造商协会ECMA经过ECMA-262规范化的脚本程序设计言语。这种言语在

5、万维网上运用广泛，它往往被称为JavaScript或JScript，但实践上后两者是ECMA-262规范的扩展。1.1 Web规范的构成和开展对网站阅读者的益处： 文件下载与页面显示速度更快 内容能被更多的用户所访问包括失明、视弱、色盲等残障人士 内容能被更广泛的设备所访问包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等 用户可以经过款式选择定制本人的表现界面 一切页面都能提供适于打印的版本1.1 Web规范的构成和开展对网站一切者的益处： 更少的代码和组件，容易维护 带宽要求降低代码更简约，本钱降低 更容易被搜索引擎搜索到 改版方便，不需求变动页面内容 提供打印版本而不需求复制内容

6、提高网站易用性1.2 HTML根本语法HTML元素构成了HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签通知阅读器如何去显示页面。从构造上讲，HTML文件由元素(element)组成，组成HTML文件的元素有多种，用于组织文件的内容和知道文件的输出格式。1.2 HTML根本语法1普通标签普通标志由一个起始标签和一个终了标签所组成。例如：受控文字2空标签虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标志被称为空标签。1.2 HTML根本语法1.文件构造标签：html,head,body2.区段落式标签：title,hi,

7、br,p,pre,address3.字符格式标签：b,I,tt,font,center,blink,big4.列表标签：ul,ol,il,dl,dd,dt,dir,menu5.链接标签：a6.多媒体标签：img,embed,bgsound7.表格标签：table,td,tr,th,caption8.表单标签：form,input,textarea,select9.层标签：div1.3 从HTML转向XHTML(1) Xhtml中的dtd过渡型：Transitional严厉型：Strict框架型：Frameset1.3 从HTML转向XHTML(2) 需求为标签添加一个命名空间(3)一切的标签和

8、标签的属性都必需小写，属性值可以大写(4)属性值必需用双引号括起来(5)一切的标签都必需封锁，空标签也需求封锁(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;colo

9、r:red;1.4 CSS的语法构造ID和Class选择符Class选择符用.标识，在网页中每个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的语法构造包含选择符包含选择符是指将某一对

10、象中的子对象进展单独的款式定义。例如： .Nelson li margin-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属性都为20

11、px了。例如： p.nie margin-top:20px; 那么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，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。表格规划的最大缺陷为大量款式设计代码混杂在表格单元格之中，使得可读性降低，维护本钱也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致阅读器下载及

13、解析速度很慢。1.6 CSS规划和table规划的区别这是一段典型的表格规划的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-heigh

14、t:160%; width:50%;1.7 常见问题(1)什么是网站重构？即将现有不符合Web规范的网站转向Web规范去重新设计。(2)什么样的网站才符合Web规范？能经过w3c代码验证。 验证地址：/css-validator/1.7 常见问题(3)Web规范的商业价值是什么？A.加速开发B.易于维护，添加时机C.拓展访问渠道D.节约宽带本钱E.提高用户体验F.转变被证明是值得的1.7 常见问题(4)初学Web规范的几个误区A.不是为了经过校验才规范化B.不要用传统的表格思想来套divC.不用为了每块内容都建立IDD.不要由于一点受挫就轻言放弃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？X