21 123
发新话题
打印

用HTML制作图片与音乐教程!

用HTML制作图片与音乐教程!

html作品速成:

非常通俗哦,特别是对那些不懂英文,喜欢html作品,又想学做html作品的朋友,帮助非常大.快来试试啊,希望看到更多的好作品在大智慧中诞生......

跟俺一块慢慢的走近它"html",认识它."html"

那我们一边听歌一边先从认识箐箐的"国画精品"的代码开始吧:
[wmv=1]http://www.xbzh.net/dvbbs/uploadfiletee/2006312541793359.mp3[/wmv]
楼主其他帖子

TOP

第一、三层边框代码:

<DIV align=center>
<CENTER>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/2956909.jpg border=0 cellPadding=12 cellSpacing=15 width=500>
<TBODY>
<TR>

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/2956909.jpg border=0 cellPadding=10 cellSpacing=10 width="100%">
<TBODY>
<TR>

注: 1.以上两层代码,黑色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.


2.所有边框、图片素材的地址寻找方法如下:

①.鼠标指向你选定的边框图片中心,

②.点击鼠标右键出现属性界面,点击"属性".

③.复制该图的地址(URL)粘到你要更换的那层图的地址上.

TOP

以下内容含脚本,或可能导致页面不正常的代码注:下面用彩色表示的代码是这个帖子的七层边框,和帖子结尾的代码.(点击"国画精品"上面的"引用",--->点击"UBB模式",观看它的代码).点击“预览”可以观看它的边框有几层后,关闭预览,返回到代码中来.开始进行你的预想编辑.图一、<DIV align=center><CENTER><TABLE cellSpacing=15 cellPadding=12 width=500 background=http://img.gw.com.cn/UploadFile/2004/9/3/2956909.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=1 cellPadding=1 width="100%" background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=10 cellPadding=10 width="100%" background=http://img.gw.com.cn/UploadFile/2004/9/3/2956909.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=1 cellPadding=1 width="100%" background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=8 cellPadding=8 width="100%" background=http://img.gw.com.cn/UploadFile/2004/9/3/3989314.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=1 cellPadding=2 width="98%" background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0><TBODY><TR><TD width="100%"><DIV align=center><TABLE cellSpacing=6 cellPadding=6 width="100%" background=http://img.gw.com.cn/UploadFile/2004/9/3/4522945.jpg border=0><TBODY><TR><TD width="100%"><CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/5168879.jpg"></CENTER><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #0099ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">国画精品</FONT></CENTER><BR><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/5740979.jpg"></CENTER><BR><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><TABLE cellSpacing=0 cellPadding=0 width=400 align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/200411311035115.gif border=2><TBODY><TR><TD><EMBED src=http://bbs.sinabz.com/UploadFile/2004-7/20047913294387.swf width=180 height=275 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></EMRED></TD></TR></TBODY></TABLE></CENTER><BR><BR><BR><BR><BR><BR><BR><CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/257997.jpg"></CENTER><BR><BR><BR><BR><BR><BR><BR><CENTER><TABLE cellSpacing=0 cellPadding=0 width=300 align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/20041131105877.gif border=2><TBODY><TR><TD><EMBED src=http://bbs.sinabz.com/UploadFile/2004-7/20047913294387.swf width=260 height=290 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE></CENTER><BR><BR><BR><BR><BR><BR><BR><CENTER></CENTER><CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/257997.jpg"></CENTER><BR><BR><BR><BR><BR><BR><BR><CENTER><TABLE cellSpacing=0 cellPadding=0 width=300 align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/200411311129136.gif border=2><TBODY><TR><TD><EMBED src=http://bbs.sinabz.com/UploadFile/20

TOP

第二、四、六层边框代码:

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0 cellPadding=1 cellSpacing=1 width="100%">
<TBODY>
<TR>

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0 cellPadding=1 cellSpacing=1 width="100%">
<TBODY>
<TR>

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/1296488.jpg border=0 cellPadding=2 cellSpacing=1 width="98%">
<TBODY>
<TR>

注: 以上三层代码,黑色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.

TOP

第五层边框代码:

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/3989314.jpg border=0 cellPadding=8 cellSpacing=8 width="100%">
<TBODY>
<TR>

注: 以上第五层代码,黑色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.

TOP

第七层边框代码:

<TD width="100%">
<DIV align=center>
<TABLE background=http://img.gw.com.cn/UploadFile/2004/9/3/4522945.jpg border=0 cellPadding=6 cellSpacing=6 width="100%">
<TBODY>
<TR>

