本帖最后由 LocusAzzurro 于 2018-10-13 17:25 编辑


//Page 1 - Title



日常发帖的过程中，经常会有许多我们不会去在意的细节，有些可以帮助我们更好的规划发帖，也有些可以提升帖子的阅读舒适度，这里整理了一些我在论坛发帖过程中积攒的一些经验，让我们一起探索吧。

<请使用上方目录浏览>


//Page 2 - Buffer

在论坛中交流，尺度很重要，尺寸也很重要。

~ 关于尺寸的二三事 ~



//Page 3 - Image Size

虽然论坛的正文框看起来很宽，但是可以放下的最大图片宽度是700像素，大概是下面图片的宽度，更宽的图片会被缩放至700像素宽。
这一点在使用图片进行排版时尤其重要，如果图片制作过大，可能会缩放后字体过小无法辨认的问题，下面的图片中加入了不同字号的字体以供参考。
个人推荐使用的图片排版图片宽度为600像素左右，即600x800竖置。




//Page 4 - Signature Size

签名档中虽然可以放下任意大小的图片，但日常回帖时可见的只有最上面的一部分，这一部分的高度为200像素，好好把握，把最亮(xia)眼的东西放在上面吧。




//Page 5 - Buffer

在论坛中发帖放置图片的最好方式是使用图床，这里讲解的是微博图床的一些相关操作，个人认为微博图床虽然需要注册和登录，但优势在于非常稳定，而且可以简单地使用专辑进行分类整理。

~ 关于图床的二三事 ~



//Page 6 - Private Album

经常使用图片发帖的会员一定会经常向相册里上传图片，但是相册多了，微相册个人主页会显得乱乱的，而且有时候并不想让其他人看到自己上传了图片（比如准备新作品的图片，预先上传图床）。这时候就可以使用私人相册，虽然相册本身他人无法查看，但内部的图片仍然可以通过直链引用。

在创建专辑的时候，将权限设置为仅自己查看即可，如下



有权限限制的相册在专辑列表中显示时，右下角有锁头标志，如下



上传好图片后，需要使用的时候，正常进入相册，选择需要的图片复制需要的链接即可，如下





//Page 7 - Image Sizing Big vs Small

在使用微博相册作为图床的时候，我们一般会复制图片的原链接在论坛中使用，如下，在图片上点击，选择[复制图片地址]之类的



不过这样复制到的图片地址链接到的图片有时不是完整的大小，而是缩放过的，上图的图片复制出的地址的大小见下图



而如果我们点击图片右下位置的[查看大图]，便可以显示出真实大小的图片
（注意，在上传图片时请选择界面右上的[上传原图]选项以获得最佳效果）



点击后一般会打开一个新页面，里面显示的是图片的完整尺寸，如下



这时如果再次复制图片链接在帖子中使用，载入的就是高分辨率的原图了，如下



可能有人要问为什么要使用高分辨率图像，主要原因是由于压缩会损失图片精度，在文字量大的图片上明显可见效果，所以如果有需要精确显示的图片推荐使用原图，但由于原图尺寸大，加载时间相对较长，如果需要使图片尽量快速地加载（比如本教程的大部分图片），使用压缩过的缩略图会更好。另外，虽然论坛的最高图片宽度只有700像素，但是点击图片是可以进行放大的，如下图所示，如果想放几张高清渲染大图，或者篇幅较大的讲解图片，使用原图也是最好的选择。




//Page 8 - Wrong Size Alert

使用图床保存图片并在论坛中使用时，有时候会出现置入的图片尺寸错误的问题，尤其是在连续置入多张图片的时候，这是因为有时引用网络图片的对话框会缓存上一个图片的尺寸信息，并且错误的将其套用在当前图片上造成的，一般效果如下。



虽然这个问题的出现频率不定，而且似乎只存在于特定的浏览器下，但为了避免麻烦，这里给出一个较为通用的避免方式。

如下，在输入网址后，点击一下右侧的尺寸输入框即可，不需要实际输入尺寸，只需要点击一下，就可以自动识别当前图片的尺寸并输入。





