勇者之光

 找回密码
 注册
搜索
查看: 7796|回复: 21

[日常讨论] #技术贴#随口闲扯的排版小技巧

[复制链接]

糕点师

Rank: 6Rank: 6

战斗力①⑤⑨的英杰

支援
艾俄
所在地
尼恩格兰
携带金
2265 GP
活跃度
10 AP
技能点
1 SP
剧情点
254 TP
存在感
653 BP

刀D医药学D管乐器C二刀流投掷E商业A烹饪S

发表于 2015-9-30 21:15:25 | 显示全部楼层 |阅读模式
本帖最后由 阮·莓 于 2016-1-26 22:52 编辑

嗯……一时卡新章的时候,坐在电脑前的小软觉得有点忧郁。
于是打开引领阿泽兰潮流时尚的哈兰小少爷的文看了看。

………………哇咧美哭我QAQ

真不愧是大贵族艾略特家的小少爷啊!OAO
这审美力!这匹配度!这梦幻感!OAO
反、反正现在也写不出新文!我也要这样美美的!OAO

#少女心就是这样容易萌动呢#

然而一个残酷的事实是………………小软是一个技术废。_(:з」∠)_
以前雷朔朔死前好像也有介绍过怎么排版啦【→传送门注目】,
但作为一个技术废,难道真的有人以为小软能看懂根本没用过的小黑屋软件这种玩意儿咩?!
当然,图省事的话,也可以出GP去穆雷雷的铺子【→广告注目!】让他帮忙……

我写文用到的软件就只有doc、txt、360浏览器,最多再加一个虾米音乐啊?!【等等我这也未免太废?!OAO
还能不能对技术废和讨厌多装软件的人友好点了?!
恰逢哈兰小少爷掀起一股依靠表格图文混排的新风潮,团长长也闲得无聊在我家房间里玩起了表格三层嵌套【然后房内的全部少女都跪在了她奇妙的色感之下最后认输减成双层嵌套这种事情就不足为道了→_→】,在团长长一心为人毫不为己的不断重复成功他母亲的经历下【此处应有掌声!】,小软突发奇想——

“哎?表格这东西可以靠word做啊?”
“哎?这种事情技术废如我也干的来啊?”
“哎?嵌套渐变or上下渐变,不就是三原色or色彩三要素的渐次变化?”
“哎?三原色变化or三要素变化,不是可以靠RGB/HSL三色码化成数字吗?”
“哎?这样说来……何必这么辛苦的在颜色表里挑花眼?一场渐变,说到底,就是一次数字游戏吧?”


想到就干,于是小软首先找到了天下无敌可爱的野性正太天狼狼【此处应有掌声!】友情提供的颜色表及html代码

必须说,这一版的颜色全,名字美,排列明晰,真是超级好用!赞一个!
另外也额外提供一个让团长长挑花了眼的色表:WEB网页设计中的全色系颜色表


选择这两张表的其中之一,就可以开始表格排版大发的第一步了!
首先,按照你的图文需要,找两到三种你需要的颜色……
小软的文为例,最顶上一层颜色是由名为“Beige 米色/灰棕色”的黄色系颜色自行稍作调整而获得的米金色【我将米色的黄色成分稍微调高了一些,因为米色真的太浅啦……显不出团长长的华丽感呀!》///《】,最下面一层颜色,则是直接取用了色表里名为“MistyRose 浅玫瑰色/薄雾玫瑰”的少女色。

选定头尾两个颜色之后,就看你有能多耐得住麻烦的心了……→_→
小软是比较神烦的选择了多达十层的表格渐变,其实如果怕麻烦的话……我认为五层以上应当也足够产生非常绮丽的渐变效果了。一开始小·技术废·软我根本不知道世界上有“工具”这种东西……拿到RGB三色码之后,拿着草稿纸和铅笔,生生手算出了十行表格每行对应的RGB码……_(:з」∠)_
不过!感谢天下无敌慷慨热心的猫耳正太流离先生【此处应有掌声!】友情提供了一套渐变色生成器
妈啊,这玩意简直太好用了!【泣
它直接就把你需要的渐变色颜色代码全都送你啦!根本不需要手算!根本不需要转换!
【我当初怎么这么蠢_(:з」∠)_

