发新帖  新投票  回帖 
15234个阅读者,156条回复 | 打印 | 订阅 | 收藏
秋光

回复时间:2005-12-7 13:33















 






欢迎您!启步学代码。


(游子习作 供初学HTML代码的朋友参考)



学习表格(图框)设置(一)



    表格设置是贴图的主要基础,利用表格属性可以
做出漂亮的代码作品。表格设置属性内容有很多,
可以先从简易入手,先学习较主要的,逐步提高。







表格的基本语法



<table>...</table> - 定义表格

<tr> - 定义表行(即行)

<td> - 定义表元(即列插入内容)


    表格语句是双标签代码,前面有一个开始句,后面就应有一个结束句。
不能多也不能少。


示例:


<table>

<tr>

<td>

插入内容

</td></tr></table>


表格属性内容:




border="16" 表格边框的厚度。

cellspacing="8" 表格格线的厚度

cellPadding="5" 表格格线内厚度

CELLPADDING=50  表格格线与内容之间的宽度

width=425  表格宽度

height=300 表格高度

borderColor=#841A00 边框颜色

bgcolor=#cc9968  背景颜色

background="图片地址" 背景图片。

(backgroun 背景图片,与 bgcolor 背景颜色不可同用。)






对一个用表格编成的图框的初步理解。


<table>

<tr>

<td>

插入内容

</td></tr></table>



*************************




<table 在这里面编入各项表格属性内容和参数>

<tr>表格的第一行

<td>表格的第一列(行和列构成一个单元格。)

插入内容

</td></tr></table>表格双标签的结束句。



****************************


一张在表格标签内只加入表格边框厚度,表格宽度和高度的空图框,代码如下:



<table border=3 width=400 height=250>

<tr>

<td>

</td></tr></table>




效果显示:





插入内容


**********************************



在表格标签内编入表格边框的厚度border=;边框颜色borderColor=;背景图片地址background=;表格宽度width=;表格高度height=等五顶属性参数的图框代码:



<table border=10  borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=400 height=260>

<TD>

<TR>

<P align=center></p>

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



效果显示:










****************************************


一张较完整的图框代码:



<table border=10 cellSpacing=8 cellPadding=5 borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=600 height=350>

<tr>

<td>

插入内容

</td></tr></table>



效果显示:


一张较完整的图框代码:





插入内容


可以在这张单层套装图框内插入文字和图片了。






在图框内插入文字和图片的代码:




<table border=10 cellSpacing=8 cellPadding=5 borderColor=#fff000 background=http://bbs.muwen.com/fileuploaddir/4B398368667.jpg width=600 height=350>

<tr>

<td>

<CENTER><BR><BR>
<font style=font:25pt face=华文行楷  color=fff000>

鲜花送给可爱的人

<IMG src="http://61.132.72.53/discuz/attachments/s8_GWe97YOxS7mQ.gif">

<BR><BR>

<img src="http://blog.lanyue.com/upload/user/58/386410_22232948.jpg"width=430 height=320>

<br>

继续插入。。。<br>

<br>

</font></td></tr></table></p>



效果显示:











鲜花送给可爱的人







继续插入。。。






图文:网络
编辑:游子











 
秋光

回复时间:2005-12-7 13:44
如何发HTML代码贴?





如何发HTML代码贴?


有一些新学习代码的网友不知要如何发HTML代码贴?首先准备一个空白记事本最大化打开。

下面是一张图框的图片代码。


<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15 cellPadding=15 width="500" bgcolor="#0000FF" border=12> <TBODY>
<TR>
<TD>
<CENTER><font style=font:20pt face=幼圆 color=fff000>插入内容</font>
</CENTER>
<BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>

第一,把上面的代码复制粘贴到记事本。
第二,击点这个回复标签进到发贴区。
第三,在标签栏选第四个标签(即HTML标签)
第四,把刚才复制的代码粘贴在编辑栏内。
第五,击点标签栏的第一个标签可看见效果。
第六,若成功即可发表了。


编辑:游子







 
秋光


BR>






回复时间:2005-12-9 05:55
















 


欢迎您!启步学代码。


(学习心得 供初学HTML代码的朋友参考)



用表
格属性做漂亮的代码边框。(二)



    在论坛的贴图栏中,有很多精美套装图框,
可以拿来用。
我们也可以应用表格的相关属性,自已做出喜欢的图框套装。

