跳转到内容

编辑维基文本/制作模板 A101

来自维基教科书,开放世界中的开放书籍

简介


本章应被视为维基模板制作的入门文本,本节将概述模板的功能。首先,让我们了解一些基本术语

  • 模板只是保存的文本块,并已命名。有些是普通文本段落,有些包含维基文本以创建标题、缩进、表格等。在简单情况下,通过在作品中键入模板的名称,将向页面添加整个文本块及其所有格式和其他部分,就像用户自己键入的一样。这种行为可以在用户想要的任何地方重复,并且几乎可以在维基页面上找到的所有作品都可以放在模板中来实现这一点。正如你可能想到的那样,主要的工作在于最初的设计。
  • 模板的名称在首次保存时分配。该名称必须是唯一的,并且在调用模板以供使用时使用。有时还会与名称一起使用其他文本;它可以包括任何选项参数
  • 选项允许用户改变模板的默认行为。默认行为适用于大多数情况,但设计者内置了在必要时更改内容的方法。选项值通常限制在简短的列表中,因此这些将在模板的文档中进行描述。例如,名为align的选项的选项值可能只包括leftrightcenter,不包括其他值。模板并不总是需要选项,因为它们的默认行为通常就足够了。
  • 默认值是用户没有指定时模板使用的值。默认值是在设计中指定的,它们可以应用于格式或用户文本输入。例如,在上面的对齐示例中,如果未使用align选项,模板可以使用left,前提是left在设计中被指定为其默认值。同样,如果用户忘记键入文本输入,模板可以使用预先计划的默认输入来代替缺少的参数;有时只是一个代码来说明遗漏了什么。
  • 参数通常是用户输入的供模板处理的文本片段。例如,如果模板将文本变为红色,它仍然需要知道要着色的文本;这称为参数,并且用户在调用模板以供使用时会包含该文本。有时参数包含类似于插入图像的代码的文本,甚至包含画廊或表格;这取决于模板的设计目的。模板甚至可以是另一个模板的参数;例如,插入测试段落的模板可能会占据制作文本框的模板的参数空间。然后新段落将出现在一个新的文本框中。
  • 更一般地说,模板让我们在创建页面之前提前完成大部分准备工作,让我们插入一个文本块,无论是用于创建表格、方框和其他结构的代码,还是只是经常使用的文本段落。本介绍的其余部分将通过几个示例来展示模板在页面上的作用,接下来的部分将介绍修改和制作新模板以用于编写维基教科书所需的内容。

在第一个示例中,使用了Caption模板。它有两个文本参数,没有选项。

以下是调用模板以供使用的代码;

{{caption|这是第一个参数的文本: | 这是第二个参数的文本}}

这样做的结果是生成以下文本

这是第一个参数的文本: 这是第二个参数的文本

请注意,模板已格式化文本,并且每个参数的处理方式都不同。该模板用于创建格式一致的图像标题。Caption模板的源代码几乎只包含文本格式。

在第二个示例中,使用了Drop模板。它有一个文本参数和多个选项,此处不需要任何选项。

以下是调用模板以供使用的代码;

{{drop|N}}otice that the template has inserted...

这样做的结果可以在下面的段落中看到。

N

otice that the template has inserted a drop capital from the single character used as a parameter. This template can be used to start sections within certain body text. Again, the source code for the template Drop is largely text formatting.


第三个示例使用Dropimage模板来制作一个带有图像的下拉框。该模板有许多选项,但只使用了两个选项;width选项和align选项。其他选项使用默认值。有两个参数;顶部标题Press to View和内容,在本例中是图像的维基文本代码。通过点击框上的箭头可以查看示例中的内容。

以下是调用模板的代码;

{{dropimage|width=150px|align=center|Press to View|[[image:Flower poster.jpg|600px]]<br>A Flower Poster}}

这样做的结果是

Press to View

A Flower Poster



该示例的模板包含用于构建框结构的代码,而图像代码严格来说是其参数,即它处理的项目。

虽然对该主题的详细研究很复杂,但应该清楚的是,使用和制作上面提到的模板对于大多数维基编写者来说都是轻而易举的。遗憾的是,编写者往往只有在作品快完成时才意识到模板的优势,如果在工作初期就能识别重复的例行工作,就能节省大量时间。只要例行工作经常重复,就需要使用模板。

确实,维基家族中的大多数模板都是由文本段落的格式化或某种方框的制作组成的。考虑到这一点,以下文本将解释文本、方框和下拉控件模板制作的过程。作为准备工作,那些打算制作任何类型的方框模板的人将受益于对表格的基本了解,这些知识可以在页面Tables的前几节中快速获得,那里也介绍了CSS样式。

查找和使用模板

[edit | edit source]

在维基教科书模板命名空间中已经存在数千个模板。换句话说,模板列表已经很长了。乍一看,这似乎避免了模板制作的必要性,但事情并非如此简单。

如果知道模板的名称,就可以轻松找到它,但如果不知道名称,找到与你正在寻找的模板类似的模板可能需要很长时间。模板在其各自的页面上描述了其功能,但许多页面没有包含注释,因此知道哪些是哪些以及它们的功能,即使找到了,也变得更加困难。

