跳轉到內容

維基文字/模板編輯 - 隨時可用

來自華夏公益教科書

本頁介紹了一些現有的模板,其他模板可以在

  • 建立修改模板,請參閱模板 A101.
  • 要按字母順序搜尋華夏公益教科書(而非維基百科)中的模板,請點選以下連結:所有模板名稱空間.
  • 要按類別搜尋模板,請點選以下連結:Category:Templates.
  • 要按名稱搜尋模板,例如dropimage,請在任何維基頁面左側的搜尋框中輸入以下內容並選擇轉到
template:dropimage


鼓勵作者新增指向有用華夏公益教科書模板的連結,也許可以以表格形式新增到這些部分或其他部分中。

頁面構建塊

[編輯 | 編輯原始碼]
佈局選項;模板Thetop
每個頁面都有一些相似之處。大多數情況下,文字會擴充套件到整個頁面,顏色與預設設定匹配。有時需要更復雜的佈局,每次設定樣式都變得很繁瑣。當有許多間隔元素(如表格、列表、影像和文字)時,這會變得尤其乏味。此模板在邊界框內包含全頁部分和跨頁面板。每個引數都有許多選項,配置非常直觀。這段文字是在Thetop模板的引導部分中編寫的,下面其他部分包括三個跨頁框和一個與引導部分類似的尾部部分。
<table border=1>
<caption>Caption</caption>
<tr>
  <th>Heading 1</th>
  <th>Heading 2</th>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
</tr>
<tr>
  <td>[[image:crocus_4.jpg|75px]]</td>
  <td>D</td>
</tr>
</table>
標題
標題 1 標題 2
A B
D
部分可調整
  • 可以更改寬度以移除某個部分或擴充套件另一個部分。
  • 可以更改填充和顏色。
  • 也可以更改字型詳細資訊。
  • 要建立空部分,請輸入不間斷空格。
此構建塊的寬度與頂部部分模板完全匹配。實際上,如果願意,模板可以用於頂部部分。透過使用此類構建塊,可以提高一致性,並且新增背景顏色可以讓頁面更加有趣。

請注意,不需要模板就可以簡單地將更有趣的顏色應用於頁面。有這種想法的作者和編輯只需將頁面中的所有文字放在樣式化的 HTML ''div'' 標籤中。標籤的樣式在典型的“內聯”塊格式中介紹,如有必要,可以在此頁面標記文字的頂部找到示例。

可以在表格頁面中看到此模板的使用示例。


隱藏內容

[編輯 | 編輯原始碼]

有時頁面會變得有些雜亂。許多詳細資訊最好隱藏起來,以便在需要時可以訪問,但不會影響所述內容。

為此,可以使用DropimageFullWidthDrop等模板。引用的示例展示了一個帶有標題和連結的整潔框。連結可以切換;第一次單擊它會下拉框以顯示內容。再次單擊連結會關閉框。內容量可以相當大。請注意,雖然 Dropimage 可以比頁面窄,但 FullWidthPage 模板始終會佔用整個頁面。

儘管它們的名字如此,但這兩個框也可以包含文字或其他元素,包括其他模板。對於 Dropimage 和 FullWidthDrop,建議使用 HTML 表格而不是維基表格。

下面展示了 Dropimage 的使用示例,包括一個影像、文字和 HTML 表格。在整個編輯維基文字系列中都可以看到更多關於其使用的示例。

影像示例

紫羅蘭色番紅花


CSS 屬性摘要
維基標記表格的常用樣式規則 

兩種不同的樣式規則集在使用;一組與表格中特定元素相關聯的 HTML 屬性,以及一個更通用的級聯樣式表集,即 CSS 屬性。

表格標題單元格都可以被視為表格更通用構建中的獨立元素。在每個屬性與同一元素同一級別的 CSS 屬性具有相同格式的情況下,CSS 屬性優先。

為了方便參考,列出了每個樣式集的簡短列表,但這些列表並非完整列表。在該下拉列表底部提供了一個連結,指向完整的 CSS 屬性參考。




表格的 HTML 屬性;使用以下格式;

attribute1=value1 attribute2=value2 attributeN=valueN

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.



CSS 樣式規則;使用以下格式;

style="property1:value1; property2:value2; propertyN:valueN;"

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

mix-blend-mode:multiply   mode                       T           blend mode

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.



WIKITEXT 樣式表示式間距規則


避免的主要事項

  • 樣式表示式中不允許換行。讓軟體進行換行。
  • 冒號或分號之前不允許空格。

允許以下內容

  • 各種表格符號和style單詞之間的空格是可以的。
  • 任何等號周圍的空格是可以的。
  • 樣式規則與其外部括號之間的空格是可以的。
  • 冒號和分號之後的空格是可以的。
  • 可以在最後一個樣式規則之後立即放置分號。

此外

  • 必須用空格分隔“2px solid black”等複合值。
  • 必須用空格分隔 HTML 屬性和 CSS 樣式表示式。
  • 允許 HTML 元素行間距,但不允許 Wikitext 元素行間距。
  • 可以縮排 Wikitext 和 HTML 表格元素,以便清晰地顯示。
  • 程式碼 LISTINGS 中的長行在新增一些空格的情況下才能換行。



