课Web标准基础知识.ppt

Div Css网站布局第一课张鹏 Web标准基础知识 目标 什么是Web标准 Web标准的构成采用标准的好处理解表现和结构分离 什么是web标准 一 什么是web标准 web标准不是某一个标准 而是由W3C和其他标准化组织制定的一系列标准的集合 包含我们所熟悉的HTML XTHML Javascript 以及CSS等 二 Web标准的目的 在于创建一个统一的用于Web表现层的技术标准 以便于通过不同浏览器或终端设备向最终户展示信息内容 学习CSS布局的10大理由 1 提高页面浏览速度 使用CSS方法 比传统的web设计方法至少节约50 以上的文件尺寸 2 缩短改版时间 只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点 3 降低网站流量的费用 带宽要求降低 代码更简洁 成本降低 4 更容易被搜寻引擎搜索到 提高网站在百度或google中的排名 5 内容能被更广泛的设备所访问 包括屏幕阅读机 手持设备 搜索机器人 打印机 电冰箱等等 学习CSS布局的10大理由 6 内容能被更多的用户所访问 包括失明 视弱 色盲等残障人士 7 表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中 你可以减少未来网页无效的可能 8 更好的用户体验 用户能够通过样式选择定制自己喜欢的表现界面 9 提高你的职场竞争实力 越来越多的网站采用Web标准 工作机会增加 降低失业风险 10 面向现在与未来的设计 XHTML CSS的设计将全面替代 传统的HTML 表格设计 成为新一代互联网设计的标准 Web标准的构成 四 Web标准的构成 Web标准主要由三部分组成 结构 Structure 表现 Presentation 和行为 Behavior 理解表现和结构分离 web标准的好处之一是 理解表现和内容分离 那这到底是什么意思呢 首先我们必须先明白一些基本的概念 内容 结构 表现和行为 1 内容 就是制作者放在页面内真正想要让访问者浏览的信息 2 结构 使内容更加具有逻辑性和易用性 类似于 1级2级标题 正文 列表等把它们称为结构 3 表现 用于修饰内容的外观的样式的东西称为表现 4 行为 对内容的交互及操作效果 如通过javascript判断表单提交等 Web常见问题 1 什么样的网站才符合Web标准符合Web标准的网站首先一点是网页能够通过W3C的代码校验 W3C提供了一个帮助使用者校验自己网站各方面语法程序 校验网址http validator w3 org 2 什么叫网站重构 重构一词本身源于软件开发中对于代码的改良 在 网站重构 一书引入中国之后 也带来了一股网站重构的热潮 网站重构可以理解为改变老式的HTML表格布局 使用新的符合Web标准的网站结构及代码改良的方式 将现有网站转向Web标准设计可以称之为网站重构 关于Web标准的误区 1 抛弃表格布局的思维方式 刚开始使用DIV CSS布局的人往往认为 DIV CSS布局就是将原来用表格的地方用层替代 原来用表格嵌套 现在用层嵌套 2 Web标准的