舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

「以萬維網標準設計您的網頁」修訂間的差異

出自 MozTW Wiki

(取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>)
(取代作為置放(positioned)區塊的 <layer> 與 <ilayer>)
行 38: 行 38:
 
* 設定 HTML 內容特定區塊的位置;這類 HTML 內容的區塊通常在書中、在參考文件中、或在網頁作者間被稱呼為 layer﹝圖層﹞ 或 DHTML layer。
 
* 設定 HTML 內容特定區塊的位置;這類 HTML 內容的區塊通常在書中、在參考文件中、或在網頁作者間被稱呼為 layer﹝圖層﹞ 或 DHTML layer。
  
== 取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>  ==
+
=== 取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>  ===
  
 
<p>如果你有</p>
 
<p>如果你有</p>
行 56: 行 56:
 
<p class="note" style="color:#666;">註:如 Netscape 4 等不支援 IFRAME 的使用代理器與非常舊的視訊瀏覽器會顯示它的內容如:「這裡,內容鏈結」。如此,內容對於較舊瀏覽器的親和力(內容退化)可以確保與最優雅化。</p>
 
<p class="note" style="color:#666;">註:如 Netscape 4 等不支援 IFRAME 的使用代理器與非常舊的視訊瀏覽器會顯示它的內容如:「這裡,內容鏈結」。如此,內容對於較舊瀏覽器的親和力(內容退化)可以確保與最優雅化。</p>
  
或著,對於 HTML 4.01 Strict(嚴格)文件你可用以下取代:
+
<p>或著,對於 HTML 4.01 Strict(嚴格)文件你可用以下取代:</p>
  
 
<pre class="code">
 
<pre class="code">
行 73: 行 73:
 
</p>
 
</p>
  