組合兩種樣式規則方法

可以混合使用屬性和 CSS 樣式,前提是它們保持自身的本地格式。也就是說;引號之間沒有任何等號,引號之外沒有任何 CSS 規則。請注意,Wiki 撇號程式碼和各種 HTML 標籤仍然可以直接用於文字。下面展示了混合樣式的示例。

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


內聯樣式的優先順序。

當屬性和樣式在同一級別上發生衝突時,樣式優先

當樣式表示式中存在兩個具有不同值的相似屬性時,將採用第二個值。

當同一表格行中存在兩個完整的樣式表示式時,將忽略第二個表示式。類似的情況也適用於一行中的兩個相似屬性;第二個屬性會被忽略。





請參閱CSS 參考列表,以獲取有關屬性和值的更詳細說明。


淺色
淡色名稱和值
顏色名稱 顏色樣本 十六進位制 RGB 值
Aliceblue   #f0f8ff; rgb(240,248,255)
Antiquewhite   #faebd7; rgb(250,235,215)
Azure   #f0ffff; rgb(240,255,255)
Beige   #f5f5dc; rgb(245,245,220)
Bisque   #ffe4c4; rgb(255,228,196)
Blanchedalmond   #ffebcd; rgb(255,235,205)
Cornsilk   #fff8dc; rgb(255,248,220)
Floralwhite   #fffaf0; rgb(255,250,240)
Gainsboro   #dcdcdc; rgb(220,220,220)
Ghostwhite   #f8f8ff; rgb(248,248,255)
Honeydew   #f0fff0; rgb(240,255,240)
Ivory   #fffff0; rgb(255,255,240)
Lavender   #e6e6fa; rgb(230,230,250)
Lavenderblush   #fff0f5; rgb(255,240,245)
Lemonchiffon   #fffacd; rgb(255,250,205)
Lightcyan   #e0ffff; rgb(224,255,255)
Lightgoldenrodyellow   #fafad2; rgb(250,250,210)
Lightyellow   #ffffe0; rgb(255,255,224)
Linen   #faf0e6; rgb(250,240,230)
薄荷奶油   #f5fffa; rgb(245,255,250)
霧玫瑰   #ffe4e1; rgb(255,228,225)
鹿皮鞋   #ffe4b5; rgb(255,228,181)
納瓦霍白   #ffdead; rgb(255,222,173)
舊蕾絲   #fdf5e6; rgb(253,245,230)
淡綠松石   #afeeee; rgb(175,238,238)
木瓜黃   #ffefd5; rgb(255,239,213)
桃色   #ffdab9; rgb(255,218,185)
粉紅色   #ffc0cb; rgb(255,192,203)
貝殼   #fff5ee; rgb(255,245,238)
  #fffafa; rgb(255,250,250)
小麥色   #f5deb3; rgb(245,222,179)
白色   #ffffff; rgb(255,255,255)
煙白色   #f5f5f5; rgb(245,245,245)



影像模板

[edit | edit source]
請注意這個無邊框的標題。
無邊框影像標題

影像不能包含標題,除非影像語法使用了框架縮圖。邊框也往往是標準格式,通常不能自定義。

這些限制可以透過使用模板集來克服 NoframeleftNoframerightNoframecenter,和 Noframenone。簡要檢視它們的名稱可以發現,每個標準影像位置都有一個。這些模板也有許多選項。

標題示例與左側影像一起給出,也可以在頁面上看到 快速課程

滑鼠懸停影像

Internet Explorer 使用者會發現滑鼠懸停功能對他們不起作用。

非洲菊:懸停以瞭解更多資訊
HoverImage 作為縮圖。
菊花:替代方案
HoverImage 作為縮圖。

非洲菊:懸停以顯示菊花。HoverImage 用於 Noframeleft 內。

影像通常固定在頁面上,但有一種技術允許兩個影像佔據相同的空間。右側顯示了一個示例。當滑鼠移過影像時,會顯示不同的影像。它是由比我更聰明的人設計成的模板。整個過程允許使用標準影像選項,該模板稱為 HoverImage

HoverImage 的前兩個引數是將要使用的兩個影像的檔名;第一個是預設影像,第二個是替代影像。也有單獨的標題選項;它們的編寫順序與影像名稱相同。其他選項,如位置大小邊框型別可以新增並同時應用於兩個影像。該模板可以在使用普通影像語法行的任何地方使用。右側懸停影像的程式碼如下:

{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|right|thumb|200px|Gerbera:''懸停以瞭解更多資訊<br />單獨使用 HoverImage 作為縮圖。'' |Chrysanthemum: ''替代方案<br />單獨使用 HoverImage 作為縮圖。''}}

如果模板用於形狀不同的影像,可以透過精確設定高度並將基本尺寸設定為某個不可能的高值來實現一些改進;這樣,兩個影像都將設定為預期的高度。還要注意,整個模板可以成為 Dropimage 模板的內容,並且仍然可以很好地工作;在這種情況下,將影像選項設定為居中