注: 以上第七层代码,黑色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.

以上七层边框就做完了,下面开始制作图和文字。

TOP

第一个图的代码:

<TD width="100%">
<CENTER><B><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/5168879.jpg"></B></CENTER>

注: 以上这组代码,是第一个图的全套代码,其中蓝色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.




标题的代码:

<CENTER><FONT style="COLOR: #0099ff; FILTER: shadow(color=black); FONT-FAMILY: 华文行楷; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%">国画精品</FONT></CENTER><BR><BR><BR>

注: 以上这组代码,是标题的全套代码,其中:"#0099ff "表示(颜色代码)"40pt "表示 (标题字的大小).

学作新帖时,在"引用"原作者的帖子编辑中,可直接点击 按纽,选择复制你所需要新的颜色代码后,替换到原来颜色代码上.其次:将原来的标题改成你现在的新标题,标题字的大小可根据情况改变数值的大小即可.




标题下面英文图的代码:

<CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/5740979.jpg"></CENTER><BR><BR><BR><BR><BR><BR>

注: 以上这组代码,是英文图片的全套代码,其中蓝色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.

TOP

第一个带有透明特效图的代码:

<CENTER>
<TABLE align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/200411311035115.gif border=2 cellPadding=0 cellSpacing=0 width=400>
<TBODY>
<TR>
<TD><EMBED height=275 src=http://bbs.sinabz.com/UploadFile/2004-7/20047913294387.swf type=application/x-shockwave-flash width=180 tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></EMRED></TD></TR></TBODY></TABLE></CENTER>

制作新帖时,在"引用"原作者的帖子编辑中,同时还需要打开另一个界面,也就是说你事先准备好选用存放图片素材的地方.选择复制你所需要新的图片地址代码后,替换到原来帖子图片地址的代码上.其次:根据图片素材,选择新的透明特效地址,替换到原来的透明特效地址上即可.
国画图+闪光特效: (本帖三个图中使用同一种透明特效)

第二个带有透明特效图的代码:

<CENTER>
<TABLE align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/20041131105877.gif border=2 cellPadding=0 cellSpacing=0 width=300>
<TBODY>
<TR>
<TD><EMBED height=290 src=http://bbs.sinabz.com/UploadFile/2004-7/20047913294387.swf type=application/x-shockwave-flash width=260 tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE></CENTER><BR><BR>

第二个国画图:

注解如同第一图

第三个带有透明特效图的代码:

<CENTER>
<TABLE align=center background=http://www.hlsg.com.cn/hjkj/UploadFile/2004-11/200411311129136.gif border=2 cellPadding=0 cellSpacing=0 width=300>
<TBODY>
<TR>
<TD><EMBED height=400 src=http://bbs.sinabz.com/UploadFile/2004-7/20047913294387.swf type=application/x-shockwave-flash width=340 tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE></CENTER>

第三个国画图:

注解如同第一图

帖子中,国画图与国画图之间有一个小蓝色的花的代码:

<CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/257997.jpg"></CENTER><BR>

注: 以上是小蓝色图片的全套代码,蓝色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.

<CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/3433300.jpg"></CENTER><BR><BR><BR>

<CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/5339639.jpg"></CENTER><BR><BR><BR>


注: 以上这二组代码,分别是两个图片的全套代码,其中蓝色字体部分的网址表示使用下面这两个素材。在学作新帖时就用你所选用的素材地址替换它即可.

TOP

制作者落款的代码和落款下面图的代码:

<CENTER>
<DIV><FONT style="COLOR: #0099ff; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 18pt; LINE-HEIGHT: 150%; WIDTH: 100%">图 乐:网 络<BR><BR>编辑制作:箐箐</DIV></CENTER></FONT>
<CENTER><IMG src="http://img.gw.com.cn/UploadFile/2004/9/3/796609.jpg"></CENTER>

注:制作者落款的代码解释类似十九楼,其中蓝色字体部分的网址表示使用下面这个素材。在学作新帖时就用你所选用的素材地址替换它即可.



注:音乐代码因为是隐藏音乐的代码,所以不显示,需要点击本层楼的"引用"才能看到音乐代码)

最后是结尾的代码:

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

注:必须注意的是,帖子有几层,相应要有几组结尾的代码.

朋友你看明白了吗?

掌握了最基本的代码和规律后,你就可以利用别人的帖子,去套你喜欢的边框、图片、音乐和文字了。这样就能作出属于自己的html作品了。

制作html作品前的准备工作.

