论坛首页 同龄圈 育儿你造吗 好好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-16 11:18| 查看全部| 倒序看帖| 发送站内信
以下是引用 第1楼 薇琪格格 的话:
还想笨笨地问一下妞妞妈咪: 我已经找到了一张图片,也取得了它的网络地址, 可是我不知要到哪里去修改代码? 可以帮帮我吗? 谢谢! 看看我的步骤: 1,取了一张图, 取得了网络地址: http://file2.ci123.com/201003/3d04a651bc00d3e4726cf39bb78f7412.jpg 下一步是修改代码,可以告诉我要到哪里去修改代码码? 谢谢了~~...

 

原源代码为:

<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但注意颜色背景和背景图片是不能重复使用的。

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

回复
3#
发表于 03-17 08:49| 查看全部| 倒序看帖| 发送站内信
以下是引用 第2楼 捣蛋佳鑫 的话:
源代码编辑器...


 在源代码编辑器里啊~

回复
4#
发表于 07-12 22:25| 查看全部| 倒序看帖| 发送站内信
以下是引用 第1楼 鼎儿宝贝 的话:
感觉好复杂不敢试啦...


 只要操作过代码,会发现很简单的

回复
5#
发表于 08-07 16:29| 查看全部| 倒序看帖| 发送站内信
以下是引用 第1楼 mysun2008 的话:
我完全按照楼主一步步做的,最后刷新后出来有信纸,但只有四分之三的图案,试了很多次都是如此,不知为何,请赐教。 此帖子已经被mysun2008于2010年08月07日 15:57:52编辑过。...


 是不是用的信纸图片太大了,打开的速度太慢~?

一般网上图片分辨率定72就可以了~

回复
6#
发表于 04-01 23:59| 查看全部| 倒序看帖| 发送站内信
以下是引用 第1楼 yinuoma 的话:
源代码在什么地方能看到...


编辑栏里的HTML

回复
7#
发表于 06-26 12:16| 查看全部| 倒序看帖| 发送站内信
以下是引用 第1楼 调皮小布丁 的话:
请问豆豆妞妈咪处理图片之前是不是要先把图片分成3个部分呢?...


 是的

回复
8#
发表于 06-26 12:17| 查看全部| 倒序看帖| 发送站内信
以下是引用 第28楼 haojiankangde 的话:
我也学习了做成了第一张信纸,来报个喜谢谢亲的分享...


 很清新

回复
社区导航