关于排版
写在前面:
在同盟看贴子,看到一个个dalao们的排版都那么的亮眼!(我也想学.jpg)
可是,向dalao们问过了以后,dalao们都说用表格来排,并推荐了一个帖子:
https://sstm.moe/topic/222091-次元🌟魔女的表格魔法🌌教室【第n期】/
然而当我看过了以后,完全明白了(x)实际上是一头雾水
这写的是啥呀?为啥看不懂呀?这一大堆星星太阳是啥呀?
论坛搜了一圈下来,虽然教程贴是有,但是感觉大多数都在谈论HTML?具体怎么操作呢(到底大佬们是在word里还是Excel里还是论坛的编辑窗口写的呢?)
这点咱也不得而知(是不是咱太菜了啊)
顺便附上维姬上的教程链接:
唯一感觉对新人最有用的还是逃跑的泰兰德大佬写的教程:
https://sstm.moe/topic/219588-【教程】萌新表格排版教学(随便打了个前缀hhh)/
(但是这个最终效果图又是怎么出来的啊www怎么和写的完全不一样www)
看来还是咱太菜了
就这样,为了以后写贴子更好看(赚更多节操)的目的,萌新以逃跑的泰兰德大人写的教程贴子为基础,从不依靠html的排版开始,通过实战的方式(就是完成一个任务啦,也就是临摹,)从很简单的一个框开始,到复杂的活动宣传页面,逐渐达到能够理解魔女教程的地步~
嘛,在中途大概就会有很多不会的问题了,希望dalao们能指点指点
(毕竟会了就不会在这发帖了(x))
也欢迎大家在下面讨论排版的问题哦~
---------------------------------------------------------------------------------分隔符--------------------------------------------------------------------------------------------- Mission 1
首先是第一个任务:
使排版达到这个贴子的程度:https://sstm.moe/topic/186212-聊聊排版吧~/
具体示意图如下:
解答如下(仅供参考):
嘛~,感觉提到排版最好的方式就是表格,那么表格究竟起了一个什么作用呢?
咱目前的理解就是提供了一个边框和背景图的作用(感觉认识好浅)嘛,不浅就不叫萌新了那么废话不多正式开始!
我是以word为例(论坛这个编辑还不是很熟悉)
首先第一步:新建Microsoft word文档!然后打开!
然后第二步分析:图中分为了三块部分:上半文字部分和下半文字部分和下半图片部分
那么就创建1x2的表格(点击插入:表格,然后选择1*2)
那么创建完拉到合适的大小(差不多这样)
那么然后点击上方的表格工具:设计,点击底纹就能设计背景颜色啦
设计完颜色以后右击下面的单元格点击拆分单元格(目的是要把图片和文字分开)
接着就是调整边框了(感觉这才是目的其他都是虚的)
上面的是设置边框样式(你们看到的dalao的边框大都是这里来的)下面是粗细
调整以后就会看到鼠标变成刷子的样式,对想要变换的边框进行刷吧!(记得把里面的设成无边框哦!)
那就基本结构完成啦!
这个是没写字的效果,加入字和图片以后就是:(把完成的表格复制到论坛编辑框里)
下面是复制进来的初步效果(我这颜色有点太深了,不要在意里面的字,自己编辑就好)
啊啊啊啊啊啊啊
呃呃呃鹅鹅鹅
左边的是皮卡丘
这样就能左图右字的介绍效果
---------------------------------------------------------------------------------分隔符---------------------------------------------------------------------------------------------
任务1完成(我太菜了想了一下午才想出来这是咋搞的),下面是任务2的预告,任务2是这个贴子(基本上咱会从教程贴里的示例一步步的来):https://sstm.moe/topic/219588-【教程】萌新表格排版教学(随便打了个前缀hhh)/
目的是达到最后那个示例的样子啦~好啦,先写到这,等待下次更新~
感谢楼下大佬指导,下面是大佬教的一个小贴士,感觉很有用,作为番外,任务2应该今天能更新。
看见上面那个分隔符了吗,编辑的时候有的时候会想用,那么不想打一大堆减号的话该怎么做呢?(仅提供我的理解,可能学计算机的会震怒)
首先在想插入的地方右键选择检查
然后右边就会出现一个奇怪的页面,点击如图所示的按钮,然后单击想加分隔符的地方,对应的地址就会显示在右边,找到对应的地方后右击,选择edit as HTML,然后在文本的最后另起一行,添加一个<hr>就可以啦!
是不是觉得光一条线太逊色了?其实<hr>可以通过各种形式来改变哦,那么请看下面:(可以复制代码粘上去(网上找的))里面的123456对应的就是显示的样子
Mission 2
具体示意图如下:
嘛,先上完成图,教程下午再补。
Word最终效果图
这里是萌新教学贴
如果各位还有其他的技巧
黄油私信我或者在该贴留言啊
感谢
建议者
测试者:
Xxxx
Xxxx
Xxxx
多谢观看咯
啊这,立马遇到奇怪的问题了,如果图片用外链的话,图片大小就不对了,会变的很小,如果直接在word里弄就会显示不出来(先蹲个大佬),咱自己先研究下。
(貌似是要设置图片的width="xxx" height="xxx",可是编辑了好像没有反应?)
研究好了,貌似要删掉一大堆代码?先睡个觉,晚上再更~
嘛,看到下面的大佬们都不用word的,这次就先用word搭配HTML来完成吧~
首先进行分析:背景的绿颜色为什么会延续到上面一块,答案是上面仍然是表格的一部分,只不过把边框线给取消了,看起来就像个标题。
那么按照任务1说的那样,设置边框和背景颜色以后,把字打上去(虚线是去掉的边框线)。。。
然后复制到论坛的地方编辑(重点来了),插入图片,然后就发现不对了,图片大小不对(如图)
那么这个时候就要HTML大法启动~右击图片选择“检查”,然后按照前文小贴士里的方法点击图片,找到图片所在的位置。右击然后edit as html。看到图片是这样显示的:
那么把第一行alt到后面第一个src的代码全部删除(不这样就改不了大小不知道为什么)(虽然感觉不太对但这样能达到效果)然后再最后添加height="数值",这个数值就能进行更改,就能调整图片的高度~,最后的代码是这样的:(width是宽度,height是高度,都能改哦~)(话说那个src其实就是你图片的地址(应该也能改)):
那么就把两个图片都改一下,差不多就能完成效果了呢~
任务2完成!(其实做出这个样子当白富美应该没什么问题了)(好像在招人,萌新快去啊~)
Word最终效果图
这里是萌新教学贴
如果各位还有其他的技巧
黄油私信我或者在该贴留言啊
感谢
建议者
测试者:
Xxxx
Xxxx
Xxxx
多谢观看咯
任务2完成了,那么任务3是什么呢?本来想定这个帖子的:
https://sstm.moe/topic/180343-新旧更替——一点关于新框架下排版的初步概念引导/
但是如果能熟练完成上面两个任务的话,应该是没什么问题了呢!
那么给自己定个小目标(来个有点挑战性的),任务3为这个贴子:
https://sstm.moe/topic/178676-新手区【任务领取帖】(更新日期20210315)/
是大家都经历过的新手任务贴呢,那么到底其中蕴含了什么秘密呢,敬请期待!
好啦,正式开始任务4,首先进行分析,得到其基本框架是这样的:
那么我们先建立3x3的表格,然后把符号◥◣◢◤复制到相应的位置(左上左下右上右下),写上标题和内容,再把需要隐藏的分割线隐藏就可以啦~这样就是基本框架。
然后就是装饰部分(旁边的雪花啥的)❄❊❅就是这几个东西,应该是emoji?可以直接在别的地方打然后复制进去,然后每一行放一个(原文是一行空一行),就能达到效果了(位置可以自己调整,也可以不用雪花用太阳啥的)
这样外部框架就完成了:
下面是内部有一大堆带颜色的框的问题,虽说调整表格结构也能完成,但这次想换种方法。。。
看到大家都喜欢用论坛自带的表格,这里就用一下~
首先把之前做好的框架复制进来,然后在论坛的表格插入那里选择1x1的表格~
然后对着创建的按Ctrl+右键,进行编辑~表格属性对齐方式选居中,宽度可以自己调~
然后继续Ctrl+右键,单元格里有个单元格属性,可以调整边框为白色(就等于无边框)还能调整背景颜色!
后面的内容就可以自己调整啦,下面是完成的效果(外部边框忘记去了,不过影响不大)
◤
╭♡─├. 任务领取中心.┤─♡╮
◥
❄
❊
❅
❄
❊
❅
111
2222222222222222222222222
11111111111111111111111
❄
❊
❅
❄
❊
❅
◣
╰♡─├. 欢迎下次再来.┤─♡╯
◢
话说任务4也完成了呢!下面任务5就是魔女的排版了呢,感觉已经可以驾驭了呢,链接在这:
https://sstm.moe/topic/222091-次元🌟魔女的表格魔法🌌教室【第n期】/
话说这个完成了是不是该完结了啊~(貌似也没啥人看)毕竟这个贴子也是为了逐步理解魔女教程而存在的呢~(后面也许还会更更番外?)(毕竟是实战向的,素材也好找)
话说下面的皮卡丘,妖精的排版是指的哪个啊(根本找不到还把人家黑历史给翻出来了)
嘛,任务5开始,首先写在前面,为什么之前看不懂魔女酱的教程呢?那是因为魔女酱的教程主要描述的是如何在所发的文章内插入背景图片,而咱一开始等级太低,追求的则是更基本的东西,由于不熟悉论坛表格的模式,所以从简到难,从word到HTML到论坛的表格系统都尝试了一遍,这样下来才逐步理解~
嘛,首先是结构的解析,可以参考toku酱的帖子(不好意思因为那个地方引用不了只能复制了~):
https://sstm.moe/topic/269514-【排版】𝓶𝓪𝓰𝓲𝓬𝓪𝓵表格魔法-——魔女酱的表格魔法教程的一些解析补充以及一些“魔法”的测试/
那么直接先搭建呢~
那么如果前面几章好好听了的话,难点好像基本只剩下最后的背景插入了~
上面这块是插入图片的,魔女这弄了一堆GIF
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
☀
背景插入的话是右键选择检查,或者是按f12(笔记本要按fn+f12),弹出来的左上角有选择。
然后左键选择表格,找到表格所对应的代码。
然后注意!!!(魔女酱这里有可能写错了)
在style="...."的后面一个引号的前面添加代码:
;background-image:url(背景图片的URL链接)
(魔女酱的原文:在style="....";后面粘贴这段代码)
然而经过操作以后重复几次都没有效果,后来才发现是引号位置的问题。
那么这样就完成啦~
效果就是如本表格所示呢~
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
⚡
题外话:其实这种背景也有一定的缺陷,就是表格大小有可能会限制图片的发挥。表太小图片就会显示不全,这个也不知道怎么调整,还有就是有的图片太大了会超出去,手机看了难受~
那么下面推荐的是那种单个单元重复的想法:就是把类似这个进行重复来达到效果。
那么要怎么做呢?
在之前那段代码之后添加
background-repeat:repeat;
就可以啦~
这样的其实也很好看啦(我截图没截好,可能每个单元错位了)
自己设置大小和背景加点文字就可以做签名啦!(一些大佬的签名就是那么做的呢~)
那么,基本内容就完结了啦~
想说点题外话:其实排版这东西越研究到后面越感觉花里胡哨,其实一个简单的背景加上一个框就够了只能算是锦上添花,主要的还是整体的字的大小颜色和位置的设置更重要,真正打动人心的还是文章的内容~(试图升华主题)
本文仅做一个抛砖引玉啦,那么看过本文的可以去看下魔女的进阶篇还有toku酱的补充,那里才是满满的干货,这里的内容只是凤毛麟角罢了~
话说主线完结了其实还有番外啦,可能会更个一两期(看难度)~
第一期番外就选择下面皮卡丘所说的妖精的吧, @攸薩是哪个贴子啦,提供一下~(为什么我只找到了你们可能不知道只用一天水到300节操是什么概念)
话说新人来回复一下啊,这不是官方贴不会被刀的,还有红包拿哦~
@ 魔法少女卡萌酱 申请加入wiki