向留言的同学鞠躬~
这年头要留上言不容易啊^________^



Akira教你改模板 Lesson2

我当然不可能知道每句代码的意思,所以不要让我逐字逐句解释。事实上,有80%的代码什么意思我都不清楚。要是清楚的话估计这贴就该叫“教你做模板”了。
如果你想知道,可以去oblog官方查查,或者百度一下,或者谷歌一下。
话说,知道20%就受用了。知道那么多有用么- -+
我就是懒人。所以教大家一些懒人用的笨方法。

●先备份
●不管你原有的模板是pinbu的,还是下载的,希望你找的是一个很“经典”的板子。就像我的这个一样,之所以称为“经典”是因为很好改。它的结构是这样的:
啊啊~很是典型的代表,西西。

●●先从顶图说起。
改过模板的同学肯定碰到过一个问题,就是用自己的图片去替换原有的图片时,大小受限制,也就是说只能用和原图一样大小的图片去替换。
现在我们来解决这问题。

引用小瑞同学的补充:原理其实很简单,就是在源码里找到原来的顶图,把图片地址换成你想要的图片地址,同时把新图修改成合适的高度和宽度!

㈠找到一张你喜欢的图片,象素尽可能高。
我个人比较喜欢宽阔的界面,所以顶图的宽度一般在700px以上。高度的话看你个人喜好拉,只是图片越大,开网页速度越慢(在讲废话- -||||)。如果你熟悉做图软件的话,可以把大的图片裁成几块小的再上传。

我现在模板顶图大小是800px×200px(下面这张图当然有压缩)


顶图算是大图片了,如果是jpg格式的话,上传时会被pinbu打上标记,所以请务必改成gif格式。就算没有做图软件也可以更改,用windows自带的“画图”工具“打开”图片→“另存为”→“保存类型”为gif就行了。

㈡同时打开“修改主模板”和“图片文件”


①上传你的图片到“图片文件”,得到地址A。复制A~

②回到“修改主模板”。在“设计”状态下,把鼠标放在原顶图上,点右键查看“属性”;若是下载的模板,还可以在skin文件夹里选中该图片,查看右栏的详细信息;请记住这里的两个数字(这是原顶图的大小):


或者

③在“源码”状态下,查找原图片B,用A替换B(不清楚的同学复习《补课》~)

④让光标回到代码的第一行,查找刚才的数字X(一个一个来,先从宽开始),找到后用现在图片的宽度值Y代替它。继续查找X,凡是查找到后就用Y来代替它,直到出现这样的提示框:
接着查找高度,方法一样

这样做的目的是:
○大图片不好定位,所以要在“源码”状态下
○让顶图和主体乃至底图的宽度一致(不排除某些同学喜欢头大身小,或头小身大的模板;专门是指像我这种模板,有些模板分栏不一样)

顶图改好鸟~可以到“设计”或“预览”页面看看
顺便说,pinbu是不能上传FLASH滴~要用的同学请外链

☆推荐Θ的163相册  里面有不少素材
 
我以前推荐过七彩糖的相册,很让我纳闷,前一天我还在上面找图片,第二天就被网易关闭了。汗。我记得那上面没有什么“违反服务条款”的东西啊。所谓“树大招风”……
我才要把自己的相册捂紧点拉

今天先讲到这里。下次说颜色代码。发现我表达能力匮乏。不知道有没有写漏的地方。不明白的同学继续留言。

akira 发表于 2007-12-15 9:17:51||阅读全文 | 回复(25) | 引用通告 | 编辑


Re:Akira教你改模板 Lesson2

我第一个来的?话说上次那个还没有成功!这次再认真学习!  谢谢亲


以下为blog主人的回复:

 不用~

www22743发表评论于2007-12-15 10:18:41||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

