校园学生学习娱乐资源第一门户 校园第一站 源于校园 服务于校园 分享资源和快乐 网站地图 高级搜索 RSS订阅 收藏本站 设为首页
首页 | 校园 | 教育 | 考试 | 电脑 | 英语 | 读书 | 就业 | 论文 | 体育 | 健康 | 图片 | 分类信息
Q Q | 下载 | 游戏 | 音乐 | 影视 | 专题 | 祝福 | 百科 | 问答 | 博客 | 会员 | 社区 | 校园论坛
·偶像剧免费在线收看
·DEDECMS免费模板规则下载
·
·全能空间、网站建设仅200
DIV+CSS | FrontPages | HTML | Javascript | 文章搜索:
  当前位置: 主页>电脑>网页设计>Dreamweaver> 文章正文

用Dreamweaver 8 搞定“web标准”

http://www.xydyz.com 来源:校园第一站 2007-10-22 阅读: 评论


译者序:这个系列原文一共8篇文章,从普及 Web Standards 入手,讲述如何用 Dreamweaver 8 来构建符合标准的 Web ,由于原作者的此篇文章是对《Build Your Own Standards Compliant Website Using Dreamweaver 8 》(这篇文章是收费的)的摘录,所以我对内容进行了适当的删改,顺序与原文是一致的,但篇幅会有调整,特此告知。翻译水平有限,敬请谅解。

  如果您正在读这篇文章,您很可能是已经对 Web 标准有了一定的兴趣,并且对用 DW ( Dreamweaver 的简称)来构建的站点中标准的应用非常好奇。

  或许您已经对 WS (Web Standards的简称)有了一定的了解,但是您并不知道如何用 DW 来编写可兼容的代码。或者您是一个 DW 用户,您很想遵从 WS ,更广泛的使用 CSS ,并且可以制作出更有亲和力的文档。无论您是哪一种类型,这篇文章都会给您想要的答案:告诉您如何用 DW 来搞定 WS。

  Web 标准的定义

  就我们在整篇文章所关心的 WS 来说,让我们首先花一点时间来明确一下我们究竟在谈论些什么:

  WS 是一些指导 Web 开发语言的规范,是由 W3C 所制定的。这些规范包含了多种语言,例如,HTML、XHTML 和 CSS 还有一些其他的相关语言,例如 MathML,用来表示数学中的方程,当你有这种特殊的需要的时候,或许会用得上。W3C 也颁布了“Web 内容亲和力指南”(Web Content Accessibility Guidelines —— WCAG)——推广网页的可访问性(通过 WAI )

  提示:直接获取这些规范

  你可以在 W3C 的网站上阅读这些规范,尽管他们有时读起来还是有些困难的:

  HTML 4.01

  XHTML 1.0

  CSS 1

  CSS 2.1

  WCAG 1.0

  在本文中,我们将会用到 XHTML1.0、CSS1 和 2.1、WCAG 1.0 等规范和建议,但是你一定很高兴知道我们其实不必过多的阅读 W3C 文档。

  谁需要 WS ?

  您可能只有一个含糊的概念:WS 是个好东西,但是许多网站——包括许多知名的站点——并不遵从 WS ,并且他们看起来的确管理得很好。所以,为什么我们要尽力去遵从 WS 呢?这么做会有什么真正的收益吗?谁需要 WS ?谁需要去关注 W3C 的规范与建议?

  Web 开发者与设计者

  需要关注 WS 的首类人群就是我们:网站建设的开发者与设计者。花费时间去学习如何用 WS 开发对于我们来说值得吗?

  整洁的标记使 BUG 的修复速度加快。

  如果您通过 W3C 校验您的页面,至少您会了解到不规范的标记并不是引起您曾经遇到过的错误的原因。有时,校验一个页面和修复已发现错误的过程,可以清除显示中遇到一些问题,这些问题是由标记(element)没有结束或标签(tag)拼写错误引起的。

  即使校验您的文档并没有修正这些问题,至少你会知道这些问题存在于规范的文档中。既然你已经知道这个问题不是一个错误,那么你可以开始关注其他的问题了,例如在不同的浏览器中 CSS 处理差异问题。

  遵从可访问性的需求很容易

  如果你编写一个规范的 XHTML 标记,那么你就可以保证文档在语义上是无误的,并且您可以把文档中的内容与表现相分离,您将可以把大量的工作放在许多 WCAG1.0 中所列的可访问性的问题上。认识到可访问性并不是仅仅为残疾人设计的这一点也很重要。一个亲和力好的站点是可以被许多不同的设备访问的,例如移动电话和 PDA ,他们是不具备强大的处理能力去对付那些散乱而非标准的标记的。

  向前兼容

  如果您仅仅考虑到自己新开发的页面在当前的几个浏览器中的表现,那么你怎么才能保证它在未来的新浏览器中的表现呢?新浏览器或许会把您的页面显示的很糟糕,此时你只能去费力的寻找和修正那些恼人的问题。

  遵从 WS 并不会完全根除这个问题;然而,标准的兼容使你的设计失败的风险大大减少,同样,如今的浏览器软件公司也开始支持标准。他们也许会偶然的错误解释了某部分规范,他们不可能完全不支持它。如果最坏的事情发生了,并且一个新的浏览器在你的标准化网站上产生了奇怪的效果,那么修复它要比修复一个不兼容的站点容易的多。如果你遇到一个问题,它同样会影响其他的标准可兼容网站。Web 社区的群体智慧会指出这个问题,并会写文章来解决这个问题。所以,大家集体讨论,在可兼容的文档里修正这个 BUG 也比在不兼容的文档里修正更加的容易。

  更方便的重构

  你曾经不得不从一个站点中剥离文字而对他进行重构过吗?而且一切都得从头开始。你曾经见过那些被字体标签和微小的表格单元(它使我们只能从头开始)弄得混乱不堪的标签吗?我只知道我曾经看过,这是一个漫长的过程,大量的时间和金钱都被这个站点的重构烧掉了。

  分离文档的内容与表现将会使你体会到标准化兼容带来美妙:这意味着下次某个人想重构这个站点的时候,他们不必把 Web 文档中的拷贝出去。所有站点中的文本都将会被具有语义的 (X)HTML 所标记,所有的表现信息——这部分才是站长想更改的——都将被储存在一个可轻易替换的 CSS 文件中。

  一些客户在开始要求你做一些改变之前是不会等待它去重构的,他们只会等到游览完猛犸象化石坑,然后就要求你说“把左边栏挪到右边就可以了。”对于一个标准化可兼容站点来说,全部页面都是由 CSS 控制的,你可以很方便移动页面中的标记,而不用在许多以复杂表格为结构的页面中想歪招了。这使得改变页面布局更加简单。

  结构从表现中分离同样可以使增加新的元素变得更加容易,就像一个高对比度、小图片版本的站点或许对于某些浏览者更有吸引力。当您可以轻松的更换样式表时,为什么建立单独的纯文本版的页面呢?

  浏览器软件公司

  浏览器的软件公司开始对 WS 关注了。过去,浏览器软件公司添加他们私有的专属标签和属性到基本的语言中。但是现在,前所未有的,他们都开始遵从标准了,并且一些最新的浏览器已经可以确定,正在努力按照规范中所定义的(X)HTML 和 CSS 来显示它们。

  在可遇见的未来中,浏览器都将能够显示大多数的不规范标记、代码,因为如果它们不这么做,成千上万的不规范站点都将无法正常显示——那么大众就很可能开始责备浏览器了,而不是责备 Web 设计者。然而,其他的设备(那些没有台式机强大处理功能的设备)将会更加依赖那些他们所遇到代码的标准化兼容性了。




