编辑“WordPress:Using Images”

__TOC__
<div style="font-size:120%; color:blue">''一副图画胜过一千个字显示的内容''</div>
WordPress让你非常简单地给你的WordPress站点添加图像。通过使用[[Wordpress:Writing_Posts|文章]] 界面内置的文件上传功能，你可以直接地在WordPress里下载图像。或者你可以使用任何的 [[Wordpress:FTP Clients|FTP Client]]软件将许多的图像上传到你的WordPress站点上。

[[Wordpress:Write_Post_SubPanel#Quicktags|Quicktag 按钮]]有一个'''图像''' 链接，链接到你写的文章上的图像变得简单。如果你使用行内上载的功能，你的图片会在/wp-content 文件夹中。


WordPress现在可以（在置入的页面中）调整图像的大小并且创建极小的东西。也有[[Wordpress:Photoblogs and Galleries|图片集]]可以显示许多的图像，而且不需要将每个图像单独地添加到一个网页上。
如果你选择让这些图像替你说话，你可以考虑创建一个[[Wordpress:Photoblogs_and_Galleries|博客图片或者图片集]].

== Wordpress图像资源 ==
[[Wordpress:Image:imagesinarticlesidebar.jpg|thumb|right|背景，工具条，blockquote标签，中图像的例子]]有许多的[[Wordpress:Plugins/Images|WordPress图像插件]]可以给你的站点添加图像功能，效用和图片集。有的在WordPress内部运行，而有的则是WordPress外部单独运行。
通过使用[[Wordpress:Template Tags|模板标签]]，插件，和你的[[Wordpress:Using Themes|主题]]的样式表，你可以给你的WordPress站点添加图像。例如，你可以添加图像到你的：

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

* [[Wordpress:Using Gravatars|关于 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|模板标签 –许多特色图像的参数]]

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

图像可以以许多种不同的方法在你的WordPress文章和网页中使用。它们可以是一个主题，也可以是一个引用的详细信息来提升信息或者故事的价值。

你需要考虑的第一件事便是你的网页上图像的"外观"。并不是图像是什么，而是指它们怎样在你的网页上浮动以及它们怎样与你的网页上其它内容结合的整体外观。[[Wordpress:Wrapping Text Around Images|包围在图像周围的文字]]会帮助你了解图像怎样与其周围的文字相结合，改变内容中的图像的幅度，填充，和边界。它会帮助你了解怎样在你的图像下面加上说明。

下一个要考虑的事情是图像的大小。真正地'''制定'''一个图像的大小，有两种方法。图像或者就是本身的大小，或者是一个极小的链接，当你点击它时，它就会带你来到一个新的网页，这个网页便有一个放大了的图像。

===图像尺寸大小和质量===

一个网页上使用的一个图像的尺寸大小取决于许多因素。


; 物理尺寸：一个图像的物理尺寸取决于两个因素：屏面上的图像尺寸大小和文件尺寸大小。一般来说，文件尺寸大小以另一码事来对待。
;文件尺寸：这是你的硬盘或者服务器上文件的尺寸。
;分辨率：''分辨率''指的是一个图像上的像素的多少。分辨率有时由一个图像的宽度和高度以及一个图像上总共的像素决定。
;文件类型：通常在因特网上能发现X图形类型<tt>jpeg,gif,png</tt> 和 (关于最喜爱的图标 (地址旁边的图标)) <tt>ico</tt>.

图像的'''物理尺寸'''是我们需要知道的信息，来决定图像在网页上会占据多大的"空间"。如果你的WordPress主题的特色是有一个600像素的固定宽度的内容区，你想使用的图像是800像素，图像便会排挤工具条和你的网页周围的布局，混乱了你的设计。如果图像是在600像素的宽度以内，你就需要将图像限制在最大的宽度以内，以保护你的网页的布局。由你决定图像的大小应该是多少，来与整体的布局和设计相搭配。

'''文件尺寸'''规定了加载你的页面的时间，文件的尺寸越大，通常会增加，因为一个高的'''图像分辨率'''质量，加载的时间会越长。人们通常没有耐心来等待长时间的网页加载，所以是你的文件尺寸保持很低，来加速你的网页载入时间。通常来说，高质量的图像应该保持在100K到60K.小的图像应该接近于30K或者更低的。

图像的'''分辨率'''规定了它的清晰度。像素越高，文件尺寸越大，因此你需要在质量和文件尺寸上做一个妥协。

幸运地是，因特网上使用的最常见的不同的文件类型拥有''压缩'' 功能，当你将文件以这些形式中的一种来保存的时候，它会浓缩或者''压缩''图像文件中的数据信息。因特网浏览器可以将这个信息''解压''以使它在屏面上显示图像。有的图像软件程序允许你设置压缩率，在你保存图像的时候，能够控制图像的质量（和文件的大小）。取决于你在站点上怎样使用图像，你可能要尝试一下这个方法，来得到一个正确的比率,在保存一个小的文件尺寸的时候,保持一个好的分辨率质量。

站点使用四个常见的'''文件类型'''。一个文件名的最后部分（称作''扩展名''指出了文件是属于那种类型的。一种类型，<tt>ico</tt>,是用来制作一个''最喜爱的图标''的文件—但这个通常只有在网站已经首先设置好了的情况下，才起作用。其它的三种类型供常见的图像使用：
*<tt>jpg</tt> (JPEG)对照片较适用。将一张照片以<tt>jpg</tt>保存，除掉了图片中的详细信息。好的照片编辑器，让你控制清楚了的详细信息的数量("压缩")。不同的照片需要不同的压缩；认真地做，浏览结果，可以给你一个拥有小的文件尺寸的有用的照片。
* <tt>gif</tt>对照片不太好。它更适用于艺术线条，像logos,拥有同样颜色的面积。
* <tt>png</tt>对于照片和艺术线条都适用。它在没有丢失详细信息的情况下，压缩了照片，但是通常比JPEGs制作的照片文件要大。一些老的浏览器也不完全支持<tt>png</tt>。

如果你不确定哪一个文件类型更加地适合一个特别的图像，试着将文件保存在几种类型，并且比较一下文件的尺寸大小。使用一个正确的类型起着很重要的作用！在[http://www.sitepoint.com/article/gif-jpg-png-whats-difference Sitepoint's GIF-JPG-PNG 不同的是什么]文章中有更多的信息。

===调整图像大小===

虽然大多数图形程序软件包应该允许你调整图像的大小，但并不是所有的图形程序软件包都能。查看你的图形软件包表上的内容或者索引上的''重新调整'', ''尺寸大小'', ''改变'', ''缩小'', 或者''放大'',所有的标志都指着同样的事。如果它们没有这个功能，你可能要找一个不同的软件。

重新调整图像的大小的过程非常地简单。通常有两种方法：
1）你可以通过使用提供的工具来重新调整图像的大小，工具允许你动手改变图像的边缘，来将图像变形，或者重新调整图像大小。角落"处理"通常能重新调整图像大小，保持总体的高-宽比例。查看你的手册以得到详细的指示说明。
2）另一种方法包括简单地规定图像的最终尺寸。高级的图像程序允许你通过精确的尺寸或者缩小或者扩大的百分数来重新地调整尺寸的大小。
在重新调整了图像的大小以后，图像可能变小了，也有可能稍微地不再突出了。你可以使用你的软件上的'''突出'''功能，突出小的图像。
但你已经调整了你的小尺寸的图像或者新的极小的东西，将图像以<tt>jpg, gif,</tt> or <tt>png</tt>输出。
===设计图像===


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|说明]],并以多种方式设计。基本上有两种方法可以设计你的站点上的图像。你可以在一个设计表上设计它，也可以在一个具体的图像上''内嵌''设计。

====设计所有的图像====

在你的[[Wordpress:Using Themes|WordPress 主题]]的<tt>style.css</tt>设计你的图像，可以包括你的站点上的所有图像或者特别的图像设计。

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


为你的站点上每个图像都设计一下，使它们看起来特别，为<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>

也许你想要一个稍微地更加生动的东西。你可以改变边沿的厚度，把它设置为一个"双的"线条。也许你真的想将图像与文章的其它部分隔离起来，这样的话，你可以增加图像周围的空白。


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

====设计一些图像====

你可以将一个特别的图像的具体的样式添加到你的样式表上。如果你已经设计好了你的所有的图像，你必须确定你规定了每个设计的说明或者规定了<code>image</code>标签形式的属性，来制服那个属性。如果你不改变页边的空白，那么它在新的样式中仍然会保持原样。这个叫做[[Wordpress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|CSS母/子关系]].

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

假如你想让归档在自然类别（有一个美丽的绿色背景）中的文章上有一些儿图像。其它的图像看起来应该是一样的，就是你添加到你的自然分类中的图像。你只要将一个<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" />

如果你需要为不同的图像准备更多的类型，你只要创建更多需要的类型就可以了。
====设计一个或者两个图像 Inline====

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

有时，你只想让你的站点上一个或者两个图像看起来与其它的不一样。这个技术叫做'''inline形式。'''它直接将CSS形式应用到图像自身。

例如，假如你想将一个图像与一个黑色的背景隔离起来，以提醒人们注意。


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

这并不是一个用于每一个图像的技术。这只用于一些特殊的图像，需要"一些特别的东西。"


==资源==

* [[Wordpress:Plugins/Images|图像插件]]
* [[Wordpress:Blog Design and Layout|WordPress 布局和设计]]
* [[Wordpress:Photoblogs and Galleries|照片博客与图片集]]
* [http://www.yourhtmlsource.com/images/fileformats.html 互连网上图像文件格式]




{{Copyedit}}