編輯維基文字/圖片/快速入門

編輯維基文字

火鬱金香; 210x280 畫素

粉色鬱金香; 373x280 畫素

快速入門

T

his first Pictures page is intended for a quick study or for revision and will not bore you too much with discussion.. This page will show a Wiki writer how to fit images into their work using the most usual layout methods. For those who need only a coding summary, go straight to the image code examples in the drop-box of the section Insert the Image Code. A summary of image code options can be found in the section Adjust the Options. For those who need more complicated methods, for example, tables, gallery, or drop-control methods, refer to the Other pages links.

As the reader will realize, formatting in Wiki uses Wikitext mark-up code. To make the learning task a bit easier, code modules have been prepared for the various parts of the work. At various points in the text there are panels or drop-down boxes that contain the blocks of code. The code is easily pasted into the 華夏公益教科書沙盒編輯器, to try the formats for yourself. As a general rule, the best method for new formatting is to carry out the testing of your ideas in the safety of the Sandbox, before pasting them into your work.

獲取影像資訊

查詢維基媒體影像

維基媒體公用資源影像資料庫中已經儲存了數千張影像。要獲取有關影像的主要資料是其確切名稱和版權狀態，這些資訊和其他影像詳細資訊可以透過兩種方式找到。

第一種方法是使用維基媒體公用資源網站上的影像列表。過去使用五月花搜尋引擎找到的相同影像現在可以在維基媒體公用資源上的類別中找到。該網站有各種類別供瀏覽，包括維基媒體公有領域影像，以及許多其他類別。收集您感興趣的任何影像的詳細資訊（名稱、大小等），準備在您的頁面上使用。
第二種方法只是從其他維基頁面（維基百科或華夏公益教科書）中獲取您喜歡的影像的詳細資訊。要查詢維基頁面上任何影像的所有詳細資訊，只需左鍵單擊它即可轉到其影像描述頁面。如果您只需要知道頁面上影像的名稱或渲染尺寸，則右鍵單擊影像並閱讀影像屬性中的詳細資訊。

最後，由於使用者可能需要一些樣本研究影像佈局，因此下面的下拉框中有一組程式碼行，可以用於在您的頁面中或在華夏公益教科書沙盒編輯器中進行實驗時生成高質量的影像。您可以隨意修改這些程式碼行，在任何頁面上都可以看到它們的選項如何影響顯示。

要嘗試的影像程式碼

即用型影像程式碼

花卉集...

此列表包含一些現成的花卉影像格式。它們建立具有 250 畫素基本尺寸的縮圖，帶有邊框和標題。預設情況下它們位於頁面右側，但可以新增一個額外的選項指定左側、右側或居中。

將單個影像行復制到沙盒或直接複製到您的工作中。在計劃使用影像時，請自行瞭解各個影像頁面上的版權條件。有關如何使用影像的概述，請閱讀編輯維基文字/圖片系列中的其他頁面。

[[File:Jonquil flowers06.jpg|250px|thumb|Narcissus]]

[[File:Chamomile@original size.jpg|250px|thumb|Camomile]]

[[File:2006-10-18Dahlia03m.jpg|250px|thumb|Dahlia]]

[[File:Galanthus nivalis close-up aka.jpg|250px|250px|thumb|Snowdrop]]

[[File:Tulip - floriade canberra.jpg|250px|250px|thumb|Tulip]]

[[File:Gerbera pink.jpg|250px|thumb|Gerbera]]

[[File:Nymphaea tetragona.jpg|250px|thumb|Waterlily]]

[[File:Primula aka.jpg|250px|thumb|Primula]]

[[File:SunFlower1.jpg|250px|thumb|Sunflower]]

[[File:Hippeastrum flower.jpg|250px|thumb|Hippeastrum]]

[[File:Red_chrysanthemum.jpg|250px|thumb|Chrysanthemum]]

[[File:crocus_4.jpg|250px|thumb|Crocus]]

[[File:petunia2.jpg|250px|thumb|Petunia]]

[[File:Marigold top (aka).jpg|250px|thumb|Marigold]]

