技术宅社区

 找回密码
 ╱人◕‿‿◕人╲订下契约(注册新用户)

QQ登录

只需一步,快速开始

搜索
查看: 13926 | 回复: 99
收起左侧

[哲♂学研究] 华丽丽的排版教程

[复制链接]

该用户从未签到

技术宅四周年庆组委会纪念

发表于 2015-1-31 02:48:36 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有帐号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
本帖最后由 番茄星人 于 2015-1-31 21:15 编辑


                               
登录/注册后可看大图
前话:
之前不少人跟我提过排版教程,我看了一下,论坛没完全的排版教程,高级编辑教程倒是有。
于是各种原因,这个教程就出来,刚好赶上(拖)区版活动。
娇嗔参考了很多帖子,如有雷同,就是参考!!
好吧,我们开始吧

伸手党直接拉到后面去复制代码就可以拉!!!!


table、tr、td基础


其实排版就是排table,table(表格)是论坛帖子的骨架,所以有必要熟悉相关姿势
表格由 table 元素以及一个或多个 tr、 td 元素组成。tr 元素定义表格行,td 元素定义表格列.
[tr] [/tr]是行代码
[td] [/td]则是列代码

一行一列:
[mw_shl_code=applescript,true]
[/mw_shl_code]
一行两列:
[mw_shl_code=applescript,true]
[tr][td] [/td][td] [/td][/tr]
[/mw_shl_code]

两行两列:
[mw_shl_code=applescript,true]

[tr][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][/tr]
[/mw_shl_code]

PS:每个元素都是由2个组成,元素必须合拢,td元素放置在tr元素之内。





[mw_shl_code=applescript,true][ table=98%,color] [ /table][/mw_shl_code]
此为表格的框架,任何表格都必须使用

98%:设定表格宽度为98%,可以使用固定数值但不能超过560,数值超过则变98%,百分数的最大数值也是98%。
color:设定表格的背景颜色,可以使用颜色的英文单词,也可以使用RGB格式或直接使用颜色代码#ffffff(把这个和RGB格式一对照你就会明白。。。不解释)



1、创建一个一行一列的表格:
效果图:


2、创建一个两行两列的表格:
效果图:

[mw_shl_code=applescript,true][table=98%,]
[tr][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][/tr]
[/table][/mw_shl_code]

3、创建一个两行两列,宽度为50%的表格:
效果图:

[mw_shl_code=applescript,true]
[/mw_shl_code]

4、创建一个两行两列,宽度为50%,颜色为黑色的表格:
效果图:


[mw_shl_code=applescript,true]
[/mw_shl_code]

注:
1、table代码的颜色代码不可单独使用,必须先定义表格的宽度后才可以定义颜色;
2、table代码不能自定义边框颜色;
3、table代码不能自动居中,如需要则需使用居中代码;
4、table代码最多可以重叠五层,第六层开始代码失效(注意:在DZ编辑框中,只显示四层的表格。。。第五层就不显示了)


示例1:


[mw_shl_code=applescript,true]
[/mw_shl_code]

示例2:


[mw_shl_code=applescript,true]
[/mw_shl_code]

示例3:

[mw_shl_code=applescript,true]
[/mw_shl_code]




现在,我们来详细了解一下行代码[tr]               高级排版必备!!!

定义行的颜色
[mw_shl_code=applescript,true][tr=color][/mw_shl_code]
注:如果table定义了颜色之后,此处会失效。。。优先选择行颜色。。。

定义列的宽度
[mw_shl_code=applescript,true][td=500][/mw_shl_code]
此处定义列的宽度,可以为固定数值,也可以为百分数。固定数值不得大于560,否则会变成98%,百分数最大值也只为98%


合并单元格
[mw_shl_code=applescript,true][td=2,1][/mw_shl_code]
第一个数值为列,第二个为行。
这个的意思就是,2列,1行合并为一个单元格,其实也可以理解为这个单元格占了2看、列1行的最小单元格。

定义合并单元格的宽度】
[mw_shl_code=applescript,true][td=2,1,50%][/mw_shl_code]


示例1:

1
15
1357
12345678

[mw_shl_code=applescript,true]
1
15
1357
12345678
[/mw_shl_code]

说明:
1.定义表格的宽度为500;
2.定义行的颜色为red(红色);定义合并8列1行;
3.定义行的颜色为blue(蓝色);定义合并4列1行*2;
4.定义行的颜色为yellow(黄 色);定义合并2列1行*4;
5.定义行的颜色为green(绿色);没有定义。。。就是一个很简单的列*8。




