編輯“WordPress:Using Images”

__TOC__
<div style="font-size:120%; color:blue">''一副圖畫勝過一千個字顯示的內(nèi)容''</div>
WordPress讓你非常簡單地給你的WordPress站點添加圖像。通過使用[[Wordpress:Writing_Posts|文章]] 界面內(nèi)置的文件上傳功能，你可以直接地在WordPress里下載圖像?；蛘吣憧梢允褂萌魏蔚?[[Wordpress:FTP Clients|FTP Client]]軟件將許多的圖像上傳到你的WordPress站點上。

[[Wordpress:Write_Post_SubPanel#Quicktags|Quicktag 按鈕]]有一個'''圖像''' 鏈接，鏈接到你寫的文章上的圖像變得簡單。如果你使用行內(nèi)上載的功能，你的圖片會在/wp-content 文件夾中。


WordPress現(xiàn)在可以（在置入的頁面中）調(diào)整圖像的大小并且創(chuàng)建極小的東西。也有[[Wordpress:Photoblogs and Galleries|圖片集]]可以顯示許多的圖像，而且不需要將每個圖像單獨地添加到一個網(wǎng)頁上。
如果你選擇讓這些圖像替你說話，你可以考慮創(chuàng)建一個[[Wordpress:Photoblogs_and_Galleries|博客圖片或者圖片集]].

== Wordpress圖像資源 ==
[[Wordpress:Image:imagesinarticlesidebar.jpg|thumb|right|背景，工具條，blockquote標簽，中圖像的例子]]有許多的[[Wordpress:Plugins/Images|WordPress圖像插件]]可以給你的站點添加圖像功能，效用和圖片集。有的在WordPress內(nèi)部運行，而有的則是WordPress外部單獨運行。
通過使用[[Wordpress:Template Tags|模板標簽]]，插件，和你的[[Wordpress:Using Themes|主題]]的樣式表，你可以給你的WordPress站點添加圖像。例如，你可以添加圖像到你的：

* [[Wordpress:Template_Tags/get_the_category#Show_Category_Images|分類]]

* [[Wordpress:Using Gravatars|關(guān)于 Gravatars的評論]] 

* [[Wordpress:Fun Character Entities|圖形標記]]

* [[Wordpress:Designing Headers|標題]]

* [[Wordpress:Designing Headings|標題]]

* [[Wordpress:Using Smilies|Smilies]][[Wordpress:Image:gravatar2cwe.gif|thumb|right|在評論中使用的Gravatar]]

* [[Wordpress:Customizing Your Sidebar|工具條]]

* 頁腳

* [[Wordpress:Styling Lists with CSS|列表]]

* [[Wordpress:Creating Horizontal Menus|菜單]]

* 在文章之間

* 在列表之間

* [[Wordpress:Customizing Feeds|Graphics in Feeds]] [[Wordpress:Image:rssfeed.gif|| RSS Feed圖形圖標]]

* [[Wordpress:Links Manager|鏈接和友情鏈接]]

* [[Wordpress:Next and Previous Links|上一個和下一個鏈接]]

* [[Wordpress:Template Tags|模板標簽 –許多特色圖像的參數(shù)]]

==在文章中使用圖像==

圖像可以以許多種不同的方法在你的WordPress文章和網(wǎng)頁中使用。它們可以是一個主題，也可以是一個引用的詳細信息來提升信息或者故事的價值。

你需要考慮的第一件事便是你的網(wǎng)頁上圖像的"外觀"。并不是圖像是什么，而是指它們怎樣在你的網(wǎng)頁上浮動以及它們怎樣與你的網(wǎng)頁上其它內(nèi)容結(jié)合的整體外觀。[[Wordpress:Wrapping Text Around Images|包圍在圖像周圍的文字]]會幫助你了解圖像怎樣與其周圍的文字相結(jié)合，改變內(nèi)容中的圖像的幅度，填充，和邊界。它會幫助你了解怎樣在你的圖像下面加上說明。

下一個要考慮的事情是圖像的大小。真正地'''制定'''一個圖像的大小，有兩種方法。圖像或者就是本身的大小，或者是一個極小的鏈接，當你點擊它時，它就會帶你來到一個新的網(wǎng)頁，這個網(wǎng)頁便有一個放大了的圖像。

===圖像尺寸大小和質(zhì)量===

一個網(wǎng)頁上使用的一個圖像的尺寸大小取決于許多因素。


; 物理尺寸：一個圖像的物理尺寸取決于兩個因素：屏面上的圖像尺寸大小和文件尺寸大小。一般來說，文件尺寸大小以另一碼事來對待。
;文件尺寸：這是你的硬盤或者服務(wù)器上文件的尺寸。
;分辨率：''分辨率''指的是一個圖像上的像素的多少。分辨率有時由一個圖像的寬度和高度以及一個圖像上總共的像素決定。
;文件類型：通常在因特網(wǎng)上能發(fā)現(xiàn)X圖形類型<tt>jpeg,gif,png</tt> 和 (關(guān)于最喜愛的圖標 (地址旁邊的圖標)) <tt>ico</tt>.

圖像的'''物理尺寸'''是我們需要知道的信息，來決定圖像在網(wǎng)頁上會占據(jù)多大的"空間"。如果你的WordPress主題的特色是有一個600像素的固定寬度的內(nèi)容區(qū)，你想使用的圖像是800像素，圖像便會排擠工具條和你的網(wǎng)頁周圍的布局，混亂了你的設(shè)計。如果圖像是在600像素的寬度以內(nèi)，你就需要將圖像限制在最大的寬度以內(nèi)，以保護你的網(wǎng)頁的布局。由你決定圖像的大小應(yīng)該是多少，來與整體的布局和設(shè)計相搭配。

'''文件尺寸'''規(guī)定了加載你的頁面的時間，文件的尺寸越大，通常會增加，因為一個高的'''圖像分辨率'''質(zhì)量，加載的時間會越長。人們通常沒有耐心來等待長時間的網(wǎng)頁加載，所以是你的文件尺寸保持很低，來加速你的網(wǎng)頁載入時間。通常來說，高質(zhì)量的圖像應(yīng)該保持在100K到60K.小的圖像應(yīng)該接近于30K或者更低的。

圖像的'''分辨率'''規(guī)定了它的清晰度。像素越高，文件尺寸越大，因此你需要在質(zhì)量和文件尺寸上做一個妥協(xié)。

幸運地是，因特網(wǎng)上使用的最常見的不同的文件類型擁有''壓縮'' 功能，當你將文件以這些形式中的一種來保存的時候，它會濃縮或者''壓縮''圖像文件中的數(shù)據(jù)信息。因特網(wǎng)瀏覽器可以將這個信息''解壓''以使它在屏面上顯示圖像。有的圖像軟件程序允許你設(shè)置壓縮率，在你保存圖像的時候，能夠控制圖像的質(zhì)量（和文件的大?。ＨQ于你在站點上怎樣使用圖像，你可能要嘗試一下這個方法，來得到一個正確的比率,在保存一個小的文件尺寸的時候,保持一個好的分辨率質(zhì)量。

站點使用四個常見的'''文件類型'''。一個文件名的最后部分（稱作''擴展名''指出了文件是屬于那種類型的。一種類型，<tt>ico</tt>,是用來制作一個''最喜愛的圖標''的文件—但這個通常只有在網(wǎng)站已經(jīng)首先設(shè)置好了的情況下，才起作用。其它的三種類型供常見的圖像使用：
*<tt>jpg</tt> (JPEG)對照片較適用。將一張照片以<tt>jpg</tt>保存，除掉了圖片中的詳細信息。好的照片編輯器，讓你控制清楚了的詳細信息的數(shù)量("壓縮")。不同的照片需要不同的壓縮；認真地做，瀏覽結(jié)果，可以給你一個擁有小的文件尺寸的有用的照片。
* <tt>gif</tt>對照片不太好。它更適用于藝術(shù)線條，像logos,擁有同樣顏色的面積。
* <tt>png</tt>對于照片和藝術(shù)線條都適用。它在沒有丟失詳細信息的情況下，壓縮了照片，但是通常比JPEGs制作的照片文件要大。一些老的瀏覽器也不完全支持<tt>png</tt>。

如果你不確定哪一個文件類型更加地適合一個特別的圖像，試著將文件保存在幾種類型，并且比較一下文件的尺寸大小。使用一個正確的類型起著很重要的作用！在[http://www.sitepoint.com/article/gif-jpg-png-whats-difference Sitepoint's GIF-JPG-PNG 不同的是什么]文章中有更多的信息。

===調(diào)整圖像大小===

雖然大多數(shù)圖形程序軟件包應(yīng)該允許你調(diào)整圖像的大小，但并不是所有的圖形程序軟件包都能。查看你的圖形軟件包表上的內(nèi)容或者索引上的''重新調(diào)整'', ''尺寸大小'', ''改變'', ''縮小'', 或者''放大'',所有的標志都指著同樣的事。如果它們沒有這個功能，你可能要找一個不同的軟件。

重新調(diào)整圖像的大小的過程非常地簡單。通常有兩種方法：
1）你可以通過使用提供的工具來重新調(diào)整圖像的大小，工具允許你動手改變圖像的邊緣，來將圖像變形，或者重新調(diào)整圖像大小。角落"處理"通常能重新調(diào)整圖像大小，保持總體的高-寬比例。查看你的手冊以得到詳細的指示說明。
2）另一種方法包括簡單地規(guī)定圖像的最終尺寸。高級的圖像程序允許你通過精確的尺寸或者縮小或者擴大的百分數(shù)來重新地調(diào)整尺寸的大小。
在重新調(diào)整了圖像的大小以后，圖像可能變小了，也有可能稍微地不再突出了。你可以使用你的軟件上的'''突出'''功能，突出小的圖像。
但你已經(jīng)調(diào)整了你的小尺寸的圖像或者新的極小的東西，將圖像以<tt>jpg, gif,</tt> or <tt>png</tt>輸出。
===設(shè)計圖像===


Images can have borders, frames, [[Wordpress:Wrapping Text Around Images|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:Wrapping Text Around Images|說明]],并以多種方式設(shè)計?；旧嫌袃煞N方法可以設(shè)計你的站點上的圖像。你可以在一個設(shè)計表上設(shè)計它，也可以在一個具體的圖像上''內(nèi)嵌''設(shè)計。

====設(shè)計所有的圖像====

在你的[[Wordpress:Using Themes|WordPress 主題]]的<tt>style.css</tt>設(shè)計你的圖像，可以包括你的站點上的所有圖像或者特別的圖像設(shè)計。

<div style="border:solid black 1px; margin:5px; padding:10px; float:right; background: white">[[Wordpress:Image:leaf.gif]]</div>


為你的站點上每個圖像都設(shè)計一下，使它們看起來特別，為<tt>image</tt> tag找一個或者添加一個CSS選擇器。然后將你的類型添加到標簽上。例如，假如你想讓你的圖像的周圍圍繞著一個黑色的邊沿，而且你想讓邊沿和圖像之間留有間距，也想要圖像和文字周圍留有合適的間距。



<pre>img {
     margin: 5px;
     padding: 10px;
     border: solid black 1px
}</pre>

<div style="border:double black 10px; margin:20px; padding:10px; float:right;background:white;">[[Wordpress:Image:leaf.gif]]</div>

也許你想要一個稍微地更加生動的東西。你可以改變邊沿的厚度，把它設(shè)置為一個"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來，這樣的話，你可以增加圖像周圍的空白。


<pre>img {
     margin: 20px;
     padding: 10px;
     border: double black 1px
}</pre>

====設(shè)計一些圖像====

你可以將一個特別的圖像的具體的樣式添加到你的樣式表上。如果你已經(jīng)設(shè)計好了你的所有的圖像，你必須確定你規(guī)定了每個設(shè)計的說明或者規(guī)定了<code>image</code>標簽形式的屬性，來制服那個屬性。如果你不改變頁邊的空白，那么它在新的樣式中仍然會保持原樣。這個叫做[[Wordpress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|CSS母/子關(guān)系]].

<div style="border:solid #003300 4px; margin:20px; padding:20px; background: #006600; float:right">[[Wordpress:Image:leaf.gif]]</div>

假如你想讓歸檔在自然類別（有一個美麗的綠色背景）中的文章上有一些兒圖像。其它的圖像看起來應(yīng)該是一樣的，就是你添加到你的自然分類中的圖像。你只要將一個<code>class</code>添加到你的樣式表和分類中的每個圖像。

方便記憶，我們稱我們的<code>class</code> "自然"。我們想在圖像周圍有一個非常深綠的厚的邊沿和一個中等綠色的背景，來突出圖像。


<pre>img.nature {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
}</pre>

在分類中的每個圖像上，你只有為"自然"添加<code>class</code>：


<img src="leaf.gif" alt="Red leaf" class="nature" />

如果你需要為不同的圖像準備更多的類型，你只要創(chuàng)建更多需要的類型就可以了。
====設(shè)計一個或者兩個圖像 Inline====

<div style="margin:20px; padding:20px; background: black; float:right">[[Wordpress:Image:leaf.gif]]</div>

有時，你只想讓你的站點上一個或者兩個圖像看起來與其它的不一樣。這個技術(shù)叫做'''inline形式。'''它直接將CSS形式應(yīng)用到圖像自身。

例如，假如你想將一個圖像與一個黑色的背景隔離起來，以提醒人們注意。


<pre><img src="leaf.gif" alt="Red leaf" style="padding:20px; 
background: black; border: none" />
</pre>

這并不是一個用于每一個圖像的技術(shù)。這只用于一些特殊的圖像，需要"一些特別的東西。"


==資源==

* [[Wordpress:Plugins/Images|圖像插件]]
* [[Wordpress:Blog Design and Layout|WordPress 布局和設(shè)計]]
* [[Wordpress:Photoblogs and Galleries|照片博客與圖片集]]
* [http://www.yourhtmlsource.com/images/fileformats.html 互連網(wǎng)上圖像文件格式]




{{Copyedit}}