2.素材框:
利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.
边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.
要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,
在 白羽 的套装素材里(http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)选了几款:
用第一张做背景图:
<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>图与文字</td></tr></table>
说明:
代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,
表格宽用了相对值90%,相对可显叶面的90%.
下面把第二张做背景图,将格线设为5,width="100%".
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td>图与文字</td></tr></table>
将它放到前一张里:
<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td>图与文字</td></tr></table></td></tr></table>
同理再将第三张放进去(格线为2):
再将第四张放进去(格线为6):
放一张图片进去看看效果:
代码:
<table align="center" border="0" cellpadding="0" cellspacing="10" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif"><tr><td> <img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=460> </td></tr></table> </td></tr></table> </td></tr></table></td></tr></table>
注:对应的颜色就是表格对应的开始标签和收尾标签.
三.背景图的特点及处理方法.
这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等.
用表格做的背景图,它的显示特点是:
当表格尺寸大于背景图原始尺寸时,会复制背景图.
当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.
为了看清楚效果,选一张人物图片做背景图:
(原始尺寸为
140X140)
注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了.
将它做背景图以后的效果:
代码:
<table border="0" cellpadding="0" cellspacing="0"
width="390" height="230" background="http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg"><tr><td></td></tr></table>
代码:
<table border="0" cellpadding="0" cellspacing="0"
width="90" height="90" background="http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg"><tr><td></td></tr></table>
处理背景图的方法:
1.选择花纹素材,如:
做背景后效果:
这样的图做背景被复制后不会变样.
素材库里这种类型的素材是很多的.
2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢?
根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.
而且放进去内容的大小必须小于他,以免撑大.
如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下:
这张图的原始尺寸是 972X614 ,要把它改小.
先下载到自己电脑的图片收藏夹里,
找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了.
结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif.
下面是按55%缩小后的大小(
535X338):
用它做背景图,放一张图和几个字上去:(表格也设为:
width=535 height=338)
祝:
小芒果 生日快乐
祝:
小芒果 生日快乐
|
代码
<TABLE align=center background=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHVAB_wnPitQsgT74k.jpg
width=535 height=338 border=9 bordercolor=#00FF00 cellspacing=6><TR><TD>
<img src=http://i19.photobucket.com/albums/b182/ellenool/loveu.gif width=160>
<BR><BR><BR><BR>
<P align="center">
<FONT style="FONT-SIZE: 40pt" color=#B22222><b>
<pre>
祝:
小芒果 生日快乐
</pre>
</b></FONT></P></TD></TR></TABLE>
四.图和文字放进框里的方法及注意点:
<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里.
代码安放的一些注意点:
1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高.
凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<br>,到满意为止,
也可用分段标签<P>......</P>,不够再加<br>,
2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边.
再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点.
图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度
3.内容居中:将位置属性
align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了:
<table ......><tr><td
align=center>内容</td></tr></table>
五.做表格最容易犯的错误
<table ......><tr><td>内容</td></tr></table>
音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾</td></tr></table>,使得整个帖变形.
所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.
注:全文在所有属性后面都加了等于号,目的是为了大家复制后使用方便,
HTML初级教程就写到这里.教程难免有问题,请指正,随时会修正.
附言:
很多想学代码的新手总感觉无从着手, 谈谈我的学习体会:
1.多练,建议在学堂单独开一个自己命名的学习帖,
可参考我的学习笔记:从一窍不通到小学毕业的记录:
http://bbs.e-yu.cn/viewthread.php?tid=10126&extra=page%3D1关键要多动手,多练才能熟,熟了才能巧.
(前五章都是代码开头的,新手可先复制代码发表显示,再改变属性,内容变成自己的作品)
2.勤记.单独设一个代码记事本,
学过的正确代码系统地记在记事本上,并把他发送到桌面上,
这样要用时复制代码就不易犯错.
3.多收藏.所有喜欢的,包括音乐,图片,好作品,特效等都分门别类地收藏好,
素材的收集也很重要呢.
介绍几个网上HTML教程:
http://www.shanxiwindow.net/teaching/htmlbook/
http://www.gzsums.edu.cn/webclass/html/html_design.html
http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214