示例2:


1
23
45
666666

[mw_shl_code=applescript,true]
1
23
45
666666
[/mw_shl_code]

说明:
1.定义表格的宽度为500;
2.定义行的颜色为red(红色);定义合并8列1行;
3.定义行色颜色为blue(蓝色);定义合并4列2行;定义合并4列1行;
4.定义行的颜色为yellow(黄 色);定义合并2列2行;定义合并2列1行;
5.定义行的颜色为green(绿色);定义行*6





表格的嵌套使用

1.色彩渐变框

表格嵌套其实主要是使用帖子编辑器左上角的表格编辑器嵌套出来,至于这样使用这里不详细讲,因为可以看看、论坛入门的技术贴。


内容


[mw_shl_code=applescript,true]
[/mw_shl_code]



内容


[mw_shl_code=applescript,true]
][/mw_shl_code]



内容


[mw_shl_code=applescript,true]


  
[/mw_shl_code]


内容

[mw_shl_code=applescript,true]


[/mw_shl_code]


内容

[mw_shl_code=applescript,true]

[/mw_shl_code]

2.单色间隔框

内容




[mw_shl_code=applescript,true]
[/mw_shl_code]



内容




[mw_shl_code=applescript,true]
[/mw_shl_code]






内容





[mw_shl_code=applescript,true]
[/mw_shl_code]



内容





[mw_shl_code=applescript,true]
[/mw_shl_code]

熟悉了表格的嵌套以后,我们就可以在表格中插入文字、静态图片、动态图片等。。。
如下~~~~



                               
登录/注册后可看大图

[mw_shl_code=applescript,true]

                               
登录/注册后可看大图
[/mw_shl_code]



                               
登录/注册后可看大图

[mw_shl_code=applescript,true]

                               
登录/注册后可看大图
[/mw_shl_code]






接着我们研究一下高级的东西



1.边框细化


这种效果是怎样做出来?














这不简单吗?!!用表格编辑器先做个棕色3行3列的表格,然后嵌入一个粉色1行1列表格,再嵌入一个白色1行1列表格就可以了。
真的那么简单吗,我们先试试

3*3 的棕色表格

由于编辑器有时发病的原因可能出现下面两种情况(由于编辑器对空格读取的BUG)





      
      
      


这时的代码是这样的
[mw_shl_code=applescript,true]
[/mw_shl_code]

接着看
格子大小不对啊。
这时候,要求是第一列和第三列比较细小的
这时候我们可以将代码中的的第一个和第三个[td]改为[td=1]
变成这样
[mw_shl_code=applescript,true]
  
  
  
[/mw_shl_code]

没有BUG时效果:(基本搞定了)


如果出现BUG,第一行和最后一行还是很粗啊~~
  
  
  

这时候我们在表格中编上编号
1 23
4 56
7 8 9


这时候代码
[mw_shl_code=applescript,true]
1 23
4 56
7 8 9
[/mw_shl_code]

我们需要把编号为1、2、3、4、6、7、8、9的格子都变小
这时候就把代码中含有上面那些数字的内容及其左右的空格都删掉,
这样
[mw_shl_code=applescript,true]
5
[/mw_shl_code]
然后把里面的5删掉,再嵌入粉色和白色表格就可以了!!!~~~

   


PS:如果在嵌入其他表格时出现这种需要将表格细化的问题,可以采取跟上面一样的方法(就是删去空格啦)


2.善用浮动



                               
登录/注册后可看大图
这是使用2个小表格

内容1

内容 2

内容  3

                               
登录/注册后可看大图
这是用右浮动



                               
登录/注册后可看大图


内容~~~~




                               
登录/注册后可看大图






PS:在使用多表格加入图片是,应该使图片左边第一个[td]的宽度等于图片宽度例如:  [tr][td=300][img=300,200]............[/img][/td][/tr]
在使用浮动加入图片时,赢先把文字部分编辑好,然后载入图片,然后再浮动。



3.内容丰富化



其实对排版来说,表格的应用知识建立一个框架,最终还是要看内容。

1.自行PS背景颜色跟帖子背景颜色适配的图;
2.避免审美疲劳,多改变版面的分割格局;
多数复杂的排版利用合并表格的方式实现,合并分析很累,我也没时间搞,以后有时间补,喂!关键的东西没出!
3.多利用其他素材。
(甚至可以将图片素材做成高级排版样子,神不知鬼不觉地嵌入表格中)





                               
登录/注册后可看大图
大家好,我是番茄星人
写教程好累的有木有!尤其是赶出来的!
小周你要的娇嗔!!!@小周的吐槽窝
话说姬宅的帖子编译器,经常莫名BUG

                               
登录/注册后可看大图