WikipediaWikibooks中制作的模板不可互换,因为它们位于不同的服务器上。虽然制作它们的代码相同,但此描述适用于在维基教科书中查找内容。

  • 要查看维基教科书中按字母顺序列出的模板列表,请点击链接到所有模板命名空间的链接。
  • 要查找按各种模板类别列出的模板,例如,下拉控件模板,请点击链接到Category:Templates页面的链接。
  • 如果知道模板的名称,则可以使用任何维基页面上的搜索框查找模板页面。例如,要查找Dropimage,只需键入;
Template:Dropimage

然后回车

找到模板页面后,可以通过查看其编辑窗口查看制作模板的代码。许多页面在其模板代码所在的同一个页面上包含文档,并使用<noinclude></noinclude>标签将其隔离开来。

如果在搜索后,你仍然需要制作模板,就像许多人一样,那么请继续阅读。


放到页面上

[edit | edit source]

模板在页面中使用时,需要通过输入一行维基文本进行调用,因此用户需要知道模板名称、选项和参数的正确拼写。即使知道这些信息,在试用过程中也很容易出现模板错误,特别是在试用过程中,因此请考虑使用 沙盒 进行测试。有些模板将所有文档和详细信息放在同一个页面上,这使得它们易于使用。例如,查看 PlainlistCodebits 模板。

调用任何模板在页面中使用,代码需要在双花括号内输入。{{}}。花括号内包含模板名称,然后,如果需要,是选项序列,接着是参数序列。所有条目都用管道符号隔开。(|)。例如,使用具有两个选项和一个参数的模板的一般形式如下

{{Name|Option1=Value|Option2=value|Parameter1}}


一个典型的使用示例是

{{Plainlist|width=250px|background=LightSalmon|框中的文本在这里。}}


以上代码只有一个参数;默认情况下它编号为1。参数被赋予数字或名称以在设计代码中识别它们,将在后续部分提供示例。示例中的模板调用使用的是所谓的未命名参数,因为它前面没有像1=(编号参数)或content=(典型命名参数)这样的术语。当模板具有多个参数时,参数编号或名称有助于使模板清楚地识别哪个参数是哪个。或者,模板可以管理未命名和未编号的参数条目,只要它们按正确的数字顺序排列即可。如有疑问,请使用名称或编号。有时,特别是当参数的第一个字符是符号时,使用命名或编号参数可以避免使用未命名条目导致的损坏。

选项的顺序无关紧要,因为所有选项在任何情况下都必须命名。使用命名值只是在选项的之前添加选项的名称和一个等号。这当然需要了解模板的详细信息。

模板名称对大小写敏感,除了第一个字母,因此一个有用的约定是始终对模板名称、参数和选项使用小写字母;这样你就永远不会怀疑。

参数名称在所有方面都对大小写非常敏感,因此大写字母会产生很大影响。一般来说,不要在模板调用中混合未命名命名参数,因为程序用来解释其含义的方法会变得混乱。要么使用全部未命名,并特别注意其顺序,要么使用全部命名,按照你喜欢的任何顺序。

从代码中查找详细信息

[编辑 | 编辑源代码]

假设我们找到了别人制作的模板,但其详细信息不清楚。即使对标记语言不太了解,通常也可以通过检查模板的编码来辨别模板的选项和参数。要了解如何做到这一点,请遵循以下推理。

可以在沙盒中通过输入特殊代码来显示模板页面上的编码和其他内容。这样做时,模板不会执行任何操作;它只是显示模板页面的文本。也就是说,它显示编码和任何文档。例如,可以在沙盒中通过输入以下代码来查看Tocbox模板的代码

{{msgnw:tocbox}}

为了让读者不必费力地这样做,下面提供了Tocbox的模板代码。

Tocbox 模板的代码

{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};" align={{{align|left}}}
| align=center style="font-weight:bold;"|{{{Heading|{{{1}}}}}}
|-
| align=left style="font-weight:normal;"|{{{Content|{{{2}}}}}}
|}
<noinclude>


模板页面本身对它的使用有很好的描述,但暂时假设描述性材料不存在。模板页面顶部的代码始终是模板源代码;考虑上面给出的示例。虽然它看起来很复杂,但这里不是要理解它,而是要从代码本身找到选项和参数。

请注意,代码的结尾用 <noinclude> 标记标记,以确保任何后续文本不会用作模板的一部分。在本例中,有两个参数;它们可以被识别为具有以下形式的条目

{{{heading|{{{1}}}}}} 和 {{{content|{{{2}}}}}}


这些条目分别标识了参数。即使没有太多理解,也很清楚第一个参数是标题文本,第二个参数是内容文本,这些术语以及数字可以用作它们的名称。如果用户忘记输入例如内容的参数,页面上会显示一个{{{2}}}作为提示,提醒用户缺少什么。

此模板中的所有选项都可通过典型形式识别;

{{{align|left}}}


