Web标准与CSS布局.pptVIP

Web标准由一系列规范组成，由于Web设计越来越趋向于整体于结构化 Web标准的标准集：结构（Structure）、表现（Presentation）、行为（Behavior） HTML语言是Web的基本描述语言， HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 XML是一种能定义其他语言的语言，即可扩展。 XHTML 建立它的目的就是实现HTML向XML的过渡 W3C创建CSS标准的目的是希望以CSS来描述整个页面的布局设计，与HTML所负责的结构分开 使用CSS布局与XHTML所描述的信息结构相结合能帮助设计师分离出表现与内容，使站点的构建及维护更加容易 DOM是一种让浏览器与内容结构之间沟通接口，使你可以访问页面上的标准组件 ECMAScript是由CMA制定的标准脚本标准语言，用于实现具体的界面上对象的交互操作 * 内容是通过xhtml结构化语言被标记为各个独立部分，如左分栏、右分栏、新闻列表等 表现是如对字号、字体、排版的设计称之为表现 真正符合标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离－即表现与内容分离的技术 在图形桌面浏览器上达到更精确的控制、定位和排版，允许用户使用适合他们的表达方式进行编辑 可以开发工作在多浏览器和平台的复杂交互行为 遵守可访问性原则和指南，而不需要牺牲美观。性能或者精巧性 以前重新设计网站需要几天或者几个星期，而现在只需要几个小，从而减少成本和避免工作烦恼 支持多种浏览器，从而不需要争论和考虑多版本的成本 为任何网页提供适合打印的版本 通过把样式从结构、行为中分离，以及严格的文档结构，易于重新设计web文档 1、在网站设计过程中，对于开发人员来将最希望的就是高效开发与简单维护 由于表现和内容的分离使得同一个设计可以被重复的使用，当定义界面上某一个元素的设计样式后，可以将这段样式代码重用于另一个信息内容之中，直接应用或继承这段代码进行扩展，做到重用的目的，可以减少重复代码，加快开发效率。从而是维护也变得简单 2、通过将内容与设计进行分离，使得信息实现跨平台访问 3、通过样式的重用、整个网站的文件量可以成倍的减少，使得降低服务器的负担 4、每次改版只需改动样式文件就可以实现，使得改版技术难度与实施周期都得到降低 5、浏览器在解析中可以以更好的解析方式分析结构元素与设计元素，良好的网页浏览速度使得用户的浏览体验得以提升 6、已经将内容与设计分开，不用再担心未来的技术变革 7、表现与内容分离的技术要求我们充分理解网站信息的具体构成以及如何使设计好的样式可以重用，使我们在制作网站时能够充分地对网站的内容、设计的统一性、可用性进行思考与设计，从而提高网站的可用性，改善用户体验 * 传统table布局方式实际上是利用了HTML table表格元素具有无边框特性 复杂的表格设计使得设计极为不易，修改更加复杂，容易产生多余代码 通过div的使用，我们可以将网页中的各个元素划分到各个div中，成为网页中的结构主体，而演示表现则由css来完成 * 未采用css，大量使用html进行定位、布局，或者虽然已经采用css，但是为遵循html结构化标准的站点 * 浏览器支持完善 表现与结构分离 样式设计控制功能 强大 继承性能优越 CSS目前最新版本为2.0，是控制网页布局样式的基础，并真正能够做到网页表现与内容分离的一种样式设计语言 CSS能够对网页种的对象的位置排版进行像素级的精确控制，支持所有字体字号样式，优秀的和模型控制能力，简单的交互设计能力 传统的table布局实际上是利用了HTML table表格元素具有的无边框特性 CSS的重点不再放在table元素的设计中，取而代之的是HTML中的另一个元素div，div可以理解为图层或是一个“块”，div是一种比表格简单的元素div在使用时不需向表格一样通过其内部的单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由的来控制页面版式及样式 * div是一个容器，其中放置了内容 div对象中除了直接放入文本，也可以放入其他标签，也可以多个div标签进行嵌套使用，最终的目的是合理的标识出我们的页面区域 div在使用时，可以加入其他属性，如id，class，align，sytle等 在css布局方面，为了实现内容与表现的分离，不应当桨align对齐属性，与style行间样式表属性编写在xhtml页面的div标签中 注：同一个名称的id值在当前xhtml页面中，只允许使用一次，不管是应用到div还是其他对象的id中，而class名称则可以重复使用 * 当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部 * 分块： 标志和站点名