<p id="note1">註一:"If a user agent encounters an element it does not recognize, it should try to render the element's content.": [http://www.w3.org/TR/html4/appendix/notes.html#h-B.1 Notes on invalid documents]</p>
+
<p id="note1">註一:「如果使用代理遇到它不認識的元素,它應試著繪製元素的內容。": [http://www.w3.org/TR/html4/appendix/notes.html#h-B.1 Notes on invalid documents]</p>
  
<p>N.B.: this recommendation is not a normative specification of HTML 4.01. Although widely implemented, web authors should NOT blindly rely on this error correction mechanism.</p>
+
<p>注意:本建議並非HTML 4.01 的規範。雖然這修正錯誤的機制有受廣泛地實作,資訊網作者不應盲目地依賴它。</p>
 +
 
 +
=== 取代作為置放(positioned)區塊的 &lt;layer> 與 &lt;ilayer>  ===
 +
 
 +
<p>要升級置放的 &lt;layer> 元素最好的 W3C 資訊網標準的取代方法是用 &lt;div>。&lt;div> 元素不能夠轉置(transclude),不能夠匯入網頁外的 HTML 內容,因此如果設定 src 屬性它將受符合 W3C 的瀏覽器所忽略。</p>
 +
 
 +
<p>如果你有</p>
 +
<pre class="code">
 +
&lt;LAYER style="position: absolute;" top="50" left="100"
 +
width="150" height="200">
 +
  ... 內容在這裡 ...
 +
&lt;/LAYER>
 +
</pre>
 +
 
 +
<p>你可以用這個代替:
 +
<pre class="code">
 +
&lt;div style="position: absolute; top: 50px; left: 100px;
 +
width: 150px; height: 200px;">
 +
  ... 內容在這裡 ...
 +
&lt;/div>
 +
</pre>
 +
 
 +
== 棄用(Deprecated)的元素 ==
 +
 
 +
<p>HTML 4.01 內棄用的元素一般被廣泛使用,不過它們已被其它的技巧所取代了。</p>
 +
 
 +
<p>W3C 的[http://www.w3.org/TR/REC-CSS2/ 階層樣式列表(CSS)建議書]中承襲了許多棄用(和一些排除的)標籤的功能,樣式表提供了威力強大的展示及組織能力,但對於 CSS 的討論則不在此文的範圍之中。</p>
 +
 
 +
=== Applet ===
 +
 
 +
<p>APPLET 元素的功能已在 HTML 4.01 中為 OBJECT 取代而棄用。</p>
 +
 
 +
<pre class="code">&lt;p>
 +
&lt;applet code="HelloWorldApplet.class" height="200" width="350"></applet>
 +
&lt;/p></pre>
 +
 
 +
<p>可以被轉為</p>
 +
 
 +
<pre class="code">&lt;p>
 +
&lt;object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
 +
codebase=
 +
"http&#58;//java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0"
 +
codetype="application/java" standby="Loading of applet in progress..."
 +
height="200" width="350">
 +
&lt;param name="code" value="HelloWorldApplet.class">
 +
&lt;!--[if !IE]>
 +
Mozilla 1.x、Firefox 1.x、Netscape 7.x 與其它會用裡面的物件(巢套物件)
 +
--&gt;
 +
    &lt;object classid="java:HelloWorldApplet.class"
 +
    standby="Loading of applet in progress..."
 +
    height="200" width="350">
 +
    &lt;p>Your browser does not seem to have java support enabled
 +
    or it does not have a Java Plug-in.<br>
 +
    &lt;a href="http&#58;//www.java.com/en/download/manual.jsp">You can download
 +
    the latest Java Plug-in here. (free download; 15MB)</a></p>
 +
    &lt;/object>
 +
&lt;!--&lt;![endif]--&gt;
 +
&lt;/object>
 +
&lt;/p>
 +
</pre>
 +
 
 +
=== Font ===
 +
 
 +
=== 其它棄用的元素 ===

於 2005年5月10日 (二) 23:51 的修訂

原文 (重大更新中)

  • 翻譯:Daniel Wang、趙伯強
  • 原作:Mike Cowperthwaite, Marcio Galli, Jim Ley, Ian Oeschger, Simon Paquet, Gérard Talbot

Browser makers are no longer the problem. The problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers.

瀏覽器開發人再也不是問題所在了。現在問題是有許多設計師與開發人被鎖定在 90 年代,以瀏覽器怪僻為導向的編程方式。這常是因為他們不知道他們可以同時支援目前的標準並容許較舊 的瀏覽器。 Web Standards Project

一些用於嵌入 DHTML(動態 HTML)至頁面的元素及技巧已被 W3C 的 HTML 4.01 與文件物件模型(Document Object Model,DOM)規格書所排拒在外了。以 <LAYER> 標籤與 document.layers[] 物件組為例,它們實際上並非任何資訊網標準的一份子。近來相容於 W3C 標準的瀏覽器(如 Mozilla、Firefox、與 Netscape 6/7)並不支援這些非標準的元素與專有的 DOM 串組。

本文章提供您一份將網頁升級、以求符合全球資訊網標準的程序概覽。各段節會舉出一些與標準相違背之技法,並建議替代方案。所有本文章所提出的標準替代方案皆也測試與檢定過,在進代瀏覽器如 MSIE 6、Netscape 7.x、Firefox 1.x、Opera 7+、Safari 1.2+、Konqueror 3.x 等裡完全無問題。最後的一節「更動摘要」整理本文所有替換建議。

本文件內容:

  1. 升級 Layer 元素 (Netscape 4)
  2. 棄用(Deprecated)的元素
    1. Applet
    2. Font
    3. 其它棄用的
  3. 其它排除的元素
  4. 使用 W3C DOM
    1. 與 DOM 相關未支援的屬性
    2. 以 W3C DOM 存取元素
    3. 操作文件樣式及內容
  5. 開發跨瀏覽器跨平台的網頁
  6. 使用物件偵測
  7. 更動摘要

升級 Layer 元素 (Netscape 4)

本節解釋如何用符合標準的 HTML 4.01 來取代 Netscape 4 的 <layer> 與 <ilayer> 元素。因為 <layer> 與 <ilayer> 元素不屬於任何的 W3C 網路標準, Netscape 6/7、Firefox 與 Mozilla 等合乎標準的瀏覽器皆不支援 <layer> 與 <ilayer> 元素

document.layers[] 物件集及 Netscape 4 Layer DOM 其它的特定的功能也不受支援,這些在 DOM 一節會討論。

在 Netscape 4 裡,<layer> 元素主要有兩個功用:

  • 在網頁中嵌入外部的 HTML 內容,與
  • 設定 HTML 內容特定區塊的位置;這類 HTML 內容的區塊通常在書中、在參考文件中、或在網頁作者間被稱呼為 layer﹝圖層﹞ 或 DHTML layer。

取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>

如果你有

<LAYER SRC="foo.html" height="300" width="400"> </LAYER>

那對於 HTML 4.01 Transitional(過渡)文件你可用以下取代:

<iframe src="foo.html" height="300" width="400">
  <a href="foo.html">Foo 內容</a>
</iframe>

註:如 Netscape 4 等不支援 IFRAME 的使用代理器與非常舊的視訊瀏覽器會顯示它的內容如:「這裡,內容鏈結」。如此,內容對於較舊瀏覽器的親和力(內容退化)可以確保與最優雅化。

或著,對於 HTML 4.01 Strict(嚴格)文件你可用以下取代:

<object data="foo.html" type="text/html" height="300" width="400">
  <a href="foo.html">Foo content</a>
</object>
</code>

註:同上,不支援這物件元素的使用代理器與瀏覽器會顯示該鏈結,因此確保內容可以取得。

一般使用 <iframe> 或 <object> 的親和力策略是在 <iframe> 或 <object> 內置入最常用與支援最多的元素。如此,無法繪製 <iframe> 或 <object> 的使用代理器可以繪製這內容來代替。大多數瀏覽器遇到不名元素時的一般規則是盡所能繪製它的內容。註一

更多有關內嵌 HTML 內容:
Notes on embedded documents from W3C HTML 4.01

註一:「如果使用代理遇到它不認識的元素,它應試著繪製元素的內容。": Notes on invalid documents

注意:本建議並非HTML 4.01 的規範。雖然這修正錯誤的機制有受廣泛地實作,資訊網作者不應盲目地依賴它。

取代作為置放(positioned)區塊的 <layer> 與 <ilayer>

要升級置放的 <layer> 元素最好的 W3C 資訊網標準的取代方法是用 <div>。<div> 元素不能夠轉置(transclude),不能夠匯入網頁外的 HTML 內容,因此如果設定 src 屬性它將受符合 W3C 的瀏覽器所忽略。

如果你有

<LAYER style="position: absolute;" top="50" left="100"
width="150" height="200">
   ... 內容在這裡 ...
</LAYER>

你可以用這個代替:

<div style="position: absolute; top: 50px; left: 100px;
width: 150px; height: 200px;">
   ... 內容在這裡 ...
</div>

棄用(Deprecated)的元素

HTML 4.01 內棄用的元素一般被廣泛使用,不過它們已被其它的技巧所取代了。

W3C 的階層樣式列表(CSS)建議書中承襲了許多棄用(和一些排除的)標籤的功能,樣式表提供了威力強大的展示及組織能力,但對於 CSS 的討論則不在此文的範圍之中。

Applet

APPLET 元素的功能已在 HTML 4.01 中為 OBJECT 取代而棄用。

<p>
<applet code="HelloWorldApplet.class" height="200" width="350"></applet>
</p>

可以被轉為

<p>
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" 
codebase=
"http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0" 
codetype="application/java" standby="Loading of applet in progress..." 
height="200" width="350">
<param name="code" value="HelloWorldApplet.class">
<!--[if !IE]>
Mozilla 1.x、Firefox 1.x、Netscape 7.x 與其它會用裡面的物件(巢套物件)
-->
     <object classid="java:HelloWorldApplet.class" 
     standby="Loading of applet in progress..." 
     height="200" width="350">
     <p>Your browser does not seem to have java support enabled 
     or it does not have a Java Plug-in.<br>
     <a href="http://www.java.com/en/download/manual.jsp">You can download 
     the latest Java Plug-in here. (free download; 15MB)</a></p>
     </object>
<!--<![endif]-->
</object>
</p>

Font

其它棄用的元素

個人工具