网页项目训练课程(PPT 40页).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.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）一般标签一般标记由一个起始标签和一个结束标签所组成。例如：受控文字2）空标签虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。,计算机技术系软件教研室,1.2HTML基本语法,1.文件结构标签：html,head,body2.区段落式标签：title,hi,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.层标签：div,计算机技术系软件教研室,1.3从HTML转向XHTML,(1)Xhtml中的dtd过渡型：Transitional严格型：Strict框架型：Frameset,计算机技术系软件教研室,1.3从HTML转向XHTML,(2)需要为标签添加一个命名空间(3)所有的标签和标签的属性都必须小写，属性值可以大写(4)属性值必须用双引号括起来(5)所有的标签都必须关闭，空标签也需要关闭(6)不允许属性简写(7)如果使用的文档类型是严格型，则在xhtml文档中许多定义外观的属性是不允许使用。,计算机技术系软件教研室,1.4CSS的语法结构,CSS属性与选择符CSS的语法结构仅仅由3部分组成：选择符、属性和值。例如：bodymargin-top:20px;body为选择符，margin-top是属性，20px是值。,计算机技术系软件教研室,1.4CSS的语法结构,ID和Class选择符ID选择符用#标识，在网页中每个ID只可用1次。例如：呵呵则CSS中要求如下书写：#Nelsonwidth:200px;color:red;,计算机技术系软件教研室,1.4CSS的语法结构,ID和Class选择符Class选择符用.标识，在网页中每个Class只可用多次。例如：呵呵则CSS中要求如下书写：.Nelsonwidth:200px;color:red;,计算机技术系软件教研室,1.4CSS的语法结构,类型选择符类型选择符是指将已有的网页标签类型来作为名称的选择符。例如：bodymargin-top:20px;,计算机技术系软件教研室,1.4CSS的语法结构,群组选择符群组选择符是指将一组对象进行相同样式的定义。例如：body,div,spanmargin-top:20px;注意：这里body和div中间用的是小逗号,计算机技术系软件教研室,1.4CSS的语法结构,包含选择符包含选择符是指将某一对象中的子对象进行单独的样式定义。例如：.Nelsonlimargin-top:20px;注意：这里Nelson和li中间用的是空格应用如下：哇哈哈，OTZ,计算机技术系软件教研室,1.4CSS的语法结构,组合选择符例如：.Nelsonli,#nielimargin-top:20px;那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。,计算机技术系软件教研室,1.4CSS的语法结构,标签指定选择符如果享用id或class，也想同时使用标签选择符。可以按如下格式：例如：p#niemargin-top:20px;那么id为nie样式下的p标签的margin-top属性都为20px了。例如：p.niemargin-top:20px;那么class为nie样式下的p标签的margin-top属性都为20px了。,计算机技术系软件教研室,1.4CSS的语法结构,伪类及伪对象伪类及伪对象是一种特殊的类和对象。它由CSS自动支持，属于CSS的一种扩展类型和元素，名称不能被用户自定义，使用时只能按标准格式进行应用。例如：a:hovercolor:green;那么鼠标移动到超链接上，链接文字就编程绿色了。,计算机技术系软件教研室,1.4CSS的语法结构,通配选择符通配符是指用字符代替不确定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符选择用*作为关键字。例如：*font-size:12px;那么网页中所有没自定义的文本信息的字体大小默认为12像素。,计算机技术系软件教研室,1.5应用CSS到网页中,外联样式表内嵌样式表bodymargin-top:20px;,计算机技术系软件教研室,1.6CSS布局和table布局的区别,实际上，传统的table布局方式只是利用了html的table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。表格布局的最大缺陷为大量样式设计代码混杂在表格单元格之中，使得可读性降低，维护成本也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致浏览器下载及解析速度很慢。,计算机技术系软件教研室,1.6CSS布局和table布局的区别,这是一段典型的表格布局的html源代码：文本显示,计算机技术系软件教研室,1.6CSS布局和table布局的区别,利用css来布局的代码：在表示页面中定义个div，并使用此div的class名称：.examplefloat:left;margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:10px;background-color:blue;text-align:center;line-height: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？XML是未来数据的描述格式，在时机