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

计算机技术系软件教研室《网页工程师认证》《网页项目训练》主讲人：聂宇计算机技术系软件教研室第一章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.1Web标准的构成和发展•Web标准：即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。•网页的构成：结构、表现和行为结构化标准语言：主要包括XHTML和XML表现标准语言：主要包括CSS行为标准：主要包括对象模型、ECMAScript计算机技术系软件教研室1.1Web标准的构成和发展•结构化标准语言：•XML:(ExtensibleMarkupLanguage)即可扩展标记语言，它与HTML一样，都是SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。计算机技术系软件教研室1.1Web标准的构成和发展•结构化标准语言：•XHTML:(TheExtensibleHyperTextMarkupLanguage)即可扩展超文本标识语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。计算机技术系软件教研室1.1Web标准的构成和发展•表现标准语言：•CSS是CascadingStyleSheets(层叠样式表)的简称。目前遵循的是W3C于1998年5月12日推荐的CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。计算机技术系软件教研室1.1Web标准的构成和发展•行为标准：•DOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。计算机技术系软件教研室1.1Web标准的构成和发展•行为标准：•ECMAScript是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的扩展。计算机技术系软件教研室1.1Web标准的构成和发展•对网站浏览者的好处：•文件下载与页面显示速度更快•内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）•内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）•用户能够通过样式选择定制自己的表现界面•所有页面都能提供适于打印的版本计算机技术系软件教研室1.1Web标准的构成和发展•对网站所有者的好处：•更少的代码和组件，容易维护•带宽要求降低（代码更简洁），成本降低•更容易被搜寻引擎搜索到•改版方便，不需要变动页面内容•提供打印版本而不需要复制内容•提高网站易用性计算机技术系软件教研室1.2HTML基本语法•HTML元素构成了HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签告诉浏览器如何去显示页面。•从结构上讲，HTML文件由元素(element)组成，组成HTML文件的元素有多种，用于组织文件的内容和知道文件的输出格式。计算机技术系软件教研室1.2HTML基本语法•1）一般标签•一般标记由一个起始标签和一个结束标签所组成。例如：x受控文字/x•2）空标签•虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。计算机技术系软件教研室1.2HTML基本语法•1.文件结构标签：html,head,body•2.区段落式标签：title,hi,br,p,pre,address•3.字符格式标签：b,I,tt,font,center,blink,big•4.列表标签：ul,ol,il,dl,dd,dt,dir,menu•5.链接标签：a•6.多媒体标签：img,embed,bgsound•7.表格标签：table,td,tr,th,caption•8.表单标签：form,input,textarea,select•9.层标签：div计算机技术系软件教研室1.3从HTML转向XHTML•(1)Xhtml中的dtd•过渡型：Transitional•严格型：Strict•框架型：Frameset计算机技术系软件教研室1.3从HTML转向XHTML•(2)需要为html标签添加一个命名空间•(3)所有的标签和标签的属性都必须小写，属性值可以大写•(4)属性值必须用双引号括起来•(5)所有的标签都必须关闭，空标签也需要关闭•(6)不允许属性简写•(7)如果使用的文档类型是严格型，则在xhtml文档中许多定义外观的属性是不允许使用。计算机技术系软件教研室1.4CSS的语法结构•CSS属性与选择符•CSS的语法结构仅仅由3部分组成：选择符、属性和值。•例如：body{margin-top:20px;}body为选择符，margin-top是属性，20px是值。计算机技术系软件教研室1.4CSS的语法结构•ID和Class选择符•ID选择符用#标识，在网页中每个ID只可用1次。•例如：divid=“Nelson”呵呵/div•则CSS中要求如下书写：#Nelson{width:200px;color:red;}计算机技术系软件教研室1.4CSS的语法结构•ID和Class选择符•Class选择符用.标识，在网页中每个Class只可用多次。•例如：divclass=“Nelson”呵呵/div•则CSS中要求如下书写：.Nelson{width:200px;color:red;}计算机技术系软件教研室1.4CSS的语法结构•类型选择符•类型选择符是指将已有的网页标签类型来作为名称的选择符。•例如：body{margin-top:20px;}计算机技术系软件教研室1.4CSS的语法结构•群组选择符•群组选择符是指将一组对象进行相同样式的定义。•例如：body,div,span{margin-top:20px;}※注意：这里body和div中间用的是小逗号计算机技术系软件教研室1.4CSS的语法结构•包含选择符•包含选择符是指将某一对象中的子对象进行单独的样式定义。•例如：.Nelsonli{margin-top:20px;}※注意：这里Nelson和li中间用的是空格•应用如下：divclass=“Nelson”li哇哈哈，OTZ/li/div计算机技术系软件教研室1.4CSS的语法结构•组合选择符•例如：.Nelsonli,#nieli{margin-top:20px;}•那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。计算机技术系软件教研室1.4CSS的语法结构•标签指定选择符•如果享用id或class，也想同时使用标签选择符。可以按如下格式：•例如：p#nie{margin-top:20px;}•那么id为nie样式下的p标签的margin-top属性都为20px了。•例如：p.nie{margin-top:20px;}•那么class为nie样式下的p标签的margin-top属性都为20px了。计算机技术系软件教研室1.4CSS的语法结构•伪类及伪对象•伪类及伪对象是一种特殊的类和对象。它由CSS自动支持，属于CSS的一种扩展类型和元素，名称不能被用户自定义，使用时只能按标准格式进行应用。•例如：a:hover{color:green;}•那么鼠标移动到超链接上，链接文字就编程绿色了。计算机技术系软件教研室1.4CSS的语法结构•通配选择符•通配符是指用字符代替不确定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符选择用*作为关键字。•例如：*{font-size:12px;}那么网页中所有没自定义的文本信息的字体大小默认为12像素。计算机技术系软件教研室1.5应用CSS到网页中•外联样式表linkrel=“stylesheet”rev=“stylesheet”href=“style.css”type=“text/css”•内嵌样式表styletype=“text/css”body{margin-top:20px;}/styledivstyle=“border:1px”/div计算机技术系软件教研室1.6CSS布局和table布局的区别•实际上，传统的table布局方式只是利用了html的table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。•表格布局的最大缺陷为大量样式设计代码混杂在表格单元格之中，使得可读性降低，维护成本也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致浏览器下载及解析速度很慢。计算机技术系软件教研室1.6CSS布局和table布局的区别•这是一段典型的表格布局的html源代码：tablewidth=100%border=0cellspacing=3cellpadding=3trtdwidth=51%rowspan=2background=#000000fontcolor=blue文本显示/font/tdtdwidth=30%background=#00ffff /tdtdwidth=19%background=#00ffff /td/tr/table计算机技术系软件教研室1.6CSS布局和table布局的区别•利用css来布局的代码：•在表示页面中定义个div，并使用此div的class名称：styletype=text/css.example{float:left;margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:10px;background-color:blue;text-align:center;line-height::160%;width:50%;}/style计算机技术系软件教研室1.7常见问题•(1)什么是网站重构？•即将现有不符合Web标准的网站转向Web标准去重新设计。•(2)什么样的网站才符合Web标准？•能通过w3c代码验证。验证地址：计算机技术系软件教研室1.7常见问题•(3)Web标准的商业价值是什么？•A.加速开发•B.易于维护，增加机会•C.拓展访问渠道•D.节约宽带成本•E.提高用户体验•F.转变被证明是值得的计算机技术系软件教研室1.7常见问题•(4)初学Web标准的几个误区•A.不是为了通过校验