设计边框的代码

HTML做帖子常用特效代码

<TBODY>

<TR>

透明flash多层叠加：

<TBODY>

<TR>

采用的代码：

<TABLE id=table1 style="LEFT: -220px; WIDTH: 970px; POSITION: relative; TOP: 80px" cellSpacing=25 align=center background=http://bbs.hnol.net/the00img/2004-6-22/19/200462219545311105.jpg border=0> <TBODY> <TR> <TD> <TR> ……

如果你是用FP做帖，点HTML，把红字部分放在第一个表格的这个位置，即可全屏显示。把style="LEFT: 0px; POSITION: absolute; TOP: 0px"放在FLASH的相应位置。(<EMBED>后面。）

这个是以分辩率1024X768为标准，800X600的还要调下数据。

图片边缘羽化再加一层FLASH效果

带有滑动条的帖子

<P><TABLE cellSpacing=0 cellPadding=0 align=center background=http://www.16789.net/userupphoto1/2006125175115203.jpg border=0><TBODY><TR><TD align=middle width="100%"><IMG height=120 src="http://www.16789.net/userupphoto1/20061251750247917.jpg" width=700 border=0> <BR><P style="FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #eaa3c3; OVERFLOW: auto; WIDTH: 555px; SCROLLBAR-SHADOW-COLOR: #9d2352; SCROLLBAR-3DLIGHT-COLOR: #ed7ca8; LINE-HEIGHT: 115%; SCROLLBAR-ARROW-COLOR: #eaa3c3; SCROLLBAR-TRACK-COLOR: #ebb0c6; FONT-FAMILY: MS UI Gothic; SCROLLBAR-DARKSHADOW-COLOR: #9d2352; SCROLLBAR-BASE-COLOR: #eaa3c3; HEIGHT: 295px; CROLLBAR-FACE-COLOR: #ED7CA8" align=left rows="12" cols="56"><TABLE height=306 cellSpacing=0 cellPadding=0 align=center background=http://www.sohoxiaobao.com/chinese/bbs/hc_WfHWk0jvIYrL.jpeg border=0><TBODY><TR><TD style="FILTER: chroma(color=#ED7CA8" height=306><TABLE height=310 width=362 align=center background=http://www.16789.net/userupphoto1/20061251752326903.jpg><TBODY><TR><TD align=middle></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><FONT face=楷体_GB2312 color=#cc00ff size=3><BR></FONT><FONT face=仿宋_GB2312 color=#cc00ff size=3><BR></FONT><IMG height=49 src="http://www.16789.net/userupphoto1/20061251754104385.gif" width=49 border=0><FONT face=仿宋_GB2312 color=#9d2352 size=3> <BR>突然爱上了这首歌...<BR><BR>我已经 <BR>已经把我伤口化作玫瑰 <BR>我的泪水 <BR>已经变成雨水早已轮回 <BR><BR>我已经 <BR>已经把对白留成了永远 <BR>忘了天色 <BR>究竟是黑是灰 <BR>分手伤了谁 <BR>谁把他变美 <BR>我的眼泪写成了诗已无所谓 <BR>让你再回味 <BR>字不醉人人自醉 <BR>因为回忆总是美 <BR><BR>夜里的歌声有着异样的美丽的颜色和芳香，而我在音乐的隐蔽下大声地哭泣。原来伤口依然，并且不可触及，就好像我分明知道该把一切忘掉，而所有的记忆都已经成了我生命中的干燥花... <BR><BR><IMG height=396 src="http://www.16789.net/userupphoto1/2006125175347493.jpg" width=426 border=0> <BR>我的爱就仿佛像星空中闪烁星光般闪亮着，却永远都不会属于我，<BR>因为它只出现在过去的夜空中...<BR>因为现在的我不敢去触摸...不能去触摸... <BR><BR>渴望爱,却只能用隐忍来填满我的心... <BR><BR>原来,我们的爱是那么的多,但有时却只能藏在自己的内心，给了一些永远不会伤害我们的人，给了一个梦，可能因为他的遥远，才可以承受内心这百分之百的真爱...<BR><BR>"就让一切结束于开始之前..." <BR>就让偶用这种残忍的清醒来扼杀这一切吧.... <BR><BR><BR><BR><IMG height=131 src="http://www.16789.net/userupphoto1/20061251753293438.jpg" width=426 border=0> <P align=center><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=20, StartY=10, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 30px"><TBODY><TR><TD><EMBED style="BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-BOTTOM: silver 1px solid" src=http://bbs.bbcchat.com/uploadfile/2005-10/y12497_15_162554.wma width=250 height=30 type=audio/x-mplayer2 console="video" showstatusbar="0" EnableContextMenu="0" volume="0" autostart="1" loop="-1"></TD></TR></TBODY></TABLE></P><P></P><BR><IMG height=83 src="http://www.16789.net/userupphoto1/20061251751521574.jpg" width=700 border=0></FONT></TD></TR></TBODY></TABLE></P>

边框举例:

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

做框步骤:

将"边框粗细"设置10,单元间距设置20

我们现在设置边框颜色和背景颜色,点开调色版

在调色版中自由选取边框和背景颜色,看我选的颜色代码,选择边框颜色 =#09097F 背景颜色=#A3B3F5

第1层表格

编辑栏下面有一组设置,你看一下,在以后编辑中常用到:

"Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态

我们进入HTML看代码

<TBODY>

<TR>

2、学习修改表格的宽度

先我们做的第一层边框,(进入HTML看代码)

<TBODY>

<TR>

现在我们将width="100%"宽度改width="60%"

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE

3、制作两层边框

现在我们做第二层，方法跟1层一样。

方法：用鼠标选中你做的边框，点右键复制，在第一层边框中粘贴上，跟文字粘贴一样.

代码：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

怎样添加表格呢?

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

制作多列行表格:修改行列数字.

2行:

代码:

<TBODY>

<TR>

<TR>

代码:

<TBODY>

<TR>

<TR>

<TR>

<TR>

2列:

代码:

<TBODY>

<TR>

5列:

代码:

<TBODY>

<TR>

行列合并,2行2列

代码:

<TBODY>

<TR>

<TR>

8行3列:

<TBODY>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

代码:将空格码删除掉,太多我就不一个个的删除了,你做时一定要在代码中删除空格码然后再添加内容.

一、在表格中添加文字

1、用鼠标点表格的中间处，你看到光标在闪动，这时你就能写入文字了，也可以复制粘贴文字。

2、编辑表格中的文字

将鼠标放到表格中文字的最前面，点击，然后横拖鼠标选中，你看到字的背景颜色是蓝色时你就可以操作了

3、编辑文字

居中：点居中图标

字体：选择你喜欢的字体，有很多选项

字号：论坛中的编辑器是数字越大字也就越大。

字体颜色：点开A自由选色，满意为止

4、我们现在要在表格中输入“寂寞时上网来看我”看编辑效果：

代码：

<TBODY>

<TR>

<TD>

<P align=center> <FONT color=#6b0c45 size=6>寂寞时上网来看我</FONT></P></TD></TR></TBODY></TABLE>

二、在表格中插入图片

插入图片方法有三种：

1、直接插入法。将鼠标放在你选好的图片上，点右键，复制然后粘贴到你的表格中，看效果：

2、用编辑器插入法

选择好图片，将鼠标放在图片中点右键，点属性，复制图片地址；在编辑器里点开“插入图片”图标，将你刚复制过的地址粘贴到信息栏里，按确定，看是下面的格式。

[*IMG]http://class.znrsw.com/UploadFile/2005-10/2005101120412195250.jpg[/IMG*]

3、在html格式下插入图片代码及图片地址

帖图基本格式如下：

<*IMG src="图片连接URL地址"><*IMG> 称图形标记，主要用来插入图形标记。

方法：在表格中输入“内容”两字，点开html将你编辑好的代码及图片地址粘贴上，

看代码：

<TBODY>

<TR>

常用参数识别:

width="100"

表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"

表格边框的厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"

表格格线的厚度

align="CENTER"

表格的摆放位置（水平），可选值为： left, right, center

valign="TOP".

表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。

background="myweb.gif"

表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000FF"

表格的底色，与 background 不要同用

bordercolor="#CF0000"

表格边框颜色

bordercolorlight="#00FF00"

表格边框向光部分的颜色

bordercolordark="#00FFFF"

表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"

表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

贴图格式帖图基本格式如下：

<IMG> 称图形标记，主要用来插入图形标记。

<IMG> 的一般参数设定：

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"

图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展，于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则必须加上正确的路径，相对或绝对均可。

width=100 height=100

设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）

hspace=5 vspace=5

设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，是设定图片上下的空间，高度采用 pixels 作单位。

border=2

图片边框厚度

align="top"

调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，

texttop 表示图片和文字依顶线对齐，

baseline 表示图片对齐到目前文字行底线值，

absmiddle 表示图片对齐到目前文字行绝对中央，

absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

alt="Logo of PenPal Garden"

这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

lowsrc="pre_logo.gif"

设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

原代码 ○ 说明标记为文件加上说明，但不被显示

<P> ○ 段落标记为字、画、表格等之间留一空白行

<BR> ○ 换行标记令字、画、表格等显示于下一行

<HR> ○ 水平线插入一条水平线

<CENTER> ● 居中令字、画、表格等显示于中间反对

<PRE> ● 预设格式令文件按照原始码的排列方式显示

<DIV> ● 区隔标记设定字、画、表格等的摆放位置

<NOBR> ● 不折行令文字不因太长而绕行

<WBR> ● 建议折行预设折行部位

三\常用参数识别(略)

(第四课)表格中添加背景图片代码制作精美边框

首先我们找来制作边框素材:

2、转换为HTML模式，边框变为代码

3、修改边框颜色代码:

4、添加背景图片即代码background代码

<TBODY>

<TR>

5、把代码稍微修改一下

换上代码background= 及图片地址，把border=1改为border=0 ，cellSpacing=2 把2修改得大一点，比如20 ，数越大，边框越宽

6、添加图片代码与图片地址

<TBODY>

<TR>

7、这是第一层，转换为DESIGN模式，看一下效果

我们接着做第二层：

1。把第一层的上半部分复制，

<TBODY>

<TR>

<TD>

我们将图片地址修改一下

2、然后稍作修改就可以了。

<TBODY>

<TR>

<TD>

cellSpacing=1 把原来的20改为了1。

七层边框：

第四层跟第二层一样，第五层跟第一层一样，第六层跟第二层还一样，把原来的代码依次复制过来就可以了。（还可以自由组合）

都复制过来看看效果：

第五课)如何在网页中添加音乐代码\地址

(第六课)如何修改和固定图片

我们可以用这样的格式,以此来控制了图片的缩小,我看到很多用代码做帖子的朋友的帖子的外框大,图片被缩的很小,就是因为直接显示了图片,没有用这样的格式来控制它.

代码如下:

<TBODY>

<TR>

宽和高根据图片的大小来设定!

其中"WIDTH: 550px; HEIGHT: 400px"的代码,能控制图片的大小,防止图片在某些论坛自动缩小!

第8课)常用特效制作与处理（倒影、飞舞，雾化....）详细说明语音室告诉大家,为节约时间这里就不细说了

<TBODY>

<TR>

代码

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TBODY>

<TR>

<TD>

<P></P>

边框

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TBODY>

<TR>

<TBODY>

<TR>

<TBODY>

<TR>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。