舊文件

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

「MozTW 標籤使用指南」修訂間的差異

出自 MozTW Wiki

(翻完)
mozilla 標籤使用參考文件:列表wikify(用定義列表)
 
(未顯示由 2 位使用者於中間所作的 3 次修訂)
行 1: 行 1:
http://www.mozilla.org/contribute/writing/markup
 
正在翻譯中,請隨便幫個兩句吧 :)
 
 
 
* mozilla.org 跟 moztw.org 用同一份樣式表,所以這邊的東西可以通用。不用翻得字字精準,但請寫出綱要大意。
 
* mozilla.org 跟 moztw.org 用同一份樣式表,所以這邊的東西可以通用。不用翻得字字精準,但請寫出綱要大意。
 
* 這份文件應該在翻譯完畢以後製作靜態版本,因為有很多範例用 Wiki 不是那麼好表達,也無法隨樣式變更即時套用。因此:
 
* 這份文件應該在翻譯完畢以後製作靜態版本,因為有很多範例用 Wiki 不是那麼好表達,也無法隨樣式變更即時套用。因此:
行 7: 行 4:
 
** 不要為這邊的內容加上 Wiki 樣式!
 
** 不要為這邊的內容加上 Wiki 樣式!
 
** 編輯註解請用以下格式: <pre>&lt;div style="background-color: yellow;">* 註解 -- 加註者&lt;div></pre> 若某段落已有人加註,則不需另外添加 div。
 
** 編輯註解請用以下格式: <pre>&lt;div style="background-color: yellow;">* 註解 -- 加註者&lt;div></pre> 若某段落已有人加註,則不需另外添加 div。
 +
----
 +
# <strike>初稿翻譯 (BobChao)</strike>
 +
# <strike>整修為 mozilla.org 樣式靜態文件。</strike>
 +
# 編修 moztw.org 相關樣式
 +
# Review
 +
# 放上 moztw.org
  
 
= mozilla 標籤使用參考文件 =
 
= mozilla 標籤使用參考文件 =
行 14: 行 17:
 
站上的樣式有個原則:需用者用。如果你的文章看起來不須要強調樣式,那麼也不必看這份文件;不過如果你想為文件加上 CSS 來點綴,就先看一下這篇:搞不好我們早就提供你需要的樣式了。如果我們沒提供,也可能是因為沒必要,若對樣式有所建議,可以在討論區發言。
 
站上的樣式有個原則:需用者用。如果你的文章看起來不須要強調樣式,那麼也不必看這份文件;不過如果你想為文件加上 CSS 來點綴,就先看一下這篇:搞不好我們早就提供你需要的樣式了。如果我們沒提供,也可能是因為沒必要,若對樣式有所建議,可以在討論區發言。
  
一般結構
+
== 一般結構 ==
 
+
;段落 &lt;p> 及 &lt;div class="para">
段落 &lt;p> 及 &lt;div class="para">
+
*請用 &lt;p> 來標示段落,也就是「含括」一段文字,而非用以分隔兩段。
 
+
*&lt;div class="para"> 則可用於一些特例:在 HTML DTD 中規定,有些區段性元素不能放在 &lt;p> 裡頭。舉例而言,您可能會想將 &lt;blockquote> 擺在一個段落中間,這麼一來分開來的兩段皆需獨立成為一個段落,有各自成對的 &lt;p>;整段(兩組&lt;p> 跟一組 &lt;blockquote>)外圍並以 &lt;div class="para"> 標示。請別因為想讓同軸 (inline) 的圖片以區段元素方式呈現,就以 div標示起來- &lt;img> 可以放在 &lt;p> 裡頭,而且就算是 NS 4.x 也會當它為區塊元素。
請用 &lt;p> 來標示段落,也就是「含括」一段文字,而非用以分隔兩段。
+
*(範例不翻)
 
