Simpleviewer 網路相本 Power Point設計: G.

Presentation on theme: "Simpleviewer 網路相本 Power Point設計: G."— Presentation transcript:

1 Simpleviewer 網路相本 Power Point設計: G

2 相本特色 simpleviewer是一個 Flash 相簿，做出來的相簿視覺效果不差，有使用簡單且易維護之特性最重要的是它是免費的。 下面有個範例相簿可以參考 FREE

3 製作前的注意 照片解析度約為 1024 X 768 左右最佳 一張照片容量最好不要超過600KB 照片命名為英文或數字 600KB 768
gg_0001.jpg

4 製作1 準備縮圖 索引縮圖 解析度為 133 X 100 左右

5 製作2 放入資料夾 將相片準備好後放入 simpleviewer 資料夾 Simpleviewer中有2個資料夾 images thumbs
放原圖 放縮圖

6 製作4 修改gallery.xml 將 gallery.xml 拖入記事本中 修改程式碼

7 製作4 修改gallery.xml 將 gallery.xml 拖入記事本中 修改程式碼

8 修改gallery.xml maxImageHeight=“768"：圖片最大高度（像素）
maxImageWidth=“1024"：圖片最大寬度（像素） textColor="0xFFFFFF"：網頁上文字的顏色 frameColor=" 0xFFFFFF "：圖片邊框的顏色 textColor="0xFFFFFF" frameColor=" 0xFFFFFF " maxImageHeight=“768" maxImageWidth=“1024"

9 修改gallery.xml frameWidth="20"：圖片邊框的厚度
stagePadding="40"：縮圖區塊與圖片、圖片邊框間的距離 thumbnailColumns="3"：縮圖區塊的縮圖有幾個直欄，若改成"4"，就會變成4直欄。 thumbnailRows="3"：縮圖區塊的縮圖有幾個橫列 frameWidth="20" stagePadding="40"

10 修改gallery.xml frameWidth="20"：圖片邊框的厚度
stagePadding="40"：縮圖區塊與圖片、圖片邊框間的距離 thumbnailColumns="3"：縮圖區塊的縮圖有幾個直欄，若改成"4"，就會變成4直欄。 thumbnailRows="3"：縮圖區塊的縮圖有幾個橫列 thumbnailColumns=“4 " thumbnailRows=“3" thumbnailColumns=“3 " thumbnailRows=“4"

11 修改gallery.xml navPosition="left"：縮圖區塊顯示在中間圖片的左邊，right就是顯示在右邊
title=“GG"：標題文字 backgroundImagePath=""：網頁背景圖的圖片路徑及名稱 其他沒用到的就不要動喲…… navPosition="left" navPosition= " right "

12 修改gallery.xml 照片檔名 註解 <image>
<filename>GG_0001.JPG</filename> <caption>0001 Ksu門口蔣公</caption> </image> 照片檔名 註解

13 儲存gallery.xml 存為UTF-8

14 開始使用simpleviewer Index.html 雙按試試