此摘录表明存在一个名为align的选项,其默认值为left。默认值的含义是,如果用户在模板调用中没有使用该选项,则align将使用left值。该选项几乎可以取任何名称;事实上,它被赋予了与其相关的HTML 属性相同的名称(主代码块中等号之前的部分)。此代码中包含多个属性,但只有两个属性被编码为选项;alignwidth,这两个选项都具有与上面示例类似的括号格式。

现在已经了解了选项和参数,请在页面上测试模板,如下所示

这是代码

{{tocbox|align=center|width=300px|Heading text|Content paragraphs}}

结果是

Heading text
Content paragraphs


现在应该清楚的是,尽管最初没有模板规范,但仍然能够从编码中获取其使用信息。


修改模板

[编辑 | 编辑源代码]

假设我们找到了一个几乎正确的模板,但并不完全正确。例如,假设唯一的错误部分是背景颜色。可以通过添加一个修改其背景颜色的术语来更改此类模板的源代码。然后,可以将修改后的版本保存为一个新模板,并使用不同的名称。请注意,如果将修改后的模板保存为与以前相同的名称,则依赖于原始颜色的现有用户会在其工作中遇到不必要的更改。

还有另一种方法允许新用户选择颜色,而现有用户可以继续享受其工作显示的默认颜色。如果将背景属性设置为选项,并将原始背景颜色设置为其默认值,则可以保留模板的旧名称。然后,由于旧用户不会费心指定背景颜色,也许甚至不知道他们现在可以这样做,他们将获得与以前一样的默认颜色,并对此感到满意。需要不同颜色的新用户可以在调用模板以供使用时简单地将其指定为选项值。这样,双方都会满意。

修改模板有时与制作新模板的难度相似,此过程将在下面其他部分介绍。对于背景更改情况,一个合适的修改后的 Tocbox 代码模块将如下所示。代码是

修改后的 Tocbox 模板的代码