[[File:Oriental poppy.jpg|250px|thumb|Oriental Poppy]]

[[File:Rose Unknown 100 20070601.jpg|250px|thumb|Rose]]

[[File:Gazania_rigens-1.jpg|250px|thumb|Gazania]]

[[File:Cichorium_intybus-alvesgaspar1.jpg|250px|thumb|Chicory]]

[[File:Cerasus blossom.jpg|250px|thumb|Hawthorn]]

[[File:Ascocenda_Princess_Mikasa_.jpg|250px|thumb|Ascocenda Orchid]]

[[File:Krokus-kih.jpg|250px|thumb|Crocus]]

[[File:Leucanthemum_vulgare_'Filigran'_Flower_2200px.jpg|250px|thumb|Daisy]]

[[File:Hatiora_×graeseri_flower.jpg|250px|thumb|Hatiora]]

[[File:Coleostephus_February_2008-2.jpg|250px|thumb|Coleostephus]]

[[File:Blossoming almond tree.jpg|250px|thumb|Almond]]

[[File:Magnolia_wieseneri.jpg|250px|thumb|Magnolia]]

[[File:Flower_jtca001.jpg|250px|thumb|Gazania]]

[[File:A_sunflower.jpg|250px|thumb|Helianthus]]

[[File:Chrysanthemum morifolium November 2007 Osaka Japan.jpg|250px|thumb|Chrysanthemum]]

[[File:Gladiolus 7-19-06.JPG|250px|thumb|Gladiolus]]

[[File:Smithsoniangardens1.jpg|250px|thumb|Lilium]]

[[File:Lilium longiflorum.jpg|250px|thumb|Lilium Longiflorum]]

[[File:Hyacinthoides_non-scripta_(Common_Bluebell).jpg|250px|thumb|Bluebell]]

[[File:Prettypinkflowersfromuva.jpg|250px|thumb|Pelargonium]]

[[File:Fire tulip.jpg|250px|thumb|Fire Tulips]]

[[File:チューリップTulip1.JPG|250px|thumb|Pink Tulips]]

花卉集縮圖

高質量的花卉影像
玉蘭花
高山紫羅蘭
三色堇
鐵線蓮約瑟芬
鐵線蓮雜交種
水仙
洋甘菊
大麗花
雪花蓮
鬱金香
非洲菊
非洲菊，大黃色
睡蓮
報春花
向日葵
朱頂紅
菊花
番紅花
矮牽牛
萬壽菊
東方罌粟
玫瑰
玫瑰
玫瑰
非洲菊
菊苣
櫻桃
萬代蘭
番紅花
雛菊
蟹爪蘭
金盞菊
杏仁
玉蘭
非洲菊
向日葵
菊花
劍蘭
百合
龍舌蘭百合
風信子
大麗花
天竺葵
火鬱金香
粉色鬱金香

影像詳細資訊可以透過左鍵單擊滑鼠找到各個影像頁面

上傳自己的影像

Y

our own images can be uploaded to the Wikimedia Commons image database, for use on any Wikibooks page. In fact, they will become available to any user. It works like this.

每個華夏公益教科書頁面的編輯此頁面版本，包括此頁面的編輯頁面，在其邊距中都有一個名為上傳檔案的連結，但影像只能由先登入的使用者上傳。點選該連結會跳轉到公用資源上傳頁面，其中包含說明。可能目前最好的上傳方法是訪問維基媒體公用資源主頁，然後透過選擇其左頁邊距的上傳檔案連結，您可以按照上傳嚮導的步驟進行操作，從而使操作變得更加輕鬆。

在有選擇的情況下，影像最好以最大可用尺寸上傳。這樣可以為使用者提供最大可能的頁面尺寸選擇。影像始終可以透過在標記程式碼中指定其畫素尺寸來在工作頁面本身縮小尺寸。上傳影像後，會立即顯示其專用的影像頁面。此頁面會重複貢獻者提供的所有資料，包括版權狀態。上傳影像檔案後，您和其他使用者可以立即在您的作品中使用它。