桃老师`~ 哈哈 辛苦辛苦

以下为blog主人的回复:

 不会 某同学的自我满足而已

latalata(游客)发表评论于2007-12-15 10:19:19||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

实在是无心看这些文字啊

实在头疼...


以下为blog主人的回复:

 要不要改是你的事 
如果你想特别又不愿意学 我有什么办法 

要是有什么生成器我第一个推荐给你

redzh521发表评论于2007-12-15 10:36:15||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

桃很辛苦,谢谢!!!

但是.............我还是看着头晕,嘿嘿.........

我还是等某位厉害的MM帮我改吧,哈哈哈,我在这方面基本是弱智


以下为blog主人的回复:

 哈哈 可能我说得太巨细了 反而罗嗦

yuan0614(游客)发表评论于2007-12-15 12:11:27||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

嘿嘿,我就在等这第二课呢,谢谢你啦:)

以下为blog主人的回复:

 不用谢:)

debbie发表评论于2007-12-15 12:39:35||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

桃子讲得清楚明了!当然不排除有些JMS仍然看不明白,呵呵,我在这里在罗嗦补充一句,原理其实很简单,就是在源码里找到原来的顶图,把图片地址换成你想要的图片地址,同时把新图修改成合适的高度和胖度!移花接木***就是这样滴~~~
P.S. 桃子,什么时候做个钩针的教程嘛?


以下为blog主人的回复:

 钩针的教程怎么做?书后面有哦~生活馆里的钩编馆里ms也有

小瑞(游客)发表评论于2007-12-15 13:15:08||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

桃子谢谢你答教程的说~~~~我已经装修过我的新家咯~~PS:上编程课的时候没好好听我现在也只看的懂20%了....


以下为blog主人的回复:

 尼的家很温馨

hyunie0509发表评论于2007-12-15 13:21:51||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

LZ可以教我怎么换博客的背景图吗?


以下为blog主人的回复:

这个我打算放最后的  有两种代码

纯色背景代码:
body {
 background-color: #颜色代码;}

图片背景代码:
body {
 background:url(图片地址) repeat scroll!important;}

罗勒(游客)发表评论于2007-12-15 13:25:50||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

完全明白某A所谓的自我满足

某(游客)发表评论于2007-12-15 16:48:56||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

还有一句 我完全能想象你的表情就和下面这群水果一样 特别是西瓜


以下为blog主人的回复:

 这位同学你还是这么了解我啊 

某(游客)发表评论于2007-12-15 16:50:10||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

额爱桃子

哈哈,最近桃子不督促我更新了,我可以再偷懒几天了

我混乱,杂乱啊~~

这些课程上得真真好


以下为blog主人的回复:

 啊~我来鞭策你拉~

rebeccaxiao发表评论于2007-12-15 22:16:24||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

亲爱的小桃同学,我在网站上搜索的背景素材尺寸都很小,是不是要用PS 处理过后,在用代码生成器生成代码后,才能使用啊?我已经被这个问题困绕很长时间了~~郁闷!

                                          ----被你炖了的萝卜: )


以下为blog主人的回复:

 背景?萝卜同学确定说的是背景?不是顶图吧 背景的图片本来就很小啊10*10的都有 背景是靠重复滚动(repeat scroll)来形成墙纸的

不是代码生成器拉 就是上传到空间 跟图片上传一样 然后就有一个地址 再用这代码

图片背景代码:
body {
 background:url(图片地址) repeat scroll!important;}

萝卜同学还不理解的话就加俺Q22306596

luobu发表评论于2007-12-15 22:17:09||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

额是这方面的白痴啊白痴~~~不过已经看懂了这第一步,勤奋找顶图去~


以下为blog主人的回复:

 

doris(游客)发表评论于2007-12-16 10:06:11||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

感觉好久没来了~开课程了啊~

以下为blog主人的回复:

 

吾叶(游客)发表评论于2007-12-16 15:16:41||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

以下引用罗勒(游客)在2007-12-15 13:25:50发表的评论:

LZ可以教我怎么换博客的背景图吗?


以下为blog主人的回复:

这个我打算放最后的  有两种代码

纯色背景代码:
body {
 background-color: #颜色代码;}

图片背景代码:
body {
 background:url(图片地址) repeat scroll!important;}


好象前后还得加个 <STYLE> </style> 才给改~  我偷看了你网页的源文件了 

 现在搞定了,谢谢你


以下为blog主人的回复:

 汗……本来源码里面就有<STYLE></style> 啊 你当然要放在这之间……

罗勒(游客)发表评论于2007-12-16 15:20:08||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

我的blog之前选的模板里面源码找不到到这个<STYLE></style>这种命令哑~  里面只有<Tbody> 之类的哑...  加上我也不熟这个源码之类的....  所以搞死人 


以下为blog主人的回复:

 <Tbody> 先下载表格内容 哦~第一次遇到 这句是好命令啊~可以先看到内容咔咔 后面有没有THead和TFoot呢?

在最前面加上<STYLE></style>吧 这是整体命令

kimbow(游客)发表评论于2007-12-16 16:17:32||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

以下引用kimbow(游客)在2007-12-16 16:17:32发表的评论:

我的blog之前选的模板里面源码找不到到这个<STYLE></style>这种命令哑~  里面只有<Tbody> 之类的哑...  加上我也不熟这个源码之类的....  所以搞死人 

我是罗勒

罗勒(游客)发表评论于2007-12-16 16:18:22||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

以下引用kimbow(游客)在2007-12-16 16:17:32发表的评论:

我的blog之前选的模板里面源码找不到到这个<STYLE></style>这种命令哑~  里面只有<Tbody> 之类的哑...  加上我也不熟这个源码之类的....  所以搞死人 


以下为blog主人的回复:

 <Tbody> 先下载表格内容 哦~第一次遇到 这句是好命令啊~可以先看到内容咔咔 后面有没有THead和TFoot呢?

在最前面加上<STYLE></style>吧 这是整体命令


我选的模板是pinbu里面自带的,模板是这个“HcnsoftGreenV2”,里面好象也没有这两个"THead和TFoot"

  而且发觉把<STYLE>图片</style> 放在Tbody 前面,图片就会把整个blog的内容盖掉

  为了改背景不知道累死多少脑细胞了,我的模板比较恶搞哈! 

  还得再感谢你,真是热心的好MM哑!


以下为blog主人的回复:

 我猜测中 你的命令是这 

body { background-color: #ffffff;
 background-image: url(图片地址);
 background-repeat: repeat-y;
 background-position: center top;
margin:0px;padding:0px;
}

西西 我本来要在讲背景代码的时候加一句:具体问题具体分析滴~~你试试吧

不过这图片和一般背景图不一样 至少要1000PX以上 象这样

中间是白色的 只有两边有图 参见

http://blackcrossing.pinbu.com/user2/blackcrossing/

或者

http://www.pinbu.com/user2/dorissun/

前提是 如果我没猜错的话 你的板子和她们两位的是一样的类型


以下为blog主人的回复:

 又跑去你那看了看 好象猜错了 

罗勒(游客)发表评论于2007-12-16 16:49:28||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

刚才的贴没了

 感动啊,MM真的好热心助人~

我的博MS和上面两位的不一样~我的水玉和背景图是分开的,是60X60和100X100的小图

 我在模板源码最尾部加了

<style>body {
 background:url(图片地址) repeat scroll!important;}</style>    背景图才成功加上去

 估计我用的模板是比较另类那种


以下为blog主人的回复:

 西西 改上了就好 多折腾几次就熟悉了 我是典型代表

罗勒(游客)发表评论于2007-12-16 20:07:14||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

认真学习中 谢谢Akira

以下为blog主人的回复:

 不用谢

superyadan发表评论于2007-12-16 23:20:02||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

谢天谢地终于可以回复了,布侬那个着急啊。。。。

最近都不能回大家的帖子真是。。。。。

亲爱的。。。我仔细的看了。。看完就忘了。。。。。桃子大人原谅我。。。。

话说我对现在桃子给偶的新模板无敌满意。。。。。。。。。。。。。。。。。所以偶不打算改了。。。可不是偶懒哦哈哈哈哈


以下为blog主人的回复:

 pinbu最近好不稳定

西西 其实只要改过一次就记住鸟~

blackcrossing发表评论于2007-12-17 17:55:29||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

链接啦学习改模板


以下为blog主人的回复:

 50那里专教代码的说 大家去看看~西西 女王那里是专业课 我这里是兴趣班 

tonghuawawa发表评论于2007-12-17 19:10:48||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

反正偶是完全没有看懂

但是很自我膨胀滴感觉自己虽然看不明白代码

也把自己的博客弄得很像样了

起码是有了很多自己的感觉


以下为blog主人的回复:

 

qqtang发表评论于2007-12-19 23:27:32||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

待过了这段工作上的忙碌,我潜心钻研。

以下为blog主人的回复:

 好的~~

tljx发表评论于2007-12-21 10:19:10||个人主页 | 引用 | 返回 | 删除 | 回复


Re:Akira教你改模板 Lesson2

前段时间自己翻来覆去要把自己搞疯了的搞模版,原来亲这里早就开好班了....果然我走了很多冤枉路

强烈要求连接,不连我就不走了

天使菲菲(游客)发表评论于2008-1-4 10:12:53||个人主页 | 引用 | 返回 | 删除 | 回复

发表评论:

    昵称:
    密码: (游客无须输入密码)
    主页:
    标题:
<<  < 2008 - 12 >  >>
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31



Akira in
 {豆瓣} {百度} {163}{精明}

饭否

分 类
更 新
回 复
留 言
链 接
登 陆



生活文化馆 | 手工BLOG | 在线购物 | 手工加盟 | 手工教程 | 手工资讯 | 手工制作论坛 | 手工杂志