編輯維基文字/圖片/平鋪影像

其他頁面 快速課程 容器中的影像	天竺葵： '天竺葵'；300x225 畫素	粉紅色非洲菊： 300x225 畫素
平鋪影像 一字排開 我 mages 可以在不使用影像容器的情況下輕鬆排成一行，大多數人將這種排成一行的概念與浮動影像聯絡起來；也就是說，如果添加了太多這樣的影像，最後一個影像只會浮動到另一個頁面位置，而不是固定在它被放置的位置。最簡單的影像排列方法取決於將影像選項限制為最小值。僅指定影像名稱及其大小，並忽略所有其他選項，否則該方法可能會變得很麻煩。影像語法可以全部寫在一行中，也可以寫成連續的多行，並且示例程式碼已包含在相鄰影像排列的“下拉框”中。 請注意，顯示的示例沒有標題，因為標題只能用於框架或縮圖格式。但是，透過使用諸如Noframeleft之類的模板來對這些影像進行排列，可以獲得帶有標題的平鋪影像。已經制作了一套這些模板來包含所有影像位置。 透過在影像定義之間插入單個空格字元，在相鄰影像之間建立了一個細小的分隔空間。要將影像邊緣對邊緣設定，沒有任何空格，只需省略空格字元即可。因為我們很少希望從頁面的左頁邊距開始影像排列，所以使用填充影像非常有用。實際上，一個透明的空白影像已經上傳到影像集合中，用於此目的；它被稱為Padding.gif，它可以像其他任何影像一樣在頁面上進行大小調整。請參閱程式碼註釋以瞭解其用法的示例。（另一種方法，能夠實現精確定位，將在下一節中介紹）。 影像很少是您喜歡的尺寸，尤其是在將影像並排設定時。有一種方法可以使影像標準化。考慮影像排列。由於這些影像在最初形狀上存在很大差異，並且難以找到其精確尺寸，因此決定將它們的高度設定為相同，並允許寬度相應地縮放。如以下程式碼框所示，執行此操作的方法是精確指定重要尺寸（在本例中為高度），同時大幅誇大寬度等不重要尺寸的大小。請注意，某些寬度尺寸是必需的，但其確切值不需要知道。軟體將使用更小且更實用的可能性，忽略隱含的較大縮放比例。這樣，就可以無需根據寬度和高度進行計算，就可以對形狀差異很大的影像進行縮放。 按“一字排開”程式碼 程式碼清單摘錄 [[Image:Padding.gif|50px]] [[Image:Nymphaea tetragona.jpg|500x226px]] [[Image:Chamomile@original size.jpg|500x226px]] [[Image:Krokus-kih.jpg|500x226px]] or: [[Image:Padding.gif|50px]][[Image:Nymphaea tetragona.jpg|500x226px]] [[Image:Chamomile@original size.jpg|500x226px]] [[Image:Krokus-kih.jpg|500x226px]] 程式碼說明 在沙盒中使用這兩個列表中的任何一個來產生一個直線 三張影像的排列。它們周圍沒有任何框架。 事實上，它們必須只使用檔名和大小才能使這種方法 工作。 對於第二個列表（全部寫在一行中），一個空間可以 在影像定義之間留下空白以產生空白。如果 錯過空格，那麼邊緣將相交。 可以使用其他影像平鋪一個白色空白影像，以產生 頁面間距，並且這裡已經使用它來設定第一個影像的距離 從頁邊距 50 畫素。一個更好的方法，也是稍微 更復雜的方法，是使用HTML 行內樣式放置影像， 使用稱為相對定位的定位屬性。 有些人使用表格來解決影像間距問題，表格 過去一直很有用，因為它們提供了豐富的格式選項。 如果影像被放置在表格單元格中，並且邊框被 消失，然後可以使用未使用的單元格寬度來隱式調整 影像之間的間距。標題也可以放在 每個影像下方的單元格中。 其他方法也存在；例如，影像庫。示例 這些其他方法將在以下部分中顯示。 相對定位 M ost 影像定位僅限於三個預設位置。這些位置分別是左、右和中心。但是，藉助一些行內 HTML，影像、表格、文字段落和其他結構可以放置在頁面的任何位置。特別是，這意味著可以將影像放置在相對於其他程式碼預期位置的相對位置。為了進一步解釋，如果影像的通常位置在左頁邊距，根據使用的語法，然後新增相對定位程式碼允許它相對於該點進行移動，向上或向下，向右或向左，甚至超過頁邊距。垂直和水平移動的畫素值指定了位移的確切程度。 除了複雜性之外，此方法的主要問題在於它不會為放置位置提供換行文字。就像居中影像一樣，文字僅限於後置。另一個問題涉及影像的框架；因為移位應用於它們直接容器內的影像，所以必須避免所有型別的邊框。由於失去框架和縮圖邊框，所有標題都必須透過其他方式進行排列。 為了擴充套件文字必須後置的問題，也許有必要注意到相對定位事件的順序。當影像、框或其他結構首次放置時，它會被分配到沒有相對定位的空間；也就是說，就像移位程式碼丟失或設定為零一樣。然後，程式碼透過移位程式碼給出的數量將專案移到其新位置。在第一個位置留出與移動的專案大小相同的空間。當下一行文字或其他專案被新增到工作中時，它必須考慮那個分配的空間。結果是，當大型影像或文字塊被垂直移動時，以下文字不能位於之後該間隙之前。 儘管理論上可以移動表格和大型文字塊，但上述限制使其用途較小。當移位和文字相當小的時候，相對定位效果最好。該方法滿足了跨頁面平鋪影像和疊加效果的移位需求。 下面給出了疊加影像的示例。這些影像的正常位置（沒有移位）是在一行中，從左頁邊距開始，並且在這個例子中省略了填充影像。透過所需的量從這些平鋪位置移動影像來建立疊加效果。 影像的亮度或密度可以改變。20% 透明度的程式碼可以在下拉框中找到，其中還包含移位文字的示例。 按“相對定位”程式碼 從三張影像程式碼清單中摘錄 <span style="position:relative;left:100px;top:0px">[[Image:Nymphaea tetragona.jpg|500x226px]]</span> <span style="position:relative;left:50px;top:-20px">[[Image:Chamomile@original size.jpg|500x226px]]</span> <span style="position:relative;left:0px;top:-40px">[[Image:Krokus-kih.jpg|500x226px]]</span> 從文字疊加程式碼清單中摘錄 <span style="opacity:0.2;filter:alpha(opacity=20)">[[image:gerbera_pink.jpg|center|340px]]</span> <span style="font-family:lucida handwriting;line-height:1.5em;color:maroon;font-size:16pt;position:relative;left:300px;top:-225px">'''''This is the text.'''''</span> 程式碼說明 將此程式碼部分貼上到您的編輯視窗或沙盒中以重現疊加影像佈局。這些影像行通常將顯示為平鋪內聯，從左頁邊距開始，因為它們沒有使用填充影像。 標記程式碼的left 和top 屬性修改了正常位置。在第一行影像中，left=100 畫素和top=0 畫素表示影像的左側將被放置在比其預期位置更遠的 100 畫素處；它通常位於左頁邊距處，因此它將位於距離它 100 畫素的右側。 影像的頂部不會被移動。第二張影像的左側，它通常位於第一張影像的右側，只需要從其通常位置向後移動 50 畫素即可產生效果。第二張影像也被向上移動了 20 畫素。相對於其通常位置，第三張影像根本沒有沿任何方向移動，但向上移動了 40 畫素。 相對定位中的重要一點是注意它們是指定的定位變化；從基於其他程式碼可以合理地預期影像佔據的位置的變化。放置在頁面左側的影像最容易計算新位置。 也可以使用right 屬性，表示影像的右側，以及bottom 屬性，表示影像的下邊緣。它們的使用遵循與上面類似的推理。任何重疊都是由影像程式碼的寫入順序決定的；最後放置的影像將在頂部，第一個影像在底部。可以透過以下方式更改堆疊順序 進一步編碼。 如果影像被放置在框架中，定位可能會變得混亂或完全失敗。在表格單元格或框等框架內進行定位是可能的，但移位將在影像容器內進行。 這是文字。 滑鼠懸停影像 非洲菊：將滑鼠移動到影像上。 兩個影像可以佔據相同空間，前提是它們中只有一個影像在同一時間可見。通常的方法是將滑鼠懸停在預設影像上，即始終可見的影像。這樣做時，備用影像會替換它，當滑鼠移開時，原始影像會重新出現。 此技術可使用模板 HoverImage 實現。模板中提供了兩個影像的名稱以及其他影像選項，並可以建立兩個獨立的標題。此方法最適合形狀相同的影像，即縱橫比相同的影像。然後，使用一個基本尺寸設定，兩個影像都將被縮放至相同的尺寸。當形狀不同且影像發生變化時，呈現作品的高度或寬度也會發生變化。由於文字會調整以環繞影像進行換行，因此效果不一定是糟糕的，你可以透過在沙盒中嘗試來親身體驗。正如本頁其他地方所建議的，存在一種方法可以修復影像的高度而不是寬度，這可能更適合某些人。 在所有其他方面，模板的使用方式與單個影像相同，例如，文字換行適用於左側和右側定位的影像。模板可以在任何需要完整影像語法的場合使用，例如，它不能用於構建相簿條目，因為這些條目僅使用簡化的影像語法，即影像名稱。它可以在頁面上、表格和下拉框內以及任何可以利用完整影像語法的地方使用。 右側影像顯示了模板使用示例；更多詳細說明可以在頁面 Templates Ready to Use 和模板頁面本身找到。 其他圖片頁面 快速課程 容器中的影像 另請參閱 Wikibooks:Sandbox: 使用者嘗試程式碼的 Wikibooks 編輯沙盒。 Help:Editing: 如何編輯頁面 Help:Files: 使用檔案 Help:Tables: 關於表格的幫助 Web Colors: 網頁顏色 Wikipedia Commons: 維基百科共享媒體資源庫 CSS2 Properties Reference: 一個優秀的外部 CSS 參考 Template:Dropimage: 一個用於影像、相簿或文字的 Wikibooks 下拉框，具有許多格式選項。 Template:Hidden: 另一個 Wikibooks 下拉框 Description of the Gallery tag: 關於相簿語法的說明