插入影像程式碼

I

mages are placed on a page by typing an image code along with any other text. As with the typing of text, this is done in the editing window of the page being edited. Selecting the edit this page tab at the top of the page accesses the editing panel, and all of the user's preferences and other links can be found at the top of each page as soon as the user signs-on.

基本影像程式碼

無需多言，本節首先介紹最全面的影像程式碼。它包含了編寫者可能感興趣的所有功能。標準格式包括影像名稱和檔案型別字尾、頁面位置、邊框型別、影像尺寸和標題。

程式碼中的豎線分隔符稱為管道符號。瞭解這些符號在鍵盤上的位置非常重要，因為它們在所有影像工作中都會使用。在某些鍵盤上，它們並不位於標記的位置。Shift-反斜槓和Ctrl-Alt-左上角是鍵盤上此符號的常見位置。無論如何，如果在鍵盤上找不到它，每個編輯頁面的底部都有一系列這樣的符號可供複製。最有用影像程式碼的標準格式如下所示

[[File:Image file name|Position|Type|Size|Caption]]

適合頁面的典型影像行的實際格式如下所示

[[File:Gerbera_pink.jpg|right|thumb|200px|粉色非洲菊]]

這行程式碼生成的圖片顯示在文字的右側。程式碼將圖片放置在頁面的右邊緣 (right)。圖片採用縮圖樣式 (thumb)，預設情況下帶有邊框；圖片連結到其圖片頁面。圖片的基準尺寸為 200 畫素 (200px)，圖片下方邊框內包含標題 (粉色非洲菊)。如果標題更長，文字會整齊地換行到多行。頁面本身的文字也會整齊地圍繞圖片。事實上，根據圖片程式碼行在頁面上的位置，可以更改伴隨文字開始換行的點。在下方的下拉框中的示例將更清楚地說明這一點。

請注意，從文字處理器中轉移您的工作時，某些字元可能不受 Wiki 編輯器的支援。如有疑問，請先將程式碼複製到沙盒中進行測試。要備份您的未完成的標記程式碼，您可以從沙盒編輯視窗複製文字並將其儲存到記事本中，記事本是 Windows 的附件。記事本是一個純文字裝置，對標記程式碼的影響最小。請注意，所有已儲存的頁面版本都可以在歷史選項卡中找到，如果需要，可以恢復到以前某個時間點的形式。

下方的下拉框中提供了基本的圖片放置示例。

基本圖片佈局示例

下面給出了首選格式的通用形式和示例。

[[File:filename|position|type|size|caption]]

and;

[[File:Close up lily.jpg|right|thumb|250px|Lily Stamens]]

在每種情況下，當給出單個畫素 (px) 數字時，它指的是圖片的基準尺寸；圖片的其餘部分按比例縮放。請仔細閱讀以下示例中的程式碼。

右側圖片示例

[[File:Close up lily.jpg|right|thumb|150px|Lily Stamens]]

上面的程式碼生成了這個顯示效果。為了適應示例，尺寸縮小到了 150 畫素。文字環繞在圖片的左側。事實上，在編輯視窗中圖片程式碼行上方的所有文字都會擴充套件到整個頁面。在本例中，它是編輯器中圖片程式碼行之後輸入的文字，開始進行環繞。為了防止下一節的文字閉合並與該圖片一起環繞，可以在新節工作內容的前一行放置一個特殊程式碼，以確保它使用整個頁面的寬度。要使用的程式碼是

<br clear="all">.

此程式碼通常放置在每個節標題上方的行，並且通常被認為是解決涉及文字重疊的混亂問題的解決方案。順便說一句，此特定程式碼在主頁面文字中有效，但在下拉框（如本示例）中無效。

左側圖片示例

[[File:Ascocenda Princess Mikasa .jpg|left|thumb|150px|Ascocenda Orchid]]

本示例也使用了所有四個選項。它顯示在左側。它比主頁面上的圖片更小，並且為了示例的需要，標題已簡化。與上述情況一樣，文字從選定的點開始環繞。左側和右側示例包含了自動文字環繞的主要方法。將它們與下一個示例進行比較。