打开渐变色生成器色彩模式选择HEX模式。
开始颜色可以在右侧的色盘里选择,也可以输入你在之前色表里选定的颜色……对,就是那个前面带有个#号的英文数字混合的6位码。
结束颜色也同样操作。
渐变层级是你的表格行数减二。
接着只需要猛力点击“开始”键!

你就拿到了全部的颜色代码!
完美!


然而……唯一的缺憾就是这个界面不支持自调色。OTZ
像小软这种就爱闲的没事作微调的人简直太不友好啊啊啊——

没有关系!我们从不屈服!这时候就可以启用天上地下软萌无敌的小软提供的颜色代码生成器
想怎么调就怎么调!爱怎么闹就怎么闹!只管玩个爽!
最后拿走你觉得满意的HEX颜色代码,输入渐变色生成器即可!效果一样好!

接下来可以生成表格了。
论坛的编辑框就有添加表格的选项,十分方便。行数输入你打算渐变的层数——比如小软的文就是10行,列数则写1。
这时候勾选编辑框右上角的选项,将编辑框转成纯文本格式,你会发现表格转成了一堆代码。这时候只需要修改一点点代码就会得到你想要的结果。

依然以小软的文为例,我的表格代码大概是下面这样……
*那个,为了能够显示出来……请大家自动脑内把【】替换成[]……_(:з」∠)_*
抱歉,小·技术废·软就是这么low……_(:з」∠)_
【table=98%】
【tr=#F5F5B4】【td】A【/td】【/tr】
【tr=#F6F4B7】【td】A【/td】【/tr】
【tr=#F7F3BA】【td】A【/td】【/tr】
【tr=#F8F1C0】【td】A【/td】【/tr】
【tr=#F9EFC6】【td】A【/td】【/tr】
【tr=#FAEDCB】【td】A【/td】【/tr】
【tr=#FBEBD0】【td】A【/td】【/tr】
【tr=#FDE9D6】【td】A【/td】【/tr】
【tr=#FEE6DC】【td】A【/td】【/tr】
【tr=#FFE4E1】【td】A【/td】【/tr】
【/table】

table指的是表格的宽度,98%是上限,不会比它更大了。要是不高兴让它这么大好显得你得文更长一些,也可以自行向下调整数值。
tr是表格的行,而td是列,想要在每行or每列做点什么事情,只需要输入相应的代码即可。比如以上例子就是在行内输入了此行颜色的代码。刚生成的表格是没有像“=#F5F5B4”这一串东西的,得你自己输入,输入了这一行就有背景颜色啦。
你的图文,插在A处,如果文字里面还有什么乱七八糟的格式代码,那照样复制进去就好了,不用担忧。

比如小软喜欢在文章每个自然段开头结尾用这套代码【p=30, 2, left】【/p】,这样就会开头自动空两格,文段左对齐,行间距30磅……我觉得是比较合适的间距,看着眼睛比较舒服。

哦,对了。这里要插播一段喊话:
露露你那个Because Of You要不要试试这对代码?现在这行间距之密集让我都快要活生生患密集恐惧症啦!OTZ

小软是个图负五渣,图到底要怎么插就没试验。
但我估摸着应该和文一样,把代码塞进指定位置就搞定。

作为一只技术废,做到颜色渐变就是尽力了。
至于像哈兰小少爷的文那样如同信笺一样的花纹……我猜测应该也是插入图片的效果。
但并未实践,不好多废话。

不过呢,说到底……相较于图文本身,我觉得,排版属于边缘技术。
没事干的时候来玩玩是很调节心情的,看见自己的图文变得美美美也好开心呀~
但要问我的话,比起花俏的排版,我更看重文图本身的质量呢……再朴素简单的排版,如果文笔美好,也一样褶褶生辉呢!

请不要让排版超越了文章本身!

感谢大家愿意看小·技术废·软废话到这里!》《
欢迎更厉害的达人们回帖帮忙指导&解答!》《
爱你们!》///《




评分

参与人数 6存在感 +6 收起 理由
菲莉希雅 + 1 不明觉厉……
路易莎·米诺雅 + 1 看不懂,不过小软好厉害哦
天狼 + 1 效果拔群!
阿德利诺 + 1 效果拔群
方墨 + 1 小软,赞!扑!

查看全部评分

大家可以亲切的称呼我小软,也可以贴切的称呼我小闹~哎嘿
回复

使用道具 举报

糕点师

Rank: 6Rank: 6

战斗力①⑤⑨的英杰

