在網頁設計領域中，照片的顯示方式一直都有新的突破，從早期簡單的圖片，自行製作網頁，到一些軟體協助產生相簿的網頁，到目前流行採用雲端的相簿連結方式，讓網頁設計人員需要經常涉獵不同的方法，以配合當時的.....流行或習慣。
以下介紹的是利用完成度較高，且彈性又大的一些方法，主要是採用已經完成的部份程式，結合到自己的網頁，這樣做的好處是可以維持原本美工設計的風格，也不會隨雲端系統的改換而出現無法控制的廣告或版面不合等狀況，非常適合網頁設計人員使用。
主要的技術大致有 Javascript、JQuery、Flash及HTML5，挑出幾個具有代表性的資源。
1. 採用單純的 Javascript 技術
2. 使用 JQuery 技術
3. 使用 Flash 技術
4. 使用 HTML5 等技術
更多的資料，未來會持續性地加以補充。
2011年11月10日 星期四
2011年11月8日 星期二
書籍翻頁之網頁製作 - Flash Page Flip
這裡介紹一款書籍翻頁效果的網頁，來自 http://www.flashpageflip.com/ 網站。其中的免費版本既方便又實用 (而且我覺得比專業版好太多了)，效果不錯，製作方式也非常簡單，可在 http://www.flashpageflip.com/FreeFPF.asp
解說前先參考它的完成範例：
(1) 官方網站提供的範例
(2) 測試練習製作的範例
(有時似乎要再按一次 Reload 重整才會顯現？！)
在開始製作前，最好先確認要製成的尺寸大小，且是僅就書籍的部份。例如想要的書面大小是寬368、高450的解析度，即單一頁面是 368x450，而攤開後的頁面則是 736x450 的解析度，所以各個頁面的尺寸就以這個大小來準備。
(1) 封面頁為單一頁面，368x450
(2) 攤開後其實為兩頁，若需要全幅的畫面，則應採用 736x450 的圖，裁切成兩張獨立的圖。
(3) 之後每個攤開的頁面均依此類推
(4) 封底頁為單一頁面，368x450
全幅的說明如下圖所示：
有這樣的觀念後，製作便簡單了，分別把各頁面的圖檔整理好，最好加上有規律的檔名。接著，把網頁相關檔案取出，而所有的圖檔置於 pages 資料夾內。
xml 裡的 Pages.xml 檔案是設定各頁面對應的圖檔。特別注意第一列有解析度的設定。
如此便完成了翻書網頁的製作。
此一免費版本其實還提供了以 .swf 檔案做為書頁的功能，因此於 flash 製作時必須先指定寬高，注意為單頁的尺寸，故無法用全幅的方式做 flash 動畫，不過官方網站的範例，巧妙地利用左圖、右flash的方式，製作出一個效果頗佳的頁面。同時該範例也有目錄頁，亦為使用 flash 各別製作，不過原始的 flash 檔案有附在壓縮檔內，可以參考。
提供的翻頁範例是全畫面的，如果想要限制在指定的區域內，加入 div 圖層有效。但上下的選項按鈕及官方商標文字則會保留。
網路上也有非常詳細的解說可以參考，列舉一二如下：
解說前先參考它的完成範例：
(1) 官方網站提供的範例
(2) 測試練習製作的範例
(有時似乎要再按一次 Reload 重整才會顯現？！)
在開始製作前，最好先確認要製成的尺寸大小，且是僅就書籍的部份。例如想要的書面大小是寬368、高450的解析度，即單一頁面是 368x450，而攤開後的頁面則是 736x450 的解析度，所以各個頁面的尺寸就以這個大小來準備。
(1) 封面頁為單一頁面，368x450
(2) 攤開後其實為兩頁，若需要全幅的畫面，則應採用 736x450 的圖，裁切成兩張獨立的圖。
(3) 之後每個攤開的頁面均依此類推
(4) 封底頁為單一頁面，368x450
全幅的說明如下圖所示：
原本尺寸為 736x450 的一張圖檔
裁切成兩張 368x450 的圖，各別存檔
有這樣的觀念後，製作便簡單了，分別把各頁面的圖檔整理好，最好加上有規律的檔名。接著，把網頁相關檔案取出，而所有的圖檔置於 pages 資料夾內。
xml 裡的 Pages.xml 檔案是設定各頁面對應的圖檔。特別注意第一列有解析度的設定。
如此便完成了翻書網頁的製作。
此一免費版本其實還提供了以 .swf 檔案做為書頁的功能，因此於 flash 製作時必須先指定寬高，注意為單頁的尺寸，故無法用全幅的方式做 flash 動畫，不過官方網站的範例，巧妙地利用左圖、右flash的方式，製作出一個效果頗佳的頁面。同時該範例也有目錄頁，亦為使用 flash 各別製作，不過原始的 flash 檔案有附在壓縮檔內，可以參考。
提供的翻頁範例是全畫面的，如果想要限制在指定的區域內，加入 div 圖層有效。但上下的選項按鈕及官方商標文字則會保留。
- 參考範例如：限定在網頁某區域內的範例
網路上也有非常詳細的解說可以參考，列舉一二如下：
訂閱：
文章 (Atom)