1.选好题目、图片、文字素材,(图片最好“另存为”你的电脑“图片文件夹”中,再上传到论坛中来,取得图片的地址,后缀必须是jpg或者是gif)

2.根据题目、图片的色彩和音乐选择html组合素材.。
笨人用笨法制作html帖:

1.打开一个论坛中你喜欢的htm作品帖,点击"引用"如下图:


点击"UBB模式",此时代码显示出来如下图:


再点击"预览"审视该作品有几层边框如下图:



2.打开另一个论坛的你想选用的"html组合素材"部件(边框,图,花边等)
3.在"引用"的原作品上一层一层的替换你想选用的"html组合素材"部件(边框,图,花边,文字,音乐等).
4.在"引用"的原作品上,把边框,图,,文字,音乐,作者名等部分全部替换完后,再次点击"预览"审视一下你更改后的作品,感觉满意后,关闭"预览".

5.此时,就可以复制你所编辑制作的全部代码了,(注意此时千万不要点击“发表”,否则你所做一切都将付予东流.因为你是在别人的帖子中,利用"引用"功能下编辑的,所以一但错点了“发表”就把原作品顶出去了,)切记切记!!!



6.把你所编辑制作的全部代码复制后,从该作品(原作)中退出,就可以在能发表代码帖的论坛里发表你的作品了.

TOP

HTML语言语法大全



<! - - ... - -> 註解


<!> 跑馬燈


<marquee>...</marquee>普通捲動


<marquee behavior=slide>...</marquee>滑動


<marquee behavior=scroll>...</marquee>預設捲動


<marquee behavior=alternate>...</marquee>來回捲動


<marquee direction=down>...</marquee>向下捲動


<marquee direction=up>...</marquee>向上捲動


<marquee direction=right></marquee>向右捲動


<marquee direction=’left’></marquee>向左捲動


<marquee loop=2>...</marquee>捲動次數


<marquee width=180>...</marquee>設定寬度


<marquee height=30>...</marquee>設定高度


<marquee bgcolor=FF0000>...</marquee>設定背景顏色


<marquee scrollamount=30>...</marquee>設定捲動距離


<marquee scrolldelay=300>...</marquee>設定捲動時間


<!>字體效果


<h1>...</h1>標題字(最大)


<h6>...</h6>標題字(最小)


<b>...</b>粗體字


<strong>...</strong>粗體字(強調)


<i>...</i>斜體字


<em>...</em>斜體字(強調)


<dfn>...</dfn>斜體字(表示定義)


<u>...</u>底線


<ins>...</ins>底線(表示插入文字)


<strike>...</strike>橫線


<s>...</s>刪除線


<del>...</del>刪除線(表示刪除)


<kbd>...</kbd>鍵盤文字


<tt>...</tt> 打字體


<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)


<plaintext>...</plaintext>固定寬度字體(不執行標記符號)


<listing>...</listing> 固定寬度小字體


<font color=00ff00>...</font>字體顏色


<font size=1>...</font>最小字體


<font style =’font-size:100 px’>...</font>無限增大


<!>區斷標記


<hr>水平線


<hr size=’9’>水平線(設定大小)


<hr width=’80%’>水平線(設定寬度)


<hr color=’ff0000’>水平線(設定顏色)


<br>(換行)


<nobr>...</nobr>水域(不換行)


<p>...</p>水域(段落)


<center>...</center>置中


<!>連結格式


<base href=位址>(預設好連結路徑)


<a href=位址></a>外部連結


<a href=位址 target=’_blank’></a>外部連結(另開新視窗)


<a href=位址 target=’_top’></a>外部連結(全視窗連結)


<a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結)


<!>貼圖/音樂


<img src=圖片位址>貼圖


<img src=圖片位址 width=’180’>設定圖片寬度


<img src=圖片位址 height=’30’>設定圖片高度


<img src=圖片位址 alt=’提示文字’>設定圖片提示文字


<img src=圖片位址’ border=’1’>設定圖片邊框


<bgsound src=MID音樂檔位址>背景音樂設定


<!>表格語法


<table aling=left>...</table>表格位置,置左


<table aling=center>...</table>表格位置,置中 < BR><tablebackground=圖片路徑>...</table>背景圖片的URL=就是路徑網址


<table border=邊框大小>...</table>設定表格邊框大小(使用數字)


<table bgcolor=顏色碼>...</table>設定表格的背景顏色


<table borderclor=顏色碼>...</table>設定表格邊框的顏色


<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色


<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色


<table cellpadding=參

TOP

 21 123
发新话题