本帖最后由 番茄星人 于 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：
[mw_shl_code=applescript,true][/mw_shl_code]
说明：
1.定义表格的宽度为500；
2.定义行的颜色为red（红色）；定义合并8列1行；
3.定义行的颜色为blue（蓝色）；定义合并4列1行*2；
4.定义行的颜色为yellow（黄 色）；定义合并2列1行*4；
5.定义行的颜色为green（绿色）；没有定义。。。就是一个很简单的列*8。
示例2：
[mw_shl_code=applescript,true][/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，第一行和最后一行还是很粗啊~~
这时候我们在表格中编上编号
这时候代码
[mw_shl_code=applescript,true][/mw_shl_code]
我们需要把编号为1、2、3、4、6、7、8、9的格子都变小
这时候就把代码中含有上面那些数字的内容及其左右的空格都删掉，
这样
[mw_shl_code=applescript,true][/mw_shl_code]
然后把里面的5删掉，再嵌入粉色和白色表格就可以了!!!~~~
PS:如果在嵌入其他表格时出现这种需要将表格细化的问题，可以采取跟上面一样的方法（就是删去空格啦）
2.善用浮动
PS：在使用多表格加入图片是，应该使图片左边第一个[td]的宽度等于图片宽度例如： [tr][td=300][img=300,200]............[/img][/td][/tr]
在使用浮动加入图片时，赢先把文字部分编辑好，然后载入图片，然后再浮动。
3.内容丰富化
其实对排版来说，表格的应用知识建立一个框架，最终还是要看内容。
1.自行PS背景颜色跟帖子背景颜色适配的图；
2.避免审美疲劳，多改变版面的分割格局； （多数复杂的排版利用合并表格的方式实现，合并分析很累，我也没时间搞，以后有时间补，喂！关键的东西没出！） 3.多利用其他素材。
（甚至可以将图片素材做成高级排版样子，神不知鬼不觉地嵌入表格中）
| | | | | 大家好，我是番茄星人 写教程好累的有木有！尤其是赶出来的！ 小周你要的娇嗔！！！@小周的吐槽窝 话说姬宅的帖子编译器  ，经常莫名BUG 最近很忙，很多东西都顾不上了
辛苦胖子了！~~
| 话说这个教程就先学到这里 感谢你把教程看到这里 |
|
| | | |
颜色参考表
████ 皇家蓝(宝蓝) ：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
|
发表于 2015-1-31 02:48:36
提升卡
置顶卡
变色卡
发表于 2015-2-1 00:46:40
乃应该先解释一下tr表示行 td表示单元格~再解释合并单元格比较方便详细~
这不是漫区经常用的那种排版嘛2333 原来是这样~~受教了
发表于 2015-2-1 18:48:10
颜色参考表吓尿了。