支援
艾俄
所在地
尼恩格兰
携带金
2265 GP
活跃度
10 AP
技能点
1 SP
剧情点
254 TP
存在感
653 BP

刀D医药学D管乐器C二刀流投掷E商业A烹饪S

 楼主| 发表于 2015-9-30 23:16:14 | 显示全部楼层
本帖最后由 阮·莓 于 2015-9-30 23:21 编辑

哦……对了,抢个自己的沙发……
感谢慷慨好人们提供的更高阶的进阶技术贴:



有兴趣的朋友可以自行学习。

本篇鸣谢:
哈兰小少爷
斯塔茜小姐
天狼狼先生
流离小正太
金毛团长长
敏特特星士
凯茜茜队长
穆雷先生

评分

参与人数 4存在感 +4 收起 理由
艾薇安 + 1 名字好整齐hhh
天狼 + 1 举起小软!
哈兰·艾略特 + 1 哦呀!~
伊格内修斯 + 1 名字好整齐哦

查看全部评分

大家可以亲切的称呼我小软,也可以贴切的称呼我小闹~哎嘿
回复

使用道具 举报

糕点师

Rank: 6Rank: 6

战斗力①⑤⑨的英杰

支援
艾俄
所在地
尼恩格兰
携带金
2265 GP
活跃度
10 AP
技能点
1 SP
剧情点
254 TP
存在感
653 BP

刀D医药学D管乐器C二刀流投掷E商业A烹饪S

 楼主| 发表于 2015-9-30 23:23:47 | 显示全部楼层
本帖最后由 阮·莓 于 2015-9-30 23:28 编辑

哦对了多占一层备用。
如果有达人回帖指导,会把链接拉到这一次层。
如果有好人另开技术帖,如果愿意和我拉个链接,也可以站短戳我。


大家可以亲切的称呼我小软,也可以贴切的称呼我小闹~哎嘿
回复

使用道具 举报

艾略特家独子

Rank: 4Rank: 4Rank: 4Rank: 4

战斗力⑤⑨的前辈

所在地
野外红区
携带金
1526 GP
活跃度
10 AP
技能点
0 SP
剧情点
69 TP
存在感
111 BP

生物学D动物驯养剑E剑D剑C

发表于 2015-9-30 23:35:19 | 显示全部楼层
“如同信笺一样的花纹”的确是斯塔茜小姐做的图片插入到文章中的结果~

小软说对了呐!~

教程辛苦~
回复

使用道具 举报

流浪小孩

Rank: 1

NPC

所在地
远京
携带金
107 GP
活跃度
0 AP
技能点
0 SP
剧情点
5 TP
存在感
0 BP
发表于 2015-9-30 23:42:16 | 显示全部楼层
本帖最后由 流离 于 2015-10-1 10:55 编辑

光是知道了“技术”也很难呐,排版。【看着00



顺便说,关于表格

最开始我看到哈兰小少爷的帖子觉得应该是用表格做的,于是研究了一下,虽然一开始根本不懂,不过表格那个二级弹出界面有个信息符号,点一下那个 i ,就有很详细的规则说明……
YZ的胖友们在编辑的时候万一突然忘记怎么做了,其实不用专门去查教程贴,可以直接点一点提示符号,解决一切烦恼……




补充一下

虽然这边不会排出精美的格式,但【因为00】知道几个雷区是大家需要注意的呢!

有点啰嗦但是,会看到这里的胖友,我默认应该是想要把自己的格式弄得美美美的那一群,所以这些点也是需要注意的呢!

首先明确,排版的目的是辅助阅读!排版的目的是辅助阅读!排版的目的是辅助阅读!
所以,一些牺牲了视觉舒适度排版格式,都将遭受到反复的核爆打击。
下面我们来看一个例子,这个例子是一个悲伤的故事。

某翎同学,为了让自己的情敌活动文看起来格式更美,花了接近两个小时做出了精美的格式。
大概是这样的:

  “你是我认识的人吗?”

  “严格来说刚才不是,现在我认识了你,但是你对我还谈不上认识。”

  “你能保证你说的都是真实的吗?”

   “是的,女士。如果在我能及范围之内。”


那一刻,我的内心几乎是崩溃的。

关于这位同学的色感,大家心里懂就好了,不要进行伤害【比如像这样用来做反面例子

为什么这个排版非常糟糕呢?

因为它用了深色的底纹和明亮色系的文字颜色,同时字体是宋体加粗。
首先,这个颜色搭配让人感到一股莫名的非主流,但这是由于这位同学的审美所限制,我无能为力……

