個人資料
正文

石頭製貼講座之三(邊框底圖和滾動圖片/字幕)

(2010-08-12 07:19:33) 下一個
石頭製貼講座之三(邊框底圖和滾動圖片/字幕) 2009-06-21 00:37:58
[ 打印 ]
閱讀 ()評論 (0)
評論
目前還沒有任何評論
登錄後才可評論.
不想讓你哭



總想對你有些話要說
可不知道該說些什麽
總想給你帶來些歡樂
可不知道你喜歡什麽
過了一夜又多了一天
時間讓人變得好心煩
不知何時又才能見麵
難道就這樣天各一邊
我不想讓你哭 我也不想認輸
隻想用我的愛 再次把你留住
誰的眼淚隨風飄向了遠處
那也是我在為你祝福
我不想讓你哭 我也不想認輸
隻想用我的愛 再次把你留住
如果愛情就是 我這場的賭注
輸了你也就等於 輸了全部



下載鏈接


叮呤呤,上課了。看看這個豪華貼子,貌似很複雜,其實很簡單。我沒有使用一個flash, 但是很有動感,所有的東西都在動,今天要給同學們介紹一個很重要的html語句:Marquee還是一句一句的講,講到哪裏就說那裏吧。

第一句:定義邊框和底圖

這句話定義了邊框和底圖。可以看到這個邊框是兩道淺藍色的框框加了一條閃閃星星的帶子。這不是從誰家抄襲來的,是俺的原創,大家可以發揮改成不同的顏色不同的圖。兩個淺藍色邊框是兩個嵌套的table, 所以這句話裏重複出現了兩次table,tbody, tr和td。但是注意要把內補丁設置成為8不能是0,這樣才能顯示出來星星閃的夾層,也就是cellpadding=8星星閃是怎麽出來的呢,實際上就是一個小gif圖片:

圖片地址是:http://i42.tinypic.com/6tedmw.gif
我隻要在第一個table裏麵把這個圖片設置成底圖就行了。
background=http://i42.tinypic.com/6tedmw.gif
第二個table的底圖是另外一個小圖片:

圖片地址是:http://www.sucai123.com/sucai/img4/639/b057.gif
第二個table覆蓋了第一個table的大部分,隻露一個8像素的邊邊,所以就能看到星星閃閃的一條帶子了。
另外注意這兩個table, 我定義的寬度是100%, 不是實際的多少pixel, 而是一個百分數,意思就是你給我多大的寬度我就占多大的寬度好了,所以發貼時候會看著寬一些,再博客裏看會窄一些,取決於網頁給了貼子多大的寬度了。
這個邊框大家可以任意發揮,你可以用不同顏色,兩個框框分別是用不同顏色也好看,可以用三個邊框,四個邊框,可以調節寬度,讓它窄一點也行,底圖可以換成不同的圖片。
圖片可以在網上找,搜索一下網頁素材,就一大堆一大堆的圖。

第二句:歌曲標題來回動

現在就要介紹這個Marquee, 基本語法就是marquee你想要動的東西/marquee
marquee有很多參數可以設定,就定了你要動的東西怎麽動,往哪個方向動,來回循環還是就一次,運動的速度等等。
這裏我想讓這個“不想讓你哭”動起來,來回動,那我就設置marquee的behavior是alternate就好了。另外還有scroll, slide兩種屬性,scroll, 就是一圈一圈的走,slide就是像幻燈片一樣走一次就完了,你可以自己嚐試一下看看效果。
在這句裏麵我還定義了字體的顯示,font這個句法是來定義字體的,在它的style定義句中,我把自號定為40號,另外我加上了影子,影子的效果是灰色的, shadow(color=gray),要注意用firefox是看不出來這個陰影效果的。寬度是50%顯示,這樣子就在table內部中央50%的寬度內來回走了,字體本身的顏色是和邊框相同的顏色,你也可以用其它顏色。lineheight就是行間句,150%就是空行1.5,但因為“不想讓你哭“就一行,所以沒用。字體我定義的是華文彩雲,但是如果你的電腦是英文係統有沒有安裝中文字體,你是看不出來空心的華文彩雲字體的。

第三句:圖片slide show

還是這個marquee, 讓這些圖片動起來形成slideshow效果,注意高度要定義成圖片高度,寬度是80%,也就是要顯示在表格中央80%的寬度區域內。方向是向左,loop是控製它無限次的運轉,scrollamount控製速度,數字越小越動的慢,可以自己調試,我這裏用的是3。注意圖片是提前找好的,並且改成了統一大小並上傳的。圖片的顯示用img src就行了。

第四句: 滾動歌詞

接下來是滾動歌詞了,還是依舊使用marquee來使文字運動起來,隻不過是向上滾動顯示,速度是1。行間距是兩倍,對字體的定義和歌名的定義有幾處不同,字號要小,陰影效果變成了閃光效果,還是灰色,但是是在字的周圍包了一層灰色,firefox還是看不到的。字體定義成為華文行楷。自體本身的顏色我設成了紅色:crimson
我這裏有一個英文顏色名稱對照表,你可以參考:
http://school.21tx.com/2005/08/15/12819.html

第五句:播放器

哈哈,偷懶啦,到文學城發新貼的地方去搞個自動生成的code就行了。
鏈接:http://web.wenxuecity.com/BBSAdd.php?SubID=ktv

第六句:下載鏈接和結束

提供一個歌曲文件超級鏈接,以供聽不到音樂的人下載收聽。結束句就是結束第一句裏麵的兩個table,現在table裏麵東西就都寫完了。
整個貼字沒有使用一個flash, 沒有使用一個div模塊,純靠html語言來搞效果,也不錯。
[打印]