转跳到内容

【排版科普】表格,浮动与简易图片处理(上篇)


推荐贴

 

 

[align=center][align=center]

[table=550,#ded5da]

[tr=rgb(178,134,183][td][/td][td][/td][td][/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr][td]

[/td][td][align=center][table=98%,#b286b7]

[tr][td] [align=right][align=center]—— 静岳做的 ——

【排版科普】表格,浮动与简易图片处理(上篇)

———— 各类排版问题和经验都欢迎回复本帖讨论 ————

 

[align=right][float=left]300,246https://sstmlt.moe/data/attachment/forum/201506/25/150855o2x3nffifpfcckis.jpg[/img][/float]

【前言】

 

[/align][align=right]简单的部分就不多说了。

颜色斜体粗体删除线这些具体的文字处理不会的话,

找个老司机问问就好。

或者直接来问我啦。

复杂的PS技巧需要自己买书学习或者看网络教程。

 

[align=left]

而这里,介绍的主要是:

 

[align=center]如何利用DZ的表格代码、浮动功能、和很简单的图片处理

把版面Duang出以下效果:

[/align][/align][/align][/align][/align]

[align=center] 650,500https://i.sstmlt.com/peEAE.jpg[/img]

 

[align=left][align=center]如果有兴趣的话,就来跟静岳一起努力吧!

[/align]

[align=left][fold=不包含卖萌与详细解释的简略版教程]

[backcolor=Black]· 把表格代码中的[table=XX%]的括号里加上“,#XXXXXX(十六进制RGB颜色代码)”,可以改变整个表格的背景色。

· 把表格代码中的[tr]后面加上“=rgb(XXX,XXX,XXX)”(十进制RGB颜色代码),可以改变表格该行的背景色。

· 通过QQ的截图工具可以迅速地定位自己想要的颜色的rgb代码。

· 这里是常用的rgb颜色这里是一些配色方案

· 把[table=XX%]里的“XX%”换成“XXX(具体数字)”,可以让表格大小固定为该值(像素)。这种方法在数字接近600时失效。

· 想要制作宽度大于600像素的固定大小的表格,可以再表格中加入一个宽度高于600像素的图片,把表格撑大到合适的宽度。[/backcolor]

[/fold]

720,2https://sstmlt.moe/data/attachment/forum/201506/25/151607scq9vw0vykckf54f.jpg[/img]

[/align][/align][/align][/td][/tr]

[/table][/align][/td][td]

[/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr=rgb(178,134,183)][td][/td][td][/td][td][/td][/tr]

[/table][/align][/align]

 

链接到点评
  • 回复 113
  • 创建于
  • 最后回复

 

 

[align=center][align=center]

[table=550,#ded5da]

[tr=rgb(178,134,183][td][/td][td][/td][td][/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr][td]

[/td][td][align=center][table=98%,#b286b7]

[tr][td] 【表格的使用】

1. 利用表格制作边框。[float=right]400,600https://i.sstmlt.com/0eEAE.jpg[/img][/float]

右边,绅士向游戏交流区的标志性建筑物想必民那都不陌生。

而其中的【每月精选目录单】也是利用DZ表格代码制作边框的典例。

 

制作原理:

 

· DZ表格可以设置背景色

· 如果在一个表格中建立另一个表格,外面表格的背景色会被里面表格的背景色覆盖掉。这样外面表格的颜色就只会显示出一点,这样就能做出一个边框效果。

· 利用多个不同颜色的表格嵌套,就可以做出各种不同颜色搭配的边框。

 

· 我们不仅可以设置整个表格的背景色,每行的背景色也可以单独设置

· 利用这一特性设置每行背景色不同,并且把装饰用的行高调整为0,就能获得另一种形式的边框。

 

 

制作步骤:

1. 做一个5X3的表格 ↓

 

[table=50%]

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

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

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

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

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

[/table]

2. 点击右上角的【高级】,勾选【纯文本选项】,会看到如下代码:

[table=50%]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[/table]

· 把其中的[backcolor=Black]50%[/backcolor]改为[backcolor=Black]98%[/backcolor],后面加上[backcolor=Black],#ded5da[/backcolor]

这一步的意义是[backcolor=Black]【把表格宽度改为版面的98%,并且设定其颜色为ded5da所代表的颜色】[/backcolor]。

· 在其中第二、六行的[backcolor=Black][tr[/backcolor]后面加上[backcolor=Black]=rgb(178,134,183)[/backcolor]

这一步的意义是[backcolor=Black]【让表格的第一行和第五行背景色变为[/backcolor][backcolor=Black][backcolor=Black]rgb(178,134,183)所代表的颜色[/backcolor]

[/backcolor]· 在其中第三、五行的[backcolor=Black][tr[/backcolor]后面加上[backcolor=Black]=rgb(214,188,215)[/backcolor]

之后代码就会变成:

[table=98%,#ded5da]
[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]
[/table]

表格就会变成:

[table=98%,#ded5da]

[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]

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

[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]

[/table]

 

3. 处在最中间的表格,就是最终我们要填写具体内容的地方。

文字加入之后表格会变成这个样子:

[table=98%,#ded5da]

[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]

[tr][td] [/td][td] 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试[/td][td] [/td][/tr]

[tr=rgb(214,188,215)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(178,134,183)][td] [/td][td] [/td][td] [/td][/tr]

[/table]于是这样就可以做出我们想要的边框效果了。

[align=center]720,2https://sstmlt.moe/data/attachment/forum/201506/25/151607scq9vw0vykckf54f.jpg[/img][/align][/td][/tr]

[/table][/align][/td][td]

[/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr=rgb(178,134,183)][td][/td][td][/td][td][/td][/tr]

[/table][/align][/align]

 

 

链接到点评

 

 

[align=center][align=center]

[table=550,#ded5da]

[tr=rgb(178,134,183][td][/td][td][/td][td][/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr][td]

[/td][td][align=center][table=98%,#b286b7]

[tr][td] 【表格的使用】

[float=right]250,235https://i.sstmlt.com/ceEAE.jpg[/img][/float]

2. 改变边框颜色

那么,我们可以为边框填充多少种颜色呢?理论上来讲,表格的颜色可以是你任选的[backcolor=Black]16777216[/backcolor]种之一。

很吓人的数字是吧!

所以用表格搭配出各种不同颜色的边框效果,是绝对没问题的。

而在教大家怎么改变颜色之前,有必要先介绍一下关于rgb颜色的基础知识。

懂得原理的同学可以跳过。

 

[backcolor=Black]制作原理

[/backcolor]

[fold=什么是RGB颜色:]

RGB色彩模式是工业界的一种颜色标准,是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

电脑屏幕上的所有颜色,都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。

通常情况下,RGB各有256级亮度,用数字表示为从0、1、2...直到255。注意虽然数字最高是255,但0也是数值之一,因此共256级。如同2000年到2010年共是11年一样。

按照计算,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

——摘自百度百科词条:RGB颜色

 

简单地说,就是:[backcolor=Black]其实我们看到的电脑上的每一个小点处的颜色都是由一个rgb颜色的代码所代表的。[/backcolor]这个代码以红、绿、蓝的顺序依次排列,比如刚才我们用到的[backcolor=Black]【rgb(178,134,183)】,放在【tr=】的后面[/backcolor],就是指:

[backcolor=Black]【表格该行的背景色为(红色通道亮度为178,绿色为134,蓝色为183)代表的颜色】[/backcolor]

而【table=98%】之后的【#ded5da】中的[backcolor=Black]ded5da,则是用16进制表示[/backcolor]的rgb颜色代码。而[backcolor=Black]代码【table=98%,#ded5da】的意思是说:

【表格宽度占据页面的98%,表格背景色为(红色通道亮度为de,绿色为d5,蓝色为da)代表的颜色】[/backcolor]

其实RGB之所以有256级亮度,就是因为2进制的100,000,000,恰好是是16进制的100,也就是10进制的256。

嗯哼以上这句话看不懂没关系。总之读完这段话之后获得两个信息就好:

[backcolor=Black]1. 电脑屏幕上显示的颜色是由一种叫【RGB颜色】的代码控制的。

2. 这种代码有10进制和16进制两种表达方式。[/backcolor]

[/fold]

所以,想要设定边框的颜色就很简单了:

第一,我们需要[backcolor=Black]找到喜欢的颜色的RGB代码[/backcolor]。

第二,把相应的[backcolor=Black]代码填充到合适的位置[/backcolor]。

当然,在这之前还有一个很重要的步骤,就是[backcolor=Black]选取合适的配色[/backcolor]。关于配色的问题,只要百度“配色”两个字就可以找到很多方案。静岳的话,喜欢到这里找灵感。

 

最后,如何[backcolor=Black]简单迅速地找到任意一个颜色的RGB代码呢[/backcolor]?

大家在上论坛的时候是不是一般都开着QQ呢?

如果是的话,请同时按下Ctrl+Alt+A,进入截图模式。

注意到[backcolor=Black]鼠标指向的地方下面会有一个代码[/backcolor]了吧。没错,就是鼠标指向的点的RGB颜色代码。

用这种方法可以迅速地得到想要的颜色代码。需要16进制的代码的话没关系,只要在截图的界面按下Ctrl代码就会自动转换为十六进制【感谢@Sayaost 一色彩羽提供的方法!】。

 

[align=right][backcolor=Black] 制作步骤[/backcolor]

[/align]

[float=left]300,352https://i.sstmlt.com/keEAE.jpg[/img][/float]1. 以之前的表格为例。这次我们要做一个颜色厚重沉稳的边框。

这样的边框用来修饰版规是再好不过的。

配色以左图为准。右下角的灰绿,浅灰和黑色很适合营造沉稳的感觉。

 

2. 利用QQ截图功能和计算器,得出我们需要的颜色代码分别是:

灰绿色=rgb(98,101,90)

浅灰色=rgb(196,195,191)

黑色=rgb(61,61,71)= #3d3d47

 

3. 把颜色代码填入相应的位置,得到如下代码:

[table=98%,#3d3d47]
[tr=rgb(98,101,90)][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(196,195,191)][td] [/td][td] [/td][td] [/td][/tr]
[tr][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(196,195,191)][td] [/td][td] [/td][td] [/td][/tr]
[tr=rgb(98,101,90)][td] [/td][td] [/td][td] [/td][/tr]
[/table]

[align=right]注意到我们刚才找到的颜色代码,出现在哪些位置了么?

[/align]

表格则会变成这个样子:

[table=98%,#3d3d47]

[tr=rgb(98,101,90)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(196,195,191)][td] [/td][td] [/td][td] [/td][/tr]

[tr][td] [/td][td] [align=center]

节操の广场 版规明细[/align][align=center] 版本号:150619

 

[/align][align=center]200,65https://stimg.sstmlt.com/55_icon.png[/img][/align]

[align=center]欢迎大家来到和谐友爱的——节操の广场!

广场是同盟发/回贴限制最低的版区!

只要相互尊重,和谐相处,这里就是大家聊天交友拍打卖萌寻找伙伴的最佳去处!

 

[/align][/td][td] [/td][/tr]

[tr=rgb(196,195,191)][td] [/td][td] [/td][td] [/td][/tr]

[tr=rgb(98,101,90)][td] [/td][td][/td][td][/td][/tr]

[/table]

[align=right]文字取自节操の广场版规

 

[/align]最后,附上一些配色相关链接:

[backcolor=Black]RGB颜色速查表[/backcolor]

[backcolor=Black]一些有用的配色方案[/backcolor][align=center]720,2https://sstmlt.moe/data/attachment/forum/201506/25/151607scq9vw0vykckf54f.jpg[/img][/align][/td][/tr]

[/table][/align][/td][td]

[/td][/tr]

[tr=rgb(214,188,215)][td][/td][td][/td][td][/td][/tr]

[tr=rgb(178,134,183)][td][/td][td][/td][td][/td][/tr]

[/table][/align][/align]

 

 

链接到点评

[align=center][table=550]

[tr=rgb(151,54,45)][td] [align=right]

[align=left]【表格的使用】[/align][/align][float=right]200,150https://i.sstmlt.com/deEAE.jpg[/img][/float]3. 固定表格宽度

 

[backcolor=Black] 原理 [/backcolor]

 

[align=left]之前在制作边框的时候我们就已经修正过表格宽度的代码了。没错!就是那个从【50%】改到【98%】的操作。

 

事实上...

这种[backcolor=Black]百分比形式的表格宽度[/backcolor]是很影响排版效果的!

因为大家都知道,SS同盟有窄版和宽版两种格式。而表格如果按照占据页面百分比的宽度来定义其宽度的话,宽版的98%要比窄版的98%多出来大概1/3的宽度。也就是说...

在窄版里调整好的排版在宽版里会各种不能看...

解决的办法也很简单,我们只要[backcolor=Black]固定表格宽度为一个特定值[/backcolor]就可以了。

[backcolor=Black] 步骤

[/backcolor]

3.1 低于550px的表格宽度固定。

 

很简单,[backcolor=Black]把代码中的【table=】后面的百分比换成一个固定的数字XXX[/backcolor],我们就能得到一个宽度为XXX像素的表格了。

比如对于一个原本宽度为【占页面整体宽度98%】的表格:

[table=98%]
[tr][td][/td][/tr]
[/table]

它是这个样子的:

[table=98%]

[tr][td]

[/td][/tr]

[/table]

当我们把其中的98%改为300的话...

[table=300]
[tr][td][/td][/tr]
[/table]

它就变成了这个样子:

[table=300]

[tr][td]

[/td][/tr]

[/table]

但是这个办法在[backcolor=Black]数字大到600左右的时候就失效了[/backcolor]。输入数字之后保存,表格会重新变回98%的模式。

 

3.2 高于550px的表格宽度固定。

 

在这种情况下,我们就需要借助DZ表格的一个很有趣的特点来帮助我们排版了:

[backcolor=Black]“一个宽度固定的表格,如果其中有一个比它更宽的图片,那个表格就会被撑大到这个图片的宽度。”[/backcolor][float=left]400,700http://i1.tietuku.com/9edbe1ca82367197.jpg[/img][/float]

有没有想到哪个很特别的排版系列?

 

没错!就是涂鸦手绘区的——涂鸦上色系列活动

 

据说...咳咳,不用据说啦。这个版面之所以突破了窄版的天际,就是因为帖子中部的表格里横着的三张图,加起来之后实在...太!宽!啦!

 

 

所以,我们在排版的时候同样可以利用这一点,让我们的表格宽度突破550的限制。

 

怎么做呢?

 

答案当然是:

[backcolor=Black]在自己的排版中加入一个宽度高于550像素的图片![/backcolor]

 

对于大部分活动来说,宣传图本身pia在帖子最前面,就可以很完美地完成这个任务。如果没有那么宽的图也没关系。比如这个帖子,明显看不到有很宽的图出现嘛!

 

——当然,那其实是因为静岳藏了一个图在...

 

最~下~面!

 

当当当当——[backcolor=Black]一个和表格背景色一样的宽700像素,高2像素的长方形![/backcolor]你看不到你看不到你看不到...但是也很好地解决了问题!

所以固定表格宽度的原理和方法,大家明白了么?

 

[/align][align=center]↓恩,没错↓700,2https://i.sstmlt.com/neEAE.jpg[/img]↑它在这↑

[/align][/td][/tr]

[/table][/align]

 

链接到点评

[align=center][table=550,#000000]

[tr][td][table=550,#ffffff]

[tr][td][align=center][table=550,#000000]

[tr][td][align=center][table=550,#ffffff]

[tr][td][align=center][align=center]优秀排版示例:

 

[/align][align=right][align=left][align=right][backcolor=Black](按照教程中出现先后顺序排列)[/backcolor]

[/align][backcolor=Black][/backcolor][/align][backcolor=Black]

[/backcolor][/align][align=left]【活动】毕业季,一起听听动漫校歌[align=right]排版:风荷 @fenghe1018

[align=left]【窝是颜艺帝】[align=right]排版:Q4 @q453166509

[/align]【公告】SS同盟三周年庆[align=right]排版:岩白 oatmeal @770716811

[align=left]【游戏推荐】绅士区每月游戏精选总楼

[align=right]排版:坏心眼的L @a130a11

[align=left]【版规】 水区___奖惩标准及主题分类说明

[align=right]排版:苍云静岳

[align=left]涂鸦上色活动第八期/六一快乐,不过没有礼物[/align][/align][/align][/align][align=right]排版:@结城明日奈 [/align][/align][/align][/align][/align][/align]

感谢每个人为清新蔚蓝的论坛做出的努力!

[/align][/td][/tr]

[/table][/align][/td][/tr]

[/table][/align][/td][/tr]

[/table][/td][/tr]

[/table]

[/align]

链接到点评
天下暮雪 发表于 2015-6-29 11:00

同上,然而并没有多少人会用

我个人是不擅长或者不想找背景配图,找过几次都是瞬间出戏的节奏www

对于表格 ...

如果瞬间出戏的话,那就需要更用心找啊www~

表格一般也不是用那个淡蓝色边框的。如果是简单表格的话,要边框也没什么用。如果真的想要黑色边框的话,要自己拿代码做。

 

 

 

链接到点评
苍云静岳 发表于 2015-6-29 11:05

如果瞬间出戏的话,那就需要更用心找啊www~

表格一般也不是用那个淡蓝色边框的。如果是简单表格的话,要边 ...

所以后来我都发展成纯色底板了……

还有差点忘了问,为什么WORD的内容粘贴到DZ上会出现字体类型和大小不一,文章极为紧凑到连空格都没有(但实际上我有打空格和回车)这种问题啊

链接到点评
天下暮雪 发表于 2015-6-29 11:22

所以后来我都发展成纯色底板了……

还有差点忘了问,为什么WORD的内容粘贴到DZ上会出现字体类型和大小不一 ...

 

你试过用右上角的【高级】里的【从word粘贴内容】了么?

 

速度,速度速度速度加快~速度速度速度速度加快~

高速公路上,始终和我保持零距离。

 

 

速度,速度速度速度加快~速度速度速度速度加快~

高速公路上,始终和我保持零距离。

 

 

 

 

 

 

链接到点评
天下暮雪 发表于 2015-6-29 11:29

试过,然而不管是用这个还是直接Ctrl+CV连技都会或多或少出现这种现象

因为DZ代码是不支持首行缩进的。

比如:

 

[align=left]速度,速度速度速度加快~速度速度速度速度加快~[/align][align=left]高速公路上,始终和我保持零距离。[/align][align=left] [/align][align=left] [/align][align=left] 速度,速度速度速度加快~速度速度速度速度加快~[/align][align=left] 高速公路上,始终和我保持零距离。[/align][align=left] [/align]前面的一段我在word里是首行缩进。

后面的一段我在word里是自己打的空格。所以结果不同。

 

PS. 所以建议你写作的时候不要用首行缩进分段法。可以选择首行顶格写,每段和每段之间空一行。比如:

 

“他的血是冷的”

 

“他的心是冷的”

 

“他的刀是冷的”

 

“他的剑是冷的”

 

“...这孙子冻上了吧?!”

↑ 像这样www

 

链接到点评
苍云静岳 发表于 2015-6-29 10:58

写的时候就是怀着不会有多少读者的心情去写的。

但你得这么想——多一个算一个嘛。

毕竟有更多的 ...

{:7_503:}不。。很有用,昨天下午对着乃这篇和百度的一篇duang了一下午

总算是有点起色了,不过配色方面我感觉没人救得了窝啦

链接到点评
×
×
  • 新建...

重要消息

为使您更好地使用该站点,请仔细阅读以下内容: 使用条款