居中圖片示例

[[File:primula_aka.jpg|center|thumb|200px|Primula]]

此圖片顯示在居中位置，為了示例的需要，文字不能環繞；它必須在圖片下方繼續。這種文字的繼續是居中以及所有其他圖片位置（包括絕對和相對位置）的特徵。左側和右側圖片位置是特殊情況。

左側和右側圖片示例

[[File:primula_aka.jpg|left|thumb|150px|Primula]]
[[File:Ascocenda Princess Mikasa .jpg|right|thumb|100px|Ascocenda Orchid]]

這種組合允許文字在兩個圖片之間環繞，因為它只包含左側和右側位置。只要避免居中位置，環繞就會自動進行。如果一個圖片比另一個圖片更深，文字仍然會正確地填充可用空間。

所有三種位置組合在一起的示例： 在 7 版本之前的 Internet Explorer 中，對齊失敗。

[[File:Gazania_rigens-1.jpg|left|thumb|125px|Gazania]]
[[File:Blossoming almond tree.jpg|right|thumb|300px|Almond]]
[[File:Coleostephus_February_2008-2.jpg|center|thumb|125px|Coleostephus]]

使用所有左側、右側和居中位置將導致所有三個位置在頁面上對齊，前提是最後一行圖片程式碼是居中的，否則將失敗。請注意，雖然文字會環繞到側邊圖片，但它必須始終繼續在居中圖片下方。也就是說，為了最佳地利用空間，請將最大的圖片遠離居中位置。遺憾的是，這種佈局不適合某些瀏覽器。（請參閱以下瀏覽器相容性。）

瀏覽器相容性和其他圖片方法 這種最新的全行佈局看起來很有用，因為它能很好地填充空間，對於最新版本的瀏覽器來說，它無疑是一個整齊的佈局。然而，對於較舊的瀏覽器來說，這種對齊是不可靠的，因為它們對 HTML 程式碼的解釋不同。瀏覽器應用不同的邊距、文字大小和填充，這可能會破壞佈局。Wiki 作者必須考慮頁面在大多數瀏覽器中的外觀；許多較舊的瀏覽器仍在使用，並且由於平臺和其他因素的變化，無法更新；（例如，Win98 不能使用比 Explorer 6 更高階的瀏覽器。）

為了進一步解釋，在最新的 Explorer 8、Opera 9 和 Firefox 3 瀏覽器中，這三張圖片的全行對齊將顯示在同一行；但在其他一些瀏覽器中，例如 Internet Explorer 6，居中圖片將顯示在另外兩個圖片下方。程式設計師試圖在他們的樣式表中補償這些差異，但作者也可以通過了解這些限制來提供幫助。

在某些版本的 Firefox 中，對於居中的圖片庫也存在類似的失敗；一個圖片庫將顯示為移到指定的居中位置的左側，無論它是否獨立存在或位於另一個結構內，例如下拉框。

對於那些需要更多圖片佈局方法的人，在平鋪圖片和容器中的圖片中分別提供了一些關於平鋪圖片（隨意排列）和鎖定圖片位置的說明。

當此類圖片程式碼行就位時，請按編輯視窗底部的顯示預覽按鈕，然後等待系統顯示重新格式化的頁面。如果圖片位置是左側或右側，則文字將顯示為環繞。如果選擇居中（或無），則文字不能環繞，文字將移動到圖片下方的點。

無論如何，如果呈現的結果與預期不符，則可以根據需要更改文字，直到它正確為止。當工作正確時，請按頁面底部的儲存頁面按鈕，將修改後的頁面儲存起來，以便其他網路使用者檢視。

調整選項

T

這些說明詳細描述了圖片選項，並且在撰寫本文時是正確的。

圖片選項的順序並不重要，除了圖片名稱之外，這些條目對大小寫不敏感。但是，建議始終包含大小，以避免出現巨大的圖片尺寸。圖片語法的通用編碼格式和最常用的選項再次給出如下。

[[File:File_Name|Position|Type|Size|Caption]]

