個人資料
正文

石頭製貼講座之一(HTML基礎及模版一號)

(2009-05-22 20:47:51) 下一個


金班讓我搞做貼教學,簡直就是趕鴨子上架,俺那水平,咳咳,連菜鳥都算不上。每次做貼子總要請教師傅,感覺自己超級笨蛋。既然被趕上來了,就花點時間給大家介紹一下貼子該怎麽做。
看到很多大腕的精彩演唱,沒有好圖好貼子來配,也蠻可惜的。如果有個美貼,肯定是錦上添花。 做貼子說難也很複雜,說簡單也不算太難。哎,羅裏羅唆的,就分幾個級別來介紹吧,大概有個十講八講的,我知道啥就說啥,老實交待。
首先今天給大家介紹一個最最簡單的模版,一個圖片加一個flash的,就那麽四句HTML語言,會做貼的高手們千萬別看,因為這是入門級別的,看了有害無益,哢哢。
以後呢我再介紹:
如何製圖
如何寫歌詞
如何“偷”code
如何做滾動歌詞
滾動圖片
多重flash定位
自己做flash動畫歌詞
歌詞歌曲同步顯示貼
。。。
天!真賣弄,感覺自己要當教授,趕緊向自己的師傅們求救先,哢哢。

這一貼很簡單,就當石頭模版一號,一個圖片加一個flash就搞定。
原料:一個圖,一個恰當的flash. 一個歌曲鏈接地址。
1)圖
可以說做貼子成功與否80%看圖選的好不好,恰當不恰當,這個很重要。網上的圖片多的不計其數,去百度圖片裏搜一下,按你的歌曲所要表現的主題去搜,然後選好圖放進自己的電腦裏。我是專門有一個圖片收藏夾,看到好的圖片就蕩下來存裏麵,做貼子時候去找。圖是不是好看和你的藝術品位很有關係哦。
圖片一般要找大圖,寬度600 到1024 的都可以。但是貼子要用600 到900之間寬度的。如果你找到的圖片是1024的大圖(一般用作壁紙),需要用軟件來resize, 去搜一下“光影魔術手”這個軟件,用它來resize和加邊框就很好。
大的貼子我一般用寬度是800的,一般的帖子用750或者700的,太寬了不好,會出現滾動條,看著不方便。
圖選好後,可以在圖片上寫上歌詞,寫歌詞有很多方法。簡單的可以用WINDOWS自帶的PAINT, POWERPOINT, 下載一些製圖軟件最好,比如PHOTOSHOP, 功能非常強大,我們平常所說的照片被PS過了,就是被這個軟件加工過的意思。也可以用其他的免費軟件,功能簡單一些,但作貼子足夠了。我現在用的是isee,搜一下又免費版。
字體很重要,如果你的電腦裏沒有裝各種好看的字體,那就寫不出花樣繁多的漂亮中文。去這個網站下載字體吧:http://font.knowsky.com/
字體庫非常浩瀚,什麽樣的漂亮字體都有,你就下載解壓成font文件,然後拷貝在C盤windows下麵的font文件夾裏就ok了!
我上麵的貼子就是這個圖:http://hiphotos.baidu.com/sttsyan/pic/item/d77cc137dbb0f0fda3cc2bd3.jpg
原圖大小是800X600
縮小後用isee軟件寫上歌詞:http://i44.tinypic.com/11j6uqo.jpg
我這個圖的最後大小是 700X525
圖要上載到網上,拿到圖片鏈接地址,最常用的是tinypic.com,非常好用。

2)FLASH
來看看這個鏈接:
http://web.wenxuecity.com/BBSView.php?SubID=ktv&MsgID=177749
我現在還在用這些FLASH, 鏈接不容易過期,調用方便,選擇很多。
去網上搜索一下,就會有很多FLASH資源。這個是自稱最大的FLASH集合網站:
http://flashline.cn/
在別的網站上找到的FLASH文件,有調用地址,但不一定有保證,鏈接很容易過期,這時候,可以把FLASH文件蕩下來,再上傳到文學城,得到文學城的FLASH鏈接地址,這樣就像上傳歌曲一樣,隻要文學城不出現問題,鏈接就能用。
FLASH用好了,錦上添花,不用也沒關係。

3)歌曲鏈接
這個大家都會,這裏是文學城上傳文件的鏈接:http://web.wenxuecity.com/upload.php
選好自己的歌曲UPLOAD上去,一個連接地址就送到你的悄悄話裏了。
有了這三個原料就可以做貼了。

首先在HTML語言裏,一個貼子就是一個table, 所有的話要擴上尖刻號“<>”才能起作用。所以第一句要定義一個table, 也就是表單。
第一句話就是定義表單的大小了。在括號裏寫上:
table height="你圖片的高度" width="你圖片的寬度"
cellspacing是表格裏單元格之間的距離;
cellpadding是表格裏單元格內的空白部分;
俗稱就是外補丁和內補丁,也就是表格裏麵的東西距離邊框的寬度距離。在本模版裏麵我都設置成0,這樣圖片到邊框之間就沒有距離了。
border="編框寬度" 一般呢用5號寬度就行了,3也行,如果作圖的時候已經有了邊筐,不想要了就用0
bordercolor="顏色代碼",如果有邊框,你就可選擇合適顏色來定義你的邊框了,顏色代碼的選擇看這個網址:http://www.citymao.com/n4863c37.aspx
另外你還可以定義四個邊框分別有不同的顏色,那就要用這句話:
style="border-right: 顏色 寬度 虛實 border-top:顏色 寬度 虛實 border-left: 顏色 寬度 虛實border-bottom:顏色 寬度 虛實"
比如說 BORDER-RIGHT: rgb(153,153,153) 3px solid; 那就是右邊線顏色是 rgb(153,153,153) (銀灰色); 寬度是3個pixel, 實線,(虛線就是dotted) 但一般不用那麽複雜,可以不寫這句。
說到這裏第一句話就說完了,就可以把這句話用括號括起來了。貌似很複雜,用慣了就快了,別忘了咱們現在在講最簡單的貼子模版,後麵還有複雜的,準備好。

