[NGA常用BBS代码][奥运帖]Project N —— 《从入门到精通：排版的艺术 Ver.3》[客户端勿入!！][完稿]

· 第 二 章：高 级 排 版 指 北

[quote]一. 我 想 说 什 么？——NGA排版设计思路

开始写这章的时候我想了挺久的，同时也是每一个原创类帖子都会面临的一个问题——“我想表达的究竟是什么？”。而对于更多的资料搬运类、整理类的帖子，同样也面临着这个问题——“我怎么更好的表达出这些内容？”
NGA这类帖子类型的内容排版不同于平时的一些设计可以有更大的发挥空间，整体呢更类似于word这样的文字为主的图文排版；或者按我的理解来说，更像是在写一篇文章。即使是资料的搬运，如何有条理的、更好的表达出这些资料的主次关系和内容重点，就是需要我们去思考的地方。
也就是说，我认为排版并不只是如前一篇章中那样对一些文字进行修饰美化这样的细节，更重要的是对于整体的条理性把握。当然了，细节也是构成整体印象的重要组成部分，因此才需要先在上一篇中进行介绍。
在这贴中我也只能简单说说自己平时排版的一些思路，并不一定正确，但是呢也许也能给各位看官一些启发。[/quote][quote]二. 核 心 技 能！——常用排版代码详解

那么，在废话了那么多之后，我们现在继续回到具体的代码详解中。这一篇章中介绍的排版与上一篇章的最大不同就在于，它们是更针对于内容整体的排版类代码。也是一般在进行排版时最常使用的。
它们依然是由简单的命令组成，但更加注重与其他排版代码的搭配嵌套使用。

[/quote][quote]· [quote]引 用

[示 例][quote]看到全文一直在使用的这些底框了吗？[/quote] [quote]这些就是引用框了！[/quote]

• 原本是用于在引用其他人的回复时用于显示区别的底框，但在排版中常用于做内容的底框以进行分段、划分内容等多种作用；其代码为[quote]内容[/quote]
• 引用代码是NGA排版中最最常用且效果异常明显的一个，甚至冠以“NGA排版三板斧”之一的名头也不为过。
  • 它经常用于将帖子内容进行分段，或框出需要特别强调的内容
  • 使用引用代码可以清晰的划分出特定的内容
  • 因此，引用代码是我在排版思路提到的对内容进行合理排布时所需要使用的最重要的工具，一个引用框表达一个部分，能够非常方便的控制阅读节奏
• 一般情况，全选复制需要框起来的内容，复制进论坛编辑工具的[quote]按钮里；或者直接自己在首尾两侧输入代码都是常用的方法
• 可以嵌套使用，即最外层套一层引用框，里面的内容还可以再继续套几层，但不建议过多。
  • 但目前手机客户端中，嵌套使用的引用框会显示出错。此bug已提交，但不知何时才能修复。
• 在今年(2016年)年初，NGA整体界面进行了一次全面调整 虽然很多人都没发现
  • 引用框由原先的浅灰色变成了浅黄色，框线也显得更细了。
  • 但是有意思的是不管改前还是现在的颜色，视觉上看起来都有些泛浅蓝。
  • 这一改动使引用框与底色更为融洽，但是略微降低了区别内容的作用。个人是比较希望能增加一个“经典配色”的论坛配色方案的。

[/quote][quote]· [list]列 表

[示 例][quote]

• 一级列表条目1
  • 二级列表条目
• 条目2
  • 二级列表条目
    • 三级列表条目

[/quote]可能看起来还是不明白，但是别慌，其实只要试着用一次就很容易掌握了！只是代码看起来复杂而已。

• 用于将内容进行分层级展示，其代码为[list][*]条目[/list]
• 其中[*]表示条目，也可以理解为每一条前端的小点
• 列表一般会进行嵌套使用，最多可以嵌套至第三级
• 每级列表前段的小点是不同的，缩进量也是逐级增多
• 列表一般常用于陈列资料，或者有层次的介绍内容，配合其特殊的展示效果，也是最常使用的排版代码之一，“NGA排版三板斧”其二！
• 使用论坛编辑工具中的[list]按钮可以方便的进行列表编辑
• 如图所示 ...

  [img]http://pic3.178.com/507/5076687/month_1604/b70b38b4c0bc4e07c38d00f5d5cae635.png[/img]
• 例如本文也大量使用了列表来介绍各个代码，这样层次非常清晰，阅读起来也更有逻辑性和层次感
• 列表中可以继续使用其他的一些代码，例如折叠、表格等
• 需要注意的是，多层嵌套的列表代码在手机客户端中同样无法正常显示，坐等修复
  以及，请注意不要在[list]和第一个[*]之间输入空格，不然会生成一个空白条目，前一版的排版手册中就出现了这个小问题
• 有时候自己排列的1,2,3,4……点内容虽然也可以一层一层介绍内容，但是远不及使用列表来的效果好，可以参考下面的例子进行一下对比：
• 效果对比 ...

  要点： 1.死命按技能1吧！能用就用！ 2.开始的这个硬币一定要吃到，有时候跑太快了会判断成没吃到… 3.还记得增能转化的顺序么？瞬移-火箭-弹簧，看到…… 4. 进第一个柱子里，大约5-6钟进6-7钟出…… 5.接着靠技能，一路往前跑，记得……	要 点 1. 死命按技能1吧！能用就用！ 2. 开始的这个硬币一定要吃到，有时候跑太快了会判断成没吃到... 3. 还记得增能转化的顺序么？瞬移-火箭-弹簧，看到…… 4. 进第一个柱子里，大约5-6钟进6-7钟出…… 5. 接着靠技能，一路往前跑，记得……
  这是我去年写的一篇成就攻略中的内容， [i]虽然当时这样也能一定程度上逐条进行介绍，但是还是会有点杂乱[/i]	使用列表后，就会显得更加整齐且层次清晰 注意“要点”两字的区别，这就是前文所说的细节部分

[/quote][quote]· [table]表 格

[示 例]
[quote][/quote]

• 用于生成表格，表格一般用于数据统计、资料整理等；虽然很少看见有人用于排版装饰，但其实表格是可以创造奇迹的！
  被我称为“NGA排版三板斧”的最后一项！本文中便大量使用了表格进行排版
• 表格中也可以继续加入其它一些代码，例如对齐方式等等
• 其代码比较复杂，包含了[table][tr][td]三个部分(以及不常用的合并行单元格的[rowspan=行数]与合并列单元格的[colspan=列数])，具体如下表所述：
  • 点此查看 ...

    [img]http://pic3.178.com/507/5076687/month_1604/b0d246084b73ca64feb3f20099bc9fa8.png[/img]	[img]http://pic3.178.com/507/5076687/month_1604/7949c65ff6d555666307d1728af37264.png[/img]	[img]http://pic3.178.com/507/5076687/month_1604/c30d75ca51fd065dde98d5e92dc06a16.png[/img]
    table表示最外侧的表格外框	tr则表示表格中的行，每多加一行tr，则表格新增一行	td则表示每行之中的单元格， [i]在tr命令里每多加一行td，则行内新增一个单元格，具体内容即编辑在这之间[/i]

  • 但是现在不需要这么复杂了，因为在2015年的地精新科技帮助下，只需要从excel中复制表格即可自动生成！简直黑科技！

  • [img]http://pic3.178.com/507/5076687/month_1604/070966407384bf4cd8992fc6b29e4172.png[/img]	[img]http://pic3.178.com/507/5076687/month_1604/9b643a075f8d1e08ed1c80b4f463787f.png[/img]	[img]http://pic3.178.com/507/5076687/month_1604/cbfad04357b262c1dcced6763b6e72b2.gif[/img]
    在excel中复制你需要的任意表格， 即使是合并单元格的也可以！ 也可以像这样填入数字标记方便之后替换编辑	然后在论坛编辑框的光标处ctrl+v复制， 提示是否粘贴表格，如选否则只粘贴内容不含表格代码	[i]粘贴后论坛会自动生成代码，此时再进行内容的编辑即可。[/i] 一般也经常会在表格中直接编辑完再全部复制。

  • 上述示例中的表格生成后的样式：
    看看效果！ ...

    1	2
    	3	4
    5	6	7

