教你在表格中用图片制作精美的边框

我们用下面背景图片素材为例(大家也可以自找素材,做出更精彩的边框)

1. 2. 3. 4. 5.

方法:

1.在Desing下制作一个表格,如下图:

2.切换到html编辑区,删除<*TD>后面所产生的代码 在width="100%"后面加入图片代码background=图片网址 完整的是background=http://image18.360doc.com/DownloadImg/2010/11/2409/7054700_2.jpg (注意:插入图片代码后码要与width="100%" 和align=center前后留有空格) 然后我们把cellSpacing=2修改的大一些,改为20(数越大边框越宽) 把border=20的数值改为1 做好后如下图:

3.复制第一层上半部分代码,也就是让大家删去<*TD>后面的所产生的代码后,所剩下的前部分代码,另起一行粘贴在第一层表格代码下,然后把图片的网址换成我所给的2号绝对网址(黄色),把cellSpacing=20改为cellSpacing=1 做好后如下图

4.第三层方法同第二层一样,复制上半部分的代码,另起一行粘贴在第二层表格代码下面,把cellSpacing=1中的数值改为20 把图片代码background=换成3号背景绝对网址(动态红色背景图)做好后如下图:

5.第四层与第五层方法同上,只是更换上图片background=后面的4号和5号绝对网址就是了.把4号的cellSpacing=20数值改为1.在第五层时,cellSpacing=20不变.全部做好后如下图:

你看明白了吗

施展你的才智

演绎你的精彩

多练就会成功

精灵祝你愉快

最后还得补充一下,如果你对讲的不太明白,可把我讲的复制粘贴到记事本上,边看边在论坛做,这样就不需要在论坛来回切换看教程.呵呵..歇着去了.

只想问你。伤我时，你会心痛吗？若我离去，后会无期！
回复 引用 举报顶端 精灵狂少爷离线 级别: 三品按察使
UID: 28471
性别: 帅哥
精华: 22
发帖: 36313
论坛币: 1948 个
威望: 12 点
贡献值: 0 点
金币: 0 个
在线等级:
注册时间: 2005-08-20
最后登录: 2010-05-17 1 发表于: 2006-04-05 02:05   只看该作者 ┊  简 繁 | 小 中 大

前面我们已经讲过多层表格的制作,现在我们利用掌握的多层表格的制作方法,用表格给图片加边框.先上传一张图片以此为例:

方法:

1.先制作一个表格,如下图:(注：cellSpacing=20 cellPadding=20 border=10 width="100%")

2.制作第二个表格(方法同上),制作好后我们按下html钮,进入到html编辑区,把第二层表格的width="100%" 改成width="60%" 如下图:(注：cellSpacing=2 cellPadding=5)

3.把改好的第二层表格用鼠标选中,右键复制或剪切,粘贴到第一层表格中.如下图:

4.把图片贴进中间表格,如下图:（呵呵。。我贴了两幅图。）

5.别忘了在html编辑下删除空格码,举一反三,大家也可以根据前面所学的多层表格制作方法,做更多的内外框边,在这就不细说了.如果是多图贴,那么只需要复制第二层表格,粘贴到第一层第一幅图下面，更换图片的网址粘贴进去。也可以在html下用代码做，只要做出来就行。如果是另做表格，注意保持width="60%" ,呵呵..大家别生搬硬套,根据自己的经验和爱好调整边框边据粗细.

友情提示:在选图时,尽量选择图片尺寸大小一致.

我们在论坛上传图片后,总会在看贴时发现图片上部有"此主题相关图片如下"几个字,这些字对贴的观赏性大打折扣.如下图:

此主题相关图片如下：

解决的方法如下:

假设:

图片在九月论坛Design状态下,上传后我们得到这样一个网址[*upload=jpg]UploadFile/2006-3/20063271191776589.jpg[*/upload]

此时我们别急着发表,点一下编辑区下面的"预览",当可以预览这张图时,我们用鼠标右键在这张图上点一下,再用鼠标左键点出来的对话框属性,此时我们可以看见一个网址(也就是以http://...开始打头的),把这个用鼠标右键复制了(嘿嘿...一定要从http://向后复制,这样才能复制全,否则有些网址长你会复制不全的),关闭预览窗口.把复制的网址粘贴到我们前面上传后的网址上,也就是换这个网址UploadFile/2006-3/20063271191776589.jpg

假设我们在预览中复制的网址是这个*http://www.bbsman.com/2ka4e_2004-5/2006-3/20063271191776589.jpg*

那么最后换好的应该是这样[*img]http://www.bbsman.com/2ka4e_2004-5/2006-3/20063271191776589.jpg[*/img]

注意要把网址前后[upload] [/UPLOAD] 括号里面字母换成[img][/img]

完整的地址是[*img]http://www.bbsman.com/2ka4e_2004-5/2006-3/20063271191776589.jpg[*/img]

呵呵..这样发表出来就没那几个"此主题相关图片如下"字了.

注意:实际发表时没有这个*符号,在这里我只是为了让大家看清网址特意加上去的,实际运用时要去掉*号.

呵呵,在风儿的教课的基础上,俺也照猫画个虎,聊聊这多层表格的制作,别扔砖过来哦.咳咳,开聊:

1.我们在Designg下先做第一层表格边框,如下:

低头做事

抬头看路

我的心情

我做主

2.接下来我们做第二层表格边框(方法同上).做好后按下HTML钮,在HTML编辑下,把第二层border=5数值改到比第一层数小些.(这是第二层最外面边框粗细数值,第一层我的border=10 第二层改为5 ,是为了让第二层表格最外层边与第一层复制粘贴过去后和协)然后返回到Design编辑区,如下:

低头做事

抬头看路

我的心情

我做主

3.我们把第二层表格用鼠标选中，点右键复制(嘿嘿,记着复制完在发表之前删掉原表格.如果你是老手,直接剪切吧),在第一层边框中粘贴上，跟文字粘贴一样.如下;

低头做事

抬头看路

我的心情

我做主

4.进入到HTML编辑下(也就是按下html钮),我们把代码中的空格码删掉,就是这个 删这个空格码是免得边框内有空格,边框会变高.嘿嘿..废话少说.返回到Design下发表.

我在这里只做了二层表格,呵呵,偷懒了.你想做更多的边框,重复上面的操作就是了.也可以直接复制第二层表格粘贴在第二层表格里,变成第三层表格.记着进入html编辑下改变边框的颜色代码,任大家发挥聪明才智,把你的边框做的完整漂亮.

5.嘿嘿....收工!

顺便补充一句,大家在做第一层和第二层或更多的表格时不要添写文字,等你把所有的表格都做好了在添加文字或图片.

附表格常用参数识别:

 空格码

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

border=1>边框粗细

width="100%"边框的宽度

borderColor=#cccccc 边框颜色

bgColor=#ffffff 背景颜色

cellPadding=3边距