框有用颜色作背景,更多的是用图片作背景。图框有单层
或多层,常见有七层。巧
妙的应用表格的相关属性,可以做
出许多漂亮的图框套装。







用颜色作背景的单层图框








入内容






代码:



<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15 cellPadding=15 width="780" bgcolor="#0000FF" border=12>


<TBODY>
<TR>
<TD>
<CENTER><font style=font:20pt face=幼圆 color=fff000>插入内容</font>
</CENTER>
<BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>







用颜色作背景的双层图框












入内容







代码:



<TABLE borderColor=#fff000 cellpadding=0 cellpadding= 5 cellSpacing=5 cellPadding=15 width="780" bgcolor="#0000FF" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 5 cellSpacing=5 cellPadding=15 width="100%" bgcolor="#2894FF" border=2>
<TBODY>
<TR>
<TD>
<CENTER><font style=font:20pt face=幼圆 color=fff000>插入内容</font>
</CENTER>
<BR><BR><BR><BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>








用图片作背景的单层图框







123










代码:



<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15 cellPadding=15 width="780" background=http://park7.wakwak.com/~choukan/sozai/5-huyu/huyu-xmas-11.jpg border=12>
<TBODY>
<TR>
<TD>
<P>123</P>
<BR><BR><BR><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>







用图片作背景的双层图框














插入内容

代码:

<table align="center" border="1" cellpadding="8" cellspacing="8" width="780" background="http://www.dabaoku.com/sucai/shejilei/bj/pic/0430.jpg" bordercolorlight="#0C091D" bordercolordark="#C0B4FE">
<tr>
<td>
<table align="center" border="2"cellpadding=30 cellpadding="15" cellspacing="15" width="100%" background="http://www.dabaoku.com/sucai/shejilei/bj/pic/0471.jpg" bordercolorlight="#0C091D" bordercolordark="#0C091D">
<tr><td width="100%" align="center">
<br><br><img border="0" src="http://img013.photo.wangyou.com/2004/8/25/16304/200511233202975.gif ">
<BR><BR>
<CENTER><font style=font:20pt face=
幼圆 color=0000000>插入内容</font></CENTER>
<br><br></td></tr></table></td></tr></table>








用图片作背景的七层图框













































网络情
缘 平淡温馨




















图文:网络
< /TD>



代码:

















<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="780" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313595718.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%" borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131404918.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=18 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813141196.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg

border=1>
<TBODY>
<TR>
<TD>
<TABLE

cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%"

borderColorLight=#000000

background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135611790.jpg

border=1>
<TBODY>
<TR>
<TD

align=middle>
<P align=center><IMG

src="http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813201734131.jpg">

<FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=green); WIDTH: 100%;

COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; HEIGHT: 65px">网络

情缘 平淡温馨</FONT> <BR><BR><BR><BR>
<P

align=center>
<TABLE height="100%"

width="100%">
<TBODY>
<TR>
<TD vAlign=top

width="34%">

<TD vAlign=top

width="33%"></TD></TR></TBODY></TABLE><BR>&l

t;BR><BR><BR><BR><BR>
<CENTER><IMG

src="http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313555870.jpg">&l

t;/CENTER>
<CENTER><FONT style="FONT-SIZE: 20pt; FILTER:

shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%;

FONT-FAMILY: 华文彩云; HEIGHT: 65px"

size=7><B>图文:网络<br></B></FONT></CENTER>


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

lt;/TBODY></TABLE></TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>
</TD></TR>&
lt;/TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><
/TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P></P>












图文:网络:
编辑:游子(秋光)

 
begonia

回复时间:2005-12-10 18:03
多多指教

 
秋光

回复时间:2005-12-17 19:16
















































欢迎您!启步学代码。


(游子习作 供初学HTML代码的朋友参考)






如何在图框套装内贴文字和图片。







    用HTML代码在图框内贴图,图片必须是网络上的图片


绝对地址(URL)。如果是本机硬盘的图片,应先上传到

较隐定的空间(免费相册或可上传图片的论坛),取得图


的地址和图片的尺寸大小。新学习者最好选择一些较简

单的图框来贴图。由于各论坛系统对贴子宽度有不同的限

制,
因此图框的宽最好不要超过500,图片则在400左右。








    为了方便学习,这里列出图框,图片贴图素材和文字输入格式,供大家参考。



一张用颜色作背景的图框:
















代码如下:





<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15