位置：頁面上的水平位置...

未指定位置時...: 當邊框型別設定為frame或thumb時，預設位置為right，否則為left。
位置選項...: 它們分別是right、left、center或none。
要讓文字圍繞圖片環繞...: 選擇left或right圖片位置，或者將一個圖片設定為每個位置，以便在兩個圖片之間環繞。
要強制文字繼續...: 選擇center或none，因為它們不能環繞文字。
要固定圖片而不環繞...: 選擇none。這會將圖片強制到左側的新行上。
用於表格單元格中的圖片...: 在圖片程式碼中將位置設定為center，如有必要，使用相應表格元素中的 CSS 樣式設定垂直位置。
補充說明...: 當左側、右側和居中位置的圖片旁邊已經存在類似的圖片時，圖片的位置可能會被解釋為相對於剩餘空間。這些圖片被稱為浮動。相反，設定為none的圖片是非浮動的，它不允許任何東西與它並排。

型別：圖片的邊框型別...

未指定型別時...: 將生成一個沒有邊框的圖片。
型別選項...: 它們分別是thumb、frame或border。
用於邊框、標題和縮放...: 使用Thumb，因為它具有最大的範圍。
用於邊框、標題，但不縮放...: 使用Frame，但僅適用於相同尺寸的圖片。
用於非常淡的邊框...: 使用border。當一個原本沒有邊框的淺色圖片需要與淺色背景稍微分隔顏色時，這很有用。
在右側製作一個使用者大小的縮圖...: 僅設定thumb以及圖片詳細資訊。尺寸將根據使用者設定的偏好進行調整。尺寸將在本地顯示，其他人將看到他們自己的尺寸或預設尺寸。
彩色背景上的圖片...: 避免使用thumb，因為可能會看到不需要的白色邊距。考慮使用無框圖片來避免它。
表格單元格中的圖片...: 這些圖片應該是沒有邊框的。帶框圖片標題存在問題，最好使用表格屬性建立邊框。
圖片標題...: 只有使用thumb 和 frame 才能實現這些功能，不過模板集Noframeleft、Noframeright、Noframecenter 和 Noframenone 允許無邊框圖片新增標題，並且在製作自定義邊框方面提供了更大的靈活性。

尺寸：圖片尺寸，不包括任何邊框...

未指定尺寸時...: 圖片將以全尺寸顯示，大多數情況下會太大。但是，請參見關於使用者設定縮圖型別的說明。
調整圖片尺寸...: 除了選擇frame 型別時，所有選項型別都支援調整圖片尺寸。
圖片測量單位...: 圖片使用的單位是畫素，圖片尺寸僅適用於圖片本身；任何邊框都會增加整體佈局的尺寸。
有兩種圖片尺寸格式...: 所需的圖片尺寸可以僅指定寬度，也可以指定寬度和高度。不能僅指定高度。
單一尺寸格式...: 這是圖片底部的畫素尺寸，保持形狀不變。螢幕以每英寸約 70 到 100 畫素的速度渲染圖片。一個典型的示例是 240px。
雙重尺寸格式...: 這是底部尺寸乘以高度，例如 240x150px，當兩者都已知時。
當給出的尺寸不一致時...: 也就是說，當一對尺寸中的一個似乎試圖改變形狀時，只會生成兩個可能的圖片尺寸中較小的一個。
均衡混合形狀圖片的高度...: 無需知道確切的尺寸。例如，要均衡混合形狀圖片的高度，請使用雙重格式，將所有尺寸程式碼設定為所需的高度，並將它們的寬度大大誇大。這會強制執行一種不一致的縮放，從而達到所需的結果。例如，兩張圖片的尺寸分別是 350x150px 和 700x450px，顯然形狀不同。要將這兩張圖片並排顯示，並且高度均為 100px，我們將它們的圖片程式碼設定為 900x100px 和 900x100px。明顯的 900px 不一致將被忽略，100px 將被視為縮放的有用尺寸。不過，每個圖片的形狀將保持不變，無需重新計算確切的尺寸。

標題：位於邊框內的標題...

