华丽丽的排版教程
本帖最后由 番茄星人 于 2015-1-31 21:15 编辑http://pic.zcom.com/u/attachment/201111/28/1296537_1322487502EHwn.png
前话：
之前不少人跟我提过排版教程，我看了一下，论坛没完全的排版教程，高级编辑教程倒是有。
于是各种原因，这个教程就出来，刚好赶上（拖）区版活动。
娇嗔参考了很多帖子，如有雷同，就是参考！！
好吧，我们开始吧#12t
伸手党直接拉到后面去复制代码就可以拉！！！！#dm
table、tr、td基础
其实排版就是排table，table（表格）是论坛帖子的骨架，所以有必要熟悉相关姿势
表格由 table 元素以及一个或多个 tr、 td 元素组成。tr 元素定义表格行，td 元素定义表格列.
是行代码
则是列代码
一行一列：
一行两列：
两行两列：
PS:每个元素都是由2个组成，元素必须合拢，td元素放置在tr元素之内。
[ table=98%,color] [ /table]
此为表格的框架，任何表格都必须使用
98%：设定表格宽度为98%，可以使用固定数值但不能超过560，数值超过则变98%，百分数的最大数值也是98%。
color：设定表格的背景颜色，可以使用颜色的英文单词，也可以使用RGB格式或直接使用颜色代码#ffffff（把这个和RGB格式一对照你就会明白。。。不解释）
1、创建一个一行一列的表格：
效果图：
2、创建一个两行两列的表格：
效果图：
3、创建一个两行两列，宽度为50%的表格：
效果图：
4、创建一个两行两列，宽度为50%，颜色为黑色的表格：
效果图：
注：
1、table代码的颜色代码不可单独使用，必须先定义表格的宽度后才可以定义颜色；
2、table代码不能自定义边框颜色；
3、table代码不能自动居中，如需要则需使用居中代码;
4、table代码最多可以重叠五层，第六层开始代码失效（注意：在DZ编辑框中，只显示四层的表格。。。第五层就不显示了）
示例1：
示例2：
示例3：
现在，我们来详细了解一下行代码 高级排版必备！！！
定义行的颜色
注：如果table定义了颜色之后，此处会失效。。。优先选择行颜色。。。
定义列的宽度
此处定义列的宽度，可以为固定数值，也可以为百分数。固定数值不得大于560，否则会变成98%，百分数最大值也只为98%
合并单元格
第一个数值为列，第二个为行。
这个的意思就是，2列，1行合并为一个单元格，其实也可以理解为这个单元格占了2看、列1行的最小单元格。
定义合并单元格的宽度】
示例1：
1
15
1357
12345678
1
15
1357
12345678
说明：
1.定义表格的宽度为500；
2.定义行的颜色为red（红色）；定义合并8列1行；
3.定义行的颜色为blue（蓝色）；定义合并4列1行*2；
4.定义行的颜色为yellow（黄 色）；定义合并2列1行*4；
5.定义行的颜色为green（绿色）；没有定义。。。就是一个很简单的列*8。
示例2：
1
23
45
666666
1
23
45
666666
说明：
1.定义表格的宽度为500；
2.定义行的颜色为red（红色）；定义合并8列1行；
3.定义行色颜色为blue（蓝色）；定义合并4列2行；定义合并4列1行；
4.定义行的颜色为yellow（黄 色）；定义合并2列2行；定义合并2列1行；
5.定义行的颜色为green（绿色）；定义行*6
表格的嵌套使用
1.色彩渐变框
表格嵌套其实主要是使用帖子编辑器左上角的表格编辑器嵌套出来，至于这样使用这里不详细讲，因为可以看看、论坛入门的技术贴。
内容
内容
]
内容
内容
内容
2.单色间隔框
内容
内容
内容
内容
熟悉了表格的嵌套以后，我们就可以在表格中插入文字、静态图片、动态图片等。。。
如下~~~~
http://pic.zcom.com/u/attachment/201111/28/1296537_1322490261HMFd.png
http://pic.zcom.com/u/attachment/201111/28/1296537_1322490261HMFd.png
http://i1.17173cdn.com/9ih5jd/YWxqaGBf/forum/files/2014/04/30/211005zn73099j00cjhkxc.gif
http://i1.17173cdn.com/9ih5jd/YWxqaGBf/forum/files/2014/04/30/211005zn73099j00cjhkxc.gif
接着我们研究一下高级的东西
1.边框细化
这种效果是怎样做出来？
这不简单吗？！！用表格编辑器先做个棕色3行3列的表格，然后嵌入一个粉色1行1列表格，再嵌入一个白色1行1列表格就可以了。
真的那么简单吗，我们先试试
3*3 的棕色表格
由于编辑器有时发病的原因可能出现下面两种情况（由于编辑器对空格读取的BUG）
这时的代码是这样的
接着看
格子大小不对啊。
这时候，要求是第一列和第三列比较细小的
这时候我们可以将代码中的的第一个和第三个改为
变成这样
没有BUG时效果：（基本搞定了）
如果出现BUG，第一行和最后一行还是很粗啊~~
这时候我们在表格中编上编号
1 23
4 56
7 8 9
这时候代码
1 23
4 56
7 8 9
我们需要把编号为1、2、3、4、6、7、8、9的格子都变小
这时候就把代码中含有上面那些数字的内容及其左右的空格都删掉，
这样
5
然后把里面的5删掉，再嵌入粉色和白色表格就可以了!!!~~~#om
PS:如果在嵌入其他表格时出现这种需要将表格细化的问题，可以采取跟上面一样的方法（就是删去空格啦）
2.善用浮动
http://m3.img.srcdd.com/farm4/d/2015/0131/17/E4306B11F852BB1393C8899DA73FAE55_B1280_1280_226_252.jpeg这是使用2个小表格
内容1
内容 2
内容3
http://m3.img.srcdd.com/farm4/d/2015/0131/17/F3795CCFE9D6B95F9ADC49FA69CD3100_B1280_1280_224_251.jpeg 这是用右浮动
static/image/hrline/5.gif
内容~~~~
static/image/hrline/5.gif
PS：在使用多表格加入图片是，应该使图片左边第一个的宽度等于图片宽度例如：=300]=300,200]............
在使用浮动加入图片时，赢先把文字部分编辑好，然后载入图片，然后再浮动。
3.内容丰富化
其实对排版来说，表格的应用知识建立一个框架，最终还是要看内容。
1.自行PS背景颜色跟帖子背景颜色适配的图；
2.避免审美疲劳，多改变版面的分割格局；（多数复杂的排版利用合并表格的方式实现，合并分析很累，我也没时间搞，以后有时间补，喂！关键的东西没出！#dm）3.多利用其他素材。
（甚至可以将图片素材做成高级排版样子，神不知鬼不觉地嵌入表格中）
https://i1.cdn.gn00.com/forum/201412/26/101758k78y78x778wrsxus.png.thumb.jpg大家好，我是番茄星人写教程好累的有木有！尤其是赶出来的！小周你要的娇嗔！！！@小周的吐槽窝话说姬宅的帖子编译器#fm，经常莫名BUGstatic/image/hrline/1.gif
最近很忙，很多东西都顾不上了
static/image/hrline/line7.png
辛苦胖子了！~~
话说这个教程就先学到这里感谢你把教程看到这里有空的话可以来这里看看 ~~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
@@15!! 乃应该先解释一下tr表示行 td表示单元格~再解释合并单元格比较方便详细~
另外
>>关于表格宽度
大于560的表格~可以用图片人工扩大~但最大只到710像素
>>关于浮动还有区别
用表格分列~内容素垂直居中
而用浮动代码素垂直居顶，而且浮动左右素有大约一个半角空格的间隙的 @绯色の胖子 教程贴先放了，要艾特人吗 我不艾特了 手累~~~而且娇嗔渣渣，被大大看到会害羞
@小周的吐槽窝！！！ 我来占个沙发w
表格啥的我也会排了！
小番茄讲的好细致昂！
原来还可以定义列的宽度的，涨姿势惹w 这排版~~！！！感谢楼主！！！
等我有时间了，发个帖子学习~~~ @@1!!这不是漫区经常用的那种排版嘛2333 原来是这样~~受教了 太赞！！！ 好叼+245+ 好像颜色最好用#开头的数字表示，用RBG的话发表出来可能会变色_(:зゝ∠)_
不知道为什么_(:зゝ∠)_ 表格的套嵌使用那几个，每个套嵌的表格都是要居中的。。。不然就。。。偏向一边的_(:зゝ∠)_
我只是因为强迫症看了好难过。。。 好赞的娇嗔！马住用电脑慢慢学！
来自:Android客户端 好教程！ 好厉害∑( ° △ °|||)︴ 我震惊于那排颜色_(:_」∠)_
终于可以用点别的颜色了好兴奋@@13!! 本帖最后由 独步倾城 于 2015-2-3 19:56 编辑
#24x颜色参考表吓尿了。
static/image/hrline/line7.png明天来研究。好困QAQ
晕掉了。懒得研究了。
1
23
45
6666666