最近很忙,很多东西都顾不上了


                               
登录/注册后可看大图


辛苦胖子了!~~

        话说这个教程就先学到这里
感谢你把教程看到这里
有空的话可以来这里看看 ~~IT~~
顺便安利一下这边   ~~PS~~





颜色参考表



████   皇家蓝(宝蓝) :RoyalBlue
████   矢车菊蓝:CornflowerBlue
████   亮钢蓝:LightSteelBlue
████   亮蓝灰(亮石板灰) :LightSlateGray
████   灰石色(石板灰) :SlateGray
████   闪兰色(道奇蓝) :DodgerBlue
████   爱丽丝蓝:AliceBlue
████   钢蓝(铁青) :SteelBlue
████   亮天蓝色:LightSkyBlue
████   天蓝色:火砖色(耐火砖) :Fi
████   深天蓝:DeepSkyBlue
████   亮蓝:LightBlue
████   粉蓝色(火药青) :PowderBlue
████   军兰色(军服蓝) :CadetBlue
████   蔚蓝色:Azure
████   淡青色:LightCyan
████   弱绿宝石:PaleTurquoise
████   青色:Cyan
████   浅绿色(水色) :Aqua
████   暗瓦灰色(暗石板灰) :DarkSlateGray
████   暗青色:DarkCyan
████   水鸭色:Teal
████   中绿宝石:MediumTurquoise
████   浅海洋绿:LightSeaGreen
████   绿宝石:Turquoise
████   宝石碧绿:Aquamarine
████   中宝石碧绿:MediumAquamarine
████   中春绿色:MediumSpringGreen
████   薄荷奶油:MintCream
████   春绿色:SpringGreen
████   中海洋绿:MediumSeaGreen
████   海洋绿:SeaGreen
████   蜜色(蜜瓜色) :Honeydew
████   淡绿色:LightGreen
████   弱绿色:PaleGreen
████   闪光深绿:LimeGreen
████   闪光绿:Lime
████   森林绿:ForestGreen
████   纯绿:Green
████   暗绿色:DarkGreen
████   黄绿色(查特酒绿) :Chartreuse
████   草绿色(草坪绿) :LawnGreen
████   绿黄色:GreenYellow
████   暗橄榄绿:DarkOliveGreen
████   黄绿色:YellowGreen
████   橄榄褐色:OliveDrab
████   米色(灰棕色) :Beige
████   亮菊黄:LightGoldenrodYellow
████   象牙色:Ivory
████   浅黄色:LightYellow
████   纯黄:Yellow
████   橄榄:Olive
████   暗黄褐色(深卡叽布) :DarkKhaki
████   柠檬绸:LemonChiffon
████   灰菊黄(苍麒麟色) :PaleGoldenrod
████   黄褐色(卡叽布) :Khaki
████   金色:Gold
████   玉米丝色:Cornsilk
████   金菊黄:Goldenrod
████   暗金菊黄:DarkGoldenrod
████   花的白色:FloralWhite
████   老花色(旧蕾丝) :OldLace
████   浅黄色(小麦色) :Wheat
████   鹿皮色(鹿皮靴) :Moccasin
████   橙色:Orange
████   番木色(番木瓜) :PapayaWhip
████   白杏色:BlanchedAlmond
████   纳瓦白(土著白) :NavajoWhite
████   古董白:AntiqueWhite
████   茶色:Tan
████   硬木色:BurlyWood
████   陶坯黄:Bisque
████   深橙色:DarkOrange
████   亚麻布:Linen
████   秘鲁色:Peru
████   桃肉色:PeachPuff
████   沙棕色:SandyBrown
████   巧克力色:Chocolate
████   重褐色(马鞍棕色) :SaddleBrown
████   海贝壳:Seashell
████   黄土赭色:Sienna
████   浅鲑鱼肉色:LightSalmon
████   珊瑚:Coral
████   橙红色:OrangeRed
████   深鲜肉(鲑鱼色) :DarkSalmon
████   番茄红:Tomato
████   浅玫瑰色(薄雾玫瑰) :MistyRose
████   鲜肉(鲑鱼色) :Salmon
████   雪白:Snow
████   淡珊瑚色:LightCoral
████   玫瑰棕色:RosyBrown
████   印度红:IndianRed
████   纯红:Red
████   棕色:Brown
████   火砖火砖色(耐火砖) :FireBrick
████   深红色:DarkRed
████   栗色:Maroon
████   纯白:White
████   白烟:WhiteSmoke
████   淡灰色(庚斯博罗灰) :Gainsboro
████   浅灰色:LightGrey
████   银灰色:Silver
████   深灰色:DarkGray
████   灰色:Gray
████   暗淡的灰色:DimGray
████   纯黑:Black