未指定標題時...: 只有thumb 和 frame 允許新增標題，並且可以省略它們，留出一個空白空間。
標題文字格式...: 使用 HTML 標籤、Wikitext 和超連結來格式化標題。
使用文字模板 ...: 可以使用模板來格式化標題。它們可以減少工作量，並使外觀更加一致。
無法識別的選項...: 當圖片選項拼寫錯誤或無法識別時，它將被視為標題，或作為圖片佔位符的替代文字。當只有兩種可能性時，只取第一個。
什麼是替代文字？...: 圖片的空框稱為佔位符，有時可以在其中找到文字；這就是替代文字。當圖片不可用，或者當軟體為殘疾人閱讀頁面時，可以使用此文字。
替代文字或標題...: 當由於邊框型別導致標題無法使用時，新增標題的嘗試將被視為替代文字。當標題可以使用時，它也用作替代文字。在圖片中使用不同的標題和替代文字是不可能的。

使用圖片模板

玫瑰，伊麗莎白女王：無邊框

玫瑰，伊麗莎白女王：帶邊框

T

here are occasional inconveniences in the  use of the basic image syntax.

例如

基本選項僅允許frame 和 thumb 型別新增標題。
帶邊框且位於彩色背景上的圖片通常會顯示出不需要的白色邊距。
無法制作自定義邊框。

當需要時，可以透過在模板內顯示圖片來克服這些問題。特別是，Wikibooks 模板 Noframeleft、Noframeright、Noframecenter 和 Noframenone 是為此目的而建立的，用它們製作的圖片的行為方式與基本圖片示例非常相似。

模板集中每個模板都適合於頁面上的相應位置。頁面左側和右側可以看到兩個模板使用示例；左側圖片是帶有標題的無邊框圖片示例，使用 Noframeleft 製作。右側的圖片使用 Noframeright 添加了邊框。將沒有白色邊距的情況與本頁面其他地方顯示的蘭花和菊花圖片進行比較。

使用這些模板來獲得此特定結果的程式碼只是

{{Noframeleft|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose : ''Queen Elizabeth''}}
{{Noframeright|cwidth=200px|border=4px outset darkgreen|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose, ''Queen Elizabeth'': With a border.}}

需要強調的是，縮圖的白色邊距不會對預設頁面著色造成任何問題，並且 Wikibooks 專案中彩色背景相對罕見。

查詢其他方法

T

以下是其他圖片佈局技巧。圖片平鋪在平鋪圖片中介紹，並解釋如何重疊圖片以及如何在頁面上對齊它們。在圖片容器中提供了一個關於圖片容器的單獨頁面，並提供了表格、相簿和下拉框的方法。例如，本頁面的頂部分使用一個不可見的表格容器製作，而彩色背景則是透過將頁面放置在經過樣式化的 HTML div 標籤內製作的。

如上一節所述，作者開發了模板。示例包括標題製作、文字格式化和圖片放置。模板允許在無需通常伴隨著此類工作的編碼的情況下進行繁瑣的格式化。作者只需向一些關鍵詞新增文字，即可自動新增格式。

使用中的模板的具體示例可以更清楚地說明這一點。本頁面上的首字母大寫使用名為 Drop 的模板。任何顏色的要輸入的內容面板使用 Block 模板，而示例的下拉控制框使用 Dropimage 模板。Hiddenh3 模板建立了各種隱藏標題，這些標題具有正確的格式，但沒有在目錄中列出。

這裡不建議解釋模板製作，而是提供一個指向相關頁面的連結。請參見模板 A101。要檢視一些現有模板的示例，請參見現成的模板.

另請參見

沙盒編輯器：供使用者嘗試其程式碼的 Wikibooks 編輯視窗
圖片許可：關於版權狀態的維基媒體頁面
檔案幫助：Wikibooks 上的圖片參考文字
維基百科共享資源：維基媒體的主要媒體資源頁面
模板 A101：關於製作文字、框和下拉模板的 Wikibooks 文字。
現成的模板：精選的現成的 Wikibooks 模板