【责任编辑:admin 】

共2页: 上一页 1 [2] 下一页



评论
用户名: 新注册) 密码: 匿名评论
评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
  相关文章
Dreamweaver教程:层及其应用
Dreamweaver制作网页实用七招
Dreamweaver教程:Dreamweaver的插件
用Dreamweaver进行数据库操作
Dreamweaver 基础 :DW的文档工具栏
  最新图片
Dreamweaver网页制作技巧:使用模板
Dreamweaver网页制作
如何在Dreamweaver中使用库项目
如何在Dreamweaver中
Photoshop结合Dreamweaver制作网页相册
Photoshop结合Dreamwe
用Dreamweaver MX 2004的Flash动画元素
用Dreamweaver MX 200
用Dreamweaver设计自动关闭的网页
用Dreamweaver设计自
用Dreamweaver进行数据库操作
用Dreamweaver进行数
Dreamweaver教程:层及其应用
Dreamweaver教程:层
Dreamweaver教程:Dreamweaver的插件
Dreamweaver教程:Dre
24小时TOP
   
·Dreamweaver网页制作技巧:使用模板
·Dreamweaver教程:Dreamweaver的插件
·如何用Dreamweaver批量做web网页
·Photoshop结合Dreamweaver制作网页相册
·在Dreamweaver中插入有颜色的直线
·Dreamweaver 入门:注册 Dreamweaver 8
·Dreamweaver 基础:DW的工作区布局
·Dreamweaver超级技巧之文字特效
热门图片
  更多>>>
Dreamweaver网页制作技巧:使用模板
Dreamweaver网页制
Dreamweaver教程:Dreamweaver的插件
Dreamweaver教程:D
Photoshop结合Dreamweaver制作网页相册
Photoshop结合Dream
Dreamweaver 基础:DW的工作区布局
Dreamweaver 基础:
焦点聚焦
  更多>>>
 
论坛精华
  更多>>>
·真钱斗地主轧金花龙虎板玖和百家乐http://c
·22岁女大学生要嫁48岁乞丐(图)
·一条短信毁了一种水果 “蛆橘”传言流变调
·蒙古风情十四怪 (一)
·《中国高新技术企业》--www.txrb.com--科信
·东莞大金空调官方介绍 13559702882卢生
·乐众国际最新博彩游戏!真实!新鲜!刺激!
·快国庆了大家怎么安排
最新图片
  更多>>>
Dreamweaver网页制作技巧:使用模板
Dreamweaver网页制
如何在Dreamweaver中使用库项目
如何在Dreamweaver
Photoshop结合Dreamweaver制作网页相册
Photoshop结合Dream
用Dreamweaver MX 2004的Flash动画元素
用Dreamweaver MX 2
推荐文章
  更多>>>
·Dreamweaver网页制作技巧:使用模板
·如何在Dreamweaver中使用库项目
·Photoshop结合Dreamweaver制作网页相册
·用Dreamweaver MX 2004的Flash动画元素
·用Dreamweaver设计自动关闭的网页
·用Dreamweaver进行数据库操作
·Dreamweaver教程:层及其应用
·Dreamweaver教程:Dreamweaver的插件
关于我们 - 版权声明 - 免责声明 - 欢迎投稿 - 广告服务 - 友情链接 - 网站建设 - 诚聘英才 - 联系我们 - -
Copyright @2007-2009 www.xydyz.com © All rights reserved.
校园第一站 版权所有 客服E-Mail:hyperblue@163.comn 点击这里给我发消息
Site design by hyperblue 鄂ICP备07009403号 Powered by DedeCms