评分

参与人数 12宅魂 +13 宅币 +205 贡献 +30 元气(技能点) +3 活跃 +12 收起 理由
星碎琉璃 + 6 Σ( ° △ °|||)︴ 碉堡了
冉玖暮 + 3 Σ( ° △ °|||)︴ 碉堡了
回眸一笑笑抽风 + 5 收藏发糖一气呵成O(∩_∩)O~
魔芋不减肥 + 2 + 5 + 1 Σ( ° △ °|||)︴ 碉堡了
DIBD + 6 + 13 + 3 o(* ̄▽ ̄*)ブ 拉拉请你吃糖
萌团 + 3 Σ( ° △ °|||)︴ 碉堡了
鲛岛。 + 9 大哥路过
爱银爱到UP + 3 Σ( ° △ °|||)︴ 碉堡了
朽。 + 2 + 5 + 1 僵尸号发糖
ZeRy + 50 + 10 + 1 + 5 Σ( ° △ °|||)︴ 碉堡了
达白白白小乐 + 3 + 3 + 2 o(* ̄▽ ̄*)ブ 发糖
原味板烧鸡腿堡 + 100 + 20 + 2

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~

签到天数: 477 天

连续签到: 8 天

[LV.9]以坛为家II

PP|槙岛圣护PP|狡啮慎也PP|宜野座伸元PP|縢秀星Free|七濑遥Free|橘真琴技术宅四周年庆组委会纪念技术宅四周年庆活动奖励国庆70周年纪念

发表于 2015-2-1 00:46:40 | 显示全部楼层
乃应该先解释一下tr表示行 td表示单元格~再解释合并单元格比较方便详细~
另外
>>关于表格宽度
大于560的表格~可以用图片人工扩大~但最大只到710像素
>>关于浮动还有区别
用表格分列~内容素垂直居中
而用浮动代码素垂直居顶,而且浮动左右素有大约一个半角空格的间隙的

点评

大神( ̄︶ ̄)y: 5.0
大神( ̄︶ ̄)y: 5
  发表于 2015-9-25 23:35
大神( ̄︶ ̄)y: 5
  发表于 2015-2-15 20:19
大神( ̄︶ ̄)y: 5
  发表于 2015-2-5 02:45
大神( ̄︶ ̄)y: 5
  发表于 2015-2-1 22:34
大神( ̄︶ ̄)y: 5
发表于 2015-2-1 20:27
大神( ̄︶ ̄)y: 5
飞  发表于 2015-2-1 18:45
大神( ̄︶ ̄)y: 5
带我飞  发表于 2015-2-1 12:49
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 2 反对 0 送花

使用道具 举报

该用户从未签到

技术宅四周年庆组委会纪念

 楼主| 发表于 2015-1-31 19:12:02 | 显示全部楼层
@绯色の胖子 教程贴先放了,要艾特人吗 我不艾特了 手累~~~而且娇嗔渣渣,被大大看到会害羞

@小周的吐槽窝  !!!

点评

大神( ̄︶ ̄)y: 5.0
哇!!!好复杂  发表于 2015-4-7 23:41
大神( ̄︶ ̄)y: 5
点赞!  发表于 2015-1-31 21:18
图片,,看不到啊。  发表于 2015-1-31 20:35
窝来啦w  发表于 2015-1-31 19:44
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 4 天

连续签到: 1 天

[LV.2]偶尔看看I

全职高手|蓝雨全职高手|兴欣全职高手|微草全职高手|轮回全职高手|霸图Free|七濑遥Free|松冈凛PP|縢秀星盗墓笔记|解语花

发表于 2015-1-31 19:48:08 | 显示全部楼层
我来占个沙发w
表格啥的我也会排了!
小番茄讲的好细致昂!
原来还可以定义列的宽度的,涨姿势惹w

点评

我还以为你来吐槽教程太长~~  发表于 2015-1-31 19:50
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