cellPadding=15 width="500" bgcolor="#0000FF" border=12>

<TBODY>

<TR>

<TD>


<BR><BR><BR><BR>

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







文字输入设置代码:



<CENTER><font style=font:14pt face=幼圆 color=fff000>学用代码贴图</font></CENTER>



显示结果:





学用代码贴图








二张图片的地址(URL)尺寸大小和代码:



第一张:




http://fjfrbbs.cnco.cn/uploadfile/200410516442455513.jpg 400 *430



贴图片代码:






<P align=center><img src="http://fjfrbbs.cnco.cn/uploadfile/200410516442455513.jpg"width=300 height=330></P>







第二张:






http://linker.huabao.net/bbs//images/upfile/200583101647.jpg 400 *430



贴图片代码:








<P align=center><img src="http://linker.huabao.net/bbs//images/upfile/200583101647.jpg"width=300 height=330></P>







一张分隔线图片:





贴分隔线图片代码:


<P align=center><img src="http://www.bingwu.net/bbs/UploadFile/2005-1/2005130213220553.gif"width=300 height=40></P>







    为了学习上少出差错,最好把上面各种代码一个一个先测试,然后才进行组合编辑。
如何测试?可以在自已发表过的贴子,用回复的方式进入发贴区;

第一,复制一组代码。

第二,击点这个回复标签进到发贴区。

第三,在标签栏选第四个标签(即HTML标签)

第四,把刚才复制的代码粘贴在编辑栏内。

第五,击点标签栏的第一个标签可看见效果。

第六,若成功即可用了。



(有微软的办公软件附带的网页制作软件中的HTNL代码编器那就更好。
微软的办公软件附带的网页制作软件即:

Microsoft Office FrontPage 2003。或者 FrontPage 2000都可以。)








图框内插入文字和图片的方法。



先在空白的图框内的<TD>下面插入
强行断行<BR>和题标文字设置代码。



代码如下:





<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15

cellPadding=15 width="500" bgcolor="#0000FF" border=12>

<TBODY>

<TR>

<TD>

<BR>

<CENTER><font style=font:20pt face=隶书 color=fff000gt;启步学用代码贴图</font></CENTER><BR>
</TD></TR></TBODY></TABLE>





显示结果:










启步学用代码贴图










进一步把各种图片编入代码如下:













<TABLE borderColor=#fff000 cellpadding=30 cellpadding= 15 cellSpacing=15
cellPadding=15 width="500" bgcolor="#0000FF" border=12>

<TBODY>

<TR>

<TD>

<BR>

<CENTER>

<font style=font:20pt face=隶书 color=fff000>启步学用代码贴图</font></CENTER>

<BR>

<P align=center><img src="http://www.bingwu.net/bbs/UploadFile/2005-1/2005130213220553.gif"width=300
height=40></P>

<br>

<P align=center><img src="http://fjfrbbs.cnco.cn/uploadfile/200410516442455513.jpg"width=300
height=330></P>

<BR>

<P align=center><img src="http://www.bingwu.net/bbs/UploadFile/2005-1/2005130213220553.gif"width=300
height=40></P>

<br>

<P align=center><img src="http://linker.huabao.net/bbs//images/upfile/200583101647.jpg"width=300
height=330></P>

<br>

<BR>

<P align=center><img src="http://www.bingwu.net/bbs/UploadFile/2005-1/2005130213220553.gif"width=300
height=40></P>

<br>

<CENTER>

<font style=font:20pt face=隶书 color=fff000>图文:网络<br>编辑:网友</font></CENTER></TD></TR></TBODY></TABLE>

 






显示结果:











启步学用代码贴图



















图文:网络
编辑:游子


























































欢迎您!启步学代码。


(游子习作 供初学HTML代码的朋友参考)




如何在图片加动画--FLASH



要根据图片的内容来配置动画-FLASH素材。

在图片的代码中加上一层或多层FLASH素材。

加叠FLASH素材的代码如下:


<EMBED align=right src=http://hlm.nease.net/swf/red/liu.swf width=530 height=400 type=application/octet-stream wmode="transparent" quality="high" ;;>




这是一张风景图片:









这张图片的代码:



<TABLE cellSpacing=3 borderColorDark=#fff000 cellPadding=0 width=530
height=400 borderColorLight=#fff000 background=http://bbs.guqu.net/UploadFile/2005-5/200552222355347335.jpg
border=12>

