template來源：SimpleViewer
Demo網頁：小雨安安-SimpleViewer

How to  do?

1.安裝 Google Picasa

你的電腦必須先安裝有 Google Picasa ，安裝步驟可以參考我之前寫的講義。

2.下載 SimpleViewer Picasa Template

到 SimpleViewer 下載這個 SimpleViewer Picasa Template 的zip檔案， 解壓縮後會產生一個 simpleviewer_picasa_template 的目錄，將這個目錄放到 C:＼Program Files＼Picasa2＼web＼templates 下。

3.匯出網頁

啟動Picasa→ 選取所有你要製作成網頁相簿的圖片→資料夾→匯出成網頁。

4.設定

在「匯出成網頁」的視窗上，選擇

  • 你要匯出的圖片大小
  • 網頁上的標題文字
  • 選擇輸出網頁、圖片的資料夾

選擇完畢後按下「下一步」


5.選擇「SimpleViewer」這個範本


6.成果

上面按下「完成」後，瀏覽器會自動開啟你剛剛製作完成的網頁相簿了。


以上就是整個製作SimpleViewer相簿的過程，很輕鬆、簡單吧！假如妳還想要修改一些東西，就繼續看下去吧！

7.準備文字編輯器軟體：

因為等一下要開啟一些檔案來修改，建議使用一些支援utf-8編碼的文字編輯器來編輯這些檔案會比較簡單、方便。

你可以試試看使用 Emeditor、PSPad 或 NOTEPAD++ 這些文字編輯器。假如妳沒用過、也不想用這些文字編輯器，那更簡單的，就使用Windows內建的「記事本」來修改吧！

下面我就用記事本來操作吧！ 

8.修改網頁背景顏色

打開記事本→檔案、開啟舊檔 → 選擇到我們剛剛製作完成的網頁相簿目錄→ 記得要先將檔案類型改成「所有檔案」→ 選擇 index.html


 在 index.html 最下面有一段

<script type="text/javascript">
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#336618");   
        fo.addVariable("preloaderColor", "0xffffff");
        fo.addVariable("xmlDataPath", "gallery.xml");   
        fo.write("flashcontent");   
    </script>

上面藍色部分的顏色代碼就是網頁的背景顏色，你可以到 ColorBlender 或 Color schemes 這些網站尋找你要的背景顏色。

9.修改 gallery.xml

我們如果要修改網頁上文字顏色、縮圖區塊位置、圖片說明文字等，就是要修改 gallery.xml 這檔案，在SimpleViewer官網上有對這gallery.xml 的說明「SimpleViewer XML Options」，要修改 gallery.xml，一樣可以直接用記事本等支援UTF-8編碼的文字編輯器來修改。

下面我就簡單做個說明

  • maxImageHeight="1024"：圖片最大高度（像素）
  • maxImageWidth="1024"：圖片最大寬度（像素）
  • textColor="0xFFFFFF"：網頁上文字的顏色
  • frameColor="0xffffff"：圖片邊框的顏色
  • frameWidth="20"：圖片邊框的厚度
  • stagePadding="40"：縮圖區塊與圖片、圖片邊框間的距離
  • thumbnailColumns="3"：縮圖區塊的縮圖有幾個直欄，若改成"4"，就會變成4直欄。

  • thumbnailRows="3"：縮圖區塊的縮圖有幾個橫列
  • navPosition="left"：縮圖區塊顯示在中間圖片的左邊，right就是顯示在右邊，如下圖就改成在右邊顯示縮圖區塊

  • title="小雨安安-SimpleViewer"：標題文字
  • enableRightClickOpen="true"：預設值為「true」，在中間大圖上按滑鼠右鍵，會有個「Open IMage In New Window」的選項，按下它，可以將目前這張圖片單獨開啟在新視窗上。
    反之，若改成「false」，就不會出現「Open IMage In New Window」這個選項。

  • backgroundImagePath=""：網頁背景圖的圖片路徑及名稱
  • thumbPath="thumbnails/"：放置縮圖的目錄名稱
  • imagePath=""：放置網頁背景圖的目錄名稱位置-假如你的照片不想放在images目錄下，要放在另一個目錄時，這裡才要填入該目錄的名稱。(951030 updates)
  • 修改圖片說明：
        <filename>dsc00001.jpg</filename>

        <caption>小雨玩鋼琴</caption>
    修改caption裡的文字，就可以在縮圖下顯示圖片的說明

10.修改預設設定：

假如你不想每次都等到網頁製成後再去修改一些文字顏色或背景顏色的設定，想一輸出成網頁就是你要的樣子，那麼你可以直接去修改
C:＼Program Files＼Picasa2＼web＼templates＼simpleviewer_picasa_template
裡的 indexTemplate.html 及 header.xml 這兩個檔案。

製作完成的網頁相簿，就會依照上兩個檔案的內容輸出成 index.html及gallery.xml。

ps1:
其實這篇文章早該在三天前完成，因為就在快寫完文章前，一不小心按到了瀏覽器上的「上一頁」按鈕，再加上沒有先存成草稿，就這樣內容就不見了，氣死我也～

這樣的經驗已有好幾次，不是time out，就是不小心把網頁給關掉或回上一頁的，尤其是在文章快寫完時才發生這樣的情況時，要叫我再重寫一次，當時實在會沒那心情再寫下去了。

期待 LifeType1.1正式版的釋出，因為1.1版上就有「取回未存檔文章繼續編輯 」的功能。

ps2:
其他的 Picasa template的作法就大同小異了，再讓我「慢慢」寫吧！