• 当选择在表格中先编辑内容再贴到论坛时，请善用excel中的“替换全部”功能进行代码的添加编辑！
• 但是黑科技也有完成不了的操作，即“单行单格表格”与“单行多格表格”这两种，使用黑科技是会失效的；
  前者一般可以用引用框替代，并没有什么用处。后者则偶尔需要用到，下面提供了一下这两种的代码，需要的使用的可以直接复制编辑：
  • 单行单格表格 ...

    [quote]

    单行单格表格

    单行单格表格

    [/quote]
  • 单行多格表格 ...

    [quote]

    单行双格表格

    单行双格表格

    单行双格表格

    单行双格表格

    [/quote]
• 表格的总宽度会随着浏览器窗口的大小而自动适应，因此宽度是不固定的。行高也是自动适配内容，是不可控的。
  每列的列宽默认也是会根据内容自动变化，如果每列的内容大小相同或者都比较小时，每列的列宽则默认是相等的。
  但列宽的宽度比例其实是可以调整的！注意是比例，而非具体宽度数值！
  • 调整的方法就是在第一行的td代码后加入一个比例数字，例如[td1] [td2] [td3]表示的便是：第一列列宽为1倍宽，第二列列宽为2倍宽，第三列列宽为3倍宽。若表格是合并单元格时，则用width=X来替换。
    示例 ...

    [quote]

    第一列1倍宽

    第二列2倍宽

    第三列3倍宽

    可以观察一下这个代码：

    第一列1倍宽

    第二列2倍宽

    第3列3倍宽

    [/quote]
  • 那么假如把每列都设置为[td1]，那么每列列宽就都是相等的了
  • 而如果只调整第一个td的比例，则其余列宽依然是自动匹配内容，设置了比例的按照比例来，例如只设置一个[td10]
    示例 ...

    [quote]

    第一列10%宽

    第二列自动匹配

    第3列自动匹配

    第一列10%宽

    第二列自动匹配

    第三列自动匹配

    [/quote]
  • 如果觉得比较复杂的话，有机会尝试一下就明白了，反正这个小功能也很少用到，可以无视

[/quote][quote]· [h]分 隔 线

[示 例]
[quote]
===第 一 种 分 隔 线===

第二 种 分 隔 线

第 三 种 分 隔 线

[/quote]

• 用于添加一条分隔线，通常作为标题的配套使用，其代码为[h][/h]，或者是三个“等于号”，具体区别请先观察一下上方的代码
  • 第一种用法，中间部分的字会自动放大字号(115%字号)并加粗，且下方自动形成一行空行
  • 第二种同样会自动放大加粗中间部分的字，这两种没有任何不同
  • 第三种中间不加任何内容，对前端或后端的内容没有任何影响，标题需要自行加粗放大，前端不加标题的话就仅仅是一条单独的分隔线
  • 这几种用法下的标题文字都可以再添加其他代码装饰，如颜色，或改成更大的字号等
  • 如果是单纯用于分隔，建议使用[h][/h]且中间不添加内容的用法
• 分隔线标题可以非常有效明显的对内容进行分段，配合[quote]引用框使用效果更佳，可以使全文划分出一个一个段落，对内容进行有效的梳理和编排
• 除了标题的作用，分隔线也常用于划分一些内容，使其看起来更有条理
• 分隔线加在内容末端则可以起到“这一部分的结束”的表达效果
• 需要注意的是：手机客户端不显示分隔线
• 还有一种，可以利用破折号实现一些短的分隔线，例如
  ————————————————————————
• 我想要更漂亮的线！
  点此查看 ...

  自 定 义 图 片 分 隔 线
  [img]http://pic3.178.com/507/5076687/month_1604/dd690a3d92a8083c6fc2d7edef089bc6.png[/img]
  
  通过上传这样的图片，也可以实现自定义的花式分隔线哦

[/quote][quote]· [align]对 齐 方 式

[示 例]
[quote][/quote]

• 用于对齐内容(既可以是文字也可以是图片)，其代码为[align=left或center或right]内容[/align]，即左/中/右对齐。NGA默认左对齐，所以不需要额外设置left对齐。
• 可以使用论坛编辑工具中的[align]按钮方便的进行对齐处理
• 居中对齐一般可以用于标题，或者一些特殊内容，如歌词等。右对齐比较少使用。
• 对齐也常使用于表格单元格内，例如本文中的表格中的注释内容就基本上都使用了居中对齐的方式。
• 对齐需要尽量前后统一或者有逻辑性的搭配。一会居中对齐一会左对齐会显得帖子看起来很混乱，包括图片也是。
• 但是对齐方式是对同一行的所有内容进行对齐的，因此无法实现示例中左文右图这样的排版方式(上方仅用作效果示范)，这需要使用到下面介绍的左右悬浮代码。

[/quote]

[quote]· [l/r]左/右 悬 浮

[示 例][quote]

[/quote]

• 用于使内容左/右悬浮，包括文字，图片及视频。其代码为左对齐[l]内容[/l]和右对齐[r]内容[/r]
• 悬浮代码最常使用的地方是论坛签名，配合各种png图片，是那些漂亮的论坛签名最常用的装饰代码。
• 虽然很少被用于正文的排版，但是悬浮代码是目前NGA可以最好的实现图文混排的方式。与表格和对齐方式搭配使用可以排出漂亮的混排效果。
• 如果你要实现左中右(即前一段“对齐方式”中的示例或下方示例效果)，请按照[左悬浮，右悬浮，中央对齐]这样的格式排布即可。千万别按[左中右]来
  • 左右悬浮中也可以再嵌套对齐方式，实现具体需要的效果
  • 注意在左右悬浮代码首尾中间不要换行，也就是[l]内容[/l]<<<这里不能换行>>>[r]内容[/r]，不然会乱掉。其他地方随便换行都没事。
  • 例如 ...

    [quote]

    [img]http://pic3.178.com/507/5076687/month_1604/a843df23aa94593e8d525b00ba596dd2.png[/img]
    喵呜

    [img]http://pic3.178.com/507/5076687/month_1604/5e89a657a46d28be7248f3e7cba89d26.png[/img]
    呜喵

    中间部分如
    果不要的话
    可直接去掉
    或用全角空
    格替代中央
    对齐的内容

    [/quote]
• 悬浮代码在手机客户端中无法显示，悬浮的内容会被直接插在前后文中间。
  • 所以悬浮的内容例如图片，通常都插入在内容最前端，手机客户端中便会将其显示在内容之上。但这不是死板的，很多时候也可以根据特定的情况调整插入位置，例如在文字中间。
