论坛首页 同龄圈 育儿你造吗 好好ci 流行时尚 女人心情 败家妈妈 孕期话题 准备怀孕 幸福母乳站 幼儿护理
查看:7w|回复:159

简单实用的用代码做信纸教程

回帖 发帖
发表于 03-10 16:21| 只看楼主| 倒序看帖| 发送站内信

是不是很羡慕别人用宝宝照片DIY自己专属的信纸呢?~不用急,看看这个,你也能够做到~

在做信纸之前,我们要先了解到我们一般使用的信纸分为3个部分:头部图片+中间平铺图片(文字的背景图)+尾部图片

聪明的你是不是知道了我们首先要处理这三部分图片了~

1、制作背景图:找到一张或多张你自己喜欢的图片,用你平时常用的压缩工具把图片处理成宽为550像素的图片。(因为育网的尺寸大概是这样的,你也可以根据自己需要来设置宽度)支持大家ps自己喜欢的图片。

然后下载到本地传到育网的主页或者博客上,这样能保证图片使用中的稳定性。

在传好的图片上点击右键,在属性里得到它的网络地址

提醒:背景那张图最好使用能够重复的图或者纯色的图片。因为我们无法预测日志的长短。

偶找了这样的三张做示例:

分别得到了三个图片地址:

头部地址:http://file2.ci123.com/201003/3ffbfdfa655df60c123f2b34dbfc1e5a.jpg

文字背景地址:http://file2.ci123.com/201003/babf049226817c837edb08e64ac6faa3.jpg

尾部地址:http://file2.ci123.com/201003/92deef069ecf32b3736ff58a901ed476.jpg

2、修改代码

原源代码为:

<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td bgcolor="#FFFFFF"><img src="信纸开头图片地址" alt="" /></td>
</tr>
<tr>
<td background="文字背景图片地址" bgcolor="#b1e3fa">
<p>&nbsp;</p>
<p>文字写在这里</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="信纸尾部图片地址" alt=""  /></td>
</tr>
</tbody>
</table>

这个代码中的黄色标注部分修改为1里我们得到的对应图片地址。

紫色标注部分则为颜色代码,因为我们使用了比较个性的图片,这部分可以不予修改。如果想要修改的话,在颜色对应表里找到对应的颜色代码进行修改。颜色代码可参阅我这个帖子。http://bbs.ci123.com/post/5038860.html但注意颜色背景和背景图片是不能重复使用的。

示例中我们的代码就修改成了这样:

<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td bgcolor="#FFFFFF"><img src="http://file2.ci123.com/201003/3ffbfdfa655df60c123f2b34dbfc1e5a.jpg" alt="" /></td>
</tr>
<tr>
<td background="http://file2.ci123.com/201003/babf049226817c837edb08e64ac6faa3.jpg" bgcolor="#b1e3fa">
<p>&nbsp;</p>
<p>文字写在这里</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="http://file2.ci123.com/201003/92deef069ecf32b3736ff58a901ed476.jpg" alt=""  /></td>
</tr>
</tbody>
</table>

做好的信纸如下:

 

文字写在这里

 

 

 

是不是很简单呢?只是豆妈比较啰嗦~所以文字多了一些~呵呵~你也试试看哦~记得交作业~也记得去参加主页的信纸活动哦~

此帖已经被版主李家熙熙奖励积分20分。

2#
发表于 03-10 16:32| 只看楼主| 倒序看帖| 发送站内信

 沙发

 

----------------------------------------------------------------

不好意思,借用长长沙发再啰嗦一句哈~(楼上因为有代码,一编辑会乱掉~)

做好的代码复制到日志的源代码编辑器里,更新后就会显示出来。然后在写文字的地方编辑自己的日志就可以了~

此帖子已经被♣豆妞妈咪于2010年03月10日 16:42:14编辑过。

回复
3#
发表于 03-10 16:33| 只看楼主| 倒序看帖| 发送站内信

 哈哈哈哈……

回复
4#
发表于 03-10 16:34| 只看楼主| 倒序看帖| 发送站内信

 主页真是一门学问啊!感觉好难哦!得好好研究一下!顺便学习!眨眼

回复
5#
发表于 03-10 16:34| 只看楼主| 倒序看帖| 发送站内信

很想学会,可是比较笨

回复
6#
发表于 03-10 16:37| 只看楼主| 倒序看帖| 发送站内信

豆妞妈很棒哦

我再补充上,中间一段不要背景图,以背景颜色来填充的。
代码如下:
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td bgcolor="#ffffff"><img src="http://file2.ci123.com/201003/3ffbfdfa655df60c123f2b34dbfc1e5a.jpg" alt="" /></td>
</tr>
<tr>
<td bgcolor="#fff68f">
<p>&nbsp;</p>
<p>文字写在这里</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff"><img src="http://file2.ci123.com/201003/92deef069ecf32b3736ff58a901ed476.jpg" alt="" /></td>
</tr>
</tbody>
</table>

 

效果如下:

 

文字写在这里

 

回复
7#
发表于 03-10 16:43| 只看楼主| 倒序看帖| 发送站内信

咧嘴 

回复
8#
发表于 03-10 16:43| 只看楼主| 倒序看帖| 发送站内信

 有时间试试

回复
9#
发表于 03-10 16:44| 只看楼主| 倒序看帖| 发送站内信

 收藏了

回复
10#
发表于 03-10 16:47| 只看楼主| 倒序看帖| 发送站内信

豆妞妈太棒啦,写的很详细哦!

回复
11#
发表于 03-10 16:48| 只看楼主| 倒序看帖| 发送站内信

 学习一下。

回复
12#
发表于 03-10 16:55| 只看楼主| 倒序看帖| 发送站内信

 很想做,可就是学不会怎么办。

回复
13#
发表于 03-10 19:26| 只看楼主| 倒序看帖| 发送站内信

 谢谢!

回复
14#
发表于 03-10 20:02| 只看楼主| 倒序看帖| 发送站内信

我也想学哟,改天来试试,,,

回复
15#
发表于 03-10 22:04| 只看楼主| 倒序看帖| 发送站内信

很想学啊,不知学会学不会啊

回复
160 篇,显示:1 - 15篇 
社区导航