第二,它造成了阅读的负担
这时候就又要提起那句话啦:排版是为了辅助阅读

我自己呢,对于在电脑上看文字是有点生理性抵触的,看到密密麻麻的字就头大【但是看书就没问题……


这个应该不少人都是吧?

所以大家都通过各种手段让自己的文字不那么密集,让界面更清爽,这样人的眼睛才会觉得舒适,才会支持在电脑上看完一篇长长长的文章、而不会感到累。

我们可以发现,大凡是涉及文字很多的网站,比如各类BBS、知乎这样的地方,网页的留白是相当多的,目的之一就是为了照顾人眼的舒适度。


其实大家纠结行距的问题也就是为了提高视觉舒适度啦~
怎么样最舒适呢?行距、字间距适中,文字量不要太大。so easy!
一般我是每段之间空一行,穆雷的小黑屋好像可以调行距?
【不过那个小黑屋对于一声放纵不羁爱摸鱼的我来说实在是太残忍了没用过
然后,论坛的默认字色也是偏灰的,好奇心重的胖友可以试试把自己的文弄成纯黑,不改字体也不加行距。
那画面非常美。

因为我没有文化,具体为什么人在看电脑时这么容易累,我也不知道……
不过你看,正确的 辅助阅读 的做法,要素就是一个 —— 干净整洁,减少页面信息量

……我觉得大半天才说到这里的我真的好啰嗦。
好想……就这样变成一个自由的……水母……

那么让我们简单粗暴地略过过程,直接讲要点好了。

不要使用深色的底纹和背景色!不要使用深色的底纹和背景色!不要使用深色的底纹和背景色!

对人眼来说,大面积的深色是非常糟糕的,在深色背景上看密密麻麻的字,哪怕文章本身很好,还是会让人感觉非常难受!
深色背景完全起不到辅助阅读的作用,甚至适得其反。
【像某翎同学那样,花的时间越多,在错误的道路上就走得越远……】
它可以作为装饰,但绝不可以在文章主体部分大量使用。

什么是深色呢?
对于我们这种没有什么色感的同学们,只要记住——
一切存在感强过文章本身的颜色,都是深色。都不要用。

比如我现在用的这个渐变表格,色彩来说不算深色,但一眼看过去喧宾夺主,那么它就最好不要出现在有大段情节文字、需要很强代入感的时候。【回帖的时候卖个萌还是很不错的
说回到哈兰少爷的那篇引领潮流的作品,在开头结尾用了渐变色,文章部分也是使用的近白色的浅色背景,是常用的书页、卷轴色,渐变的蓝色不会影响文章主体部分的阅读感受。

……我还是觉得自己很罗嗦啊!

简单来说就是
没有色感的同学们不要轻易尝试表格,特别是渐变和嵌套。

当然格式本身也许特别美……
但想一想,格式需要牺牲阅读感受吗?
辛苦写出来的作品,也是希望别人能一气呵成、流畅地读完的呢!

表格很精致很好玩啦~
不过白背景的排版做好了也相当漂亮哦!而且对于文章节奏的把控很有帮助呢!


像穆雷、艾俄那样,干净清爽的排版不来一发吗!

总结一下,就是。
排版最重要的是突出文字、让人阅读时觉得舒服,同时也许还可以把控一下读者的阅读节奏。
所以,各位想要学习格式,让自己的文章美美美的胖友们,千万要注意,不要适得其反啦!
在排版的时候,首先的原则是
会不会影响阅读?,其次才是好看吗?,这样。

请不要让排版超过文章本身~




点评

XD 真是翎先生的好朋友呀,流离先生XD  发表于 2015-9-30 23:50

评分

参与人数 7存在感 +7 收起 理由
艾薇安 + 1 棒!
帕西瓦尔 + 1 有理有据,令人信服
哈兰·艾略特 + 1 好棒!~要点都在这里~
穆雷 + 1 有理有据,令人信服
伊格内修斯 + 1 有理有据,令人信服

查看全部评分