+
;小節 &lt;div class="section"> : 用 &lt;div class="section"> 標示文件中的小節,請記得同時包覆標題及內文。小節通常較其他文字縮排。
&lt;div class="para"> 則可用於一些特例:在 HTML DTD 中規定,有些區段性元素不能放在 &lt;p> 裡頭。舉例而言,您可能會想將 &lt;blockquote> 擺在一個段落中間,這麼一來分開來的兩段皆需獨立成為一個段落,有各自成對的 &lt;p>;整段(兩組&lt;p> 跟一組 &lt;blockquote>)外圍並以 &lt;div class="para"> 標示。請別因為想讓同軸 (inline) 的圖片以區段元素方式呈現,就以 div標示起來- &lt;img> 可以放在 &lt;p> 裡頭,而且就算是 NS 4.x 也會當它為區塊元素。
+
;資料表格 &lt;table class="data"> : 若某 HTML 表格為資料表格,請使用此樣式類別以便加上色彩及邊框樣式。(由於 mozilla.org 文件中尚有許多排版用表格,所以沒辦法直接定義表格的樣式。)如果您想加上隔行的背景換色效果,請在 &lt;tr> 元素中加上 even 或 odd 類別,而不要又自己設定一個。
 
+
== 引用 ==
(範例不翻)
+
;整段引用: &lt;blockquote> 加上 &lt;address> : 以此引用整段或其他區塊級 (block-level) 內容,註明出處時可於結束標籤前放上 &lt;address>。
 
+
;少量引言: &lt;div class="quote"> 加上 &lt;q> 及 &lt;cite> : 以此引用短句或其他不足以採用 blockquote 的內容,其中引用句以 &lt;q> 標示,隨後可加上 &lt;cite> 註明出處。
小節 &lt;div class="section">
+
;章節題詞: &lt;blockquote class="epigraph"> 或 &lt;div class="epigraph"> : 章節題詞通常是格言名句,放在一個章節的最前頭以明示主題。依據前述原則選用 &lt;blockquote class="epigraph"> 或 &lt;div class="epigraph">。
 
+
== 各式註記 ==
用 &lt;div class="section"> 標示文件中的小節,請記得同時包覆標題及內文。小節通常較其他文字縮排。
+
;草稿標註: &lt;div class="remark"> 或 &lt;span class="remark"> : 以此標示某草稿中作者/編者的附註,亦可標示程式碼中的註解。不要加上方括號,套用樣式表時會自動加上去。
 
+
;一般註記: &lt;span class="note">、&lt;p class="note"> 或 &lt;div class="note"> : 以此標示一般註記,樣式表會自動在前面加上「Note:」字樣並套用字型、色彩等樣式。
資料表格 &lt;table class="data">
 
 
 
若某 HTML 表格為資料表格,請使用此樣式類別以便加上色彩及邊框樣式。(由於 mozilla.org 文件中尚有許多排版用表格,所以沒辦法直接定義表格的樣式。)如果您想加上隔行的背景換色效果,請在 &lt;tr> 元素中加上 even 或 odd 類別,而不要又自己設定一個。
 
 
 
引用
 
 
 
整段引用: &lt;blockquote> 加上 &lt;address>
 
 
 
以此引用整段或其他區塊級 (block-level) 內容,註明出處時可於結束標籤前放上 &lt;address>。
 
 
 
少量引言: &lt;div class="quote"> 加上 &lt;q> 及 &lt;cite>
 
 
 
以此引用短句或其他不足以採用 blockquote 的內容,其中引用句以 &lt;q> 標示,隨後可加上 &lt;cite> 註明出處。
 
 
 
章節題詞: &lt;blockquote class="epigraph"> 或 &lt;div class="epigraph">
 
 
 
章節題詞通常是格言名句,放在一個章節的最前頭以明示主題。依據前述原則選用 &lt;blockquote class="epigraph"> 或 &lt;div class="epigraph">。
 
 
 
各式註記
 
 
 
草稿標註: &lt;div class="remark"> 或 &lt;span class="remark">
 
 
 
以此標示某草稿中作者/編者的附註,亦可標示程式碼中的註解。不要加上方括號,套用樣式表時會自動加上去。
 
 
 
一般註記: &ltspan class="note">、&ltp class="note"> 或 &ltdiv class="note">
 
 
 
以此標示一般註記,樣式表會自動在前面加上「Note:」字樣並套用字型、色彩等樣式。
 
 
 
 
<div style="background-color: yellow;">
 
<div style="background-color: yellow;">
 
