2012-2-27 13:14
引用:刚刚发现关于表格嵌套部分原来的方法又可以使用了,前两天估计是论坛后台设置的问题,应该是现在调整好了。下面蓝色字体标示部分的内容可以正常使用。红色注意部分还保留下来了,也算是有问题时的一种解决思路。另外对table用法做了个简单解释,方便大家使用。
帖子最后加上了瞳瞳在彩云间的素材帖链接,大家可以用来装饰帖子。
看到有不少新来的兄弟在水吧开贴询问发帖编辑发图发视频的问题,想起了以前在LM的那个代码帖子,那个帖子是针对当时 Discuz! 5.5做的,现在我们用的 Discuz! 6.0.0 和以前比有些细节变化,基于原来的那个帖子简单改了改,希望能帮到想学习编辑发帖的兄弟们。
编辑帖子有两种模式,一种是代码模式、一种是所见即所得模式,两种模式的切换可以在论坛上方控制面板选项里设定,具体操作为“控制面板---编辑个人资料---论坛选项---编辑器模式”。论坛默认的是代码模式。所见即所得模式中不显示基本代码,而是直观的显示代码效果,用来进行简单的帖子编辑很方便。这里主要介绍的是代码模式,用代码模式可以实现一些比较复杂的帖子效果。
首先简单介绍一下发新话题的界面,如图:
最上方是编辑工具栏(下面具体介绍),中间是帖子内容区域,上传附件区域在浏览添加附件后在附件名称前面会出现[删除][插入]两个按钮,点[插入]按钮可以将该附件插入到帖子中光标所在位置,在附件较多的时候很有用(如本帖的“渐变色彩代码生成器”)。其他信息前面的复选框勾选后会出现阅读权限设置框,可以为帖子设置相应的阅读权限。至于预览帖子按钮,可以在发帖之前预览帖子的效果,不过帖子复杂的话,显示的效果会和发表后有些区别。最下方的恢复数据按钮,可以在编辑过程中由于断网等原因导致内容意外丢失时用来恢复数据,不过不是每次都有效。所以如果帖子较长的话,最好先在WORD或记事本编辑好再copy到帖子中。- 基本的编辑排版
编辑工具栏介绍:第一排:粗体、斜体、下划线文字、字体、字号、字体颜色、左对齐、居中、右对齐、插入超链接、插入邮件链接、插入图片、插入多媒体文件(音频、视频)、引用、代码第二排:清除文本格式、移除链接、撤销、重做、排序的列表(带序号)、未排序列表(不带序号)、减少缩进、增加缩进、左浮动、右浮动、插入免费信息
第一排前半部分按钮对应的代码和效果如下:代码 | 效果 | 复制内容到剪贴板 代码:[b]显示的文字[/b] | 显示的文字 | 复制内容到剪贴板 代码:[i]显示的文字[/i] | 显示的文字 | 复制内容到剪贴板 代码:[u]显示的文字[/u] | 显示的文字 | 复制内容到剪贴板 代码:[font=仿宋_GB2312]仿宋体[/font] | 仿宋体 | 复制内容到剪贴板 代码:[size=5]字号大小[/size] | 字号大小 | 复制内容到剪贴板 代码:[color=red]红色字[/color] | 红色字 | 复制内容到剪贴板 代码:[align=left]左对齐[/align] | 左对齐 | 复制内容到剪贴板 代码:[align=center]居中对齐[/align] | 居中对齐 | 复制内容到剪贴板 代码:[align=right]右对齐[/align] | 右对齐 |
上面表格里都是最基本的编辑排版,常使用WORD的都很熟悉,不再多说,在论坛右上角的“帮助”里有更详细的介绍。关于字号,论坛只提供了7种大小,其实可以使用pt为单位,比如指定size=10pt,这样对字体大小可以更随意的控制。
增加个彩色文字代码生成器:[attach]7683[/attach],将后缀torrent删除即可使用(论坛只支持torrent后缀的附件,其它格式可以手动添加后上传),使用方法很简单,下面是示例效果:
正是花开时候,露湿胭脂初透。爱花且殷勤相守,莫让花儿消瘦。这正是月圆时候,明月照满西楼。惜月且殷勤相守,莫让月儿溜走。似这般良辰美景,似这般蜜意绸缪,但愿,花长好月长圆人长久……
“左浮动”和“右浮动”主要是在图文混排时使用,具体代码是复制内容到剪贴板 代码:[float=left][/float]和[float=right][/float]示例代码:[float=left][img]http://www.kanqq.com/qq/mulu/linglei/863527212005.jpg[/img][/float]一艘船失事后,1名女乘客和10名男乘客漂到了一个荒岛上。一个月后,那个女的自杀了,因为她觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她埋了,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她挖出来,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,上帝把那个女的复活了,因为他觉得这几个月发生的事情实在太恶心了。 下面表格中左边为示例代码效果,右边使用代码和左边的唯一区别就是float=right 一艘船失事后,1名女乘客和10名男乘客漂到了一个荒岛上。一个月后,那个女的自杀了,因为她觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她埋了,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她挖出来,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,上帝把那个女的复活了,因为他觉得这几个月发生的事情实在太恶心了。 | 一艘船失事后,1名女乘客和10名男乘客漂到了一个荒岛上。一个月后,那个女的自杀了,因为她觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她埋了,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,他们决定把她挖出来,因为他们觉得这一个月发生的事情实在太恶心了。一个月后,上帝把那个女的复活了,因为他觉得这几个月发生的事情实在太恶心了。 |
其实混排并不一定必须是图文,你也可以用些文字将float代码中间的图片替换掉看看
“增加缩进”和“减少缩进”按钮,在排版对齐时很有用。代码示例:复制内容到剪贴板 代码:[indent]某男和某女因为没房子,在女方家度过新婚之夜。第二天早上小夫妻没下楼吃早饭,老两口没在意。中午,小两口仍没下楼。老两口以为他们昨晚太累了仍没在意。到了吃晚饭时见小两口仍没下来老头坐不住了,对小儿子说:“你姐和你姐夫昨晚不会有什么事吧?”小儿子回答:“没什么事啊。对了!昨晚我姐夫管我要一点凡士林油,很不巧我恰好用完了,于是我给了他一点我粘模型用的强力胶!”[/indent] 下面表格中第一行是未使用缩进的效果,第二行是上面的代码示例效果,第三行是两个缩进嵌套的效果。某男和某女因为没房子,在女方家度过新婚之夜。第二天早上小夫妻没下楼吃早饭,老两口没在意。中午,小两口仍没下楼。老两口以为他们昨晚太累了仍没在意。到了吃晚饭时见小两口仍没下来老头坐不住了,对小儿子说:“你姐和你姐夫昨晚不会有什么事吧?”小儿子回答:“没什么事啊。对了!昨晚我姐夫管我要一点凡士林油,很不巧我恰好用完了,于是我给了他一点我粘模型用的强力胶!” | 某男和某女因为没房子,在女方家度过新婚之夜。第二天早上小夫妻没下楼吃早饭,老两口没在意。中午,小两口仍没下楼。老两口以为他们昨晚太累了仍没在意。到了吃晚饭时见小两口仍没下来老头坐不住了,对小儿子说:“你姐和你姐夫昨晚不会有什么事吧?”小儿子回答:“没什么事啊。对了!昨晚我姐夫管我要一点凡士林油,很不巧我恰好用完了,于是我给了他一点我粘模型用的强力胶!” | 某男和某女因为没房子,在女方家度过新婚之夜。第二天早上小夫妻没下楼吃早饭,老两口没在意。中午,小两口仍没下楼。老两口以为他们昨晚太累了仍没在意。到了吃晚饭时见小两口仍没下来老头坐不住了,对小儿子说:“你姐和你姐夫昨晚不会有什么事吧?”小儿子回答:“没什么事啊。对了!昨晚我姐夫管我要一点凡士林油,很不巧我恰好用完了,于是我给了他一点我粘模型用的强力胶!”
|
编辑工具栏上还有“引用”按钮,在引用其它内容时使用;“代码”按钮,在插入代码时使用,象本文中所显示的所有代码,都是这样插入的;“免费信息”按钮,是在需要付费浏览的帖子中,免费部分的内容使用的。
论坛还支持飞行文字效果,在工具栏中没有显示,代码如下:复制内容到剪贴板 代码:[fly]会飞行的文字[/fly] 效果:
飞行字代码中不能嵌套其它字体效果,需要设置飞行字的字体、字号、颜色等参数,需要把飞行字代码放在最内层,代码示例:复制内容到剪贴板 代码:[color=green][size=4][b][font=仿宋_GB2312][fly]会飞行的文字[/fly][/font][/b][/size][/color] 效果:
另外还有隐藏功能代码,好像对普通会员也没有开放,代码如下:复制内容到剪贴板 代码:[hide]要隐藏的内容[/hide]或者[hide=50]要隐藏的内容[/hide] 因为偶没有隐藏权限,效果就不给出了,第一个代码其实就是需要回复才能浏览,第二个代码是积分高于50才能浏览。
- 各种素材的插入
- 图片的插入代码:
复制内容到剪贴板 代码:[img][/img],将图片地址放到[img]和[/img]之间。如[img]http://www.kanqq.com/qq/mulu/linglei/863527212005.jpg[/img] 此代码就是上面用的那个小图了。
再来个GIF的:
原来LM音乐资讯区有个GIF素材专贴,用来美化帖子很方便,可惜啊……
另外可以用[img=x,y][/img]代码定义图片在帖子中的高宽,x是宽度,y是高度。
因为论坛空间限制,所以要插入帖子的图片必须先上传到图床,然后从图床复制图片的地址。这里推荐个图床:
http://www.freep.cn/Default.aspx
该图床支持jpg, jpeg, jpe, jfif, png, gif, tif, tiff, bmp, dib格式,大小限1M,外链1个月,注册会员的外链时间可能会长些,偶没试过,不过图床确实很好用。
- 音频视频文件的插入
音频视频文件的插入从Discuz!5.5到Discuz!6.0有些变化,目前Discuz!6.0的代码格式统一是复制内容到剪贴板 代码:[media=ra,400,300,0][/media] 代码中ra代表real音频,对应的可以改成mp3、wma、rm、wmv、mov等,“400,300”是定义的播放器的宽度和高度,一般不需要调整,最后的那个“0”是指的是否自动播放,0为不自动播放,1为自动播放。代码示例:复制内容到剪贴板 代码:[media=mp3,400,300,1]http://www.microhard.cn/mp3/斯琴高丽-犯错.mp3[/media] 这是个MP3,自动播放,效果如下:
http://www.microhard.cn/mp3/斯琴高丽-犯错.mp3
其它音频视频示例,都设置为不自动播放了,省的听起来乱。
ra音频复制内容到剪贴板 代码:[media=ra,400,300,0]http://www.greenworm.com/loverindream/ycra/00049.ra[/media] 效果:http://www.greenworm.com/loverindream/ycra/00049.ra
wma音频复制内容到剪贴板 代码:[media=wma,400,300,0]http://211.142.31.152/music/bulageguangchang.wma[/media] 效果:http://211.142.31.152/music/bulageguangchang.wma
wmv视频复制内容到剪贴板 代码:[media=wmv,400,300,0]http://4.mtvku.com:8080/mtv/2006-12-5/7.wmv[/media] 效果:http://4.mtvku.com:8080/mtv/2006-12-5/7.wmv
mov视频复制内容到剪贴板 代码:[media=mov,400,300,0]http://www.vai.com/updates/vh-1_vids/MOV00059.mov[/media] 效果:http://www.vai.com/updates/vh-1_vids/MOV00059.mov
rmvb视频复制内容到剪贴板 代码:[media=rm,400,300,0]http://www.cqsh.cn/video/北京欢迎你.rmvb[/media] 效果:
http://www.cqsh.cn/video/北京欢迎你.rmvb
- 超链接的插入(论坛不允许发布E-mail地址,就不再说邮件链接了)
复制内容到剪贴板 代码:超链接有两种形式,[url][/url]和[url=链接地址]文字[/url]例如:[url]http://69.4.228.121/bbs/faq.php?action=message&id=18[/url][url=http://69.4.228.121/bbs/faq.php?action=message&id=18]我如何使用Discuz!代碼[/url]两个都是Discuz!论坛的帮助页面。 显示效果分别如下:http://69.4.228.121/bbs/faq.php?action=message&id=18我如何使用Discuz!代碼
- flash动画的插入
编辑工具栏上没有了插入flash的按钮,可以直接使用代码插入,代码如下:复制内容到剪贴板 代码:[flash][/flash]例:[flash]http://imgfree.21cn.com/free/flash/9.swf[/flash] 效果如下:
[flash]http://imgfree.21cn.com/free/flash/9.swf[/flash]
现在各视频网站的视频多数都是flash格式,都可以使用此种方法插入。
- 表格的使用
看见别人的帖子有漂亮的背景和边框羡慕吧?不用羡慕,前面两个问题只能算是皮毛,真正的戏肉来了
表格代码:复制内容到剪贴板 代码:[table=数值,颜色][tr][td][/td][/tr][/table]
[table][/table]是定义整个表格的,默认是透明背景,整个帖子宽度,可以用[table=绝对数值(相对数值)]可以定义表格的宽度,如able=750 table=80%等,绝对数值以像素为单位,以桌面像素为1024*768为例,能显示的整个帖子的宽度大约800像素左右;相对数值是相对整个帖子宽度而言的,一般使用相对宽度比较方便。用[table=数值,颜色]可以同时定义表格背景颜色和宽度.如[table=50%,red]是一个相对帖子50%宽度红色背景的表格.注意,定义背景色必须同时定义宽度,且宽度在前。
即[table]共有三种用法:
[table] 即默认用法,表格透明,宽度为帖子宽度的100%;
[table=数值] 定义表格宽度,可使用绝对宽度和相对宽度两种数值;
[table=数值,颜色] 定义表格的宽度和颜色,注意逗号为英文逗号,定义表格颜色必须同时定义宽度,且宽度在前。
[tr][/tr]是定义表格行的,一个[tr]和[/tr]是一行,用[tr=颜色]可以定义行颜色,行颜色会覆盖表格背景色.
[td][/td]是定义表格列的,由于在Discuz!代码中,表格的定义是先行后列,所以[td][/td]必须在[tr][/tr]内使用,也就是说,要定义一个表格,[table][tr][td]的包含关系一定不能错.
在一个[tr]和[/tr]中,可以使用多个[td][/td]来定义多列,如:[tr][td][/td][td][/td][/tr]是定义一个包含两列的行.这时候,可以用[td=x,y,相对宽度]来具体定义其中的一个单元格.(可实现单元格的合并),其中x代表列数,y代表行数,示例代码:[table=75%][tr][td=1,1]软件下载[/td][td=1,2]应用交流[/td][td=1,1]硬件交流[/td][/tr][tr][td=1,1]代理专区[/td][td=1,1]建站交流[/td][/tr][tr][td=3,1]技术档案[/td][/tr][/table] 效果如下:这样利用表格给帖子划分布局是不是很不错?
再说说边框,其实帖子边框是利用表格的嵌套功能实现的,就是两个或者三个甚至更多表格分别指定不同的背景色嵌套在一起.上面的那个表格由于没有定义背景色,所以是透明的,下面我们先将其背景定义成白色,然后再添加个蓝色边框,代码示例:复制内容到剪贴板 代码:[table=500,blue][tr][td][table=100%,white][tr][td=1,1]软件下载[/td][td=1,2]应用交流[/td][td=1,1]硬件交流[/td][/tr][tr][td=1,1]代理专区[/td][td=1,1]建站交流[/td][/tr][tr][td=3,1]技术档案[/td][/tr][/table][/td][/tr][/table] 效果如下:
注意嵌套表格中的内表格如果使用相对宽度是指的外表格宽度的百分比,这是在表格上Discuz!6.0一个新的变化,原来Discuz!5.5进行嵌套边框只要将外表格的宽度设置比内表格小即可实现边框均匀,且使用相对宽度时内表格是以表格内容为基准,紧贴内表格,为了实现边框效果,有时候还需要用透明的GIF线将内表格撑满。现在Discuz!6.0中,只要将内表格的宽度定义为0,即可将外边框撑满,从而使嵌套出来的边框四周均匀。主要表格代码之间不要有空格,否则也会导致边框不均匀的情况出现。
注意:刚才发现目前论坛的表格功能又有了新的变化,原来使用表格只设置table即可实现,但现在table后面必须定义宽度才能显示出表格,而且在多表格嵌套时,嵌套表格的右边会宽一点,多次尝试后发现,当表格使用绝对宽度超过560时,定义的绝对宽度无效,和完全使用相对宽度一样,只有内外表格都使用绝对宽度,且当外表格的绝对宽度设置小于560时,内表格宽度设置比外表格宽度小12,可以实现均匀边框效果。如下设置外表格绝对宽度为560,内表格绝对宽度548,大家可以看一下代码和效果:复制内容到剪贴板 代码:[table=560,black][tr][td][table=548,green][tr][td]表格嵌套边框[/td][/tr][/table][/td][/tr][/table]
如果喜欢,还可以继续用不同颜色表格进行嵌套.去除烦人的“小白线”(原来在Discuz5.5时干扰码会导致“小白线”出现,目前论坛没有设置干扰码,所以没有发现此问题,但作为一个问题还是保留下来吧,下面这段是原文引用)
还有一点是关于使用表格背景后出现乱码的问题,就是影响美观的“小白线”,这些“小白线”其实是是论坛防拷贝的干扰码,即论坛为
了防止帖子被直接复制而自动在每行之后随机生成的无用字符,也就是说只要使用回车换行就会有干扰码出现。干扰码字体颜色为白色,所以
默认是显示不出来的,但更改背景后就会一览无遗。但估计是论坛的BUG吧,一个很神奇的BUG,就是帖子作者是看不到的,只有别人浏览帖子才能发现。解决此问题的关键是不使用回车换行,其实很简单,可以使用对齐代码来进行换行,因为每使用对齐代码时都会自动重起一行,无论是居中对齐还是左对齐和右对齐,这样就可以根据内容排版的需要来进行分别使用不同的对齐代码来换行了。添加空行也简单,只要添加一个居中对齐的全角空格就行了。另外就是在帖子中需要用到空格时建议都使用全角空格,这样会更方便于整齐排版。 编辑工具栏中还有两个按钮排序的列表(带序号)、未排序列表(不带序号),这两个按钮其实就相当于WORD中的序号功能,便于内容较长的帖子各部分排序,对应代码分别为复制内容到剪贴板 代码:排序列表[list=1][*]……[*]……[*]……[/list]未排序列表[list][*]……[*]……[*]……[/list] 这个帖子中的三大部分和第二部分中插入的那些,就是分别使用了这两种排序列表功能,两种排序列表可以嵌套使用。
颜色代码列表图:(取自惜别昨日兄的新手自助大本营)字体和表格背景都可以使用,数值和英文效果一样,如color=red和color=ff0000都是显示红色。
再附上个截图工具,其实就是从QQ中提取的QQ截图,使用很方便。(论坛附件大小最大200K,只好分卷压缩了,将torrent后缀去掉解压缩即可使用,偶将SnapShot.exe建了个快捷方式放在任务栏的快速启动组,需要截图是一点就可以用,很方便。)搞了一个下午,希望对想学编辑帖子的兄弟姐妹们有所帮助。
[ 本帖最后由 MLGBV5 于 2012-2-27 13:21 编辑 ] |