诗昆论坛【诗昆艺苑】【快雨堂】 → 【诗昆论坛唯美音画系列教程】(二)运用HTML语言制作漂亮帖子!


  共有14305人关注过本帖树形打印复制链接

主题:【诗昆论坛唯美音画系列教程】(二)运用HTML语言制作漂亮帖子!

美女呀,离线,留言给我吧!
春梦秋云
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
【诗昆论坛唯美音画系列教程】(二)运用HTML语言制作漂亮帖子!  发帖心情 Post By:2006/6/12 8:43:12 [只看该作者]

(给初学者,时间宝贵,高手勿看。)

http://www.shikun.net/bbs/dispbbs.asp?boardID=45&ID=12422&page=1

学会上面教程内容之后,请继续学习本教程。

今天我们来学习如何运用HTML语言制作漂亮的帖子。

特别强调:在发代码前一定要先点一下“HTML”,再点“Design”编辑。

一、边框:

1、一层
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center background=http://pugongyingw.51.net/image/bj/10.jpg border=5>

2、两层
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#A93CC4 border=0>
<TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table>

3、三层
<CENTER><TABLE cellSpacing=10 cellPadding=2 width=450 bgColor=#000000 border=1><TR><TD><TABLE cellSpacing=8 cellPadding=10 width=450 bgColor=#CCCC33 border=1><TR><TD><CENTER><TABLE cellSpacing=8 cellPadding=10 width=450 background=http://www.vigevano.net/pianzoline/fotoset04/013/wingstile.jpg border=0><TR><TD>加入内容</TD></TR></TABLE></CENTER></TD></TR></TABLE></TD></TR></TABLE>

4、四层

<CENTER>
<TABLE cellSpacing=0 cellPadding=30 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosarayasluz.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0000ff cellSpacing=0 cellPadding=10 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosaluminoso.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0000ff cellSpacing=0 cellPadding=10 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/fromheavengold.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0000ff cellSpacing=0 cellPadding=0 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosaramosblancosuave.jpg border=1>
<TBODY>
<TR>
<TD>内容
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>



 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
  发帖心情 Post By:2006/6/12 8:52:02 [只看该作者]

图片倒影效果:


注意:使用时必须去掉"HTML"旁边"自动修正"的钩.

<P align=center><FONT style="FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px"><IMG src="http://www.tianshi163.com/zy/4.gif"><FONT id=ew style="FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px"><IMG src="http://www.tianshi163.com/zy/4.gif"></P></FONT></FONT>



 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
  发帖心情 Post By:2006/6/12 8:53:14 [只看该作者]

加入背景音乐代码:

<EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED>

<EMBED align=middle src=http://baysky.com/Music/wzmkl.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin autostart="true" controls="PlayButton" volume="100" loop="true"></EMBED>

所用元素:<EMBED></EMBED>
参数:src:音乐文件的URL;hidden:=true为不可见,=false反之;type:指定音频类型;LOOP:是否循环播放,注意其值置于小角双引号中;AUTOSTART:是否自动播放,其值同上



 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
下面我们根据上面步骤制作四层边框  发帖心情 Post By:2006/6/12 9:27:20 [只看该作者]

首先选择所需的边框素材 1
图片点击可在新窗口打开查看此主题相关图片如下:
图片点击可在新窗口打开查看 2
图片点击可在新窗口打开查看此主题相关图片如下:
图片点击可在新窗口打开查看 3
图片点击可在新窗口打开查看此主题相关图片如下:
图片点击可在新窗口打开查看 4
图片点击可在新窗口打开查看此主题相关图片如下:
图片点击可在新窗口打开查看


 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
将选好的图片地址复制到边框代码中,你想要的效果就出来了。  发帖心情 Post By:2006/6/12 9:35:53 [只看该作者]






春梦秋云编辑




 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
  发帖心情 Post By:2006/6/12 9:38:47 [只看该作者]

需要注意的是,所选边框素材颜色、风格一定要和谐;你所制作的边框风格一定要与你所要展示的帖子内容搭配和谐。


 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
加上全屏代码之后的效果:  发帖心情 Post By:2006/6/12 9:45:24 [只看该作者]





春梦秋云编辑




 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
  发帖心情 Post By:2006/6/12 9:49:27 [只看该作者]

有兴趣的朋友也来试一下吧!



 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  9楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
图片倒影效果示例  发帖心情 Post By:2006/6/14 8:29:45 [只看该作者]

首先选好所需的图片素材:

图片点击可在新窗口打开查看

再找到图片的完全地址:

http://bbs.game52.com/UploadFile/2005-12/2005123014285043823.jpg



 回到顶部
美女呀,离线,留言给我吧!
春梦秋云
  10楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 女王
等级:版主 帖子:917 积分:6237 威望:0 精华:40 注册:2006/1/6 14:08:59
效果图  发帖心情 Post By:2006/6/14 8:37:35 [只看该作者]



由于系统不支持此款代码,所以该图片为整体帖图.显示的是正常情况下运用此款代码所出现的效果.


 回到顶部
总数 18 1 2 下一页