发新话题
打印

[推荐] 边框制作简单技巧(一)

边框制作简单技巧(一)


内容

首先声明以下内容是帮助初学的网友掌握最基本的HTML技巧,高手可别笑话哟。

其实,制作边框是很简单的一件事。对初学者来说,由于还不熟悉HTML代码,可以采用

“照猫画虎”的办法进行学习。如果您不想在HTML方面进行深入的研究探讨,而只是满足自己

编辑文章音画的需要,这种方式已经足够您用的了。我们在这里假定您会使用电脑的复制和

粘贴功能。另外,最好是先在在线编辑器里做好帖子,在把代码复制粘贴在新贴的 代码模式里,

这样会简单一点。

在线编辑器地址:(直接点开)

http://www.doryuen.net/article/editor/editor.asp

第一步:选择一套背景素材图片备用。它是编制边框的“材料”。在本素材网或本论坛

素材库里就有,也可以到其它网站寻找您认为满意的素材。背景素材一般是共享的,但一定

要后缀是JPG或GIF的格式的才能用哦。

(注意:在实际操作中不需要把这些图片复制到编辑页面,因为在编辑页面这些图片是不能

显示图片地址的)

第二步:确定您要制作的边框的层数。边框可以根据需要可以是一层的(由于太单调,

一般不采用),也可以是多层的,层数越多,边框结构越复杂,也越美,当然也不能没有

限度,曾数太多反而会显得零乱,以不超过13层为最佳。我们以9层为例进行学习。

过程:

1、首先在网站登陆在线编辑。

2、点击编辑框里的“查看HTML源代码”,显示,会出现

<src="./images/smilies/titter.gif" border=0 smilieid="25816"> align=center>

</P> 您就可以开始制作了。
第三步:复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码,

一般音画论坛的网页资源栏目都可以找到,可直接复制过来。(复制成套别人的边框时,

要放在“查看HTML源代码”显示时粘贴;另一种途径是将下面现成套装代码复制到自己

的编辑页面,再将自己选好的背景素材地址替换“背景素材”那几个字就行了,需要几层

留几层,没有用完的删除就好,不够用的,根据需要增加层数。第二层以后代码都一样的

<TABLE cellSpacing=18 cellPadding=0 width="100%"

background= border=0>
<TBODY>
<TR>
<TD width="100%">

此为完整的一层代码

我们先复制一套现成的套装代码:

<DIV class=t_msgfont id=message692509>
<align=center>
<TABLE id=table1 style="LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 0px"

cellSpacing=25 align=center background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=14 cellPadding=0 width="100%" background=图片地 址border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=14 cellPadding=0 width="100%" background=图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<CENTER></CENTER>
<CENTER></CENTER>
<CENTER> <FONT style="FONT-SIZE: 55pt; FILTER: shadow (color=#AF0530); WIDTH: 44.01%;

 COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 131px"><B>题目</B></FONT>
<CENTER></CENTER>
<CENTER></CENTER>
<DIV></DIV>
<CENTER></CENTER>
<CENTER></CENTER>
<CENTER></CENTER>
<CENTER><FONT style="FONT-SIZE: 25pt; FILTER: shadow (color=#AF0530); WIDTH: 91.93%;

COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 46px"><B>
<CENTER>内容</CENTER></B></FONT><B></CENTER>
<CENTER><SPAN style="FONT-SIZE: 26pt; COLOR: #ccffcc; FONT-FAMILY: 隶书;

 mso-hansi-font-family: ??"><SPAN style="FONT-SIZE: 26pt; mso-hansi-font-family: ??">

<FONT color=#050505></FONT><A href="http://bbs.0437.gov.cn/"></A></SPAN></SPAN></CENTER>

</CENTER></B>
<CENTER></CENTER></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></TD></TR></TBODY></TABLE>

替换完背景图片地址后,注意:1)tyle="LEFT: -200px; WIDTH: 1000px;这里的 -200px

代表你的帖子发在论坛后,在屏幕上显示的左右位置,可以设置成-200到100,自己编辑改

一下体会一下,1000px;是代表你做的帖子的宽度大小也可以随便根据你的需要改动。

2)cellSpacing=35 是代表第一层和第二层边框之间的边距,也可以随便设置从0到100都可以,

但也是根据需要的哦,如果层多了,这个数字是不能设置太大的,后面每层的cellSpacing=?

都是一样的道理。不过最后一层的一般是0哦。

3)border=0>这里的0代表各层的显示厚度,也可以根据需要变换,自己改一下体会体会吧。

好了现在看看你做的边框的效果吧。是不是很简单?

边框做完后,图片和文字内容可以直接在做好的边框里编写

1)图片可以直接粘贴,

2)文字内容需要用到特效字时,需要先在代码模式里,在
相应位置粘贴所需的特效字代码,然后回到图片区输入
文字即可。
3)全部做完后在全部代码最后加音乐播放器代码(显示播放器
的代码要放在文章结束代码前面)
4)文章作好了,你可以将整套代码复制粘贴到新贴的代码模式里
然后点击发送新话题就可以了哦。
此贴主要叙述怎么做边框的问题,不知道你是否满意,其它问题
以后再陆续编写教程给大家。如果还有不明白的地方给我留短信吧,
希望你能成为美文高手。

[ 本帖最后由 kaixin 于 2007-7-27 01:08 AM 编辑 ]

TOP

感谢楼主分享,学习了。

   品味生活、感悟人生。

TOP

这么复杂呢
不过有空还是想学哦


,,......

TOP

我想学习

我想学习,
初次来,第一站到了这里。
我使用的是普屏的显示器800x600,
观看如此宽的画面有没有高招。
请指教,谢谢。

TOP

TOP

发新话题