这是一篇教学
这一篇是所谓的教学。
最近很多学弟学妹加入了用textcube的行列。
可是就很多对立面的html模版感到头痛,既然那样了,我就是时候来一点教学了。
哈哈。
学弟学妹想要设计部落,大多数都是从几个部分着手。
1)背景图案
2)页眉(header/banner)
3)背景音乐
4)制造联播
5)增添sidebar玩意
首先你要准备几样东西
1)任选
3)或者任何一个照片上传空间网络的账号一个
2)www.google.com账号一个(有gmail就可以了)
3)任选
3)或者任何一个可以获取音乐盒的空间网络账号一个
部落的第一印象以整个theme最能让人留下印象,其中背景和页眉的搭配是很重要的,所以好好准备一下图片吧。
以下教学以tattertools / textcube的 旧款template(衣服部落/劲部落的团员专用template=默认模板_html ver )为主。
[#M_ more.. | less.. |
A) 插入背景图案
首先去到编辑页面,
可以看到以下语法
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=Content-Type content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” media=”screen” type=”text/css” href=”./style.css” />
</head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<link rel=”stylesheet” href=”./style.css”>
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”index.xml”>
<script>
function clickshow(num){
for (i=1;i<=9;i++) {
menu=eval(“document.all.block”+i+”.style”);
if (num==i){
if (menu.display==”block”){
menu.display=”none”; //닫고
}
else{
menu.display=”block”;//하위메뉴를 펼친다.
}
}
}
}
</script>
</head>
<body topmargin=”20″ leftmargin=”20″ style=”background:url(http://xxxxxxxxx.xx.jpg/gif)”>
<body topmargin=”20″ leftmargin=”20″ bgcolor=”ffffff”>
以上那段background url后的红色字眼处,就是你放上背景图案网址的地方。网址该当为http://………gif/jpg。建议使用jpg档案。
要如何获得网址呢,upload去任何一个照片上传空间(例如photobucket.com)即可获得网址。上传照片后,复制direct link替代进入红色字眼处就行了。
=====================
方法2:
去到编辑页面,下面的style.css,用search的功能找bg或者background URL的字眼。
body {background:url(http://kimhaur.com/attach/1/1309645143.jpg)
找到类似以上的字眼就是这里可以设定背景。(注:是在BOdY过后的background URL)
把里面的链接网址替换成你已经上传的图片网址即可。
_M#]
[#M_ more.. | less.. |
B)插入页眉header banner
同样的东西,需要用到的就是你的banner的图案的url,所以先上传照片,获得一个link先吧。
接下来,同样的在编辑页面找寻语法替代。
Banner的比较麻烦,因为不像background那样在一开始,需要再往下一点找。需要花点时间寻找。
要找的语法是:
<!—– 상단영역 —->
<td colspan=”2″ valign=”bottom” style=”padding:10px 0px 0px 0px;”>
<table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”0″>
<tr>
<td width=”97%” height=”60″ valign=”bottom”><p><a href=”” class=”title”></a><br>
<center><a href=”” target=”_blank”>
<img src=”http://xxxxx……….jpg”width=”700″ height=”280″></a></center></p> </td>
</tr>
</table></td>
<!—– 상단영역 끝—->
</tr>
<tr>
<!—– 메인영역—->
<td rowspan=”4″ valign=”top” width=”560″><s_tag>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”1″ bgcolor=”#CCCCCC”></td>
</tr>
和之前的一样,红色字眼就是重点,就是插入banner的语法,把banner上传后的到的网址(link)贴到http://xxxxxx…….jpg处替代即可。
Width和height可以自行设置,最好是先检查banner的原图大小再修改,这样才能保存原图大小,不会被压缩。
Width最佳值为700-800之间
Height不限,但推荐300-450左右。
另外一点,上传图片的时候请记得不要使用“自动编辑图片大小”的功能,不然可能图片会变小。
其实插入图片的语法的位置没有限定的,主要在skin.html里面,在<head>过后,<body>之前的位置都可以啦。
看你的模板html是怎样咯,自己试看在那之间不同的位置。
(不要放在<body>过后!)
_M#]
[#M_ more.. | less.. |
C)增添sidebar内容(小时钟,连接标签bla bla)
看下你要在那里加入啦,可以选择在最后加入。
最后是指
td align=”center”>
<a href=”http://www.textcube.org/” target=”_blank”>
<img src=”http://img24.imageshack.us/img24/37/bitextcube.gif” alt=”Textcube官方” border=”0″ /></a></td>
</tr>
<tr>
<td align=”center”><a href=”” onClick=”window.open(this.href); return false”> <img src=”./images/rss.gif” vspace=”5″ alt=”rss”/></a></td>
</tr>
这里过后。
这个是side bar的最后一样东西。
另外
要增加的语法其实我不太确定,不过用这个应该也是没有问题的。
插入语法如下
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”10″></td>
</tr>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td width=”1px” height=”1″></td>
<td bgcolor=”#EEEEEE”></td>
<td></td>
</tr>
<tr>
<td width=”1px” bgcolor=”#CCCCCC”></td>
<td bgcolor=”#CCCCCC” class=”sidebar_title” style=”cursor:hand;” onclick=clickshow(9)> 题目 </td>
<td width=”1px” bgcolor=”#CCCCCC”></td>
</tr>
<tr>
<td width=”1px” height=”1″></td>
<td bgcolor=”#EEEEEE”></td>
<td></td>
</tr>
</table>
<span id=”block9″ style=”display:block;padding-left:0;” height=0>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td class=”td_info”><font style=”letter-spacing:0px; font-family:verdana;” class=”info_link”>
内容(例如
<td align=”center”><a href=”http://www.kimhaur.com/” target=”_blank”><img src=”http://i140.photobucket.com/albums/r20/kimhaur/kim111.gif
” border=”0″ alt=”传说中最帅的……锦濠^^” /></a></td>)
</tr>
</table>
</span>
红色字题目就是你这个sidebar的名字,例如visitor,link之类的。把你要的题目替代红色字就好了。
红色字内容就是你要加插的东西,可以是一段文字,也可以是html code,例如可以假如我的部落标签,或者联播,音乐播放器之类的。
其实是制造多一个columm出来而已,如果不要的话,直接贴上那些html也是可以的。
p/s:这里的代码有点错误,迟点更正。
_M#]
[#M_ more.. | less.. |
D)制造订阅联播
这个之前有教过,请参考
_M#]
[#M_ more.. | less.. |
E)插入背景音乐
也是很容易的一个东西,去到音乐网站,例如www.myflashfetish.com,找到你要的歌,拿到html code过后插入在适合的地方就行了。
如果不懂放那里,就参考C)项的,制造一个新的columm出来~
呼呼呼,写到sibeh长,没有耐心了,所以后面的越来越简短了乐,哈哈哈,所谓剪不断理还乱,所以就简短一点好~哈哈哈哈~(好像没有关系)
_M#]
p/s:要找html code虽然会看到很多字,不要觉得很头痛。其实可以善用浏览器的FIND功能,输入相关字眼,立刻就可以找到了。
Ctrl + F =find on this page功能。 (5409)
哈哈好好棒的教学哦老师~
你看得明白就好。
不过你也很会用了的啦。
都不用看我写的。
你猜错了。。我其实不是很会改。。都是乱来,
好彩给我改到而已~
那这一篇你就要仔细看了。
哈哈。
不明白再问我。
哈哈,我都有在研究的呢,
今天在图书馆看到几本很有用的教程,
但最近没时间学那些>< 所以选择借了别的~
我到現在還不是很會
不過自己的部落里的,還可以應付~
哈哈哈 很用心很用心~~
可是其實總的來說
無論是誰都可以自行學會
只要他肯用心去看后臺的coding~~
我还有很多还没看懂呢@@
对于这个,我真的没有什么天分,所以都不太敢去弄。。很怕出事 XD
假到……
真的啦~其实很想好好学,可是有些code又看不明白。。
sidebar:
clickshow 要改。如果你注意看他是从 1 开始顺序排着过去的…
请木子赐教~~~~~~
我也懂那个部分应该是有问题的,哈哈,可是看了你说的还是不明白。
实际应该放的语法是怎样?可以直说吗?
我也要加入可以么?
哈?你打算怎样加入?
哈哈,他们都是用supergeng.com/blog啦。
然后我本身,就是自己开一个网站写部落咯。
有没有兴趣咧?
其实,我是很有兴趣的啦!
只是,我不知道我有没有多余的时间去搞这些东西咯~
因为要开课了。
怕会很忙~忙~忙~
需要帮忙的时候尽管开口~~
为雪梨赴汤蹈火~
哈哈~
那么小梨子就在此谢谢你啦~
刚刚把部落格template reset@@
明天再看你的教学
很眼睡@@
candyfloss,
你这种部落老手,一看就明白得啦。
你的头啦
我不会html这些东西的
不过刚刚放了banner
顺利!开心
嘿嘿
嗨! 金老师! 教电脑科是受欢迎的老师!有满足感!!!可怜我教令人厌的国语科!教到吐血,尽心尽力为学生!可家长不感谢,还在心口上插您多刀!!!
令我恶梦连连!!!!!很灰心!!!!!拨电投诉后,还在练习簿骂粗口!!!在练习簿擅改老师的批改分数至A级!我可不是新兵!这是第一次,见到如此可恶的家长!孩子很狡猾,会自我保护,说诬赖的话。心疼也!儿童该是天真无邪,可他没有!全说谎言,不承认 错误!至今心还淌血!!!!!!!!!!!!!!!!!!!!!!!!!!!!可悲!可我还是放不下他!!!真是傻呼呼!
prislove lee,
李老师好~不如你留下个链接,大家交流下啦?
呵呵。