WordPress:Using Images
WordPress讓你非常簡單地給你的WordPress站點添加圖像。通過使用文章 界面內置的文件上傳功能,你可以直接地在WordPress里下載圖像?;蛘吣憧梢允褂萌魏蔚?FTP Client軟件將許多的圖像上傳到你的WordPress站點上。
Quicktag 按鈕有一個圖像 鏈接,鏈接到你寫的文章上的圖像變得簡單。如果你使用行內上載的功能,你的圖片會在/wp-content 文件夾中。
WordPress現在可以(在置入的頁面中)調整圖像的大小并且創(chuàng)建極小的東西。也有圖片集可以顯示許多的圖像,而且不需要將每個圖像單獨地添加到一個網頁上。
如果你選擇讓這些圖像替你說話,你可以考慮創(chuàng)建一個博客圖片或者圖片集.
Wordpress圖像資源
thumb|right|背景,工具條,blockquote標簽,中圖像的例子有許多的WordPress圖像插件可以給你的站點添加圖像功能,效用和圖片集。有的在WordPress內部運行,而有的則是WordPress外部單獨運行。 通過使用模板標簽,插件,和你的主題的樣式表,你可以給你的WordPress站點添加圖像。例如,你可以添加圖像到你的:
- 頁腳
- 在文章之間
- 在列表之間
在文章中使用圖像
圖像可以以許多種不同的方法在你的WordPress文章和網頁中使用。它們可以是一個主題,也可以是一個引用的詳細信息來提升信息或者故事的價值。
你需要考慮的第一件事便是你的網頁上圖像的"外觀"。并不是圖像是什么,而是指它們怎樣在你的網頁上浮動以及它們怎樣與你的網頁上其它內容結合的整體外觀。包圍在圖像周圍的文字會幫助你了解圖像怎樣與其周圍的文字相結合,改變內容中的圖像的幅度,填充,和邊界。它會幫助你了解怎樣在你的圖像下面加上說明。
下一個要考慮的事情是圖像的大小。真正地制定一個圖像的大小,有兩種方法。圖像或者就是本身的大小,或者是一個極小的鏈接,當你點擊它時,它就會帶你來到一個新的網頁,這個網頁便有一個放大了的圖像。
圖像尺寸大小和質量
一個網頁上使用的一個圖像的尺寸大小取決于許多因素。
;物理尺寸:一個圖像的物理尺寸取決于兩個因素:屏面上的圖像尺寸大小和文件尺寸大小。一般來說,文件尺寸大小以另一碼事來對待。
;文件尺寸:這是你的硬盤或者服務器上文件的尺寸。
;分辨率:分辨率指的是一個圖像上的像素的多少。分辨率有時由一個圖像的寬度和高度以及一個圖像上總共的像素決定。
;文件類型:通常在因特網上能發(fā)現X圖形類型jpeg,gif,png 和 (關于最喜愛的圖標 (地址旁邊的圖標)) ico.
圖像的物理尺寸是我們需要知道的信息,來決定圖像在網頁上會占據多大的"空間"。如果你的WordPress主題的特色是有一個600像素的固定寬度的內容區(qū),你想使用的圖像是800像素,圖像便會排擠工具條和你的網頁周圍的布局,混亂了你的設計。如果圖像是在600像素的寬度以內,你就需要將圖像限制在最大的寬度以內,以保護你的網頁的布局。由你決定圖像的大小應該是多少,來與整體的布局和設計相搭配。
文件尺寸規(guī)定了加載你的頁面的時間,文件的尺寸越大,通常會增加,因為一個高的圖像分辨率質量,加載的時間會越長。人們通常沒有耐心來等待長時間的網頁加載,所以是你的文件尺寸保持很低,來加速你的網頁載入時間。通常來說,高質量的圖像應該保持在100K到60K.小的圖像應該接近于30K或者更低的。
圖像的分辨率規(guī)定了它的清晰度。像素越高,文件尺寸越大,因此你需要在質量和文件尺寸上做一個妥協。
幸運地是,因特網上使用的最常見的不同的文件類型擁有壓縮 功能,當你將文件以這些形式中的一種來保存的時候,它會濃縮或者壓縮圖像文件中的數據信息。因特網瀏覽器可以將這個信息解壓以使它在屏面上顯示圖像。有的圖像軟件程序允許你設置壓縮率,在你保存圖像的時候,能夠控制圖像的質量(和文件的大?。?。取決于你在站點上怎樣使用圖像,你可能要嘗試一下這個方法,來得到一個正確的比率,在保存一個小的文件尺寸的時候,保持一個好的分辨率質量。
站點使用四個常見的文件類型。一個文件名的最后部分(稱作擴展名指出了文件是屬于那種類型的。一種類型,ico,是用來制作一個最喜愛的圖標的文件—但這個通常只有在網站已經首先設置好了的情況下,才起作用。其它的三種類型供常見的圖像使用:
- jpg (JPEG)對照片較適用。將一張照片以jpg保存,除掉了圖片中的詳細信息。好的照片編輯器,讓你控制清楚了的詳細信息的數量("壓縮")。不同的照片需要不同的壓縮;認真地做,瀏覽結果,可以給你一個擁有小的文件尺寸的有用的照片。
- gif對照片不太好。它更適用于藝術線條,像logos,擁有同樣顏色的面積。
- png對于照片和藝術線條都適用。它在沒有丟失詳細信息的情況下,壓縮了照片,但是通常比JPEGs制作的照片文件要大。一些老的瀏覽器也不完全支持png。
如果你不確定哪一個文件類型更加地適合一個特別的圖像,試著將文件保存在幾種類型,并且比較一下文件的尺寸大小。使用一個正確的類型起著很重要的作用!在文章中有更多的信息。
調整圖像大小
雖然大多數圖形程序軟件包應該允許你調整圖像的大小,但并不是所有的圖形程序軟件包都能。查看你的圖形軟件包表上的內容或者索引上的重新調整, 尺寸大小, 改變, 縮小, 或者放大,所有的標志都指著同樣的事。如果它們沒有這個功能,你可能要找一個不同的軟件。
重新調整圖像的大小的過程非常地簡單。通常有兩種方法: 1)你可以通過使用提供的工具來重新調整圖像的大小,工具允許你動手改變圖像的邊緣,來將圖像變形,或者重新調整圖像大小。角落"處理"通常能重新調整圖像大小,保持總體的高-寬比例。查看你的手冊以得到詳細的指示說明。 2)另一種方法包括簡單地規(guī)定圖像的最終尺寸。高級的圖像程序允許你通過精確的尺寸或者縮小或者擴大的百分數來重新地調整尺寸的大小。 在重新調整了圖像的大小以后,圖像可能變小了,也有可能稍微地不再突出了。你可以使用你的軟件上的突出功能,突出小的圖像。 但你已經調整了你的小尺寸的圖像或者新的極小的東西,將圖像以jpg, gif, or png輸出。
設計圖像
Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image.
圖像可以有邊緣,框架,說明,并以多種方式設計。基本上有兩種方法可以設計你的站點上的圖像。你可以在一個設計表上設計它,也可以在一個具體的圖像上內嵌設計。
設計所有的圖像
在你的WordPress 主題的style.css設計你的圖像,可以包括你的站點上的所有圖像或者特別的圖像設計。
為你的站點上每個圖像都設計一下,使它們看起來特別,為image tag找一個或者添加一個CSS選擇器。然后將你的類型添加到標簽上。例如,假如你想讓你的圖像的周圍圍繞著一個黑色的邊沿,而且你想讓邊沿和圖像之間留有間距,也想要圖像和文字周圍留有合適的間距。
img { margin: 5px; padding: 10px; border: solid black 1px }
也許你想要一個稍微地更加生動的東西。你可以改變邊沿的厚度,把它設置為一個"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來,這樣的話,你可以增加圖像周圍的空白。
img { margin: 20px; padding: 10px; border: double black 1px }
設計一些圖像
你可以將一個特別的圖像的具體的樣式添加到你的樣式表上。如果你已經設計好了你的所有的圖像,你必須確定你規(guī)定了每個設計的說明或者規(guī)定了image
標簽形式的屬性,來制服那個屬性。如果你不改變頁邊的空白,那么它在新的樣式中仍然會保持原樣。這個叫做CSS母/子關系.
假如你想讓歸檔在自然類別(有一個美麗的綠色背景)中的文章上有一些兒圖像。其它的圖像看起來應該是一樣的,就是你添加到你的自然分類中的圖像。你只要將一個class
添加到你的樣式表和分類中的每個圖像。
方便記憶,我們稱我們的class
"自然"。我們想在圖像周圍有一個非常深綠的厚的邊沿和一個中等綠色的背景,來突出圖像。
img.nature { margin: 20px; padding: 20px; border:solid #003300 4px; background: #006600; }
在分類中的每個圖像上,你只有為"自然"添加class
:
<img src="leaf.gif" alt="Red leaf" class="nature" />
如果你需要為不同的圖像準備更多的類型,你只要創(chuàng)建更多需要的類型就可以了。
設計一個或者兩個圖像 Inline
有時,你只想讓你的站點上一個或者兩個圖像看起來與其它的不一樣。這個技術叫做inline形式。它直接將CSS形式應用到圖像自身。
例如,假如你想將一個圖像與一個黑色的背景隔離起來,以提醒人們注意。
<img src="leaf.gif" alt="Red leaf" style="padding:20px; background: black; border: none" />
這并不是一個用于每一個圖像的技術。這只用于一些特殊的圖像,需要"一些特別的東西。"
資源
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.