跳转到内容

维基文本/模板编辑 - 随时可用

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

本页介绍了一些现有的模板,其他模板可以在

  • 创建修改模板,请参阅模板 A101.
  • 要按字母顺序搜索维基教科书(而非维基百科)中的模板,请点击以下链接:所有模板命名空间.
  • 要按类别搜索模板,请点击以下链接:Category:Templates.
  • 要按名称搜索模板,例如dropimage,请在任何维基页面左侧的搜索框中输入以下内容并选择转到
template:dropimage


鼓励作者添加指向有用维基教科书模板的链接,也许可以以表格形式添加到这些部分或其他部分中。

页面构建块

[编辑 | 编辑源代码]
布局选项;模板Thetop
每个页面都有一些相似之处。大多数情况下,文本会扩展到整个页面,颜色与默认设置匹配。有时需要更复杂的布局,每次设置样式都变得很繁琐。当有许多间隔元素(如表格、列表、图像和文本)时,这会变得尤其乏味。此模板在边界框内包含全页部分和跨页面板。每个参数都有许多选项,配置非常直观。这段文本是在Thetop模板的引导部分中编写的,下面其他部分包括三个跨页框和一个与引导部分类似的尾部部分。
<table border=1>
<caption>Caption</caption>
<tr>
  <th>Heading 1</th>
  <th>Heading 2</th>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
</tr>
<tr>
  <td>[[image:crocus_4.jpg|75px]]</td>
  <td>D</td>
</tr>
</table>
标题
标题 1 标题 2
A B
D
部分可调整
  • 可以更改宽度以移除某个部分或扩展另一个部分。
  • 可以更改填充和颜色。
  • 也可以更改字体详细信息。
  • 要创建空部分,请输入不间断空格。
此构建块的宽度与顶部部分模板完全匹配。实际上,如果愿意,模板可以用于顶部部分。通过使用此类构建块,可以提高一致性,并且添加背景颜色可以让页面更加有趣。

请注意,不需要模板就可以简单地将更有趣的颜色应用于页面。有这种想法的作者和编辑只需将页面中的所有文本放在样式化的 HTML ''div'' 标签中。标签的样式在典型的“内联”块格式中介绍,如有必要,可以在此页面标记文本的顶部找到示例。

可以在表格页面中看到此模板的使用示例。


隐藏内容

[编辑 | 编辑源代码]

有时页面会变得有些杂乱。许多详细信息最好隐藏起来,以便在需要时可以访问,但不会影响所述内容。

为此,可以使用DropimageFullWidthDrop等模板。引用的示例展示了一个带有标题和链接的整洁框。链接可以切换;第一次单击它会下拉框以显示内容。再次单击链接会关闭框。内容量可以相当大。请注意,虽然 Dropimage 可以比页面窄,但 FullWidthPage 模板始终会占用整个页面。

尽管它们的名字如此,但这两个框也可以包含文本或其他元素,包括其他模板。对于 Dropimage 和 FullWidthDrop,建议使用 HTML 表格而不是维基表格。

下面展示了 Dropimage 的使用示例,包括一个图像、文本和 HTML 表格。在整个编辑维基文本系列中都可以看到更多关于其使用的示例。

图像示例

紫罗兰色番红花


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

两种不同的样式规则集在使用;一组与表格中特定元素相关联的 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 表格元素,以便清晰地显示。
  • 代码 LISTINGS 中的长行在添加一些空格的情况下才能换行。



组合两种样式规则方法

可以混合使用属性和 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 参考列表,以获取有关属性和值的更详细说明。