{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};background:{{{background|#f9f9f9;}}};" align={{{align|left}}}
| align=center style="font-weight:bold;"|{{{Heading|{{{1}}}}}}
|-
| align=left style="font-weight:normal;"|{{{Content|{{{2}}}}}}
|}
<noinclude>


在上面的代码中,background 属性已设置为选项。此外,原始背景颜色#f9f9f9;(浅灰色)已用于默认值。为了强调这一点,如果用户没有费心指定背景颜色,他仍然会像以前一样获得灰色。请再次注意,添加的选项不必称为background,而是可以例如称为bgc或其他名称。在这种情况下,模板的选项代码将类似于background:{{{bgc|#f9f9f9;}}},然后可以使用例如页面上的bcg=papayawhip来调用另一种颜色。

这里的真实模板Tocbox没有修改,虽然此示例为执行此操作提供了可靠的演示方法。在上面的修改之后,新用户可以像下面这样调用模板

{{tocbox|align=center|width=250px|background=papayawhip|Heading|Long text paragraphs}}


了解 CSS 属性值可以使模板的外观发生很大变化。幸运的是,此主题有很好的文档记录。请参阅外部W3 站点的CSS 参考列表,以获取全面列出的值和属性。虽然参考页面上的示例是为样式表设计的,但其中找到的语法也是用于修改模板和其他内联样式中的样式的语法。此外,还可以在 网页颜色 中找到有用的颜色参考。在下面的制作框部分提供了一个包含许多用于表格的 CSS 属性的下拉框。如果时间紧迫,可以注意到该项目(即 WikiBooks)中迄今完成的大部分模板工作,只需要使用文本和表格的 CSS 属性就足够了。因此,对这两个领域的学习很有回报。

CSS 参考资源很有用,但也可以使用HTML 属性更改样式(例如带有等号align样式)。此类属性可以在 HTML 参考文本(而不是 CSS 文本)以及上面提到的下拉框中看到。可能你会感兴趣地知道,一些 HTML 属性是完成某些任务的唯一方法;例如colspan(跨越表格列)、rowspan(跨越表格行)和align(将表格对齐到中心,这是 CSS float 属性无法做到的)。


制作模板

[编辑 | 编辑源代码]

模板有很多类型,但用于插入和修改文本的模板数量最多。接下来是框;无论是信息框、所谓的用户框,还是简单的文本框,它们都具有共同的结构。一些模板具有动态功能,例如下拉控件,但一旦基本轮廓清晰,就可以将它们塑造成多种用途。至少将考虑每个类型的示例。

模板制作包括编写功能代码、维基文本或 HTML,有时也会混合使用。方法是在沙盒中测试代码,直到功能正常工作。然后可以将选项和参数分配给代码。这些选项和参数会再次进行测试,如果一切顺利,则可以将代码块保存为模板。

在保存模板时,还要检查是否存在同名模板。保存模板最简单的方法如下。首先,确保您已登录 **维基教科书** 页面,以避免在错误的项目中创建模板。转到维基教科书页面左侧的 *搜索* 框,输入要查找的未创建模板的文字。假设这里要创建的模板名称为 **标题**。在搜索窗口中输入的行只需

Template:标题


如果找到模板,则表示该名称已被占用,需要使用其他名称。假设未找到该名称,则搜索结果窗口将显示未找到该名称,并询问您是否要 *创建* 页面。单击链接创建页面。

该链接将打开一个模板编辑页面,其中模板名称已列为其地址。从沙盒中的工作内容复制代码,然后将其粘贴到空白模板页面中。在代码块中最后一行之后的行中,添加标签 **<noinclude></noinclude>**。所有不打算作为模板代码一部分的文本都必须放在这些标签 *之间*,例如模板的描述。

最后,按页面底部的 *保存页面* 按钮保存页面。模板现在已创建,可以使用其给定的名称调用它。转到沙盒,测试模板的功能。


文本段落

[编辑 | 编辑源代码]

模板的代码不需要以任何特殊字符或符号开头。主要考虑因素是代码执行所需的操作,就像直接在页面上输入代码一样。在代码块的“结尾”,请务必添加上面提到的 **<noinclude></noinclude>** 标签。

所有可在页面中使用的现有维基文本和 HTML 代码都可用于文本模板。页面用户无权访问与样式相关的部分,即网页标题及其样式表。因此,用户只能修改可用的页面部分,即页面主体内的文本。熟悉网页设计的人都知道,唯一剩下的可用方法是使用 **行内样式** 修改页面的文本。由于维基文本允许在其内部使用 HTML 代码,因此可以使用 **<div></div>** 标签和 **<span></span>** 标签来实现工作方法。CSS(层叠样式表)属性和值用于在这些标签内修改原本适用的文本样式。

这里还需指出 **span** 和 **div** 在文本模板中的使用区别。**Span** 应该只用于格式化文本,请注意,应用于文本的任何格式都不会超出最后一个文本字符;另一方面,**div** 会将其格式应用于跨越页面的矩形文本块。这意味着 **div** 更适合在页面上更改背景颜色。在 类和样式笔记 的 *类和样式标签* 部分可以找到一个比较示例。


最简单的案例

[编辑 | 编辑源代码]

在执行任何格式化操作之前,请考虑从简单的文本块创建模板的方法。输入一个文本块,其中包含所有格式和页面布局,然后将该块保存为模板。就这么简单。此类文本块可用于测试文本,例如 洛伦兹·伊普森,这是一个众所周知的虚拟内容文本块,印刷商和其他人在排版工作时使用它。要使用此类模板,只需输入

{{lorem ipsum}}

在页面的任何方便位置生成文本块。此文本块未预先格式化硬换行符,因此它将在输入的位置 *换行*,并使用页面的 *默认* 文本样式。


添加样式

[编辑 | 编辑源代码]

要 *修改* 文本样式,例如,对于文本 **这是文本**,我们首先将文本放在 <span></span> 标签内,如下所示

<span>这是文本</span>

然后我们在第一个标签 *内部* 构建一个样式语句。此示例使字体为 *Garamond*,20 点,颜色为红色。它看起来像这样

<span style="font-family:Garamond;font-size:20pt;color:red">这是文本</span>

结果将是

这是文本


请注意,第一个标签仍然有一个关闭箭头;它位于样式语句的末尾。

还要注意,语句中有三个样式规则,用分号分隔;它们是 *font-family:Garamond* 用于设置字体的 *面*,*font-size:20pt* 用于设置字体的 *大小*,以及 *color:red* 用于设置文本的 *颜色*。

样式语句以术语 *style=* 开头,语句的右侧完全包含在双引号内。

各个样式规则由一个 *属性* 组成;左侧部分和一个 *值*;右侧部分。这两个部分由一个冒号 *分隔*。样式语句的格式是严格的。如果格式中存在错误,则整个语句都可能失败。请注意,维基文本 *可以* 用于文本本身;例如,生成斜体(双引号)或粗体文本(三引号)。维基文本 *除了* CSS 样式之外还起作用,前提是没有明显的冲突。可以使用多个跨度和样式语句来生成相当复杂的结果。

这些标签集可以 *嵌套*;也就是说,一个标签集在另一个标签集内。请注意嵌套的 **span** 标签,因为它们可能会产生意外的结果。假设使用 span 标签对多个段落应用了整体样式。在这些段落中,使用 *另一个* span 集对其中一个段落进行不同的格式化。当查看时,在 *内部* span 关闭的地方,样式将恢复到样式表中描述的主体文本样式,而不是预期的外部样式定义。这可能是因为第一个关闭标签被错误地解释为结束标签。可以通过 *对两者都使用 div 标签* 或最多 *对其中一种格式使用 span 标签* 来解决此问题。

许多属性可以用来修改文本。它们包括样式表中找到的所有文本样式,即字体、填充、对齐、边距、边框、文本颜色和背景的样式。**CSS 属性列表** 以及其他关于 字体和文本 的资料提供了所有此类工作的信息来源。虽然 CSS 属性和示例主要针对样式表,但属性和值本身 *可以在* 页面和模板中使用。Study Work 下拉框包含一个有用的代码模块,用于学习文本属性。它包含大多数有用的文本条目,可以复制到 沙盒 中进行学习。

学习工作
此模块包含大多数有用的文本属性。将其复制到沙盒中,以试验文本属性值。
<div style="font-family:lucida handwriting;font-weight:bold;font-style:italic;font-size:12pt;color:blue;background:papayawhip;word-spacing:0pt;letter-spacing:0pt;line-height:1.8em;border:1px solid red;margin:10pt 100pt 10pt 50pt;padding:10pt 20pt 15pt 20pt;text-align:justify;"><center>Text Property Notes</center>

Both PADDING and MARGIN style-rule values use the sequence TOP, RIGHT, BOTTOM, then LEFT, i.e. clockwise starting at the top.

BORDER uses the sequence BORDER-WIDTH, BORDER-STYLE, then BORDER-COLOR for all of the four borders at once.   Other properties can address the four separately.

PADDING is the space around the text.   MARGIN is the space around the text block.   BORDER is the line that surrounds the text and its padding.

The code block contains the common text properties.

Experiment with the settings. </div>



学习工作使用的颜色值


用于 CSS 属性的颜色值采用以下形式:Background:RGB(255,202,149)



现在,继续使用 *红色文本* 示例。虽然可以像这样将代码保存为模板,但这并不是很有用,因为它只包含固定文本。为了引入 *用户选择的可变文本* 的概念,我们需要将代码中的文本位置更改为 *参数*。

假设基本代码正常工作,则可以添加 *参数* 括号。在上面的文本示例中,只有一个 *参数*,即要格式化的内容。从上面的代码开始,只需替换文本部分,使代码行现在看起来像这样

<span style="font-family:Garamond;font-size:20pt;color:red">{{{content|{{{1}}}}}}</span>

请注意,原始文本现在已被替换为

{{{content|{{{1}}}}}}

*数字* 将参数标识为数字 1。它也是参数的 *名称*。单词 *content* 只是一个方便的标签,不过数字或标签都可以用于 *命名参数*。如果用户忘记在参数位置写入任何文本,则页面上将显示参数的编号以提醒用户。如果模板具有 *多个* 参数,则可以使用类似的过程,使用 2、3、4 等数字序列,并为每个参数添加一个合适的标签来替换 *content*。

以通常的方式保存它将完成此类模板。假设模板要保存为名称 *BigText*,则调用它以供使用的条目将只是

{{BigText|1=这是要格式化的文本}}

请注意,当模板具有 *多个* 参数时,使用的参数可以作为 *命名参数* 输入,使用带有等号的编号或标签,也可以作为 *未命名参数* 输入,通过省略添加的名称,直接输入文本。参数应该 *全部未命名* 或 *全部命名*,而不是两者混合。如果它们是 *未命名* 的,则必须保持正确的顺序,如果它们是 *命名* 的,则可以使用 *任何* 顺序。编号名称和标签名称 *可以在* 模板调用中混合使用,不会有任何困难。

虽然实际上 *任何* 标签都可以通过在开头标签中添加样式语句来修改,但这并不意味着该工作总是可以制作成模板。在制作此类模板时,至少存在一个例外。**<pre></pre>** 标签通过其自身的定义会导致模板的参数代码被忽略,需要采用不同的方法。与其尝试制作修改过的预格式化文本模板,不如考虑使用 Prettypre 来制作这些标签的现成精美版本。

也就是说,可以通过内联样式修改<pre></pre>标签来制作更有趣的预格式化文本,也可以将这些标签添加到用作模板参数的文本中,但从预格式化标签包围的文本创建模板会更困难。


为了完整性,我们还可以向基本的红色文本模板示例添加选项。假设我们想在工作中不时更改文本的颜色。我们可以为新颜色制作另一个完整的模板,或者只是在文本颜色代码中添加一个选项。新代码如下所示

<span style="font-family:Garamond;font-size:20pt;color:{{{tint|red}}}">{{{content|{{{1}}}}}}</span>


请注意,整个属性值(也适用于属性值)必须用三个花括号括起来。此外,该值应替换为选项名称/默认值组合。在这种情况下,如果用户没有指定文本颜色,则无论如何它都会是红色。如果指定了(见下文示例),则可以使用模板调用中的选项tint=将其更改为任何颜色。假设该模板的名称为BigText,则用于紫色文本的模板调用将是,比如

{{BigText|tint=purple|1=我的紫色文本在这里}}


其他选项可以以相同的方式创建,并且无论用于模板的标签是什么,都可以使用类似的技术。

了解不同的标签并能够访问 CSS 属性列表,可以让模板设计具有相当大的范围。


制作框

[编辑 | 编辑源代码]

以下部分制作了来自 Wikitext 的框或表格模板。它们也可以用相同的方式用 HTML 表格制作。在制作这样的模板时,Wikitext 就可以了,但当需要一个表格进入模板作为其参数或其参数的一部分时,应该使用 HTML 表格。WikiBooks 文本 制作表格 涉及 HTML 表格结构,并解释了如何使用样式。假设读者熟悉以下文本中介绍的这些概念。


框结构

[编辑 | 编辑源代码]

框本质上是表格,实际上是表格单元格。用于格式化表格的 CSS 属性列表非常广泛。简单的框使用表格容器,以及其中一个或两个单元格

除了表格容器外,表格的其他结构还包括其单元格。在下面的示例中,有两行,每行只有一个单元格。表格的每个部分都有影响它的属性,并且在下面的列表中可以看到典型表格编码的示例。

{|style="background:lightyellow;width:150px;margin:none;border:1px solid lightgrey" align=left
|-
| style= " text-align: center; padding: 5px 0 0 0"|'''标题'''
|- style="text-align:justify;"
| style="padding:0px 10px 10px 10px;"|内容。
|}


在沙盒中运行此代码会生成以下内容

标题
内容。


如有必要,请参考 WikiBooks 文本 制作表格 或维基百科文本 帮助-表格 获取有关制作表格的详细说明。还可以参考下面的下拉框,了解常用表格属性及其含义的列表。

CSS 属性摘要
Wiki 标记表格常用的样式规则 

两组不同的样式规则正在使用;一组与表格中特定元素关联的 HTML 属性,以及一组更广泛使用的级联样式表集,即 CSS 属性。

表格标题单元格中的每一个都可以被视为表格更一般的构建中的单独元素。在每个属性与相同级别相同元素的 CSS 属性表示相同格式的情况下,CSS 属性优先。

为了快速参考,列出了每组样式规则的简短列表,但这些列表绝非完整。在此下拉列表底部提供了一个链接,用于完整 CSS 属性参考。




表格的 HTML 属性;使用格式;

attribute1=value1 attribute2=value2 attributeN=valueN

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.



CSS 样式规则;使用格式;

style="property1:value1; property2:value2; propertyN:valueN;"

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

mix-blend-mode:multiply   mode                       T           blend mode

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.



WIKITEXT 的样式表达式间距规则


主要避免事项

  • 样式表达式中不允许换行符。让软件进行换行。
  • 冒号或分号前不允许有空格。

这些有余地

  • 各种表格符号和单词style之间的空格可以。
  • 任何等号周围的空格都可以。
  • 样式规则与其外部括号之间的空格可以。
  • 冒号和分号后的空格可以。
  • 分号可以放置在最后一个样式规则的面。

此外

  • 像 '2px solid black' 这样的复合值必须用空格隔开。
  • HTML 属性必须用空格与 CSS 样式表达式隔开。
  • HTML 元素行间距允许,但 Wikitext 元素不允许。
  • Wikitext 和 HTML 表格元素可以缩进以提高清晰度。
  • 代码列表中的长行只有在添加一些空格的情况下才能换行。



组合两种样式规则方法

只要它们保持自己的本地格式,就可以将属性与 CSS 样式混合使用。也就是说;引号之间没有等号,引号之外没有 CSS 规则。请注意,Wiki 单引号代码和各种 HTML 标签仍然可以直接用于文本。下面显示了混合样式的示例。

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


内联样式的优先级。

当在相同级别上属性和样式之间存在冲突时,样式将具有优先级

当样式表达式中存在两个相似的属性时,每个属性都有不同的值,则将使用第二个值。

当同一表格行中存在两个完整的样式表达式时,第二个表达式将被忽略。对于一行中的两个相似属性,情况也是如此;第二个属性被忽略。





请参考 CSS 参考列表 获取有关属性和值的更详细说明。



目前,只需注意以下几点

  • 表格用以下符号括起来:{| |}
  • 放置在表格上方的标题以|+开头。
  • 表格内的标题单元格以!开头。
  • 新行用以下符号创建:|-
  • 行内的数据单元格用以下符号创建:|
  • 样式语句可以存在于表格、行或单元格级别。
  • 另一个管道符号将单元格的样式与其文本分开。 |
  • 将表格、行和单元格放在新行上可以避免模板中的许多问题。

请根据此描述中的推理进行代码操作。

表格容器具有背景宽度边距边框属性,以及对齐属性。

  • 背景;设置整个表格的背景颜色。
  • 宽度;设置表格的总宽度。
  • 边距;删除表格的边距。
  • 边框:在一个属性中设置表格边框的粗细、类型和颜色。
  • 对齐:允许将框放置在页面上的左侧右侧中央


第一行中的单元格具有文本对齐填充和标题文本形式。

  • 文本对齐;将单元格文本水平放置在中央。
  • 填充;设置框标题文本的第一个单元格内的填充。
  • 标题文本;使用 Wiki 标记加粗。


下一行具有文本对齐。此属性会将样式一次性应用于行中的所有单元格,但并非所有属性都可以执行此操作。

  • 文本对齐;将底部单元格(主要内容)中的文本对齐。


内容单元格具有填充和内容文本。

  • 填充;设置内容文本周围的间距。
  • 内容文本;是框模板的主要文本。

可以为该文本框指定其他属性,例如,用于指定要使用的字体的详细信息,但本示例中已经足够了。


参数和选项

[编辑 | 编辑源代码]

旨在提供三个选项以及两个参数。选项将是背景宽度对齐。参数名称将是12,标签为标题内容

以下代码中添加了选项和参数

{|style="background:{{{background|lightyellow}}};width:{{{width|150px}}};margin:none;border:1px solid lightgrey" align={{{align|left}}}
| style= " text-align: center; padding: 5px 0 0 0"|'''{{{Heading|{{{1}}}}}}'''
|- style="text-align:justify;"
| style="padding:0px 10px 10px 10px;"|{{{Content|{{{2}}}}}}
|}


参数已替换标题内容文本。参数一和二的格式为

{{{heading|{{{1}}}}}} 和 {{{content|{{{2}}}}}}


每个参数格式都包含一个参数标签标题内容)、一个管道符号|,以及参数的真实名称12)。在每种情况下,参数名称整个参数表达式都用三个花括号括起来。{{{}}}