//Page 9 - Fake Trasparency

有些图床并不能很好地支持png,gif等格式的alpha图层(透明度)，将透明部分显示为黑色或白色，这时候我们可以将图片背景设置为和论坛背景相同的颜色伪造出透明的效果。



论坛的默认背景颜色为 #FBF2DB ，RGB值 251,242,219


//Page 10 - Buffer

样式没有，表格来凑，论坛上的表格功能，如果会用的话可谓是排版神器了，来看几个骚操作吧~

~ 关于表格的二三事 ~



//Page 11 - Table Max Width, % vs px

论坛中的表格代码，在使用时可以加入宽度参数，这个参数可以是百分比，即占总宽度的百分比，或一个数值，即实际的像素宽度。
百分比数值可以写入的最大值是98%，像素宽度数值可以写入的最大值是560

300像素宽度


560像素宽度


50%宽度


98%宽度


可以看到这两个的最大值差距还蛮大的，不过，如果我们在表格里加一张图片会如何呢？


这上面有一张700像素宽的图片


可以看到，如果在表格里放图片的话，就可以将宽度延伸至700像素宽

这两种数值在进行多层嵌套时，产生的效果略有不同，首先是98%宽度嵌套



  1. [table=98%,White]
  2. [tr][td][table=98%,Black]
  3. [tr][td][table=98%,White]
  4. [tr][td][/td][/tr]
  5. [/table][/td][/tr]
  6. [/table][/td][/tr]
  7. [/table]
复制代码


然后是560像素宽度嵌套



  1. [table=560,White]
  2. [tr][td][table=560,Black]
  3. [tr][td][table=560,White]
  4. [tr][td][/td][/tr]
  5. [/table][/td][/tr]
  6. [/table][/td][/tr]
  7. [/table]
复制代码


可以看到，使用98%百分比进行嵌套的表格边上留出的空间较大，而使用像素宽度作为参数进行嵌套，四边留出的都是最小距离（经测量为5像素宽）。


//Page 12 - Table Nesting

我们都知道，表格是可以嵌套的，不过表格嵌套是有极限的，我从制作表格中学到了一件事，越是使用表格，越会发现表格是有极限的...【啪