浅色
淡色名称和值
颜色名称 颜色样本 十六进制 RGB 值
Aliceblue   #f0f8ff; rgb(240,248,255)
Antiquewhite   #faebd7; rgb(250,235,215)
Azure   #f0ffff; rgb(240,255,255)
Beige   #f5f5dc; rgb(245,245,220)
Bisque   #ffe4c4; rgb(255,228,196)
Blanchedalmond   #ffebcd; rgb(255,235,205)
Cornsilk   #fff8dc; rgb(255,248,220)
Floralwhite   #fffaf0; rgb(255,250,240)
Gainsboro   #dcdcdc; rgb(220,220,220)
Ghostwhite   #f8f8ff; rgb(248,248,255)
Honeydew   #f0fff0; rgb(240,255,240)
Ivory   #fffff0; rgb(255,255,240)
Lavender   #e6e6fa; rgb(230,230,250)
Lavenderblush   #fff0f5; rgb(255,240,245)
Lemonchiffon   #fffacd; rgb(255,250,205)
Lightcyan   #e0ffff; rgb(224,255,255)
Lightgoldenrodyellow   #fafad2; rgb(250,250,210)
Lightyellow   #ffffe0; rgb(255,255,224)
Linen   #faf0e6; rgb(250,240,230)
薄荷奶油   #f5fffa; rgb(245,255,250)
雾玫瑰   #ffe4e1; rgb(255,228,225)
鹿皮鞋   #ffe4b5; rgb(255,228,181)
纳瓦霍白   #ffdead; rgb(255,222,173)
旧蕾丝   #fdf5e6; rgb(253,245,230)
淡绿松石   #afeeee; rgb(175,238,238)
木瓜黄   #ffefd5; rgb(255,239,213)
桃色   #ffdab9; rgb(255,218,185)
粉红色   #ffc0cb; rgb(255,192,203)
贝壳   #fff5ee; rgb(255,245,238)
  #fffafa; rgb(255,250,250)
小麦色   #f5deb3; rgb(245,222,179)
白色   #ffffff; rgb(255,255,255)
烟白色   #f5f5f5; rgb(245,245,245)



图像模板

[edit | edit source]
请注意这个无边框的标题。
无边框图像标题

图像不能包含标题,除非图像语法使用了框架缩略图。边框也往往是标准格式,通常不能自定义。

这些限制可以通过使用模板集来克服 NoframeleftNoframerightNoframecenter,和 Noframenone。简要查看它们的名称可以发现,每个标准图像位置都有一个。这些模板也有许多选项。

标题示例与左侧图像一起给出,也可以在页面上看到 快速课程

鼠标悬停图像

Internet Explorer 用户会发现鼠标悬停功能对他们不起作用。

非洲菊:悬停以了解更多信息
HoverImage 作为缩略图。
菊花:替代方案
HoverImage 作为缩略图。

非洲菊:悬停以显示菊花。HoverImage 用于 Noframeleft 内。

图像通常固定在页面上,但有一种技术允许两个图像占据相同的空间。右侧显示了一个示例。当鼠标移过图像时,会显示不同的图像。它是由比我更聪明的人设计成的模板。整个过程允许使用标准图像选项,该模板称为 HoverImage

HoverImage 的前两个参数是将要使用的两个图像的文件名;第一个是默认图像,第二个是替代图像。也有单独的标题选项;它们的编写顺序与图像名称相同。其他选项,如位置大小边框类型可以添加并同时应用于两个图像。该模板可以在使用普通图像语法行的任何地方使用。右侧悬停图像的代码如下:

{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|right|thumb|200px|Gerbera:''悬停以了解更多信息<br />单独使用 HoverImage 作为缩略图。'' |Chrysanthemum: ''替代方案<br />单独使用 HoverImage 作为缩略图。''}}

如果模板用于形状不同的图像,可以通过精确设置高度并将基本尺寸设置为某个不可能的高值来实现一些改进;这样,两个图像都将设置为预期的高度。还要注意,整个模板可以成为 Dropimage 模板的内容,并且仍然可以很好地工作;在这种情况下,将图像选项设置为居中

图像示例中不需要的白色边框不是模板中的错误,而是使用带有框架的图像在彩色页面背景上产生的结果;这是一个错误。为了避免这种情况,只需使用无边框图像。如果还需要标题,则将 HoverImage 模板用作例如Noframeleft的图像参数,以创建单个标题的无边框图像。左侧的图像就是用这种方法制作的。带有单个标题的鼠标悬停无边框图像的代码如下:

{{noframeleft|margin=10px|cwidth=200px|{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|200px}}|Gerbera:''悬停以显示菊花。HoverImage 用于 Noframeleft 内。''}}


信息框

