技术宅社区 ( ZAI | Z站 )

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

QQ登录

只需一步,快速开始

搜索
查看: 17060 | 回复: 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

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~快去设置签名吧~

签到天数: 551 天

连续签到: 1 天

[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
签名被小宅喵吞掉了~~~~(>_<)~~~~快去设置签名吧~
回复 支持 反对

使用道具 举报

签到天数: 7 天

连续签到: 1 天

[LV.3]偶尔看看II

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

点评

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

评分

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

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~快去设置签名吧~
回复 支持 1 反对 0

使用道具 举报

签到天数: 38 天

连续签到: 1 天

[LV.5]常住居民I

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

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

使用道具 举报

签到天数: 156 天

连续签到: 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 | 显示全部楼层
好教程!
签名被小宅喵吞掉了~~~~(>_<)~~~~快去设置签名吧~
回复 支持 反对

使用道具 举报

签到天数: 443 天

连续签到: 1 天

[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
签名被小宅喵吞掉了~~~~(>_<)~~~~快去设置签名吧~
回复 支持 反对

使用道具 举报

本版积分规则

小黑屋手机版腾讯分析

GMT+8, 2021-5-9 15:27 Processed in 0.248658 second(s), 80 queries .

© 2021 技术宅[基宅][Z站] Powered by Discuz! X3.4 Theme by Jvmao 粤ICP备18082987号-1

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