* 所以 moztw 樣式表裡的 Note: 應該翻為 「註:」 ? --[[User:BobChao|BobChao]] 02:20, 24 May 2005 (CST)
 
* 所以 moztw 樣式表裡的 Note: 應該翻為 「註:」 ? --[[User:BobChao|BobChao]] 02:20, 24 May 2005 (CST)
 
</div>
 
</div>
 
+
;補充說明: &lt;div class="sidenote"> : 以此標註與本文無直接相關的額外資訊(或連結),使其獨立於文件一般排版而自成一區。雖然這些補充資訊通常會浮 (float) 至邊欄,但請確保文字在未浮動的情形下依然合理可閱,故最多僅能為此區加上不同背景色或邊框。(或者什麼也不加,如 Lynx。)
補充說明: &lt;div class="sidenote">
+
;要點: &lt;div class="key-point"> : 以此標示關鍵要點,使其顯眼易見。(如果是極重要資訊請標以 important 。)
 
+
;重要(必讀)說明: &lt;* class="important"> : 以此標示極重要、必閱資訊。通常 important 會用比較大點的字,或許再加上更顯眼的顏色。可讓文字再以 &lt;strong> 標示。
以此標註與本文無直接相關的額外資訊(或連結),使其獨立於文件一般排版而自成一區。雖然這些補充資訊通常會浮 (float) 至邊欄,但請確保文字在未浮動的情形下依然合理可閱,故最多僅能為此區加上不同背景色或邊框。(或者什麼也不加,如 Lynx。)
+
== 強調 ==
 
+
;重點: &lt;em>
要點: &lt;div class="key-point">
+
;強調: &lt;strong>
 
+
;特別強調: &lt;strong class="stronger">
以此標示關鍵要點,使其顯眼易見。(如果是極重要資訊請標以 important 。)
+
;再三強調: &lt;strong class="very-strong">
 
 
重要(必讀)說明: &lt;* class="important">
 
 
 
以此標示極重要、必閱資訊。通常 important 會用比較大點的字,或許再加上更顯眼的顏色。可讓文字再以 &lt;strong> 標示。
 
 
 
強調
 
 
 
重點: &lt;em>
 
 
 
強調: &lt;strong>
 
 
 
特別強調: &lt;strong class="stronger">
 
 
 
再三強調: &lt;strong class="very-strong">
 
 
 
 
以這些方式標示不同程度的強調語詞,分別會以斜體、粗體、粗斜體、粗體大寫顯示。
 
以這些方式標示不同程度的強調語詞,分別會以斜體、粗體、粗斜體、粗體大寫顯示。
 
 
<div style="background-color: yellow;">
 
<div style="background-color: yellow;">
 
* 中文不用斜體,要換個方式。--[[User:BobChao|BobChao]] 14:39, 24 May 2005 (CST)
 
* 中文不用斜體,要換個方式。--[[User:BobChao|BobChao]] 14:39, 24 May 2005 (CST)
 
</div>
 
</div>
 
+
== 範例、圖示 ==
範例、圖示
+
;圖示: &lt;div class="figure"> :以此標示圖示或圖表,figure 通常是置中的區塊。
 
+
;範例: &lt;div class="example"> :以此標示各種範例,別忘了程式範例還是得包在 code 裡。可用 title 屬性加上範例標題。
圖示: &lt;div class="figure">
+
;正確用法實例: &lt;div class="good example"> 或 &lt;pre class="good code"> :以此標示正確用法或程式寫作方式。如果要標示的某段程式已經在正確用法區塊中,則不需另外指定 good 類別。(相關樣式會繼承自母元素。)
 
+
;錯誤用法實例: &lt;div class="bad example"> 或 &lt;pre class="bad code"> :以此標示錯誤用法或程式寫作方式。如果要標示的某段程式已經在錯誤用法區塊中,則不需另外指定 bad 類別。(相關樣式會繼承自母元素。)
以此標示圖示或圖表,figure 通常是置中的區塊。
+
== 電腦相關 ==
 
+
;鍵入: &lt;kbd> :以此標示使用者要按的鍵或輸入的文字。
範例: &lt;div class="example">
+
;變數、佔位文字: &lt;var> :以此標示佔位文字、依使用者狀況有別的變數等字串。
 