第一句範例:(上麵我的歌貼)
Photobucket
說完了第一句話,表單定義好了,就開始寫表單裏麵的內容了。表單裏有什麽呢,包括上麵提到的三個原料:圖片,flash,歌曲
三個原料都要是網頁鏈接形式的,比如:
圖片地址:http://i44.tinypic.com/11j6uqo.jpg
flash地址:http://imgfree.21cn.com/free/flash/92.swf
歌曲地址:http://space.wenxuecity.com/media/1241932876.mp3
首先來個尖括號,尖括號裏麵寫上:tbody
意思就是說,我現在要寫表格裏麵的內容了。
然後又一個括號,裏麵寫上: tr
tr 是什麽呢?就是table row的縮寫,就是這一塊東西我要寫什麽了。
然後又一個括號,寫上td (表中的一個單元格)以及下內容:
valign="bottom" 縱向對齊的定義句,這樣flash和歌曲播放器就能放在貼子的最下麵了。
align="center" 水平對齊的定義,這樣flash和歌曲播放器就能在中央了。
width="圖片寬度"
background="圖片地址"
注意隻能用background來定義的圖片在博客裏麵才不會被強製縮小,否則其他形式顯實的圖片到了博客裏麵會被強製減小到寬度450。
第二句話說完了,括起來。

第二句範例:(上麵我的歌貼)
Photobucket

第三句話定義flash
又是一個括號,裏麵寫上
embed 是用來插入多媒體的命令。
src等於"flash調用地址" 就是讓它顯示這個flash, 至於位置嘛,前麵第二句裏麵都定義好了,向下中看齊。
width="flash寬度" 在本模版為了簡單就選擇圖片寬度了,700,這樣flash就可以覆蓋整個圖片。當然你要選窄一點也可以。
height="圖片高度減去20" 在這個例子裏麵是525-20=505,為什麽短了20呢?就是留20的空間來放音樂播放器。否則歌曲播放器就掉出貼子了,不好看。
type="application/x-shockwave-flash" 定義flash類型,加上就行了
wmode="transparent" / 定義flash是透明的,能顯示背景圖片
第三句就寫完了。括起來。

第三句範例:(上麵我的歌貼)
Photobucket
第四句定義聲音播放器。
括號,再embed 然後 src等於號"音樂地址"
width="播放器寬度" 任意寬度,隻要不比圖片寬就行了,我這裏是270。
height="20" 上麵說了,給播放器就留了20的位置
播放器向下向中對齊,上麵定義完了。
type="audio/x-pn-realaudio-plugin" 這個是播放器的播放格式,決定使用哪個軟件播放,這裏是用real player播放,你也可以選擇其他的。我這個realplayer的格式在IE和Firefox裏麵都能聽,有的播放器在某些瀏覽器裏麵放不出來,要注意。
autostart="true" 播放自動開始,如果是false的話,看貼的時候還要按播放鍵才能放音樂。
loop="true" / 自動循環,沒完沒了的放。你也可以選次數,比如loop="1",就是隻放一次就停。
第四句就結束了。
結束語:
HTML語言要有頭有尾才完整,比如前麵的tr,後麵就要有/tr,才能成一對。
這樣就有下麵幾個括號,裏麵分別是:
/div 結束模塊
/tr 結束
/td 結束單元
/tbody 結束表體內容
/table 結束表單
第四句和結尾句範例:(上麵我的歌貼)
Photobucket
最後整個貼子就寫完了,最後別忘了,我們想讓貼子放在顯示屏的中間才好看,不是靠左。所以貼子最前麵要加上尖括號,裏麵寫center
最後麵也要相應的加上尖括號斜杠center: /center

全貼代碼的範例:(抱歉這個忘了加center)
Photobucket

現在就可以看看貼子效果了,把這些code拷貝並粘貼到這裏:
http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
點擊“預覽“就能在下麵看到效果了。
如果覺得滿意就可以放到博客裏去欣賞,在博客裏發的時候要注意,一定要點擊那個轉換鍵,轉成HTML編輯格式,再複製到裏麵就行了。
http://blog.wenxuecity.com/help/images//blog-help-11-a.gif
這就是最簡單的一個模版了,我掰開了揉碎了講的細了點,為了讓大家有點基礎HTML語言的常識,以後再介紹複雜的就不那麽多廢話了,還是那句話,貼子好看與否關鍵是看圖片選擇的好壞。
這裏是我的“石頭模版一號“範例全部code,你可以拿回去,換上自己的圖片,flash和歌曲地址就是你的了。

還要注意下麵code裏麵有兩句onload="javascript:if(this.width>450) this.width=450" 這個是帖子發博客的時候被強行加上去的,是廢話,完全沒用,要刪掉。