选项已为属性背景宽度对齐创建。格式为 

background:{{{background|lightyellow}}} width:{{{width|150px}}} 和 align={{{align|left}}}


请注意,括号的格式类似于文本模板创建中给出的示例,并且使用相同的严格格式来标识选项和参数。

参数也可以使用选项格式。当参数使用此格式时,它必须在模板调用中使用命名参数样式。这种参数的优点是可以拥有任何默认值,包括图像。使用选项格式的参数的缺点是高度醒目的编号提醒将丢失。您将回忆起,更正式的参数样式为参数提供了一个数字作为默认值。

模板可以以通常的方式保存。假设模板以Textbox名称保存,那么可以通过键入以下内容来调用它以供使用

{{textbox|background=lightgrey|width=325px|align=center|Heading text here|Content text here}}

方框的变化很大。通过调整表格结构,可以添加图像和其他效果。维基百科和维基教科书中的大多数信息方框都是基于表格构建的。


制作下拉控件

[edit | edit source]

下拉框节省了页面空间,可用于文本和图像。在维基教科书中,这些框是动态的,单击此类框标题上的链接会将其下拉以显示整个内容部分。再次单击链接会将其恢复到关闭状态。

下拉框可以通过两种方式创建。过去,创建它们的方法是使用类NavFrameNavHeadNavContent。如今,collapsible类可以用于表格和div框,其简洁性使其成为明显的选择。第一部分简要描述了可折叠div的布局。本部分的其余部分专门用于基于可折叠表格的版本;这种方法是现成下拉控件模板 Dropimage 的基础。