+
;指令: &lt;code class="command"> :以此標示指令。
以此標示各種範例,別忘了程式範例還是得包在 code 裡。可用 title 屬性加上範例標題。
+
;檔名、網址: &lt;class="filename"> :以此標示網址、路徑、檔名。
 
+
;行內程式碼: &lt;code> :以此標示在段落文字中需要提到的程式片段。這段程式將以等寬字體顯示,並隨之添加其他適當樣式。
正確用法實例: &lt;div class="good example"> 或 &lt;pre class="good code">
+
;區段程式碼: &lt;pre class="code">
 
+
*以此標示整段程式碼,以便與其他文字有所區別。可以用 &lt;span class="remark"> 或 &lt;var> 等標籤特別標示某段程式並關閉衍生內容,亦可用強調樣式標示重要片段。
以此標示正確用法或程式寫作方式。如果要標示的某段程式已經在正確用法區塊中,則不需另外指定 good 類別。(相關樣式會繼承自母元素。)
+
*錯誤程式應標示為 bad code。
 
+
;螢幕文字輸出(自成一區): &lt;pre class="screen"> 或 &lt;div class="screen"> :以此標示整段的螢幕文字輸出,如輸入指令後的回應文字等等。
錯誤用法實例: &lt;div class="bad example"> 或 &lt;pre class="bad code">
+
;螢幕文字輸出(段落中): &lt;samp> :以此標示段落文字中的螢幕文字輸出部分。
 
+
== 導覽 ==
以此標示錯誤用法或程式寫作方式。如果要標示的某段程式已經在錯誤用法區塊中,則不需另外指定 bad 類別。(相關樣式會繼承自母元素。)
+
;目錄: &lt;ol class="toc">、&lt;ul class="toc"> 或 &lt;dl class="toc">  
 
+
*以此標示文章的目錄。一般目錄和多層次目錄以 ol 標示(此時只要最外圍的 ol 標上類別即可),如果段落順序非常重要才使用 ul 表示。
電腦相關
+
*使用 dl 時,以 dd 標示章節名稱、並以 dt 描述章節大綱。
 
+
;內部文件小導覽列: &lt;ul class="snav"> :標示一群內部文件導覽連結,也可能都只連到同一份文件中的某個地方。以此標示的連結不具目錄性質,僅為文件作者(而非樣版設計者)所用。
鍵入: &lt;kbd>
+
;外部參考連結: &lt;a class="ex-ref"> :標示連到其他網站的相關參考文件,例如連到 MozillaZine。此連結樣式與一般連結應有不同,藉此提醒訪客此為外部連結。
 
 
以此標示使用者要按的鍵或輸入的文字。
 
 
 
變數、佔位文字: &lt;var>
 
 
 
以此標示佔位文字、依使用者狀況有別的變數等字串。
 
 
 
指令: &lt;code class="command">
 
 
 
以此標示指令。
 
 
 
檔名、網址: &lt;class="filename">
 
 
 
以此標示網址、路徑、檔名。
 
 
 
行內程式碼: &lt;code>
 
 
 
以此標示在段落文字中需要提到的程式片段。這段程式將以等寬字體顯示,並隨之添加其他適當樣式。
 
 
 
區段程式碼: &lt;pre class="code">
 
 
 
以此標示整段程式碼,以便與其他文字有所區別。可以用 &lt;span class="remark"> 或 &lt;var> 等標籤特別標示某段程式並關閉衍生內容,亦可用強調樣式標示重要片段。
 
 
 
錯誤程式應標示為 bad code。
 
 
 
螢幕文字輸出(自成一區): &lt;pre class="screen"> 或 &lt;div class="screen">
 
 
 
以此標示整段的螢幕文字輸出,如輸入指令後的回應文字等等。
 
 
 
螢幕文字輸出(段落中): &lt;samp>
 
 
 
以此標示段落文字中的螢幕文字輸出部分。
 
 
 
導覽
 
 
 
目錄: &lt;ol class="toc">、&lt;ul class="toc"> 或 &lt;dl class="toc">
 
 
 
