配合 PhotoImpact 的網頁模板設計網站

 

方法二: 自行以圖層設計

1. 在 PhotoImpact 的百寶箱中選擇 "範本資料庫/網頁",把網頁 1 的範本拉出來

2. 這是一個網路書店的簡單範本,儲存為 BookStore.ufo

3. 以滑鼠右鍵將這個圖片合併 到背景影像上

4. 在選單列上選取 格式/亮度與對比

如下圖將圖片調成亮度較高的圖片以作為網頁設計時的藍圖

5. 設計左方導覽按鈕

 

 

 

 

由 BookStore.ufo 中將個別按鈕圖片拷貝出來,並且存檔

在 PhotoImpact 中製作一組變換影像

 

 

 

 

 

運用 圖層、表格及滑鼠變換影像 製作個別按鈕

6. 設計按鈕對應的瀏覽圖層以及按鈕的動作

增加五個圖層

每一個按鈕的 onMouseOver 動作設定為顯示其中一個圖層,隱藏其它所有圖層

7.製作上方按鈕列

由 BookStore.ufo 中,合併影像,擷取下圖按鈕列

以圖層及影像將按鈕放在適當的地方

在 Dreamweaver 中製作影像地圖:選取影像,在屬性視窗中選取長方形,在影像上製作連結區域,並設定連結目標

8. 設計底圖

由 BookStore.ufo 中將所有元件去除後,得到下列影像作為底圖

以 修改/頁面屬性 將網頁底圖設為此圖

此時可將影像藍圖去除


範例網頁