「MozTW 標籤使用指南」修訂間的差異
出自 MozTW Wiki
小 |
MilchFlasche（對話 | 貢獻） （→mozilla 標籤使用參考文件：列表wikify（用定義列表）） |
||
| (未顯示由 2 位使用者於中間所作的 5 次修訂) | |||
| 行 1： | 行 1： | ||
| − | |||
| − | |||
| − | |||
* mozilla.org 跟 moztw.org 用同一份樣式表，所以這邊的東西可以通用。不用翻得字字精準，但請寫出綱要大意。 | * mozilla.org 跟 moztw.org 用同一份樣式表，所以這邊的東西可以通用。不用翻得字字精準，但請寫出綱要大意。 | ||
* 這份文件應該在翻譯完畢以後製作靜態版本，因為有很多範例用 Wiki 不是那麼好表達，也無法隨樣式變更即時套用。因此： | * 這份文件應該在翻譯完畢以後製作靜態版本，因為有很多範例用 Wiki 不是那麼好表達，也無法隨樣式變更即時套用。因此： | ||
** 範例請全部跳過，範例裡面的文字也不需翻譯。 | ** 範例請全部跳過，範例裡面的文字也不需翻譯。 | ||
** 不要為這邊的內容加上 Wiki 樣式！ | ** 不要為這邊的內容加上 Wiki 樣式！ | ||
| − | ** 編輯註解請用以下格式: <pre>* 註解 -- 加註者</pre> | + | ** 編輯註解請用以下格式: <pre><div style="background-color: yellow;">* 註解 -- 加註者<div></pre> 若某段落已有人加註，則不需另外添加 div。 |
| + | ---- | ||
| + | # <strike>初稿翻譯 (BobChao)</strike> | ||
| + | # <strike>整修為 mozilla.org 樣式靜態文件。</strike> | ||
| + | # 編修 moztw.org 相關樣式 | ||
| + | # Review | ||
| + | # 放上 moztw.org | ||
= mozilla 標籤使用參考文件 = | = mozilla 標籤使用參考文件 = | ||
| − | 這份文件描述 mozilla.org 中使用標籤的語意及習慣，讓文件能套用本站 CSS | + | 這份文件描述 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:」字樣並套用字型、色彩等樣式。 | ||
| + | <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 class="sidenote"> | + | ;補充說明: <div class="sidenote"> : 以此標註與本文無直接相關的額外資訊（或連結），使其獨立於文件一般排版而自成一區。雖然這些補充資訊通常會浮 (float) 至邊欄，但請確保文字在未浮動的情形下依然合理可閱，故最多僅能為此區加上不同背景色或邊框。（或者什麼也不加，如 Lynx。） |
| − | + | ;要點: <div class="key-point"> : 以此標示關鍵要點，使其顯眼易見。（如果是極重要資訊請標以 important 。） | |
| − | 以此標註與本文無直接相關的額外資訊（或連結），使其獨立於文件一般排版而自成一區。雖然這些補充資訊通常會浮 (float) 至邊欄，但請確保文字在未浮動的情形下依然合理可閱，故最多僅能為此區加上不同背景色或邊框。（或者什麼也不加，如 Lynx。） | + | ;重要（必讀）說明: <* class="important"> : 以此標示極重要、必閱資訊。通常 important 會用比較大點的字，或許再加上更顯眼的顏色。可讓文字再以 <strong> 標示。 |
| − | + | == 強調 == | |
| − | 要點: <div class="key-point"> | + | ;重點: <em> |
| − | + | ;強調: <strong> | |
| − | 以此標示關鍵要點，使其顯眼易見。（如果是極重要資訊請標以 important 。） | + | ;特別強調: <strong class="stronger"> |
| − | + | ;再三強調: <strong class="very-strong"> | |
| − | 重要（必讀）說明: <* class="important"> | ||
| − | |||
| − | 以此標示極重要、必閱資訊。通常 important 會用比較大點的字，或許再加上更顯眼的顏色。可讓文字再以 <strong> 標示。 | ||
| − | |||
| − | 強調 | ||
| − | |||
| − | 重點: <em> | ||
| − | |||
| − | 強調: <strong> | ||
| − | |||
| − | 特別強調: <strong class="stronger"> | ||
| − | |||
| − | 再三強調: <strong class="very-strong"> | ||
| − | |||
以這些方式標示不同程度的強調語詞，分別會以斜體、粗體、粗斜體、粗體大寫顯示。 | 以這些方式標示不同程度的強調語詞，分別會以斜體、粗體、粗斜體、粗體大寫顯示。 | ||
| − | + | <div style="background-color: yellow;"> | |
| − | * 中文不用斜體，要換個方式。 | + | * 中文不用斜體，要換個方式。--[[User:BobChao|BobChao]] 14:39, 24 May 2005 (CST) |
| − | + | </div> | |
| − | 範例、圖示 | + | == 範例、圖示 == |
| − | + | ;圖示: <div class="figure"> :以此標示圖示或圖表，figure 通常是置中的區塊。 | |
| − | 圖示: <div class="figure"> | + | ;範例: <div class="example"> :以此標示各種範例，別忘了程式範例還是得包在 code 裡。可用 title 屬性加上範例標題。 |
| − | + | ;正確用法實例: <div class="good example"> 或 <pre class="good code"> :以此標示正確用法或程式寫作方式。如果要標示的某段程式已經在正確用法區塊中，則不需另外指定 good 類別。（相關樣式會繼承自母元素。） | |
| − | 以此標示圖示或圖表，figure 通常是置中的區塊。 | + | ;錯誤用法實例: <div class="bad example"> 或 <pre class="bad code"> :以此標示錯誤用法或程式寫作方式。如果要標示的某段程式已經在錯誤用法區塊中，則不需另外指定 bad 類別。（相關樣式會繼承自母元素。） |
| − | + | == 電腦相關 == | |
| − | 範例: <div class="example"> | + | ;鍵入: <kbd> :以此標示使用者要按的鍵或輸入的文字。 |
| − | + | ;變數、佔位文字: <var> :以此標示佔位文字、依使用者狀況有別的變數等字串。 | |
| − | 以此標示各種範例，別忘了程式範例還是得包在 code 裡。可用 title 屬性加上範例標題。 | + | ;指令: <code class="command"> :以此標示指令。 |
| − | + | ;檔名、網址: <class="filename"> :以此標示網址、路徑、檔名。 | |
| − | 正確用法實例: <div class="good example"> 或 <pre class="good code"> | + | ;行內程式碼: <code> :以此標示在段落文字中需要提到的程式片段。這段程式將以等寬字體顯示，並隨之添加其他適當樣式。 |
| − | + | ;區段程式碼: <pre class="code"> | |
| − | 以此標示正確用法或程式寫作方式。如果要標示的某段程式已經在正確用法區塊中，則不需另外指定 good 類別。（相關樣式會繼承自母元素。） | + | *以此標示整段程式碼，以便與其他文字有所區別。可以用 <span class="remark"> 或 <var> 等標籤特別標示某段程式並關閉衍生內容，亦可用強調樣式標示重要片段。 |
| − | + | *錯誤程式應標示為 bad code。 | |
| − | 錯誤用法實例: <div class="bad example"> 或 <pre class="bad code"> | + | ;螢幕文字輸出（自成一區）: <pre class="screen"> 或 <div class="screen"> :以此標示整段的螢幕文字輸出，如輸入指令後的回應文字等等。 |
| − | + | ;螢幕文字輸出（段落中）: <samp> :以此標示段落文字中的螢幕文字輸出部分。 | |
| − | 以此標示錯誤用法或程式寫作方式。如果要標示的某段程式已經在錯誤用法區塊中，則不需另外指定 bad 類別。（相關樣式會繼承自母元素。） | + | == 導覽 == |
| − | + | ;目錄: <ol class="toc">、<ul class="toc"> 或 <dl class="toc"> | |
| − | 電腦相關 | + | *以此標示文章的目錄。一般目錄和多層次目錄以 ol 標示（此時只要最外圍的 ol 標上類別即可），如果段落順序非常重要才使用 ul 表示。 |
| − | + | *使用 dl 時，以 dd 標示章節名稱、並以 dt 描述章節大綱。 | |
| − | 鍵入: <kbd> | + | ;內部文件小導覽列: <ul class="snav"> :標示一群內部文件導覽連結，也可能都只連到同一份文件中的某個地方。以此標示的連結不具目錄性質，僅為文件作者（而非樣版設計者）所用。 |
| − | + | ;外部參考連結: <a class="ex-ref"> :標示連到其他網站的相關參考文件，例如連到 MozillaZine。此連結樣式與一般連結應有不同，藉此提醒訪客此為外部連結。 | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
於 2006年2月28日 (二) 06:35 的最新修訂
- mozilla.org 跟 moztw.org 用同一份樣式表，所以這邊的東西可以通用。不用翻得字字精準，但請寫出綱要大意。
- 這份文件應該在翻譯完畢以後製作靜態版本，因為有很多範例用 Wiki 不是那麼好表達，也無法隨樣式變更即時套用。因此：
- 範例請全部跳過，範例裡面的文字也不需翻譯。
- 不要為這邊的內容加上 Wiki 樣式！
- 編輯註解請用以下格式:
<div style="background-color: yellow;">* 註解 -- 加註者<div>
若某段落已有人加註，則不需另外添加 div。
初稿翻譯 (BobChao)整修為 mozilla.org 樣式靜態文件。- 編修 moztw.org 相關樣式
- Review
- 放上 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。此連結樣式與一般連結應有不同，藉此提醒訪客此為外部連結。