吾自生来不蔽体,不着方寸也风流  (●′ω`●)
回复

使用道具 举报

宗正省法卫

Rank: 8Rank: 8Rank: 8Rank: 8

战斗力⑤⑨⑨的贤者

支援
艾德
所在地
尼恩格兰
携带金
1346 GP
活跃度
3 AP
技能点
8 SP
剧情点
405 TP
存在感
1399 BP

弓C理魔法A神学朝灵语易容C陷阱C催眠术豪饮野外生存潜行格斗C医药学C毒药学C烹饪A魔导开发D空艇驾驶开锁C剑S

发表于 2015-10-1 00:00:27 | 显示全部楼层
小软棒棒哒!鼓掌支持!下次就实验起来!
很高兴一路有你。
【情商Z】【串场S】
回复

使用道具 举报

私人侦探

Rank: 6Rank: 6

战斗力①⑤⑨的英杰

所在地
远京
携带金
3304 GP
活跃度
7 AP
技能点
0 SP
剧情点
393 TP
存在感
351 BP

野外生存潜行格斗A阿尔洛语易容C医药学D毒药学D弓B水性手语豪饮

发表于 2015-10-1 00:02:44 | 显示全部楼层
哇哦!
小软小姐好厉害!
以后可以用到这些好看的排版了!

辛苦啦!
我去研究一下,然后在我的文里看看怎么用上!!

我从世界上消失,有谁会记得我?
回复

使用道具 举报

赏金猎人学徒

Rank: 8Rank: 8Rank: 8Rank: 8

战斗力⑤⑨⑨的贤者

支援
岁魈
所在地
野外红区
携带金
10122 GP
活跃度
7 AP
技能点
4 SP
剧情点
1007 TP
存在感
1766 BP

二刀流野外生存潜行生物学C剑S

发表于 2015-10-1 13:41:26 | 显示全部楼层
本帖最后由 天狼 于 2015-10-1 13:46 编辑

小软写教程辛苦了!效果棒棒的!举起来!

纠正一个小问题——【tr】【/tr】代表的不是表格颜色,而是表格的行!而【td】【/td】是列。

也就是说,假如写成这样【tr】【td】随便【/td】【td】写个A【/td】【/tr】
便是一行
随便写个A
↑这样子

【td】【/td】之间,是我们所见的表格显示的内容。【tr=颜色名】【/tr】表示的是这一行的颜色。
假如整个表格只需要一种颜色,那么在开头用【table=98%, 颜色名】直接标注就行了!

小软的研发笔记是排成多行一列,但穆雷的犹在镜中主体部分是两列一行(左边写章节名),因此根据不同需要,可以有不同用法呢。

还有雷朔的排版教程,重点不在小黑屋,在于指出论坛回复系统的纯文字模式,会切换这个才是重中之重。
毕竟小黑屋作为排版工具,也就是段首自动加两个全角空格,段间自动空一行而已,手动一样能做到。
因为看到小黑屋就放弃了那么好的一张帖太可惜啦!
而且小黑屋作为一个绿色软件,不需要安装,解压缩放文件夹里就行。不设置根本就不会把人锁在里面,拿来没事自动排排版也挺好?

点评

噢噢噢!多谢指出!等回头我起床,去修改一下文字!  发表于 2015-10-1 14:22

评分

参与人数 1携带金 +6 收起 理由
夜霾 + 6 认真回帖奖励

查看全部评分

回复

使用道具 举报

第十五星士

Rank: 8Rank: 8Rank: 8Rank: 8

战斗力⑤⑨⑨的贤者

支援
希瑟·亚德里安
所在地
野外红区
携带金
980 GP
活跃度
6 AP
技能点
0 SP
剧情点
458 TP
存在感
1726 BP

枪S星魔法S匕首A二刀流投掷B野外生存格斗C潜行棍D杂耍剑E

发表于 2015-10-1 20:34:27 | 显示全部楼层
学到了新姿势!渐变表格好看!
(不过懒到连必要内容都写不全的我……)
回复

使用道具 举报

尼恩格兰骑士团中队长

Rank: 5

战斗力⑨⑨的精锐

所在地
尼恩格兰
携带金
-176 GP
活跃度
37 AP
技能点
18 SP
剧情点
157 TP
存在感
184 BP

理魔法B生物学D动物驯养口技野外生存剑B

发表于 2015-10-2 00:53:00 | 显示全部楼层
我以前都有在段落之间空一行的良好习惯,但某文学网站会自动给我空行,于是我的手就懒起来了

你的帖子我研究一下,研究好了就去弄一下排版吧

我也知道密密麻麻一大堆字放在这边,肯定会造成大家的阅读困难的OTL
最高贵的征服是征服人心和情感
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则