以此標示文章的目錄。一般目錄和多層次目錄以 ol 標示(此時只要最外圍的 ol 標上類別即可),如果段落順序非常重要才使用 ul 表示。
 
 
 
使用 dl 時,以 dd 標示章節名稱、並以 dt 描述章節大綱。
 
 
 
內部文件小導覽列: &lt;ul class="snav">
 
 
 
標示一群內部文件導覽連結,也可能都只連到同一份文件中的某個地方。以此標示的連結不具目錄性質,僅為文件作者(而非樣版設計者)所用。
 
 
 
外部參考連結: &lt;a class="ex-ref">
 
 
 
標示連到其他網站的相關參考文件,例如連到 MozillaZine。此連結樣式與一般連結應有不同,藉此提醒訪客此為外部連結。
 

於 2006年2月28日 (二) 06:35 的最新修訂

  • mozilla.org 跟 moztw.org 用同一份樣式表,所以這邊的東西可以通用。不用翻得字字精準,但請寫出綱要大意。
  • 這份文件應該在翻譯完畢以後製作靜態版本,因為有很多範例用 Wiki 不是那麼好表達,也無法隨樣式變更即時套用。因此:
    • 範例請全部跳過,範例裡面的文字也不需翻譯。
    • 不要為這邊的內容加上 Wiki 樣式!
    • 編輯註解請用以下格式:
      <div style="background-color: yellow;">* 註解 -- 加註者<div>
      若某段落已有人加註,則不需另外添加 div。

  1. 初稿翻譯 (BobChao)
  2. 整修為 mozilla.org 樣式靜態文件。
  3. 編修 moztw.org 相關樣式
  4. Review
  5. 放上 moztw.org

mozilla 標籤使用參考文件

這份文件描述 mozilla.org 中使用標籤的語意及習慣,讓文件能套用本站 CSS 樣式 -- 不用寫一行 CSS 規則,便可以使文件看起來與本站結為一體。

站上的樣式有個原則:需用者用。如果你的文章看起來不須要強調樣式,那麼也不必看這份文件;不過如果你想為文件加上 CSS 來點綴,就先看一下這篇:搞不好我們早就提供你需要的樣式了。如果我們沒提供,也可能是因為沒必要,若對樣式有所建議,可以在討論區發言。

一般結構

段落 <p> 及 <div class="para">
  • 請用 <p> 來標示段落,也就是「含括」一段文字,而非用以分隔兩段。
  • <div class="para"> 則可用於一些特例:在 HTML DTD 中規定,有些區段性元素不能放在 <p> 裡頭。舉例而言,您可能會想將 <blockquote> 擺在一個段落中間,這麼一來分開來的兩段皆需獨立成為一個段落,有各自成對的 <p>;整段(兩組<p> 跟一組 <blockquote>)外圍並以 <div class="para"> 標示。請別因為想讓同軸 (inline) 的圖片以區段元素方式呈現,就以 div標示起來- <img> 可以放在 <p> 裡頭,而且就算是 NS 4.x 也會當它為區塊元素。
  • (範例不翻)
小節 <div class="section"> 
用 <div class="section"> 標示文件中的小節,請記得同時包覆標題及內文。小節通常較其他文字縮排。
資料表格 <table class="data"> 
若某 HTML 表格為資料表格,請使用此樣式類別以便加上色彩及邊框樣式。(由於 mozilla.org 文件中尚有許多排版用表格,所以沒辦法直接定義表格的樣式。)如果您想加上隔行的背景換色效果,請在 <tr> 元素中加上 even 或 odd 類別,而不要又自己設定一個。

引用

整段引用
<blockquote> 加上 <address> : 以此引用整段或其他區塊級 (block-level) 內容,註明出處時可於結束標籤前放上 <address>。
少量引言
<div class="quote"> 加上 <q> 及 <cite> : 以此引用短句或其他不足以採用 blockquote 的內容,其中引用句以 <q> 標示,隨後可加上 <cite> 註明出處。
章節題詞
<blockquote class="epigraph"> 或 <div class="epigraph"> : 章節題詞通常是格言名句,放在一個章節的最前頭以明示主題。依據前述原則選用 <blockquote class="epigraph"> 或 <div class="epigraph">。

各式註記

