何为排版
排版，是指将文字、图片、表格等各种页面元素进行重新组合、排列，调整它们的大小和位置，使元素错落有致，层次分明，整个页面易于阅读。
在WIKI中，排版并不是像Photoshop等办公软件一样通过操作工具来直观呈现，而是基于代码实现的，这就要求编辑者在对页面排版时需要有一定的WIKI编辑经验，通晓一些基础的HTML语言并能够运用CSS对一些网页元素进行修饰。
排版的原则
在办公软件上可以肆意发挥自己的才能，但在WIKI这个公共平台上则必须遵守规则。通过较长时间的编辑与探索，我总结了几条自己在WIKI排版的原则。我知道自己也常有双标的一面，所以也在藉此告诫，时刻遵守这几条规则。
第一条，其他人的原创页面是不可以随意改动的，如果觉得排版不合自己的心意时，务必在获得原作者允许的情况下再修改。这是维护WIKI良好创作环境的最重要的原则。
越接触排版设计这个领域，越觉得自己的观念跟不上时代。可能自己觉得完美的排版，在他人看来就是不妥的。我现在看自己在两年前所建立的页面，也会觉得以前的设计是那么的幼稚可笑。不要觉得自己的想法一定正确无误，学会尊重他人的想法，不将自己的意愿强加给对方，不要乱动他人的劳动成果，这才是我心目中WIKI编辑者的第一要义。在这个基础上，自己的排版才是有意义的。
第二条，不要在特殊的公共页面使用大规模的CSS样式以及复杂的代码进行个性化排版，应尽可能使用通用的简明样式。如果是自己是页面的主要贡献者则无所谓。海事局每次的活动专题和卫星页面，都会有大量的普通玩家来补充信息，如果使用过于复杂的代码，对看不懂代码的用户而言极不友好，他们很难快速理解和编辑页面；同时这种行为还可能导致页面加载速度变慢，影响用户体验。
第三条，添加内容时最好与页面整体的代码布局保持同步，让源代码本身也保持简洁。观察一个页面的源代码，如果采用按两次回车键来换行，那么添加内容时就用这个方法换行；如果页面采用<br>换行，我们也依此而行。如果页面普遍采用#有序列表而非*无序列表，那么我们也尽量不要添加*无序列表。
第四条，排版是重要的，但不是必须的。因为WIKI是资料站，而非推销网站。由于WIKI的特殊性质，在任何一个页面中，排版的重要性都不如文字。只有在文字量足够丰富的前提下才考虑使用排版增强易读性。我经过观察，发现大部分读者对于WIKI的排版要求并不高，就算一大段文字挤在一块儿，只要突出了有效信息，那么读者也会认可这个页面。
如果一味地追求极致的网页美观设计而忽略了内容的重要，导致文字匮乏，页面空虚，玩家们看完后什么信息也没获得，就等于舍本逐末。
层级
平时我们使用的多级标题就是层级的体现，通常==A==就是写着“A”的二级标题，===B===就是写着“B”的三级标题，也可以用<h2>A</h2>、<h3>B</h3>等来表示，这里不再赘述。
层级决定了读者在浏览页面时的顺序。页面的起始点、阅读顺序，阅读的优先度等等因素都由层级来影响。标题是正文的梗概，标题与正文要分开便于区分，这样读者才能快速了解正文的大致内容。上下级标题应用不同的尺寸和样式进行区分，例如，一级标题假设其文字大小为100，则二级标题的文字大小可设为60，以此类推。二级标题如果使用了字体加粗，那么三级标题可以取消字体加粗。以上方式都是在对不同层级进行一定的区分，以使读者更容易理解这个页面的阅读逻辑。如果说页面编辑是做菜，那么层级就是菜单，决定了读者先吃什么再喝什么。
手机端适配
我们WIKI是手机游戏资料WIKI，有大量的玩家通过手机查看页面，相较于用电脑浏览，手机浏览显得更加方便快捷。因此，页面排版的重心应该是小屏幕的显示效果。这里就需要提到一个概念，那就是“手机端适配”。由于学艺不精，我目前只能做到一些简单的适配，下面将自己的一点经验分享给大家。
最初我在编写页面的时候使用过一种很蠢很简单的方法，那就是为电脑和手机写两套不同的代码进行排版，然后用class="wiki_hide"有选择的隐藏相应的代码。这样做工作量超级大，费时费力；后来在网上学到了一些html知识，通过不断观察编辑组的编辑行为，逐渐学会了一些特殊的代码，懂得使用一套代码来实现自适应排版。
最为常用的是Bootstrap网格系统。<div class="col-md-x"></div>是比较常用的自适应网格。它可以将页面分为12等分，将每个元素都依照一定的规律安放在这些网格中，形成优美而规整的排版效果。当屏幕像素小于某个值时，元素会自动由横向排布变为竖向排布。
也可以通过CSS的一种响应式布局：@media screen and ( max-width: 像素值 ) {}来实现手机端适配。在不同的浏览器宽度下，通过监测宽度来选择CSS样式。如果当浏览器的可视区域小于980px时让页面字号变小，则可以这样写：
@media screen and ( max-width: 980px ) {#content {font-size: 12px; }}
CSS响应式布局简单又好用，而且可供挖掘的潜力很大，这种方法可以轻松地将一些样式做出区分。
文字属性
文字是我们浏览WIKI时首先关注的东西。文字象征信息，如何调整文字属性使其更容易阅读就是排版的工作。
首先说说字体颜色。一般来说我不推荐使用饱和度过高、明度过高或者过低的颜色，比如鲜红色、纯绿色等，这些颜色太“明亮”了，给人以强烈的侵略感，就像一小部分激进分子，在安静的人群中显得格格不入。按照我的喜好，正文应该使用#404040色号，这种颜色是比较温和的深灰色，对于手机端浏览的用户，这种颜色可以保护他们的视力。所有颜色的饱和度都应该下降一个档次，避免出现刺目的情况。
第二，说说字体大小。普通的字体是14px，手机端我认为调到12.5至13px较为合适。注意，手机端不要含有超过1.5em，即21px的字体，否则过大的文字将会挤压页面，影响美观。
第三，文字间距。WIKI默认的字间距都是0，即紧密排列文字，最大化利用空间。使用letter-spacing可以控制字间距。在一个页面中我首次尝试调大一些字间距，结果发现效果很好，页面整体给人的感观上去了，看得很舒服。我推荐0.07em的字间距，0.05em以下的字间距效果甚微，0.12em的字间距我认为是极限，如果继续调大的话，就 会 变 得 很 奇 怪 了 。
第四，居中属性text-align:center不建议随便使用，不是所有文字都适合居中，居中适合的情景是重要的单行文字或者需要抒情的文字，对于普通的文字就默认靠左就好。
第五，不建议过多使用黑幕{{黑幕|遮挡的文字}}，原因是一大块纯黑色块插在段落中，就像是作文上乱七八糟的圈圈涂改，很影响观感。说实话，把黑色改成类似于刮刮乐的灰色我的接受度能高一点，目前这种黑幕本人实在是欣赏不来。
第六，行高也是影响观感的重要因素。行高越大，文章的情感越强烈，反之，越倾向于保守。推荐的行高一般在1.5em至1.8em左右，字号越小，行高提升所带来的空气感越强。1.8em以就是诗歌才会用到的行高了，我们的WIKI页面很少用到。
class="row"
用row将所有的col包裹起来，就可以制作一个简单的响应式布局了。注意，container容器有15px的内边距，col也有15px的内边距，在电脑端无影响，但是在手机端，两者配合会导致内容和浏览器边框的距离拉宽，上下文就显得有些凹凸不平。事实上在Mediawiki:Common.CSS里也能发现，早期的管理员也注意到了这个问题，并设置了一个margin-left: -3px; margin-right: -3px来抵消边距，但是很遗憾，3px还不足以完全抵消row的边距，须是margin-left: -15px; margin-right: -15px才能完全抵消。
统一性
统一性是我认为WIKI排版最重要的一条思想之一，它指的是在排版的过程中，用到的所有元素样式都要有内在的共同点或者联系，让版面看上去整洁有序，风格统一，避免版式混乱。在实际应用中举例，标签<label>的样式做到宽度一致，字号一致；正文的分割思路相互联系；文字方向统一对齐；图片的大小做到一致，等等。
切忌使用使用不合氛围的样式，过度做变化会丧失排版的格调，使页面不易阅读。正确的做法是通过在单调沉静的页面中做出少量的变化，表现出静中有动。将图片按照一定的规律排列，展现律动的舒适感。
| 正面案例 | 反面案例 |
|---|---|
| █ □ □ □ □ □ █ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ █ □ □ □ □ □ █ |
█ ● █ █ ☆ █ ◇ █ █ ☆ █ █ █ █ █ █ █ █ █ █ ◇ █ █ ▲ █ █ █ █ █ █ █ █ ● ● ○ █ █ █ █ █ ★ █ |
分割线的用法
<hr>可以迅速生成一道横向分割线。但是有个我想不通的问题是，有时候这道分割线会唐突变粗，与排版思路格格不入，刷新一下页面分割线又变细了。为避免这种情况出现，另一种思路是在div设置border-bottom，这样的分割线粗细不会改变。
分割线分为横向和竖向两种（斜线一般不考虑），最常用的是横向分割线，经过试验，我建议竖线不要在手机端使用，否则会产生令人厌恶的黑边；可以在电脑端适当使用竖线来强化区分感，营造报纸刊物的理性氛围。
留白的艺术
留白是什么：“留白是为了给文字以呼吸的空间。”
留白属于较为高级的排版，这是一类源远流长的艺术创想，精妙的留白可以让读者的视线集中到你所突出的文字上，留白越多，文字就越是明显，读者的注意力就越集中。而愚钝的留白只会增加无用的空白区域，犹如未修补的破洞让人烦躁。完全不留白则是对页面秩序的破坏，文字挤得满满当当，一点空白都不给，如同早班的地铁，给人拥挤的不适感。
普通的页面无需留白。手机端留白主要是注意容器两侧的边距，相当部分手机的屏幕边缘显示质量不如屏幕中心，为避免边缘文字看不清，因此需要在两侧留出至少5px的边距。除此之外，手机端刻意留白的作用不大，因为手机是从上而下阅读的，而通过<br><br>的换行方式也能做到分割的作用。留白的用处在WIKI上主要体现在电脑端阅读文字量、图片量巨大的页面。加入一定的空白，可使整个页面错落有致，并调节读者阅读页面的速度。
例如，表格文字较少时，可以设置成一半宽度style="width: 50％"，不需要占满宽度，使表格显得紧密修长；在文本框设置内边距padding和外边距margin，保持合适的距离，划出几条人行道，引导视线平稳地穿过字里行间。
标签<label>
WIKI默认的span标签样式不好看，它的边距太小了，直接挤在文字边上，而且标签内文字又小，很难看清。我的习惯是用CSS将标签样式调整。
| 正面案例 | 反面案例 |
|---|---|
|
与文字有一定的间隔 |
紧紧贴着文字 |
黄金分割的误区
大家或多或少都对“黄金分割”这个概念有一定的了解，它是一个美学概念，这里不再赘述。请注意，WIK排版不要刻意使用黄金分割！！每个人的心中都有属于自己的美学秤杆，这个秤杆与黄金分割无关。不要迷信黄金分割。黄金分割是一个从众多实践经验中提炼出来的数字，而不是美的标准。
在WIKI排版中，适当避免将表格宽度设置成61.8％，或者将文字设置成0.618的倍数等等，因为太过刻意反而失却了黄金分割的内涵。你的排版应该展现给真正的人，而不是展示给机器。我的建议是，将黄金分割作为大众参考系的一种，依靠自己的眼睛去排版，去设计，遵循自己的直觉，展现天然。
滚动条
在WIKI，我们可以使用overflow属性单独为一个元素添加滚动条。元素需要设置宽度和高度，这样滚动条才会生效。
滚动条的适用情景有一定的区别。电脑端浏览通常会配一个鼠标，鼠标的滚轮很方便，所以电脑端页面上下滚动时难度很小，但是左右滚动时就需要用鼠标点击滚动条并拖拽，操作步骤要麻烦一些。手机端浏览依靠的是手指触摸，相较于电脑端，手机端的上下左右滚动都很方便。但是由于大多数页面是从上往下阅读的，如果在其中插入一段上下滚动的元素，那么跳过这个元素就变得麻烦，需要我们不触碰该元素来拖动页面。
综上，我得出几个结论：
一、手机端不要过多使用上下滚动条，否则会造成阅读体验下降。使用上下滚动条时需要在两侧留出边距，元素高度不要超过整个页面高度的50％，使读者更容易拖动页面；可以适当使用左右滚动条增强可读性；
二、电脑端需要克制使用左右滚动条，不要滥用，否则会增加鼠标操作量。可以充分利用上下滚动条增强可读性。
沪公网安备 31011002002714 号