一个现成的模板存在于一个相当可适应的下拉框中;它是 Dropimage,不过对于那些想要了解细节的人来说,他们可以在 Sorting and Hiding 中找到。

可折叠方框

[edit | edit source]

下拉框的基本代码如下

<div class="collapsible">
<div class="title">Title</div>
<div class="body">
Hideable content
</div>
</div>

上面的代码生成一个跨越页面整个宽度的下拉框。collapsible包含另外两个部分,title指的是带有链接的面板,body指的是下拉框本身内的文本框。

默认情况下,当页面加载时内容是隐藏的;也就是说,页面首次打开时,该框处于关闭状态。要默认显示内容,用户需要在类声明中添加“selected”。CSS 样式也可以像下面这样添加,并且模板制作的选项括号和参数括号已显示,如上一节所述

<div class="collapsible selected" style="color:{{{color|darkgray}}}; width:{{{width|300px}}}; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<div class="title" style="font-weight:{{{bold|bold}}};">{{{Heading|{{{1}}}}}}</div>
<div class="body" style="background-color:{{{background|lightyellow}}};color:{{{color2|black}}}">
{{{Content|{{{2}}}}}}
</div>
</div>

可以通过更改任何部分的样式来获得布局的变化,但首选的方法是使用可折叠表格,这将在下一节中介绍。