#


  1. [table=100,#000000]
  2. [tr][td][table=100,#333333]
  3. [tr][td][table=100,#666666]
  4. [tr][td][table=100,#999999]
  5. [tr][td][color=White][b][size=7][align=center]#[/align][/size][/b][/color][/td][/tr]
  6. [/table][/td][/tr]
  7. [/table][/td][/tr]
  8. [/table][/td][/tr]
  9. [/table]
复制代码


没错，嵌套表格的最多层数是5层，不过5层嵌套时有可能会出现显示问题，一般保持最大嵌套在4层是比较好的做法。


//Page 13 - Spoiler Table

隐藏文字框不能放在表格里，论坛也没有下拉表格这种东西。但是我们可以制作一个看起来差不多的东东，如下：

标题


将标题栏单独做成一个表格，并且把剩下的部分放在隐藏文字的另一个表格中，就能大致模拟出下拉表格的效果了。

  1. [table=560]
  2. [tr=#87A8D3][td][b][color=Navy][b]标题[/b][/color][/b][/td][/tr]
  3. [/table][table=560,#9FBCE1]
  4. [tr][td][/td][/tr]
  5. [/table][spoiler][table=560]
  6. [tr=#CEDFF5][td]1[/td][/tr]
  7. [tr=#E4EEFB][td]2[/td][/tr]
  8. [tr=#CEDFF5][td]3[/td][/tr]
  9. [tr=#E4EEFB][td]4[/td][/tr]
  10. [tr=#CEDFF5][td]5[/td][/tr]
  11. [tr=#E4EEFB][td]6[/td][/tr]
  12. [tr=#CEDFF5][td]7[/td][/tr]
  13. [tr=#E4EEFB][td]8[/td][/tr]
  14. [/table][/spoiler]
复制代码


注释版

  1. [table=560]
  2. [tr=#87A8D3][td][b][color=Navy][b]标题[/b][/color][/b][/td][/tr] //标题栏
  3. [/table]
  4. [table=560,#9FBCE1] //分界线
  5. [tr][td]
  6. [/td][/tr]
  7. [/table]
  8. [spoiler][table=560] //隐藏起来的表格其他行
  9. [tr=#CEDFF5][td]1[/td][/tr]
  10. [tr=#E4EEFB][td]2[/td][/tr]
  11. [tr=#CEDFF5][td]3[/td][/tr]
  12. [tr=#E4EEFB][td]4[/td][/tr]
  13. [tr=#CEDFF5][td]5[/td][/tr]
  14. [tr=#E4EEFB][td]6[/td][/tr]
  15. [tr=#CEDFF5][td]7[/td][/tr]
  16. [tr=#E4EEFB][td]8[/td][/tr]
  17. [/table][/spoiler]
复制代码



//Page 14 - Buffer

一个配色优美的帖子，对于阅读体验来说是很好的加分点，这里介绍下两个懒人可以用的配色工具。

~ 关于颜色的二三事 ~



//Page 15 - Color CC

第一个是由Adobe提供的Color CC

color.adobe.com



只要在色轮上拖动选择了主要颜色（下图中红框），其他的颜色就会根据主要颜色进行相对移动，构造出比较和谐的五色配色。剩余的四种颜色也可以拖动进行调整，也会带动其他颜色移动。选中的颜色的数值和颜色码在下方可以看到，便于复制使用。



左上角的下拉菜单中可以选择配色方案，不同的配色方案下各个颜色间的搭配关系均有不同，比如下面的复合配色方案。




另外，还可以在页面左上角选择上传图片，并分析图片的主要色调，如下



以下是一个通过这个工具完成的配色例子

文本


  1. [table=560,#51CE7F]
  2. [tr][td] [table=560,#70C156]
  3. [tr][td] [table=560,#D7DF62]
  4. [tr][td] [align=center][color=DarkGreen][b][size=6]文本[/size][/b][/color][/align][/td][/tr]
  5. [/table][/td][/tr]
  6. [/table][/td][/tr]
  7. [/table]
复制代码



//Page 16 - Paletton

另一个配色工具是 Paletton

paletton.com



和Adobe Color CC 类似，这个工具也是通过色盘控制的。

左上角的几个按钮可以选择配色方案，分别为单色、邻近、三元和四元，色盘的外圈可以选择基本配色，内圈可以选择具体的色调。色盘周围还提供了几个微调项目：
Hue - 主要颜色 色调角度
Dist - 主要颜色点距中心点距离
Base RGB - 主要颜色值（直接输入）
Fine Tune - 微调菜单，可分别调整色调、饱和度、亮度和对比度

右边的便是颜色预览了



使用下方的选项卡可以进入不同的界面，PRESET 中可以选择根据选择的颜色生成的一些预设方案，如下



右下的选项卡中，EXAMPLES 中可以查看当前配色方案示例，如下



TABLES / EXPORT 中便是所有颜色的数值表了，选好配色后就可以在这里找到需要的颜色数值，如下



以下是一个通过这个工具完成的配色例子

标题
1
2
3
4
5
6
7
8


  1. [table=400]
  2. [tr=#87A8D3][td][b][color=Navy][b]标题[/b][/color][/b][/td][/tr]
  3. [tr=#CEDFF5][td]1[/td][/tr]
  4. [tr=#E4EEFB][td]2[/td][/tr]
  5. [tr=#CEDFF5][td]3[/td][/tr]
  6. [tr=#E4EEFB][td]4[/td][/tr]
  7. [tr=#CEDFF5][td]5[/td][/tr]
  8. [tr=#E4EEFB][td]6[/td][/tr]
  9. [tr=#CEDFF5][td]7[/td][/tr]
  10. [tr=#E4EEFB][td]8[/td][/tr]
  11. [/table]
复制代码



//Page 17 - Ending

以上就是本次的内容了，希望对大家有所帮助。