草稿標註
<div class="remark"> 或 <span class="remark"> : 以此標示某草稿中作者/編者的附註,亦可標示程式碼中的註解。不要加上方括號,套用樣式表時會自動加上去。
一般註記
<span class="note">、<p class="note"> 或 <div class="note"> : 以此標示一般註記,樣式表會自動在前面加上「Note:」字樣並套用字型、色彩等樣式。
  • 所以 moztw 樣式表裡的 Note: 應該翻為 「註:」 ? --BobChao 02:20, 24 May 2005 (CST)
補充說明
<div class="sidenote"> : 以此標註與本文無直接相關的額外資訊(或連結),使其獨立於文件一般排版而自成一區。雖然這些補充資訊通常會浮 (float) 至邊欄,但請確保文字在未浮動的情形下依然合理可閱,故最多僅能為此區加上不同背景色或邊框。(或者什麼也不加,如 Lynx。)
要點
<div class="key-point"> : 以此標示關鍵要點,使其顯眼易見。(如果是極重要資訊請標以 important 。)
重要(必讀)說明
<* class="important"> : 以此標示極重要、必閱資訊。通常 important 會用比較大點的字,或許再加上更顯眼的顏色。可讓文字再以 <strong> 標示。

強調

重點
<em>
強調
<strong>
特別強調
<strong class="stronger">
再三強調
<strong class="very-strong">

以這些方式標示不同程度的強調語詞,分別會以斜體、粗體、粗斜體、粗體大寫顯示。

  • 中文不用斜體,要換個方式。--BobChao 14:39, 24 May 2005 (CST)

範例、圖示

圖示
<div class="figure"> :以此標示圖示或圖表,figure 通常是置中的區塊。
範例
<div class="example"> :以此標示各種範例,別忘了程式範例還是得包在 code 裡。可用 title 屬性加上範例標題。
正確用法實例
<div class="good example"> 或 <pre class="good code"> :以此標示正確用法或程式寫作方式。如果要標示的某段程式已經在正確用法區塊中,則不需另外指定 good 類別。(相關樣式會繼承自母元素。)
錯誤用法實例
<div class="bad example"> 或 <pre class="bad code"> :以此標示錯誤用法或程式寫作方式。如果要標示的某段程式已經在錯誤用法區塊中,則不需另外指定 bad 類別。(相關樣式會繼承自母元素。)

電腦相關

鍵入
<kbd> :以此標示使用者要按的鍵或輸入的文字。
變數、佔位文字
<var> :以此標示佔位文字、依使用者狀況有別的變數等字串。
指令
<code class="command"> :以此標示指令。
檔名、網址
<class="filename"> :以此標示網址、路徑、檔名。
行內程式碼
<code> :以此標示在段落文字中需要提到的程式片段。這段程式將以等寬字體顯示,並隨之添加其他適當樣式。
區段程式碼
<pre class="code">
  • 以此標示整段程式碼,以便與其他文字有所區別。可以用 <span class="remark"> 或 <var> 等標籤特別標示某段程式並關閉衍生內容,亦可用強調樣式標示重要片段。
  • 錯誤程式應標示為 bad code。
螢幕文字輸出(自成一區)
<pre class="screen"> 或 <div class="screen"> :以此標示整段的螢幕文字輸出,如輸入指令後的回應文字等等。
螢幕文字輸出(段落中)
<samp> :以此標示段落文字中的螢幕文字輸出部分。

導覽

目錄
<ol class="toc">、<ul class="toc"> 或 <dl class="toc">
  • 以此標示文章的目錄。一般目錄和多層次目錄以 ol 標示(此時只要最外圍的 ol 標上類別即可),如果段落順序非常重要才使用 ul 表示。
  • 使用 dl 時,以 dd 標示章節名稱、並以 dt 描述章節大綱。
內部文件小導覽列
<ul class="snav"> :標示一群內部文件導覽連結,也可能都只連到同一份文件中的某個地方。以此標示的連結不具目錄性質,僅為文件作者(而非樣版設計者)所用。
外部參考連結
<a class="ex-ref"> :標示連到其他網站的相關參考文件,例如連到 MozillaZine。此連結樣式與一般連結應有不同,藉此提醒訪客此為外部連結。
個人工具