可折叠表格

[edit | edit source]

(目前正在重写以更新可折叠表格) 下面的面板显示了基于collapsible框类的相当基本的下拉框的HTML和Wikitext代码版本。这两个版本是等效的,但是打算制作模板的用户应该使用HTML版本,因为它可以将表格作为其内容而不会出现任何不稳定性。在Wikitext中嵌套表格是有问题的。

HTML 可折叠表格单元格

<table class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px">
 <tr>
   <th style="text-align:center;">Any Heading</th>
 </tr>
 <tr>
   <td>Content cell text, images or HTML tables</td>
 </tr>
</table>


WIKITEXT 可折叠表格单元格


{| class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px"
 |-
 ! style="text-align:center;" | 任何标题
 |-
 | 内容单元格文本或图像
 |}


如果需要打开页面时处于selected状态而不是collapsed状态,那么只需在class="collapsible selected"行中添加类selected即可。默认状态是collapsed,无需添加。

表格行中的width样式设置了表格在页面上的初始宽度,除了未格式化的文本外,表格将在打开时扩展以适应内容。

应避免使用表格的floatalign属性,因为浏览器可能不支持表格对齐。可以通过将表格的初始宽度设置为100%,并将表格包装在宽度设置为所需宽度的div框中,以与大多数浏览器兼容的方式对齐表格。对于左对齐和右对齐,请在div框上使用float。对于居中对齐,请在div上使用auto边距。

