编辑维基文本/图片/快速入门

编辑维基文本

火郁金香; 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 模板