第二十二章设计专属的网页样板.PPTVIP

詳細步驟請參閱 P22- 文淵閣工作室 第二十二章 設計專屬的網頁樣板 22-1 在製作網頁前的注意事項 決定完螢幕解析度後，還必須注意到在該螢幕解析度下，網頁內容所能呈現的大小為多少，從下表中可以看出，再扣除 「標題列」、「按鈕列」、「網址列」、「狀態列」、「捲軸」…等大小後，網頁內容可以顯示的會比螢幕解析度來得小，因此，在設計網頁時，最好能讓內容在一個螢幕中完全顯示出來，儘量避免出現捲軸，這樣會造成瀏覽者比較不易閱讀！ 2 22-2 網頁的樣版製作 22-2-1 什麼是網頁樣版？ 樣版即是在製作網站前，先試作這個網站的外觀，其中包含了網站標誌、底圖、網頁按鈕、文字樣式等內容，還必須考量圖示的使用與配色的感覺等。一般在製作樣版時，必須搭配網頁編輯軟體與繪圖軟體，過程相當複雜。 PhotoImpact 的出現，改變了樣版的製作方式，可以直接繪製所需要的樣版，網頁圖示、按鈕、文字樣式一應俱全，甚至還可以加上超連結與網頁的特效呢！ 5 22-2-2 版型設計 (加入元件與 HTML 文字) (1) 在 PhotoImpact 中，不僅可以新增一般的圖片檔，也可根據網頁設計的需要新增網頁檔！網頁檔與圖片檔在許多屬性上不同，例如網頁檔可以設定輸出後網頁的標題，網頁的背景、網頁檔沒有基底影像、網頁檔允許存在文字形態的內容，並可加上超連結等，這都是為了製作網頁所設計出來的特殊功能。以下就開始來製作一個專業的網頁樣版吧！ 6 22-2-2 版型設計 (加入元件與 HTML 文字) (2) 一、開新網頁 「世界七大奇蹟-吳哥窟之旅」 網站在螢幕解析度上是鎖定 800×600 的群組，所以在設定網頁大小時要特別注意。 二、尺規與參考線的使用 在新增網頁檔之後，開始要將網頁中的元件放入了！不過可先別急，請先規劃一下網頁中各個部份放置的方式。 6 22-2-2 版型設計 (加入元件與 HTML 文字) (3) 三、插入網頁元件 製作網頁左方的按鈕列，請選按功能表列的 網路 \ 元件設計師 進入對話方塊。 12 22-2-2 版型設計 (加入元件與 HTML 文字) (4) 四、插入 Html 文字物件 可以直接在 PhotoImpact 中插入 Html 文字，不需要到網頁編輯軟體中加入。而 Html 文字與一般的文字物件有什麼不同呢？一般的文字物件在輸出後會以圖片檔的方式儲存，而 Html 文字物件輸出後會直接儲存成網頁中的文字檔，較具調整彈性。 18 22-2-3 網頁的切割 為了版面上各個區域的分工與功能性考量，可以使用 PhotoImpact 的切割工具來達成這個理想。這個動作不僅能將整個圖片化為不同的區域以便輸出後編輯，將大圖切割成多個小圖，也可以降低檔案的大小，並加快下載速度！ 一、自動切割 二、切割的編輯工具 三、其他的切割工具 四、切割實作 22 22-2-4 將網頁樣版匯入百寶箱 經過漫長的過程，終於大致完成這個網頁樣版的製作。請選按功能表列的 檔案 \ 儲存檔案，如圖儲存為 吳哥窟之旅.ufo。 25 詳細步驟請參閱 P22- 文淵閣工作室