影像示例中不需要的白色邊框不是模板中的錯誤,而是使用帶有框架的影像在彩色頁面背景上產生的結果;這是一個錯誤。為了避免這種情況,只需使用無邊框影像。如果還需要標題,則將 HoverImage 模板用作例如Noframeleft的影像引數,以建立單個標題的無邊框影像。左側的影像就是用這種方法制作的。帶有單個標題的滑鼠懸停無邊框影像的程式碼如下:

{{noframeleft|margin=10px|cwidth=200px|{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|200px}}|Gerbera:''懸停以顯示菊花。HoverImage 用於 Noframeleft 內。''}}


資訊框

[edit | edit source]
此框使用模板 Technote 製作,旨在用於技術頁面中的某些點,可能用於大多數人選擇忽略的過於簡潔的點。由於標題也可以更改,因此它可以採用任何適合綠色勾號影像的實用形式。
技術說明



Wikibooks 中提供了許多資訊框。其中大多數用於管理評論和提醒。背景顏色和文字對齊是選項。從以上示例可以清楚地看出,文字也可以包含超連結。

突出顯示塊

[edit | edit source]
style = "background:lightyellow; color:navyblue;"

以上示例顯示了另一個框,這次使用模板 Block 製作,以強調需要學習某些上下文或其他上下文的程式碼行。

它對程式設計和標記程式碼描述使用 Courier 字型。它適用於單行,雖然它會擴充套件,並且背景顏色、字型、對齊方式和其他元素都是選項。

在更一般的層面上,該模板可以用於頁面構建。當一個模板例項緊隨另一個模板例項之後時,就會出現顏色條帶。由於它基於div 標籤,因此它與主頁面幾乎沒有區別。

還有一個名為 Blockwrap 的版本,可以包含在左右環繞文字的部分中。這是為了解決一個錯誤,其中divs 堅持使用頁面的全部寬度。

模板Block 就像這樣整齊地堆疊在一起,用於頁面構建

|background=Beige|ta=left|
|background=Ivory|ta=left|
|background=mistyrose|ta=left|


條帶化專案符號

[edit | edit source]
  • 常用的專案符號使用頁面格式作為其預設值。
  • 這些 專案符號是條帶化的,儘管顏色通常會擴充套件到整個可用寬度,但容器的寬度和位置都是選項。
  • 它們在模板標準中很笨拙,因為它們需要使用三個獨立的模板 Container,以及其中的 DulLul 堆疊才能使其工作。

雖然這組模板缺乏優雅,但人們發現它比涉及自定義表格的更繁瑣的方法節省了時間。以上示例的模板呼叫使用了自定義寬度和位置,如下所示:

{{container|align=center|width=80%|1=
{{dul|第一點}}
{{lul|第二點}}
{{dul|第三點}}
等等...
}}


隱藏標題

[edit | edit source]

眾所周知,Wiki 中的每個標題都列在目錄中的連結中。

有時,不需要目錄條目,但仍然需要標題。這是避免在內容框中出現過多級別的其中一種方法。為此,已製作了一組六個模板 Hiddenh1Hiddenh6 來模仿標題樣式。

例如,Hiddenh3 的使用對應於 Wiki 中的三級標題,以及 HTML 中的h3 標題。例如,將它們用於下拉框,否則關閉的框可能會導致列表混亂。由於它們沒有被正式地視為列表,因此將無法像其他情況那樣連結到這些標題。


首字母下沉

[edit | edit source]
A

首字母下沉是指段落開頭的大寫字母。它有時用於藝術作品或散文詩的詩節開頭,但從最一般的層面上來說,它用於沒有正式標題樣式的地方。它是文字強調的一種形式,因為它將注意力吸引到部分的開頭。

此示例使用模板Drop。僅模板呼叫中包含第一個字母,並且在每種情況下,下一個文字字元(忽略任何空格)都硬左對齊到模板的右括號。

對於那些需要自己更復雜格式的人來說,有必要建立一個,因為據所知,這是唯一一個已有的檔案。值得注意的一點是,除非找到專用於此目的的等寬字型,否則首字母下沉不太可能垂直對齊。 因此,它們往往被放置得足夠遠以避免差異。

作者資料列表

[編輯 | 編輯原始碼]

在處理頁面時,經常需要一些 CSS 程式碼或顏色格式來參考。為了避免頁面搜尋的需要,可以將包含此類資訊的許多模板放置在頁面或沙盒旁,隨時可用。這些列表很緊湊,因為它們隱藏在下拉框中,直到需要時才顯示。到目前為止,該列表包括以下內容

  • Tablestyles製作表格的 CSS 樣式和 HTML 屬性列表。文字還包含有關程式碼間距和優先順序的說明。
  • Lightcolors選定的淡色調和淺色名稱列表,以及它們的 RGB 和 HEX 值。
  • Mediumcolors中等密度顏色名稱及其程式碼列表。
  • Darkcolors深色及其程式碼列表。
  • Greycolors密度間隔的灰色列表及其 RGB 值。
  • Flowers高質量鮮花縮圖庫,用於快速查詢影像。
華夏公益教科書