[edit | edit source]
此框使用模板 Technote 制作,旨在用于技术页面中的某些点,可能用于大多数人选择忽略的过于简洁的点。由于标题也可以更改,因此它可以采用任何适合绿色勾号图像的实用形式。
技术说明



Wikibooks 中提供了许多信息框。其中大多数用于管理评论和提醒。背景颜色和文本对齐是选项。从以上示例可以清楚地看出,文本也可以包含超链接。

突出显示块

[edit | edit source]
style = "background:lightyellow; color:navyblue;"

以上示例显示了另一个框,这次使用模板 Block 制作,以强调需要学习某些上下文或其他上下文的代码行。

它对编程和标记代码描述使用 Courier 字体。它适用于单行,虽然它会扩展,并且背景颜色、字体、对齐方式和其他元素都是选项。

在更一般的层面上,该模板可以用于页面构建。当一个模板实例紧随另一个模板实例之后时,就会出现颜色条带。由于它基于div 标签,因此它与主页面几乎没有区别。

还有一个名为 Blockwrap 的版本,可以包含在左右环绕文本的部分中。这是为了解决一个错误,其中divs 坚持使用页面的全部宽度。

模板Block 就像这样整齐地堆叠在一起,用于页面构建

|background=Beige|ta=left|
|background=Ivory|ta=left|
|background=mistyrose|ta=left|


条带化项目符号

[edit | edit source]
  • 常用的项目符号使用页面格式作为其默认值。
  • 这些 项目符号是条带化的,尽管颜色通常会扩展到整个可用宽度,但容器的宽度和位置都是选项。
  • 它们在模板标准中很笨拙,因为它们需要使用三个独立的模板 Container,以及其中的 DulLul 堆栈才能使其工作。

虽然这组模板缺乏优雅,但人们发现它比涉及自定义表格的更繁琐的方法节省了时间。以上示例的模板调用使用了自定义宽度和位置,如下所示:

{{container|align=center|width=80%|1=
{{dul|第一点}}
{{lul|第二点}}
{{dul|第三点}}
等等...
}}


隐藏标题

[edit | edit source]

众所周知,Wiki 中的每个标题都列在目录中的链接中。

有时,不需要目录条目,但仍然需要标题。这是避免在内容框中出现过多级别的其中一种方法。为此,已制作了一组六个模板 Hiddenh1Hiddenh6 来模仿标题样式。

例如,Hiddenh3 的使用对应于 Wiki 中的三级标题,以及 HTML 中的h3 标题。例如,将它们用于下拉框,否则关闭的框可能会导致列表混乱。由于它们没有被正式地视为列表,因此将无法像其他情况那样链接到这些标题。


首字母下沉

[edit | edit source]
A

首字母下沉是指段落开头的大写字母。它有时用于艺术作品或散文诗的诗节开头,但从最一般的层面上来说,它用于没有正式标题样式的地方。它是文本强调的一种形式,因为它将注意力吸引到部分的开头。

此示例使用模板Drop。仅模板调用中包含第一个字母,并且在每种情况下,下一个文本字符(忽略任何空格)都硬左对齐到模板的右括号。

对于那些需要自己更复杂格式的人来说,有必要创建一个,因为据所知,这是唯一一个已有的文件。值得注意的一点是,除非找到专用于此目的的等宽字体,否则首字母下沉不太可能垂直对齐。 因此,它们往往被放置得足够远以避免差异。

作者数据列表

[编辑 | 编辑源代码]

在处理页面时,经常需要一些 CSS 代码或颜色格式来参考。为了避免页面搜索的需要,可以将包含此类信息的许多模板放置在页面或沙盒旁,随时可用。这些列表很紧凑,因为它们隐藏在下拉框中,直到需要时才显示。到目前为止,该列表包括以下内容

  • Tablestyles制作表格的 CSS 样式和 HTML 属性列表。文本还包含有关代码间距和优先级的说明。
  • Lightcolors选定的淡色调和浅色名称列表,以及它们的 RGB 和 HEX 值。
  • Mediumcolors中等密度颜色名称及其代码列表。
  • Darkcolors深色及其代码列表。
  • Greycolors密度间隔的灰色列表及其 RGB 值。
  • Flowers高质量鲜花缩略图库,用于快速查找图像。
华夏公益教科书