HTML 可折叠表格单元格

<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<table class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px">
 <tr>
   <th style="text-align:center;">Any Heading</th>
 </tr>
 <tr>
   <td>Content cell text, images or HTML tables</td>
 </tr>
</table>
</div>


WIKITEXT 可折叠表格单元格

<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
{| class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px"
 |-
 ! style="text-align:center;" | Any Heading
 |-
 |  Content cell text or images only
 |}
</div>


参数和选项

[edit | edit source]

参数和选项括号在下面面板中显示了下拉框模板的HTML版本,并且需要注意的是,该方法类似于之前部分中使用的用于简单表格的方法。需要注意的是,最外层的表格只是为了允许整个结构居中,因为collapsible类不支持它。


基本下拉框模板编码

<table style="border:none; align={{{alignT|left}}}">
<tr><td>
<table class="collapsible" style="border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}};"  cellpadding="{{{padding|5px}}}">
 <tr>
   <th style="background:{{{backgroundH|transparent}}};text-align:center;">{{{heading|{{{1}}}}}}</th>
 </tr>
 <tr>
   <td style="text-align:{{{alignC|left}}};"> {{{content|{{{2}}}}}}</td>
 </tr>
</table>
</td></tr>
</table>
<noinclude>
All other template page material goes between these tags.
</noinclude>

上面的HTML代码块已保存为模板dropthingDropthing,并且可以通过在页面上键入以下内容来调用它以供使用

{{dropthing|backgroundT=mistyrose| alignT=center|width=400px| Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


使用此模板调用生成的下拉框如下所示

Press to View
山楂花开.



对于有需要的人,还存在一个名为 Dropimage 的更复杂的现成模板。它有一组很大的单个选项,以及添加更多属性和类的功能,其编码将在下面介绍。

高级选项

[edit | edit source]

虽然用户总是受到原始模板设计的限制,但预先计划的选项提供了一些自由度。然而,有一种方法允许用户添加在原始设计中未考虑的类和 CSS 属性。为了使这种方法起作用,模板的设计者必须预料到未来可能需要进行这种更改,并添加一些额外的按键操作。下面将进行说明。

也许令人惊讶的是,classstyle声明本身都是HTML属性,与aligncellpadding和其他属性相同。因此,这些术语可以像其他选项一样指定,具有类和样式的默认值。然后,用户可以指定他希望模板使用的样式或类的列表,或者不做任何操作,每个选项的默认值将适用。显然,如果将现有模板的常用值设置为这些默认值,则可以进行更改而不会影响原始用户。下面的示例允许使用类selected用于原始作者仅使用名为collapsible的类的模板。


添加类

[edit | edit source]

为了允许用户更改上述下拉表格模板的类,需要修改类声明(表达式)行,如下所示

class="{{{class|collapsible}}}"


这会创建一个名为class的新选项,其默认值为collapsible;也就是说,如果用户没有编写class选项,则将应用默认值。现在,修改了类声明后,用户可以添加类selected或任何其他合适的类,他对此很熟悉(而其他人仍然正常使用该模板),如下所示

{{dropthing|backgroundT=mistyrose|class=collapsible selected| alignT=center|width=200px| Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


以这种方式生成的框只是

Press to View
山楂花开.


该模板仅对于此框将以打开状态显示,因为已添加类selected作为选项。请注意,需要声明所有目标类,并且不需要使用引号。此条目完全替换了默认类声明。类似地,可以使用其他类,尽管用于自动格式化表格的类集需要扩展一些。

更多样式选项

[edit | edit source]

要修改模板以添加用户编写的样式表达式,模板中表格行中的现有样式表达式将被替换,如下所示

style="{{{mystyleT|border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}} }}}"


请注意,现在整个 CSS 样式表达式(但不是后面的属性)都是mystyleT 选项的默认值。当在模板调用中使用此选项时,值表达式的引号不应使用。

典型的模板调用,引入新属性可能如下所示

{{dropthing|myclass=collapsible| alignT=center|mystyleT=border:3px solid brown; width:300px; background:mistyrose;color:darkgreen; font-weight:bold|Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


而使用此模板调用所得到的结果只是

Press to View
山楂花开.

其他文本可以放在这里...



注意,预期的新样式语句必须完整重写,并且现在在选项语句中添加了一个原始设计中未包含的新 CSS 属性(文本颜色)。

如果未使用 mystyleT 选项,则仍然可以使用各个选项。如果同时更改表达式和各个值,最好研究一下其中一个是否会覆盖另一个的可能性。

模板 Dropimage 已经修改为包含用户对类和样式的修改。

以上各节中给出的三种示例类型有望让读者了解模板的制作。请记住,这里没有讨论模板的许多方面;例如,条件行为、循环和自身作为模板运行的默认值的概念。有关模板的更多信息,请参阅下面的链接。

最重要的是,学习如何在制作模板时使用 CSS 样式,并尝试其效果。

另请参阅

[编辑 | 编辑源代码]
华夏公益教科书