瀟湘娘子版面(七)--部落格版面上的幻燈片

2009080112:30

 

 

今年七月一日,我家的寶公主受難日,當晚就回天乏術,我失去心愛的狗女兒,傷心欲絕!

那晚糾結的心令我無法成眠,淚眼婆裟,一邊哭泣一邊為牠編輯生前留下的照片,就這樣我把它做成幻燈片,隨即搬上我的部落格版面成為瀟湘娘子版面(七)的重點設計。

我試過大版幅的結果是傳輸很慢,而且僅能使用兩張照片,因此認定是檔案超重了。

今天我把這技巧公開出來,格友當中或有人跟我ㄧ樣失去最愛,而情懷依舊,想要隨時隨地看到摯愛的所遺留下來的生活點滴,容我們緬懷過去。

本版內容設計大致上都已在前面幾篇中介紹過了,包括回應欄與部落格檔案及自我介紹欄的美化...等等。所不一樣的是本版我不再使用全景背景圖,而改用JAVA語法使部落格呈現出層次感。

 
 

瀟湘娘子部落格版面上的幻燈片怎麼做的?

 

 

背景雙色語法的分享:

/*Background背景*/
body{background-color:#3c596e ;
filter:progid:DxImageTransform.Microsoft.Gradient(startColorstr=#BBFFFF,endColorstr=#00868B,GradientType=1,enabled=1);
background-attachment:fixed; }

GradientType=1 (也可以是 0)

色碼如果不會應用,不知道怎麼配才好看,請參考 COLOR TABLE ,本表色系濃淡已配置好了,使用上方便許多。

 

 

同時我把最新文章四個字隱藏起來了。

/*Main content header最新文章區塊名稱隱藏*/
.yc3pribd .mhd .text{display:none;}

 

部落格名稱欄位加框

/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{border="0" cellspacing="3" cellpadding="2" bgcolor="#50e5b4" color:#ffffff;
border-right: 40px groove;
border-top: 10px groove;
border-left: 40px groove;
border-bottom: 10px groove;
border-color:#00f5ff;}

 

/*Text color for main content最新文章標題字體放大及顏色*/
 .yc3pribd .text {color:#FFE2B0; font-family:標楷體; font-weight:bold; font-size:150%;}

 

 

接下來我們就來分享幻燈片的製作

怎樣才能把自己拍下來的照片做成幻燈片套用在部落格上?

我們需要運用到兩個軟體 : PhotoImpact 和 Ulead GIF animator 5 。

 

使用軟體:   點圖按右鍵下載軟體   還沒有這個軟體的請先點進去下載。

 

(下載完就解壓縮,先安裝英文正式版,再安裝中文化程式~這套軟體是做動畫圖必備的~)

 

首先開啟PhotoImpact

開啟新影像,按確定。

在空白頁上,叫圖。↓

這是黃山,我選擇黃山作教材。↓

像素縮小之後圖片品質會變差,因此選擇相片不宜選擇千萬畫素的。↓

新影像的像素寬度、高度都可以隨意自訂。↓

相片變小了,先以 jpg檔儲存。↓

也可以運用PhotoImpact 為相片美化加框,當然加不加框要依網頁或部落格底圖花不花才做決定,太花了造成視覺錯綜複雜形象,很難叫人欣賞。↓

我沒加框。↓

第二張↓

第三張↓

第四張↓

以上四張相片都已修改完成,查閱看看是不是都以 jpg檔儲存。

接著我們要利用 Ulead GIF animator 5 來做轉檔動作。

點選動畫精靈圖誌。↓

確定所選擇的寬和高後,按Next↓

還記得剛才完成的相片存放再哪一個資料夾嗎?↓

好了,現在您是不是都學會了呢?

動作雖然複雜一點,多做幾次也就熟能生巧囉。

祝大家玩得愉快!

教學文章來源: 瀟湘娘子