<TBODY>

<TR>

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

 










把上述加叠FLASH素材的代码插入风景图片代码
中的<TD>下面就成为图片加一层动画-FLASH











代码:




<TABLE cellSpacing=3 borderColorDark=#fff000 cellPadding=0 width=530
height=400 borderColorLight=#fff000 background=http://bbs.guqu.net/UploadFile/2005-5/20055222237765020.jpg
border=12>

<TBODY>

<TR>

<TD><EMBED align=right src=http://hlm.nease.net/swf/red/liu.swf width=530
height=400 type=application/octet-stream wmode="transparent" quality="high"
;;></TD></TR></TBODY></TABLE></CENTER>

















代码:


<TABLE cellSpacing=3 borderColorDark=#fff000 cellPadding=0
width=490 height=360 borderColorLight=#fff000 background=http://photo.sohu.com/20041117/Img223034204.jpg
border=12>

<TBODY>

<TR>

<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf
width=490 height=360 type=application/octet-stream wmode="transparent"
quality="high" ;;></TD></TR></TBODY></TABLE></CENTER>

 
















代码:


<TABLE cellSpacing=3 borderColorDark=#fff000 cellPadding=0
width=530 height=400 borderColorLight=#fff000 background=http://bbs.guqu.net/UploadFile/2005-5/200552222355347335.jpg
border=12>

<TBODY>

<TR>

<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/6.swf
width=530 height=400 type=application/octet-stream wmode="transparent"
quality="high" ;;></TD></TR></TBODY></TABLE></CENTER>










图片加三层动画-FLASH














代码:





<TBODY>

<TR>

<TD><EMBED align=right src=http://hlm.nease.net/swf/red/liu.swf width=530
height=400 type=application/octet-stream wmode="transparent" quality="high"
;;>

<EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=530
height=400 type=application/octet-stream wmode="transparent" quality="high"
;;>

<EMBED align=right src=http://imgfree.21cn.com/free/flash/6.swf width=530
height=400 type=application/octet-stream wmode="transparent" quality="high"
;;>

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



 





还有一种加叠FLASH素材的特效代码,这种代码宽和高

的属性参数若设置不当会影响整个页面,以后才学吧!





图文:网络
编辑:游子









 
afreshyu

回复时间:2005-12-19 14:55
我试一下这个看看!




----------------------------------------------
[glow,red,2]河水轻轻的流淌......
........
......
.....[/glow]
 
lingjie2006

回复时间:2005-12-20 14:20
真有意思

 
飞雪江畔

回复时间:2005-12-21 14:30
锦绣中华

 
飞雪江畔

回复时间:2005-12-21 14:36
锦绣中华

 
飞雪江畔

回复时间:2005-12-21 14:42
  圣诞快乐

 
飞雪江畔

回复时间:2005-12-21 14:46
圣诞快乐

 
飞雪江畔

回复时间:2005-12-21 14:48
怎么发不出去呢

 
飞雪江畔

回复时间:2005-12-21 14:58
  圣诞快乐

 
秋光

回复时间:2005-12-21 19:51

以下是引用飞雪江畔在2005-12-21 14:48:00的发言:
怎么发不出去呢


你要申请“特权发帖组”,才能用代码发贴子。

 
秋光

回复时间:2005-12-21 19:52
圣诞快乐

 
bengbeng

回复时间:2005-12-22 16:44
看晕了,慢慢学。谢谢楼主!

 
含羞草

回复时间:2005-12-25 22:44
FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">做的太好了,谢谢!




----------------------------------------------
┃憙獾┃ ╰☆愛℡ ╨ ℡伱☆╯┃萴嵿┃

      
 
秋光

回复时间:2005-12-28 16:33

以下是引用飞雪江畔在2005-12-21 14:46:00的发言:
圣诞快乐

圣诞快乐

 
秋光

回复时间:2005-12-28 16:39

以下是引用含羞草在2005-12-25 22:44:00的发言:
FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">做的太好了,谢谢!


做的太好了,谢谢!



[此贴子已经被作者于2005-12-28 16:40:06编辑过]



 
xlg6801

回复时间:2005-12-29 14:09










还是不会用














----------------------------------------------
喜歡煙草略帶苦澀的味道┈
喜歡那噴出煙圈時的怡然..灬
喜歡煙霧彌漫身旁的溫暖┈.oo
 
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.081028 s, 8 q - 无图精简版,sitemap,