发新话题
打印

[转帖] ]HTML编辑初步教程,想编辑漂亮的音乐图文么!!!!!!

]HTML编辑初步教程,想编辑漂亮的音乐图文么!!!!!!

概 况:
据我所知,制作这样加背景及边框的音乐图文帖,有三种方法:

1. 使用全代码制作.

2. 使用一些软件制作.(比如:FrontPage2003等)

3. 使用论坛的一些基本功能(主要是表格功能)制作.(但局限于7.0或者7.1版本的论坛,天上人间应是属于这类版本的.)

我对代码不是很熟悉,还在学习摸索中.所以,现在只是用下面两种方法来制作帖子.而今天要教大家的是第三种方法,也就是---- 3.使用论坛的一些基本功能制作.
第一步: 熟 悉 设 置

既然要使用论坛的一些基本功能, 就一定要先熟悉一些常用的设置:

我们点击"发表话题"按钮,进入发帖区.

制作音乐图文帖,我们主要使用的就是这个插入表格按钮

下面有一组设置,我们也要了解一下: "Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态.

我们一般是在"Design"设计状态下发帖

第二步: 准 备 材 料

我以一个帖子<你是我今生的红色恋人>为例:

一. 图文内容:

我曾经是风中,
随风飘落的一片叶子,
飞舞在城市寂寞的风景里,
总有着淡淡的古典忧伤情怀,
有淡淡的哀,有淡淡的怨,
有淡淡的愁,有着忧郁的文字,
淡漠的眼神,敏感的神经,
行走在那条忧伤的小路上,
岁月的惆怅越走越浓。

和着徐徐的晚风,
悠然的,含蓄的,无言的,
停留在我小屋的冬夜浅唱低吟,
你给我默默的一刻凝注,
是那样深远悠长,
一切的语言都显得那样苍白无力,
那一刻凝注,
我听见花开的声音,
融入温熙的风中,
飘逸在每一个角落,
惊醒了我千年的期盼。

是谁在寂寞的夜晚,
陪我畅谈唐诗宋词的温婉,
汉女歌舞起柳风的婆娑,
陪我坐谈英雄人物,
天南地北人文地理,
闲话儿女,
红尘情长一系又一系。

是谁在我黯然神伤的时候,
轻轻的语重心长的,
轻叩着我心灵的钥匙,
如春曰的阳光,
温柔的飘落我窗前,
让我们越品越醉,
沉醉在你温柔的指尖,
感动在你痴迷的眼神.

你不在我身边的曰子,
无数星月难眠的夜晚诗音绕怀,
相思是茂盛的长青藤,
在一个劲的往上攀,
每一次电话,
把心潭搅出漩涡,
许多许多的话难以沉淀。

心中有一条铺着淡淡月光的小路,
弯弯曲曲,
它是那样缠绵,那样执著,
通向你的心房,我拥着你,
因为,
我真怕有一天你会离我而去。

漫步在岁月的旅程中,
我曾经怀疑过爱情真的很奢侈,
而这份爱恋啊,纵然相隔了一世,
纵然相距了千山万水,依然真切,
依然如此狂热执着,
这痴迷,这执着,这坚贞,
不为别的,只为了这美丽的爱情。
亲爱的,爱你,我无怨无悔!
牵你的手,朝朝暮暮,牵你的手,
走过今生,牵你的手,生生世世,
你是我今生相拥的爱人。

二. 分割线及装饰图片:

三. 背景图片素材:

四. 背景音乐:

http://www.616bbs.com/picture/ls/chuanger/yinhua/2/11.wma

第三步: 编 辑 操 作

好了,准备工作做好了,我们开始实际操作了:

先点击"发布新帖"按钮,进入发帖区,注意,你现在就进入了"Design"设计状态了.在编辑帖子前,要记得先填好上面你要编辑的帖子的标题.这很重要,因为我常会把自己做好的帖子弄丢了,问题就出在这最小也最重要的一步.

(一) 加 边 框

1. 点击screen.width-500)this.style.width=screen.width-500;">插入表格按钮,弹出一个对话框,点确定,就出现这样的一层边框:

2. 因为是多层边框,所以,我们再复制几层这样的边框:

鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最*左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,做成一个七层边框如下:

(为了大家看清几个层次,我把几个边框的颜色设置成黑色,而大家自己在操作时看到的应该是几层淡灰色的边框.)

(二) 加 背 景 图 片

刚才的边框设计是在"Design"状态下进行的,现在的背景图片是要在代码状态下进行.

1. 点击下面的"HTML"按钮,进入代码状态,出现的是这样的一段代码:

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

2. 在这里,我们可以知道一些简单的代码知识:

边框的颜色----borderColor=#cccccc

单元间距----cellSpacing=2

单元边距----cellPadding=3

表格宽度----width="100%"

背景颜色----bgColor=#ffffff

边框粗细----border=1

3. 我们先要设置的是背景图片,所以,我们把原来代码里第一组中的"bgColor=#ffffff "删去,改为"background=http://www.616bbs.com/picture/ls/chuanger/yinhua/2/200521318911429.gif".记得这地址后面要留有一个空格,否则图片将无法显示.

这里的"background"就是背景图片地址的意思,后面的http://www.616bbs.com/picture/ls/chuanger/yinhua/2/200521318911429.gif ,就是我要加的最外层的背景图片地址.

(背景图片1)



4. 接下来,把代码里第二组中的""bgColor=#ffffff "删去,改为"background=http://www.616bbs.com/picture/ls/chuanger/yinhua/2/20041222175618868.jpg".

这是加上第二层边框的背景图片:

(背景图片2)

5. 以同样的方法加上其他几层边框的背景图片:

(3) (4) (5) (6) (7)

6. 好了,背景图片设置好了,接下来就是设置边框的大小了.如果你对我刚才介绍的几个代码熟悉的话,可以在代码状态里把这些数字按照你自己的意思稍作修改就行.如果觉得不是很清楚的话,我们就回到"Design"设计状态里去修改.

7. 点击Design,选中最外层的边框,(鼠标放在这一层边框的边缘部分,点击左键),边框外就出现九个小方块,然后点击按钮,弹出一个表格设置的对话框,我们把它设置为:"边框粗细=0","单元间距=30","单元边距=30","对齐方式=默认",然后点确定.

同样的方法选中第二层边框,设置这一层的边框为:"边框粗细=0","单元间距=8","单元边距=8","对齐方式=右对齐",然后点确定.

第三层边框的设置为:"边框粗细=0","单元间距=10","单元边距=10","对齐方式=右对齐","背景颜色=黑色",然后点确定.

第四层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第五层边框的设置为:"边框粗细=0","单元间距=8","单元边距=8","对齐方式=右对齐",然后点确定.

第六层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第七层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

好了,边框的设置到此结束.我们现在见到的,就是下面这样一个多层边框(如果不满意它的宽度的话,可以按照自己的意思再选中边框修改):

TOP

藕怕藕智商米這麽高

                                            Tiffany
            
                                  意味着奢華、浪漫、
            
                                 魅力四射和優雅高貴。

TOP

好...好复杂的样子的说......................

TOP

发新话题