发表于 2015-1-31 19:57:22 | 显示全部楼层
这排版~~!!!感谢楼主!!!
等我有时间了,发个帖子学习~~~

点评

来发糖啦  发表于 2015-1-31 21:07

评分

参与人数 1宅币 +5 收起 理由
原味板烧鸡腿堡 + 5

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 1 反对 0 送花

使用道具 举报

签到天数: 31 天

连续签到: 1 天

[LV.5]常住居民I

技术宅四周年庆活动奖励技术宅四周年庆组委会纪念Free|橘真琴刀剑乱舞|鲶尾藤四郎

发表于 2015-1-31 20:05:44 | 显示全部楼层
这不是漫区经常用的那种排版嘛2333 原来是这样~~受教了
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 141 天

连续签到: 1 天

[LV.7]常住居民III

K-ON|琴吹紬K-ON|平泽唯K-ON|中野梓K-ON|秋山澪K-ON|田井中律Free|橘真琴Free|松冈凛Free|七濑遥Free|叶月渚Free|龙崎怜PP|宜野座伸元PP|縢秀星PP|常守朱PP|狡啮慎也PP|槙岛圣护宫崎骏|阿莉埃蒂

发表于 2015-1-31 20:34:21 | 显示全部楼层
太赞!!!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 送花

使用道具 举报

签到天数: 3 天

连续签到: 1 天

[LV.2]偶尔看看I

技术宅四周年庆组委会纪念

发表于 2015-1-31 20:37:38 | 显示全部楼层
好叼
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 送花

使用道具 举报

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

技术宅四周年庆活动奖励技术宅四周年庆组委会纪念CP|ZeRyCP|朽。星座|狮子座

发表于 2015-1-31 20:39:52 | 显示全部楼层
好像颜色最好用#开头的数字表示,用RBG的话发表出来可能会变色_(:зゝ∠)_
不知道为什么_(:зゝ∠)_

点评

嗯,编辑器总是那么调皮!  发表于 2015-1-31 20:44
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

技术宅四周年庆活动奖励技术宅四周年庆组委会纪念CP|ZeRyCP|朽。星座|狮子座

发表于 2015-1-31 20:43:55 | 显示全部楼层
表格的套嵌使用那几个,每个套嵌的表格都是要居中的。。。不然就。。。偏向一边的_(:зゝ∠)_
我只是因为强迫症看了好难过。。。

点评

修改了,拯救了强迫症!~~  发表于 2015-1-31 21:16
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 4 天

连续签到: 1 天

[LV.2]偶尔看看I

发表于 2015-1-31 21:30:59 | 显示全部楼层
好赞的娇嗔!马住用电脑慢慢学!

来自:Android客户端
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

该用户从未签到

发表于 2015-2-1 07:59:35 | 显示全部楼层
好教程!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 414 天

连续签到: 6 天

[LV.9]以坛为家II

技术宅四周年庆活动奖励技术宅四周年庆组委会纪念宫崎骏|无脸男刀剑乱舞|萤丸野良神|雪音一人之下|诸葛青史莱姆|利姆露我英|上鸣电气国庆70周年纪念

发表于 2015-2-1 18:48:10 | 显示全部楼层
好厉害∑( ° △ °|||)︴
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

签到天数: 15 天

连续签到: 1 天

[LV.4]偶尔看看III

全职高手|叶修盗墓笔记|张起灵盗墓笔记|吴邪盗墓笔记|解语花恋与制作人|白起全职高手|兴欣全职高手|蓝雨全职高手|微草全职高手|轮回全职高手|霸图剑网3|藏剑技术宅四周年庆活动奖励技术宅四周年庆组委会纪念

发表于 2015-2-1 22:34:57 | 显示全部楼层
我震惊于那排颜色_(:_」∠)_
终于可以用点别的颜色了好兴奋
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

该用户从未签到

发表于 2015-2-1 23:16:49 | 显示全部楼层
本帖最后由 独步倾城 于 2015-2-3 19:56 编辑

颜色参考表吓尿了。


                               
登录/注册后可看大图
明天来研究。好困QAQ

晕掉了。懒得研究了。

1
23
45
6666666
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

本版积分规则

小黑屋手机版腾讯分析

JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

GMT+8, 2020-2-28 10:24 Processed in 0.193605 second(s), 102 queries .

© 2020 技术宅(基宅) Powered by Discuz! X3.4 Theme by Jvmao 粤ICP备18082987号-1

快速回复 返回顶部 返回列表