• 悬浮内容会被分隔线及表格阻挡
  • 悬浮代码的一大特点就是内容(通常是图片)会悬浮于其他内容及效果之上，例如覆盖在折叠框与引用框上方
  • 但是无法覆盖在分隔线及表格上，善加利用这点也可以实现出左文右图而包裹在同一框中的图文混排效果，例如下方的例子如果不加分隔线，图就会冲出引用框(另外，部分视频类资料可替换成视频，也能起到极佳的效果)
  • 点击打开 ...

    [quote]简 介：

    [img]http://pic3.178.com/507/5076687/month_1603/01c276e6b42f3a2a8012ecc6c1a96b01.jpg[/img]

    [img]http://pic3.178.com/507/5076687/month_1603/654f387675a13534df56ccf71d4253be.jpg[/img]

    改编自石冢千寻创作的漫画作品《飞翔的魔女》(《ふらいんぐうぃっち》)。
    讲述的是来自横滨的魔女木幡真琴(こわた まこと)，为了独当一面而寄住在青森乡下的亲戚家里的普通而又怪奇的日常故事。
    
    原作刊载于《别册少年Magazine》(讲谈社，国内由台湾东立出版社引进)，因其清新治愈的风格和清秀漂亮的画风而广受好评，现已出版至第四卷。
    于2015年7月31日宣布由J.C.STAFF进行TV动画化(共12话)。
    
    日本播出时间：日本电视台(日本テレビ) 4月10日(周日)AM2:25 青森放送 4月16日(周六)AM1:27
    国内播出时间：[url=http://www.tudou.com/albumcover/x2MhV5ieFWE.html]土豆[/url][url=http://www.soku.com/search_video/q_%E9%A3%9E%E7%BF%94%E7%9A%84%E9%AD%94%E5%A5%B3?f=1&kb=040200000000000__%E9%A3%9E%E7%BF%94%E7%9A%84%E9%AD%94%E5%A5%B3&_rp=1460242503724v8PvEp&_rp=1460242503724v8PvEp]优酷[/url][独播]4月10日 AM5：00
    官方网站：[url=http://www.flyingwitch.jp/index.html]点此进入[/url]

    [/quote]
• 悬浮配合PS的切片还有一种小技巧
  点击展开 ...

  [quote]

  [img]http://pic3.178.com/507/5076687/month_1604/a904cd5045b9edb4fff71ac42c2f500a.png[/img]

  
  
  
  
  
  
  
  有网页设计或马云之类的电商设计经验的人都很熟悉的PS的切片功能
  配合悬浮代码将图片切片后分为几块进行重新拼接，例如此示例中先将图片左侧进行左悬浮，后面正常排上文下图
  再配合换行调整图片位置之类的小细节，就能实现像这样的图文混合效果
  这里再补充一点，如果连续使用多个左悬浮或右悬浮，图片也可以依次紧密排列，例如上一个示例中右侧两张图片的效果
  但由于限制较多要求较高，且在一些小屏设备如win平板中如果浏览器自动放大比例就可能使切片显示错位，因此这里不展开介绍。
  [img]http://pic3.178.com/507/5076687/month_1604/17d25c6dccaa9b531f19425f0a241f98.png[/img]

  [/quote]

[/quote][quote]· [ ]全 角 空 格 此条已遭NERF，现已无效！

[示 例]
[quote] 好像很多人不知道怎么使用空格来缩进或者使文字移位？你需要这个！全角空格！



[/quote]

• 如果有过排版经验的人大都知道，NGA是不支持空格来进行缩进或文字移位的，除了标题里的一些有作用的空格，一般无意义的空格都会自动被吃掉。
• 其实要实现空格的方法非常非常简单...看到你屏幕下方的输入法小窗口了吗？鼠标点一下把那个月亮变成太阳，也就是把半角符号改成全角符号。此时输入的空格即算一个独立的空间了....
  是不是突然发现好简单[s:ac:偷笑]
• 全角空格即便是手机端也会显示为空格的
• 也可以把这种方式作为占位符，撑开引用框以配合一些悬浮图片的效果
  • 具体方法是在引用框[quote]内输入“空格，换行，空格，换行……重复多次”即可，普通空格即可，不需要全角，严格的说，直接换行就行...空格都不需要
• 唯一不足的就是，每次你重新编辑的时候就得重新来一遍，不然会失效，不过反正打几个空格也不费事儿
• 另外，当全角空格的内容被进行了折叠后也是会失效的

[/quote][quote]旅 途 的 终 点？——第二篇章总结

如果能坚持看到这里，并且基本上大致浏览了上文的内容，恭喜你在NGA排版之旅的道路上抵达了终点！ ？ 在今后的帖子内容编辑中，如何去运用去实践这些排版方法就是应该去多多练习尝试的一个过程了。
同样的这些技能，运用的熟练程度，和多样性的尝试才是能真正区分排版技巧的地方。而多多观察，参考学习在平时逛论坛时所看见的排版优秀的帖子也是一个极其重要的经验积累。
这里提供一个小技巧，在你看到精彩的排版方式时，可以通过查看帖子的源码来研究一下具体的排版方式。此外还有一些偶尔会用到的论坛工具类代码，欢迎往第三篇章查看。而在第四篇章中，则是针对一些版头设计的相关内容。

[/quote][quote][/quote]

[quote][/quote][quote][/quote][quote]
· 故 事 梗 概：

[/quote][quote]
· S T A F F：

[/quote][quote]
· 主 要 角 色：

[quote][/quote][img]http://pic3.178.com/507/5076687/month_1604/3dc0cb830683de381d65a8c53d24d9f1.png[/img][/quote][quote][quote]石 田 将 也 CV:入野自由、松冈茉优(小学时代)
小学时期是孩子王。但是在于硝子之间发生了某件事情之后，他便开始被周围人孤立。
那之后的他，每天都生活在于孤独和自我厌恶的战斗之中。[/quote][/quote][quote][/quote][quote]
· 音 乐：

[/quote][quote]
· 企 划 合 作：

电影与日本文部科学省展开合作，并联合制作成主题为《勇敢传达内心的声音(勇気をもって心の声を伝えよう)》的海报，在全国的小学、初中、义务教育学校、高等学校、中等教育学校、特别支援学校等展开宣传。旨在起到防止校园欺凌及自杀，并对残障儿童的关怀进行普及的作用。
[/quote][quote][/quote]

· 第 三 章：地 精 科 技！

[quote]一. 地 精 科 技 值 得 信 赖！——工具类代码介绍

这一章节篇幅较短，主要介绍了一些日常偶尔会用到的工具类代码，例如ROLL点之类的。也有一些比较有趣的小玩意儿哦！[s:ac:blink]
不过，以下大部分的内容都是不支持在手机客户端显示的，请务必注意！
[/quote][quote]· [fixsize/style]

新增了一个高级代码，具体请见：[pid=182876471]海报画册[/pid]
[/quote][quote]· [[多种游戏数据库]]

[示 例]
[quote][/quote]

• 最新版地精科技，融合了曾经的[法术]、[技能]、[物品]等等数据库资料代码，点击后可在论坛内直接显示数据库资料，如显示错误可以多点击几次
• 这一工具是编写游戏类帖子时非常好用的素材，请善加使用！
• 使用论坛编辑工具中的[[多种游戏数据库]]即可方便直观的添加物品或法术技能，目前支持WOW，D3，炉石，LOL四个游戏。如下图
  • 点击展开 ...

    [img]http://pic3.178.com/507/5076687/month_1604/e849f0206374626f543b7a10e3a504ae.jpg[/img]
  • 虽然这个工具左侧说明写了很多，不过基本上只要保证你所要使用的数据库资料名称正确即可，
    例如示例中的“爱情火箭”，选中魔兽资料库，名称填入“爱情火箭”四个字即可。
  • 如果数据库中含有多个重名数据，点击时会显示多项内容供选择，例如示例中的“火球术”
  • 也可以直接去数据库获取论坛的显示代码，但有些物品或技能可能没有提供论坛代码，所以建议优先使用论坛编辑工具
• 数据库资料在点击展开后可以查看到图片和更多资料，但如果你想像上方示例中直接展示相关图片怎么办呢？下面简单介绍一下通用的网络图片抓取技巧：
  • 点击展开 ...

    [img]http://pic3.178.com/507/5076687/month_1604/4a88314e558bf3fcfb8dd90bcd5f013b.jpg[/img]	[img]http://pic3.178.com/507/5076687/month_1604/9de80fae00c2fb04d016ab221fafd3c0.jpg[/img]
    绝大多数的网络图片都是以[网络图片地址]的形式储存在互联网上，也就是说，基本上只要你能在网上看到的大部分图片，都有办法取得它的图片地址(一般来说，请确保你所获取的图片是合法可用的，不要非法盗图)。这些游戏资料的图标都可以在各自的178数据库中找到。首先在你需要的图片上右键，点击“审查元素”。	在弹出的“审查元素”界面中，找到“Resources(资源)”这个标签后点击，就可以在下方列表中找到一个“images”的文件夹，此时就会发现这一网页内几乎所有图片资源都可以在此找到对应的图片地址，也可以将图片保存到本地重新上传到你的相册。这是一个通用的方法，不仅仅适用于NGA的排版素材获取。

  • 不论是直接获取了图片地址，或是保存到本地电脑后重新上传到相册后，就可以使用常规的方法在帖子中使用这些素材了。
  • 值得注意的是，炉石传说的卡牌图片非常大，请在合适的情况再使用。上方示例中我做了缩小处理。

[/quote][quote]· [tid/pid]插 入 主 题 / 回 复

[示 例]
[quote]
插入主题：
[tid=9268613]排版的艺术ver.3[/tid]
插入回复：
[pid=181035899]图文混排示例[/pid]
[/quote]

• 用于插入一个主题帖子或一个回复，点击后可以打开该主题或回复的链接地址。
• 这是NGA使用频率最高但是最没存在感的代码，当你按下回复按钮去回复帖子时其实就是在使用这一代码。
• 但是2016年地精科技更新后，使用此代码后点击右侧的[T]或[R]按钮，可以直接通过一个浮动窗口显示该主题或回复。
  这使得这一代码有了突破性的进化！在查看所引用的回复时是个极其方便的功能。预览一些主题帖时也比较方便，但主题帖往往内容较多，会弹出一个超大超大的浮动窗口....
• 如果当你需要使用这一功能，请直接使用论坛编辑工具。
  • 其中的主题ID和回复ID在哪里查看呢？请点击帖子或回复右上角的[按钮]，就能方便的找到ID了
    点此查看 ...

    [img]http://pic3.178.com/507/5076687/month_1604/c721adde99bb8f6c2f100dea1d8113e1.jpg[/img]
  • 而对于此主题或回复的注释文字，也可以使用加粗等进行装饰

[/quote][quote]· [dice]ROLL点/骰 子

[示 例]
[quote][/quote]

• 一般用于论坛活动时roll点，其常规代码为[dice]d100[/dice]；即在ROLL取100以内的随机数字
  • ROLL点还有其他一些形式不过极少用到，具体详见论坛编辑工具中的描述或下方折叠内容
  • 其余形式 ...

    [dice]2d6[/dice] 投两个6面的骰子 (2~12)
    [dice]2d4+2d6[/dice] 投两个4面的骰子和两个6面的骰子 (4~20)
    
    骰子面数不能超过1000,一次最多投10个骰子
  • 一般ROLL点活动发起者会展示并规定具体的ROLL点代码，知道常规100点的ROLL点方式即可
• 投骰结果使用随机数计算，以帖子ID和发帖人ID做为种子，故引用他人的投骰代码会得到不同结果。
• 编辑自己的ROLL点帖子也不会发生改变， 欧洲佬吃我一矛啦！

[/quote][quote]· [album]相 册

[示 例]
[quote][album]
[url]http://pic3.178.com/507/5076687/month_1604/953b7face6de446603d4daba2ddc98eb.jpg[/url]
[url]http://pic3.178.com/507/5076687/month_1604/826376fdb66bcf2094699ff6af57410d.jpg[/url]
[url]http://pic3.178.com/507/5076687/month_1604/aeefc64e60a488d073ad49a3361f6e37.jpg[/url]
[/album][/quote]

• 用于大量图片的展示，合并为一个相册能节约大量帖子正文的空间。其代码为[album=相册名]图片地址，每行一个，不需要加img标签[/album]
• 如果使用附件形式上传大量图片，也会自动储存于相册中
• 什么？你问我为什么为什么会出错看不了？四年前的排版手册也说相册不靠谱？？ 地精科技值得信赖！品质如一！
• 值得一试！ 所以还是尽量别用这个了

[/quote][quote]· [Flash]录 音 & 小 视 频

[示 例]
[quote]
NGA官方手机客户端所录制的小视频及录音[/quote]

• 随着这几年来NGA客户端的不断发展，也带给了我们很多有趣的功能，例如发送语音录音和小视屏
• 在客户端编辑界面点击录音或录制视频并上传后即可使用
  • 点击展开 ...

    [img]http://pic3.178.com/507/5076687/month_1604/0b4d2dc21aebfd8a7fe900a27be792c8.jpg[/img]
• 录音的时间上限为3分钟
• 但是，地精科技真的只有这么简单？
  • 点击展开 ...

    [quote] [/quote]

    下面开始这一地精科技的真 · 介绍： 用于插入一段视频或音频，其代码为[flash=audio]音频附件名[/flash]，[flash=video]视频附件名[/flash] 其中的音频与视频文件作为附件形式存在，视频宽度控制在480为宜，且大小不超过4mb，格式为MP3和MP4，作为附件上传至帖子内即可。其余格式是否可用请自行尝试。 这一黑科技没有音频时间上限的限制，不过鉴于体积限制，就请不要指望画质和音质的质量了 视频及音频请使用一些专门的软件进行压缩、转码和截取等操作，简单的例如QQ影音和格式工厂之类的即可，此处不作展开。 这个代码可以插入表格，引用框等代码内，但是对齐方式无法对其生效。 为了服务器问题考虑，请不要过多使用此黑科技。 Chrome内核的浏览器可能出现小视频只有声音没有画面的问题 听说最近某首歌很洗脑？来试试呗！ [img]http://pic3.178.com/507/5076687/month_1604/a963f1996c93d07bda9d83db1ebffd9d.gif[/img]

[/quote][quote]· [crypt]内 容 加 密

[示 例]
[quote][crypt]^}^]^{=:W%1F3^{#|[/crypt]
密码提示：“不是UFO，是******，比这个略小一点”(记得是小写字母，本帖内有答案)
加密功能似乎出现了bug，暂时不要去试密码了[/quote]

• 用于加密一些内容，一般极少用到。请使用论坛编辑工具中的[crypt]来添加
• 虽然密码版主不可见，但是如果想借此发车的话， 你还是会死的 [s:ac:嘲笑1]
• 一般会加一些密码提示啥的，根据具体情况判断吧
• 由于地精科技的升级，上一版排版手册中提到的密码会于附件显示的问题已经不用担心了

[/quote][quote]· [randomblock]随 机 段 落

[示 例]
[quote]
来测一测你今天的运势吧：
[randomblock][s:ac:偷笑]今天的你是一条咸鱼[/randomblock]
[randomblock][s:ac:嘲笑1]咸鱼的命运是改变不了的[/randomblock]
[randomblock][s:ac:哭笑]不要挣扎啦！你属于非洲！[/randomblock]
[randomblock][s:ac:抓狂]吔屎啦！欧洲佬！[/randomblock]
[randomblock][s:ac:抠鼻]玄不改非，氪不改命，为什么不明白？[/randomblock]
[randomblock][s:ac:上]非洲大酋长的位置我当定了！[/randomblock]
[/quote]

• 用于随机显示一段内容，其代码为[randomblock]随机内容1[/randomblock][randomblock]随机内容2[/randomblock]……以此类推
• 随机段落代码一贴内只显示一个，每次刷新会随机选择一段显示。其中的内容可以是文字或图片或表情等等
• 随机段落会以折叠标签的形式展示，然而那个加号是打不开的
• 但是一般只用来进行类似这样的娱乐，或许在游戏新版本选择首发职业时也可以试试哦！
• 更新：为配合新功能[fixsize/style]，随机段落的展示形式已经修改过了！具体请参阅本篇章中的具体介绍

[/quote][quote]· [@用户名]发 送 提 醒

[示 例]
[quote][@nnexus]直接点击也可以进入该用户个人资料[/quote]

• 用于在帖子内向目标用户发送一条提醒，对方会收到一条系统通知。和QQ中的用法相同。
• 由于关系到其他论坛用户，因此没有必要的时候不要随便乱用
• 请注意在召唤时输入的用户ID不要出错

[/quote][quote]· [t.178.com]178 尾 巴 / 微 博

[示 例]
[quote]前几年呢，178推广了一个叫做178尾巴的功能，类似于微博。当然现在似乎是没看到有人还在用了。
因此这里借这个代码来介绍一下新浪微博的展示方法。
[url=http://weibo.com/u/3973248709?s=6uyXnP][img]http://service.t.sina.com.cn/widget/qmd/3973248709/2a643e7f/1.png[/img][/url][/quote]

• 生成这样一个微博图片需要使用微博的一个[url=http://app.weibo.com/tool/signature]论坛签名应用[/url]
• 它实质上是使用了图片超链接的方式来达成的，只是这个图片会随着你的微博内容自动变化
• 注意这个工具的页面内页可以选择几种图片样式，选个自己喜欢的吧
• 4月底这几天该应用的头像框显示有bug，等渣浪修复即可

[/quote][quote]· [achieve/customachieve]成 就 / 自 定 义 成 就

[示 例]
[quote]

• 《魔兽世界》成就：
  [achieve=733,cn]大师级专业水准[/achieve]
• [customachieve]
  [title]大师级专业水准[/title]
  [txt]在某一专业中，获得375点技能点数。[/txt]
  [img]http://img.db.178.com/wow/icons/l/inv_misc_note_01.jpg[/img]
  [/customachieve]
• 自定义成就：
  [customachieve][title]我们的演奏仍将继续！[/title]
  [txt]《吹响！上低音号》讨论专楼一周年
  [奖励：《吹响！上低音号》第二季][/txt]
  [img]http://pic3.178.com/507/5076687/month_1604/09f28a096bcf807ac7123eecd1e2d3ec.jpg[/img][/customachieve]

[/quote]

• 用于显示《魔兽世界》中的成就，或自定义的成就。
  • 魔兽世界中的成就在NGA论坛分为2种样式，第一种为数据库资料样式。类似于超链接，但点击后会直接调用数据库显示该成就的详细内容。
  • 第二种则是显示具体的成就框图片,这两种一般配套使用
  • 这两种都可以直接在[url=http://db.178.com/wow/cn/achievements.html]178魔兽数据库[/url]获取论坛代码，如下图
    点击展开 ...

    [img]http://pic3.178.com/507/5076687/month_1604/26d2f2462d3cc07541880d85431c0141.jpg[/img]
    前一个为数据库样式，第二个为成就框样式
• 自定义成就请直接修改上方的代码即可，或者使用论坛编辑工具。
• 自定义成就的图标是可以自己换的，似乎有些人不知道这点；如果是自己做的成就图标，建议控制为56*56像素
  • 写这部分时翻阅旧帖看到有人询问是否能修改自定义成就描述中的字体及颜色，实际上是可以的，使用加粗，颜色，字体等代码即可修改。
  • 但是！根据我刚刚调试了快半小时的结果，不管怎么折腾都不如原先这样好看，所以别折腾啦！

[/quote][quote]· [armory]英 雄 榜

[示 例]
[quote]

• 魔兽世界英雄榜
  [cnarmory 米奈希尔 铠塚霙]
• D3英雄榜
  [cnd3armory 昔影#5721 1095621]
• 坦克世界信息
  [cnwotarmory s 洛拉斯之刺]
  注：坦克世界我没玩过，借用了论坛编辑工具中的示例
• 守望先锋资料(OW的签名随机显示游戏场次最多的三个)
  [cnowarmory 英俊潇洒俊三体#5313]
  注：守望先锋我也没玩，借用了一个签名作为示例

[/quote]

• 用于显示游戏中的玩家资料，通常用于论坛签名，目前支持魔兽世界，暗黑破坏神3及坦克世界，加上新增的守望先锋这4款游戏。
  • 可以使用论坛编辑工具直接添加魔兽世界的英雄榜
  • D3英雄榜的论坛编辑工具注释有误，详见[url=http://bbs.ngacn.cc/read.php?tid=8375563]D3角色签名设置[/url]
  • 坦克世界的玩家资料签名设置详见[url=http://bbs.ngacn.cc/read.php?tid=7780696]坦克世界战绩签名[/url]
• 其余一些手游或其他游戏也有可获取角色资料的途径，一般在对应论坛版块或相关网站可以找到。例如舰队collection或战舰少女R等等。
• 目前论坛的英雄榜显示出错，需等待网易修复 英雄榜修好啦！

[/quote][quote]· [code]代 码

[示 例]
[quote][/quote]

• 用于展示代码，代码展示框中的代码不会转变为具体的样式，其代码为[code]代码内容[/code]
• 代码框无法在客户端中显示，会直接转为具体样式，这也是本帖不能使用客户端阅读的主要原因
• 当代码内容过多时，会自动生成滚动条方便阅读。
• 如果你想像本帖一样不使用代码框而显示出代码，用任意装饰代码打断代码的显示即可，例如
  • 比如用默认字号代码打断加粗代码的效果，[b]就像这样[/b]
  • [b]就像这样[/b]

[/quote][quote]二. 请 不 要 按 这 个 红 色 按 钮！——不常用/不推荐使用代码简介

千万不要按哪个按钮！虽然这么说，不过肯定有人会去按比如某铜须或某熊猫。有些代码也是同样的，极少会用到或并不推荐使用，但确实有点意思，所以还是简单的介绍一下。[/quote][quote]· 特殊字符

[示 例]
[quote]
比如颜文字
∑(っ °Д °;)っ
或者 &#9832;&#10084;&#9836;&#225;&#246;等特殊符号
[/quote]

• 这是一个不建议使用的功能。
• 可能有些人会发现，NGA有些特殊的字符是无法显示的。至于为什么，我不是码农并不懂所以请请去问二哥 。
• 但是使用[url=http://tools.jb51.net/table/html_escape]转义字符[/url]则可以实现这些特殊符号的显示。例如&#9824;，直接使用无法显示，但使用&#9824;这串转义字符便可以实现显示
• 至于颜文字，有个小技巧，直接复制其他网页中例如B站中的颜文字粘贴至NGA，只要你不再去编辑它，就是可以显示的。
• 这种情况是非常少见的，一般除了俄语法语等外语，并不会使用一些特殊字符。并且，手机端不支持转义字符，会显示回这些字符
  所以除了例如本帖这样强调了不要用手机客户端浏览的特殊帖子，一般并没有什么卵用...比如你输入一个颜文字为了卖萌，结果人家客户端看是一串字符，这样就很尴尬了
• 不过可以用于签名和版头，签名和版头一般只在网页端展示，因此是个不错的使用时机！

[/quote][quote]· [sup/sub]上 / 下 角 标

[示 例]
[quote]上下角标^{这是上角标}_{这是下角标}[/quote]

• 这是一个极少使用到的代码，但是手机客户端可以显示，因此可以使用
• 用于添加上/下角标，一般会在数据帝们写各种公式的时候用的，简单例子比如X²
• 其中[sup]为上角标，[sub]为下角标，连续使用即可实现示例中同时出现的效果

[/quote][quote]· [iframe]嵌 入 站 外 页 面

[示 例]

• 用于嵌入一个外部网站的页面，如上方示例，限定大小后由于没有滚动条，效果并不是很好，也几乎没有见到有人使用。也许网站工作人员偶尔会用到
• 高度像素和宽度像素可以不输入，则嵌入一个非常大的页面在帖子中，并不是很美观。
• 目前支持嵌入的只有以下4个网站
  • wow.178.com/
  • challonge.com/
  • model.wows.ga/
  • arp.wows.ga/
• 总之个人用户非常不建议使用此功能，网站工作人员有机会可以尝试使用

[/quote][quote]警告：该机器人随时可能爆炸！——第三篇章总结

NGA提供的这些方便的地精科技，给日常阅览帖子、开展论坛活动等等提供了许多的乐趣。
但是，对于排版来说，他们只是提供辅助的工程学道具，火箭靴能帮助你躲过一次攻击，但不能替你进行攻击，更有发生爆炸的危险。
因此，请不要胡乱的使用这些小工具，而是在合适的时机使用他们！

至此，关于NGA的排版代码介绍就正式结束了！每一个都不难掌握，但是难点在于如何把他们合适恰当巧妙的组合起来，这是一个需要长期实践和去大胆创新的过程。
下一篇章呢是关于版头排版设计的一些介绍，在其中呢会介绍最后一个排版代码。有兴趣的也可以继续看下去！
[/quote]

· 第 四 章：版 头 设 计(以下版头内容均以过气[s:a2:恨])新版内容有空再填坑

[quote]一. 什 么 人 想 看 什 么？——NGA版头分析

其实本来是不太想写这一篇章的，这感觉就像一个90级的小号对着一群史诗团本毕业的大佬们高谈阔论一样显得特别的班门弄斧。不过一方面是为了有一个合适的地方介绍headline这个代码，另一方面，也是难得有机会从一个论坛普通用户的角度去聊聊版头的设计。所以就来简单谈谈吧，如果多少能有点用就好了！[/quote][quote]版 头 的 分 类

NGA的版头与其他一些论坛对比起来都是非常特别的存在。要说为什么的话，大部分的传统论坛版头都是几个单纯的彩色加粗标题帖子列表，下面一条分隔栏区分出版头区和主区域。而NGA不一样，除了quote引用框和直接用的img图片标签不可用，上文中几乎全部排版代码都是可用于版头的。因此也使得版头更富有多变性。
但是呢，尽管版式上更加特别醒目，往往版头却还是依然成为了最阿卡林的存在，毫无存在感，前日和一个版主交流时他说“帖子一进版头就死了”。究其原因呢我认为是绝大多数的论坛用户都在潜意识中将版头区别于他想要看的内容，因此在进入版面的第一反应，是滚动鼠标滚轮，“视觉焦点”锁定到了第二屏也就是版块主区域，这时版头就自然而然的被跳过了。所以不管是有意还是无意的安排，目前各区版头设计都比以往更加长，占了相当大的一个区域，也一定程度的缓解了一些薄弱的存在感。

我大致把NGA的版头风格分为了三种：

• 一. 表 格 排 布 类 ...

  [quote]一. 表 格 排 布 类

  [img]https://img.nga.178.com/attachments/mon_201604/23/-12323593_571b794522ac5.png.medium.jpg[/img]

  这里以刚刚升级正式版并更换了版头的[url=http://bbs.ngacn.cc/thread.php?fid=-149110]战舰少女R版块[/url]为例

  • 表格排布类的版头是NGA最为常见的版头设计，没有之一。主要用于用户需要查阅大量的相关资料，或经验心得等攻略文章的游戏版块。
    而表格会广受推崇，一个原因就在于极其方便的对版内的内容资料进行了最直观的归类及划分。例如舰R区的这个新版头，从游戏下载、新人入门到更具体的资料分类，非常直观，一目了然。
    另一个则是上文提到的“视觉焦点”问题，这一类型的版头往往都较长，特别是像炉石区这样需要陈列大量卡组资料的版块。
    如果我一进去鼠标滚轮下拉到第二屏(注意这往往是一个下意识的动作)，发现下拉后我的视觉焦点内并不是主区域，而是版头区域，那么此时就会有更大的概率去查看版头中有些什么。
    因此事实上版主们也都是这么做的，几乎所有游戏版都采用了这样的分类排布方式。

  • 这类版头针对的用户我归纳为“获取型用户”，这类论坛用户来到某一版块中所需要的是获取尽可能多且有价值的资料，他们中很大一部分并不会主动参与到论坛讨论中，而剩下的一部分则却可能是版块流量和内容的主要提供者。
    所以如果要创建一个新版块，假定目标受众用户会是这类人群，那么使用表格排布对内容进行分类无疑是最稳妥的。然而表格内的内容需要大量帖子作为支撑，那么怎么办呢？
    先由版主设计好表格分类区域，再引导论坛用户对这些分类进行有计划性的攻略和资料编写奖励活动。看到活动贴说“版头的XX分类里有人愿意来写一个么，有奖励哦”，起码我是会非常愿意的。
    这样既不用等一些苦力们匆忙去写这些大量的内容，又可以带动初期的版面气氛，类似在炉石区的征集版头卡组的活动。个人是比较建议这样的方案。(当然了，这些都是一些空谈，版主们请轻喷)

  • 而表格排布的方式还有一个值得注意的是，当大量资料排布到表格中时往往会造成东西太多了找起来很麻烦的问题，怎么更合理的进行分类归纳，又怎么突出重要内容就是非常关键的。
    这里推荐看一下[url=http://bbs.ngacn.cc/thread.php?fid=411]宠物区[/url]的完整版头。宠物区版头的这份表格并不复杂，没有其他区那么多的单元格，你要说内容量少吧也并不少，但是非常清爽。
    用最醒目的颜色标出版规及重要资料，以及通过颜色划分帖子类别，---&#8880; 特殊符号&#8881;---的灵活运用，字体加粗，包括new标识等等，无一不是从细节处使得整个版头看起来更加细致整洁，在使用阅读上的体验非常舒服。

  [/quote]
• 二 . headline图文类 ...

  [quote]二. headline 图 文 类

  [img]https://img.nga.178.com/attachments/mon_201604/24/-12323593_571c3b2111170.png.medium.jpg[/img]

  这里以镶金玫瑰区[url=http://bbs.ngacn.cc/thread.php?fid=254]镶金玫瑰旅店[/url]为例

  • headline是指这样左文右图结构的一个排版代码，也是本篇下节主要介绍的内容(虽然版主们肯定都会，只是找个地儿写这个罢了)。
    这样的版头基本代表了我记忆中的NGA传统版头类型，现在越来越少，很多都改成了表格。而headline也退居二线，成为了个人版及一些“同好会”版块的特征。
    所谓“同好会”，我是这么定义的：基本可以等同于CCQ中的休闲玩家，没有带着一个具体的目的性去寻找资料，只是单纯的凭着兴趣点进版块，找点什么来打发时间。当然也不乏一些真爱粉对某一领域有着充分的研究和独到的见解，他们需要有一个交流和发表的空间。
    这就是这类版块给我个人的印象。而往往是这类版块，却会出现一些特别优秀的排版精美内容充实的主题。

  • headline是版头唯一可以展示图片的途径，而图片也如我前文所说，是能带来大量信息量的元素。因此也是吸引住这些“爱好者们”一个绝佳的方式。即使是不自觉的下拉，下拉过程中眼睛捕捉到了大块的图片内容，在这种文字为主的页面也会引起论坛用户注意。
    但是当2-3次后，大脑中对这一信息有了储存，下次可能就又会直接无视版头了。所以偶尔换换版头窗帘图也是有点必要的。
    左侧文字区其实可以套用很多其他的代码来实现一些效果，但一般常用tid陈列一些常用资料和精华内容。

  • 现在也有一些例如宠物区这样的版块，在headline下方折叠表格来陈列具体资料，而在headline文字区标示版规，这也是一种值得学习的思路。 唯一的缺点就是折叠后可能有些人就找不到了。
    如果新建设的版块符合这一定义，相比表格也是更建议优先使用headline的，要说为什么的话，“有趣”应该是最好的解释。而文字区的排布也可以多花些心思，比如说实际上表格也可以嵌套在左侧，这里具体在下面介绍headline代码时再说。

  [/quote]
• 三 . 文字类 ...

  [quote]三 . 文 字 类

  [img]https://img.nga.178.com/attachments/mon_201604/24/-12323593_571c84cf5768c.png.medium.jpg[/img]

  例如IT区[url=http://bbs.ngacn.cc/thread.php?fid=436&ff=-74]消费电子 IT新闻[/url]为例

  以加粗，大号的文字强调版规构成的版头。目前似乎只有水区及IT区采用了这样的方式。
  此类版头是基于版面的特殊性才会出现的，除非新建版面也是这样以论坛用户的交流发言为主的，不需要陈列什么资料的类型，否则不建议采用这样的版头形式。这里就不展开讨论了。
  [/quote]
• 最新补充了一个[fixsize/style]代码实现的酷炫版头形式！(2016.6.20)[url=http://bbs.ngacn.cc/read.php?pid=182876471]请点击查看[/url]

所以，假如要新开个人版或新版面，先想一想版面的类型和受众是什么样的论坛用户，再反过来决定如何设计也是一个比较方便的思路。[s:ac:goodjob] 为什么写完我觉得码了一堆废话？？ [/quote][quote]二. headline!——图文类版头代码介绍

需要先对不熟悉这个代码的坛友说明，这一代码并不是版头专用，你同样可以运用到帖子正文以及签名中。但是由于其特殊性，在帖子正文中并不太适合出现，且客户端不支持，代码本身比较麻烦也很少有人用于签名。所以基本上还是用于版头为主。 headline代码是目前唯一可以支持图片在版头展示的途径。其余img标签在版头均无法显示。 (5月份新增的：[fixsize/style]表示不服)[/quote][quote]· [headline]版 头

[示 例]
[headline][tid=4111410]艾泽拉斯国家地理通用版规[/tid][/headline]
[headline][tid=4111410]艾泽拉斯国家地理通用版规[/tid][/headline]
[headline][tid=4111410]艾泽拉斯国家地理通用版规[/tid][/headline]
[headline][tid=4111410]艾泽拉斯国家地理通用版规[/tid][/headline]
[headline][tid=4111410]艾泽拉斯国家地理通用版规[/tid][/headline]
[headline][url=http://bbs.ngacn.cc/]也可以加链接[/url][/headline]
[headline][hltxt]注意左侧的小图标
这是必须与headline配套使用的[hltxt]的独有标志
在headline中要输入文字必须使用这个代码，单独使用会无效[/hltxt][/headline]
[headline][hltxt]

• 列表也必须使用再套一个hltxt才可使用
• 通常会使用tid代码来陈列帖子
• 最多显示三列，底色会自动调整
• 图片在版头不显示 ...

  [img]http://pic3.178.com/507/5076687/month_1604/e7be4cb5a04b797ce40b0442042f8e58.png[/img]但不显示于版头
• 也可以使用折叠标签 ...

  也可以使用折叠标签[url=http://bbs.ngacn.cc/]也可以加链接[/url]

[/hltxt][/headline]
[headline][hltxt]内容如果过多会生成滚动条，含有链接的代码会最优先显示，不可与其他效果混用，除非包含在折叠里[/hltxt][/headline]
[headline][hltxt]右侧的图片宽度会在下方详细说明[/hltxt][/headline]
[headline][hltxt]图片左上角也可以加链接或文字[/hltxt][/headline]
[headline][hltxt]多张图片会合并展示[/hltxt][/headline]
[headline][hltxt][/hltxt][/headline]
[headline][url=http://bbs.ngacn.cc/]也可以加链接[/url][img]http://pic3.178.com/507/5076687/month_1604/812107175a12c0dfca31e6387431f4b2.jpg[/img][/headline]
[headline][hltxt]也可以加些文字，包括列表

• 但是加列表会显得很蠢

[/hltxt][img]http://pic3.178.com/507/5076687/month_1604/c0520ff3fa562edb987c259a8ff5ef8a.jpg[/img][/headline]
[headline][img]http://pic3.178.com/507/5076687/month_1604/66d81103af9fa961901a029bf6c54d4e.jpg[/img][/headline]
[headline][img]http://pic3.178.com/507/5076687/month_1604/1f721532ef7bd1e5de5607937f249d2e.jpg[/img][/headline]

• 用于显示一个如上方示例的版头样式，其代码为[headline]具体内容[/headline]
  • 右侧显示图片区，在headline内再嵌套img代码即可显示，例如[healdline][img]图片地址[/img][/headline]，多张图片需要重复使用此串代码，多张图片会滚动播放
  • 左侧显示文字区，在headline内再嵌套hltxt代码即可显示，例如[healdline][hltxt]文字，也可以是列表或折叠框[/hltxt][/headline]，hltxt代码必须与headline配合使用，单独使用无法显示
  • 在图片前加上文字hltxt或链接url，则可在图片左上角显示，例如[healdline][url=链接]链接文字会自动放大字号[/url][img]图片地址[/img][/headline]
• 还有一些具体的说明参考上方示例，此处不再赘述，只补充以下几点：
  • 关于图片，headline的图片宽度在帖子中与设置为版头显示是不同的，一般以版头展示时的宽度为准。图片宽度小于实际显示宽度则会再平铺一张。例如猴区的版头：[url=http://bbs.ngacn.cc/thread.php?fid=-447601]二次元国家地理[/url]
    [img]http://pic3.178.com/507/5076687/month_1604/7ba17136bd71c94b5c9f8596a4451c25.png[/img]
    图片宽度会随着浏览器窗口大小及显示器大小而改变(23寸显示器1920*1080分辨率下宽度为1053像素)，因此很难给出一个非常合适的宽度，
    高度则请用240像素。
    • 一般有三种思路，一是类似猴区这样用大约540像素宽的图片，保证小屏幕小窗口下的显示，大窗口则显示为2张平铺的效果；
    • 或者用750-850左右宽度，在大小屏之间取得一个平衡，推荐使用这类；
    • 再或是直接用1100左右的大图片，放弃小屏，保证大屏效果(为了小屏用户考虑的话建议还是不要用这种)
  • 图片左上角会自动带有一个渐变黑色阴影，如果添加链接或文字则默认显示白色且自动放大字号，对比度非常明显，一般不用特意再去改变颜色
  • 注意链接的使用，链接如果与文字，列表这些混用，则会只显示链接，其余内容不显示。除非如示例中那样折叠起来。
• 在headline版式的嵌套代码中有几个值得注意的：
  • 表格table可用，且可以内嵌对齐之类的，唯独不能插入图片，利用表格配合headline理论上可以排出很有特色的版头
  • 对齐方式align可用且显示于版头；
  • 引用框quote可用但在版头不显示；
  • 链接url可用，但与list或文字混用时只显示链接，其余部分均不显示。但折叠后可以混用；
  • 如果要在左侧文字区添加图片，同样需要折叠后才可显示。但无法在版头显示；
• 如果要用于签名，建议使用右侧图片，左侧列表配合折叠的形式，可以包含更多的信息

[/quote][quote] 它 就 在 那 里——第四篇章总结

到此版头部分的介绍算是献丑完毕了，可能大部分都是废话，毕竟即使是个人版版主20威望积累下来也应该都很熟悉这些了。最后就让我再说几句废话总结一下吧：
版头可能很少有人会去仔细看。哪怕把版块里的宝贝全放在版头。但是，精心设计的版头，哪怕只有一个人在其中找到了所需要的，它就是有价值的。[/quote]

· 结 语

[quote][/quote][quote][/quote][quote][quote]
首先对耐心看到这里的读者表示由衷的感谢。开贴之初就做好了只有少数人能耐心看完的打算，希望本帖能够为各位的排版提供一些帮助！
从4月1号起耗时一个月，总算是基本完成了这篇帖子，在最后再来扯扯排版这个事情本身的一些意义吧。
其实说起来，排版只是内容的附加品。往往绝大多数人看一篇帖子或文章，虽然他也会看到排版，但是并不会去注意排版本身。大多只是觉得这个内容看起来毕比较舒服罢了。
就算是排了一个非常漂亮的版，也不会有几个人去夸你排版漂亮什么的。
要不是NGA提供了这么多可操作的空间，像其他一些论坛通常的帖子也并不会有排版这回事儿，大家不也看的好好的么？但是，能够因此就放弃它么？起码就我个人而言，排版这件事儿本身同样也是有意义的。[/quote][quote]今年(2016)这上半年来，NGA的界面颜色、按钮样式和消息提醒框的弹出效果等等都进行了一系列的调整和修改，直到发帖前的两天，又调整了一下按钮的颜色。
这些调整修改都是为了一个更好的用户界面体验，但是大家可以想想，有多少人注意到了这些么？我相信并没有多少，那么它是有意义的么？我觉得是有的，因为我注意到了。
做出这些调整的不管背后的个人还是团队，他们同样都是作为创作者存在的。他们的作品或许因为个人审美的差异会有不同的评价，但是这些努力只要是有人会去注意的，那么这就是有意义的一件事。[/quote][quote]之于排版，同样也是如此。虽然有“这些排版代码大都是用在签名而已”这样的想法，但是只要有人用心去构思，那么这就是对内容本身，对观看者的尊重。
我一向坚持一个理论：所谓排版的好坏并不在于创作者的能力和技巧，而在于是否用了心。排版的技巧是可以积累学习的，更重要的是愿不愿意去尝试这个可能是白花力气的步骤。[/quote][quote]那么换一个立场的话，作为观看者，也请多多去注意一些内容本身之外的内容。特别是原创作品，都是被每一个创作者从零创造出的，不论你是否喜欢，但请保持一份起码的尊重。
这份起码的尊重或是更进一步的称赞，可能就是创作者们渴望获得的最佳的回报，这份努力之后得到的回报，或许就是“意义”的本身了。
最后再另外提一句，虽然不要抱着功利性去创作，但是也不要白白看着自己的作品被忽视，试着去PM版主申请加分等等，并不是一件丢脸的事儿。[/quote][/quote][quote]附 录：

[quote]更 新 记 录

• 初稿：2016.4.1-2016.5.1
• 第一次更新：增加了一个图片使用的小技巧 2016.5.11
• 第二次更新：补充了一个斜体字代码的使用问题 2016.5.12
• 范例补充：补充了一篇演示如何排教程贴以及在网页与客户端都能正常显示的范例：[tid=9329444]词云图教程[/tid] 2016.5.15
• 第三次更新：补充了新功能[pid=182876471]fixsize/style[/pid]的介绍及使用教程，同时随机段落功能也一起产生了调整 2016.5.20
• BUG修复：英雄榜的显示问题已修复。2016.6.1
• 第四次更新：新增了守望先锋的签名档；补充了使用[pid=182876471]fixsize/style[/pid]作为版头新样式的介绍 2016.6.20~24

[/quote][quote]意 见 & 建 议

• 希望能修复手机客户端中嵌套使用quote和list的显示bug。 已反馈
• 建议客户端今后能支持转义字符的显示。 已反馈
• 望修改论坛编辑工具中D3英雄榜按钮内的说明文字 。 已反馈
• 内容加密功能似乎出现了输入密码后内容显示错误的bug。 已反馈
• 4月中旬开始，论坛大量符合高度规范的签名图片被自动折叠，希望能够修复，毕竟都是大家精心制作的签名。 [i]已查明原因：所有gif图片均被自动折叠，建议暂时更换为其他格式[/i]
• 建议在论坛界面色调的配色方案中增加“经典配色”，即最传统的配色方案。
• 希望将此贴设置为可编辑状态，以便未来能够及时更新。 Done！
• 此贴如可镜像，我希望能镜像一份至猴区。 Done！感谢！
• 建议今年的线下聚会再抽中我让我蹭一顿自助餐。 新鲜的肉！

[/quote][/quote]

已镜像，感谢大作！
看完后再进一步评论。

[@nnexus]有个小问题，加密内容版主真的能看到密码吗？

好详细好棒
[img]http://img.nga.178.com/attachments/mon_201209/14/-47218_5052bd27520ef.png[/img]

一拉到底，mark了，很实用的教程，谢谢分享，需要的时候再参照修改

围观群众 先收藏了

兹瓷兹瓷！

好贴支持一波[s:ac:赞同]

非常详细的教程

收藏了

滋磁！写的太棒了[s:ac:心]

辛苦了的说~[s:ac:哦]

卧槽 叼。。。。。。。。膜拜大触

好贴，太强了

再不加精几分钟就第二页了[s:ac:嘲笑1]
泥潭乙烷

收藏了 感谢大触[s:ac:赞同]

滋磁！

赶紧学习