用Dreamweaver 8 搞定“web标准”

M_心如止水

M_心如止水

2016-02-19 21:18

有了下面这个用Dreamweaver 8 搞定“web标准”教程,不懂用Dreamweaver 8 搞定“web标准”的也能装懂了,赶紧get起来装逼一下吧!

  译者序:这个系列原文一共8篇文章,从普及 Web Standards 入手,讲述如何用 Dreamweaver 8 来构建符合标准的 Web ,由于

  更方便的重构

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

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

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

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

  浏览器软件公司

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

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

  创作工具软件厂商

  创作工具软件厂商——例如 Macromedia , 它制作了 Dreamweaver ——也像Web设计者一样,开始遵从 WS 了,比如,它们越来越多的客户要求这些创作工具可以输出规范的标记。原本这些可视化的开发环境都没有太好的口碑,因为它们会生成混乱、不规范的标记;然而,最新的主要可视化开发环境都援引了标准化的兼容性和可访问性的元素,这也成为了主要的卖点。软件厂商一定要聆听,并回应市场的需求。

  Web 用户

  我们设计的网站的用户也从我们采用 WS 中获益,即使他们并没有认识到这一点!或许他们正无意识的使用那些专门针对当今流行浏览器而开发的站点。如果这些用户转用其他的浏览器,他们或许就会发现这个在线的体验就不再令人享受了,因为那些专属的标记是不会被新浏览器所接受的。一个标准化可兼容的站点在不同的浏览器中都有很好的表现,不论是在现有的,还是在未来的浏览器中都同样优秀。

  此外,一个遵照可访问性建议的网站对那些发现浏览网页不如意的用户也是很有亲和力的。Web 应该给那些视觉有缺陷或其他的残疾人提供更方便的购物、阅读、搜索的条件。不应该因为用专属标记或者其他排它(指浏览器)技术的站点,使他们无法浏览。

  使用 WS

  我们怎么能确保正确使用WS呢?怎么做才能遵从标准呢?

  首先,我们应该遵守规范。这意味着我们应该只使用那些规范中定义的元素与属性,避免使用某种浏览器的专有属性,例如 IE 的 marquee 标签和 Netscape 的blink 标签。同样也不要使用在早期规范中出现的元素(例如 HTML3.2)和被后来的规范所移除的元素。

  创建一个规范的 XHTML 文档

  在本文中,我们将使用 XHTML,所以,我们都将遵照 W3C 的 XHTML 1.0 的建议[按照 W3C 的意思,建议( Recommendation )就是规范( Specification )的意思]。XHTML 基本上就是HTML的最新版本,它设计的目的是用来代替 HTML 这个网页标记语言的。尽管它是 XML 的一种 HTML 变形,但是 XHTML 与 HTML 几乎是完全一样的,在我们后面将讨论的《 XHTML 和语义》中有细微的差别。

  你可以通过 Dreamweaver 中的新建文档对话框生成一个 XHTML 文档(文件新建...)。确保基本页在类别列表里是被选中的,然后从基本页的列表中选择 HTML ,就像图2.1所示,“在 Dreamweaver 中创建一个新的 XHTML 文档”。然后你可以从文档类型的下拉列表中任意选择一项。

图2.1:在Dreamweaver中创建一个新的 XHTML 文档

 

图2.2:在code视图中显示新的 XHTML 文档

  点击“创建”来生成一个新的文档。点击文档窗口顶部的 code 按钮,转到“ code 视图”,就可以清楚的看到在一个简单的 XHTML 文档中都包含了哪些代码。正如图2.2所示,“在 code 视图中显示新的 XHTML 文档”

  文档的第一行将显示下面的内容

  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  这叫做文档类型声明,或者 DOCTYPE 。顾名思义,DOCTYPE 声明了你的文档究竟是什么——你正在遵从是哪一个 (X)HTML 规范。在这个例子中,我们遵照的是 XHTML 1.0 Transitional,这是 DW 8 的默认设置。 Transitional 部分将告诉我们关于 XHTML 版本的其他一些信息。XHTML1.0 拥有三种“口味”:Strict, Transitional, 和 Frameset。DW 默认使用的是 Transitional 类型,而如果你想在文档插入框架,那就是 Frameset。

  XHTML Strict 是最严格的 XHTML 格式,这个想必你也能猜到。一个 Strict 文档类型看起来就是这个样子:

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  如果你使用的是 Strict DOCTYPE,那么你就不能在文档中使用任何声明不赞成的元素(标签)或者是属性,也不可以使用框架。声明不赞成的元素将在未来的 XHTML 版本中被移除。许多这类元素是用来控制页面的外观的,这完全可由CSS来代替。Strict 和 Transitional 最大的不同是,在使用 Strict DOCTYPE 时,你本以为可用作表现的属性和元素受到了很大的限制。

  注意:在 DW 中使用 Strict DOCTYPE

  DW 在遵从标准上,并不是很严格。如果你使用 Strict DOCTYPE ,要特别注意一下校验你的文档并修正不规范的属性。基本上,很容易用 CSS 来代替他们。

  Frameset DOCTYPE 支持对框架的使用,如果你在文档中插入了框架,DW 就会自动使用这种类型。框架页至少好要跟另外两个页面相关联,相关页面的文档类型没有限制。Frameset DOCTYPE 的代码如下:

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

  HTML 4.01 同样也提供了这三种“口味”的文档类型——Transitional, Strict 和 Frameset——他们的运作与上面提到的 XHTML DOCTYPEs 完全一致。如果你使用任何一种类型,都必须在 HTML (而不是 XHTML )文档中注明。我们将在后面创建网站的部分深入的探讨一下 HTML和 XHTML 的区别。

  原作:Dreamweaver 8 Does Standards! by Rachel Andrew

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  编译:x5

展开更多 50%)
分享

猜你喜欢

用Dreamweaver 8 搞定“web标准”

Web开发
用Dreamweaver 8 搞定“web标准”

用Dreamweaver8搞定web标准

Web开发
用Dreamweaver8搞定web标准

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Dreamweaver8来构建符合标准的Web站点

Web开发
Dreamweaver8来构建符合标准的Web站点

学习web标准:Web标准中的特殊字符

Web开发
学习web标准:Web标准中的特殊字符

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Web标准真的是标准吗?

Web开发
Web标准真的是标准吗?

网站web标准测试

Html CSS布局 Div+CSS XHTML
网站web标准测试

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Dreamweaver 基础:了解DW的状态栏

Dreamweaver 基础:了解DW的状态栏

都是伊利酸酸乳 装什么蒙牛纯牛奶

都是伊利酸酸乳 装什么蒙牛纯牛奶
下拉加载更多内容 ↓