《网页工程师认证网页项目训练Web标准与CSS布局概述.pptx》由会员分享，可在线阅读，更多相关《网页工程师认证网页项目训练Web标准与CSS布局概述.pptx（40页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第一章 Web标准与CSS布局概述教学要求(1)了解什么是Web标准及其构成和发展。(2)了解CSS语法结构。(3)了解CSS布局和传统table布局的区别。第1页/共40页第一章 Web标准与CSS布局概述教学重难点(1)Web标准(2)CSS语法结构第2页/共40页第一章 Web标准与CSS布局概述提问(1)Web是什么？(2)CSS是什么？(3)XHTML是什么？第3页/共40页第一章 Web标准与CSS布局概述1.1 Web标准的构成和发展Web标准：即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。网页的构成：结构、表现和行为 结构化标准
2、语言：主要包括XHTML和XML 表现标准语言：主要包括CSS 行为标准：主要包括对象模型、ECMA Script第4页/共40页1.1 Web标准的构成和发展结构化标准语言：XML:(Extensible Markup Language)即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。第5页/共40页1.1 Web标准的构成和发展结构化标准语言：XHTML:(The Extensible HyperTex
3、t Markup Language)即可扩展超文本标识语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。第6页/共40页1.1 Web标准的构成和发展表现标准语言：CSS是Cascading Style Sheets(层叠样式表)的简称。目前遵循的是W3C于1998年5月12日推荐的CSS 2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表
4、现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。第7页/共40页1.1 Web标准的构成和发展行为标准：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。第8页/共40页1.1 Web标准的构成和发展行为标准：ECMAScrip
5、t是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的扩展。第9页/共40页1.1 Web标准的构成和发展对网站浏览者的好处：文件下载与页面显示速度更快文件下载与页面显示速度更快 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱
6、等等）电冰箱等等）用户能够通过样式选择定制自己的表现界面用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本所有页面都能提供适于打印的版本第10页/共40页1.1 Web标准的构成和发展对网站所有者的好处：更少的代码和组件，容易维护更少的代码和组件，容易维护 带宽要求降低（代码更简洁），成本降低带宽要求降低（代码更简洁），成本降低 更容易被搜寻引擎搜索到更容易被搜寻引擎搜索到 改版方便，不需要变动页面内容改版方便，不需要变动页面内容 提供打印版本而不需要复制内容提供打印版本而不需要复制内容 提高网站易用性提高网站易用性第11页/共40页1.2 HTML基本语法HTML元素构成
7、了HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签告诉浏览器如何去显示页面。从结构上讲，HTML文件由元素(element)组成，组成HTML文件的元素有多种，用于组织文件的内容和知道文件的输出格式。第12页/共40页1.2 HTML基本语法1）一般标签一般标记由一个起始标签和一个结束标签所组成。例如：受控文字2）空标签虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。第13页/共40页1.2 HTML基本语法1.文件结构标签：html,head,bodyhtml,head,body2.区段落式标签：ti
8、tle,hi,br,p,pre,addresstitle,hi,br,p,pre,address3.字符格式标签：b,I,tt,font,center,blink,bigb,I,tt,font,center,blink,big4.列表标签：ul,ol,il,dl,dd,dt,dir,menuul,ol,il,dl,dd,dt,dir,menu5.链接标签：a a6.多媒体标签：img,embed,bgsoundimg,embed,bgsound7.表格标签：table,td,tr,th,captiontable,td,tr,th,caption8.表单标签：form,input,textare
9、a,selectform,input,textarea,select9.层标签：divdiv第14页/共40页1.3 从HTML转向XHTML(1)Xhtml中的dtd过渡型：Transitional严格型：Strict框架型：Frameset第15页/共40页1.3 从HTML转向XHTML(2)需要为标签添加一个命名空间(3)所有的标签和标签的属性都必须小写，属性值可以大写(4)属性值必须用双引号括起来(5)所有的标签都必须关闭，空标签也需要关闭(6)不允许属性简写(7)如果使用的文档类型是严格型，则在xhtml文档中许多定义外观的属性是不允许使用。第16页/共40页1.4 CSS的语法结
10、构CSS属性与选择符CSS的语法结构仅仅由3部分组成：选择符、属性和值。例如：body margin-top:20px;body为选择符，margin-top是属性，20px是值。第17页/共40页1.4 CSS的语法结构ID和Class选择符ID选择符用#标识，在网页中每个ID只可用1次。例如：呵呵则CSS中要求如下书写：#Nelson width:200px;color:red;第18页/共40页1.4 CSS的语法结构ID和Class选择符Class选择符用.标识，在网页中每个Class只可用多次。例如：呵呵则CSS中要求如下书写：.Nelson width:200px;color:re
11、d;第19页/共40页1.4 CSS的语法结构类型选择符类型选择符是指将已有的网页标签类型来作为名称的选择符。例如：body margin-top:20px;第20页/共40页1.4 CSS的语法结构群组选择符群组选择符是指将一组对象进行相同样式的定义。例如：body,div,span margin-top:20px;注意：这里body和div中间用的是小逗号第21页/共40页1.4 CSS的语法结构包含选择符包含选择符是指将某一对象中的子对象进行单独的样式定义。例如：.Nelson li margin-top:20px;注意：这里Nelson和li中间用的是空格应用如下：哇哈哈，OTZ第22
12、页/共40页1.4 CSS的语法结构组合选择符例如：.Nelson li,#nie li margin-top:20px;那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。第23页/共40页1.4 CSS的语法结构标签指定选择符如果享用id或class，也想同时使用标签选择符。可以按如下格式：例如：p#nie margin-top:20px;那么id为nie样式下的p标签的margin-top属性都为20px了。例如：margin-top:20px;那么class为nie样式下的p标签的margin-top属性都为20px了。第24页/共40
13、页1.4 CSS的语法结构伪类及伪对象伪类及伪对象是一种特殊的类和对象。它由CSS自动支持，属于CSS的一种扩展类型和元素，名称不能被用户自定义，使用时只能按标准格式进行应用。例如：a:hover color:green;那么鼠标移动到超链接上，链接文字就编程绿色了。第25页/共40页1.4 CSS的语法结构通配选择符通配符是指用字符代替不确定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符选择用*作为关键字。例如：*font-size:12px;那么网页中所有没自定义的文本信息的字体大小默认为12像素。第26页/共40页1.5 应用CSS到网页中外联样式表内嵌样式表body ma
14、rgin-top:20px;第27页/共40页1.6 CSS布局和table布局的区别实际上，传统的table布局方式只是利用了html的table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。表格布局的最大缺陷为大量样式设计代码混杂在表格单元格之中，使得可读性降低，维护成本也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致浏览器下载及解析速度很慢。第28页/共40页1.6 CSS布局和table布局的区别这是一段典型的表格布局
15、的html源代码：td width=51%rowspan=2 background=#000000文本显示 第29页/共40页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%;width:50%;第30页/共40
16、页1.7 常见问题(1)什么是网站重构？即将现有不符合Web标准的网站转向Web标准去重新设计。(2)什么样的网站才符合Web标准？能通过w3c代码验证。验证地址：第31页/共40页1.7 常见问题(3)Web标准的商业价值是什么？A.加速开发B.易于维护，增加机会C.拓展访问渠道D.节约宽带成本E.提高用户体验F.转变被证明是值得的第32页/共40页1.7 常见问题(4)初学Web标准的几个误区A.不是为了通过校验才标准化B.不要用传统的表格思维来套divC.不必为了每块内容都建立IDD.不要因为一点受挫就轻言放弃第33页/共40页1.7 常见问题(5)使用Web标准后表格还有用吗？A.关于
17、表格，主要用于数据的读取输出等。B.关于其他元素，可以配合Div+CSS布局来使用第34页/共40页1.7 常见问题(6)可以继续使用Html来设计网页吗？当然，Html也是W3C标准之一！(7)学习CSS布局比表格难吗？其实不难，只是概念的转换而已。Web标准只是相对于html来说，有了更多的标签来使用，当然可以继续使用html了。第35页/共40页1.7 常见问题(8)CSS布局是否必须就要手写代码？嗯，目前是的，不过DW已经提供了所见即所得的设计模式。(9)为什么能直接过度到XML？XML是未来数据的描述格式，在时机成熟，XML会取代XHTML和HTML成为未来网站构建中实现内容层的一环。第36页/共40页1.7 常见问题(10)使用Web标准之后就不再存在兼容性问题了吗？并非如此，Web标准只能是尽可能的减少各种浏览器之间兼容性所带来的问题。第37页/共40页本章小结(1)让学生了解Web标准及其构成和发展。(2)让学生了解CSS语法结构。(3)让学生了解CSS布局和传统table布局的区别。第38页/共40页作业(1)CSS布局和传统table布局的区别？(2)为什么要用Web标准？第39页/共40页计算机技术系软件教研室感谢您的观看！第40页/共40页