| Photoshop 提供了切片工具、影像最佳化等網頁製作工具，當您在製作網頁時，多加利用 Photoshop 的網頁設計工具就可以快速完成手上的專案。 網頁設計時使用的單位是「像素」，您可以修改 Photoshop 使用的單位，點選功能表 [ 編輯 > 偏好設定 > 單位和尺標 ] ，將單位改為「像素」即可。 網頁最佳化 目前常用的網頁瀏覽器，可支援 GIF、JPG、PNG 的影像格式。Photoshop 的影像最佳化可以壓縮影像，縮短檔案的下載時間，避免造成網站伺服器與網路流量的負擔。 若您需要使用 Photoshop 對目前編輯的影像進行最佳化，請點選功能表 [ 檔案 > 儲存為網頁與裝置用 ] 以開啟設定的對話框。接著，您可以從「預設集」選擇不同的影像壓縮設定，預覽視窗將會即時顯示最佳化的影像，對話框的下方會顯示最佳化之後的檔案大小。
GIF 格式適用於記錄色彩單純與線條簡單的影像（例如卡通風格的影像），使用 GIF 格式壓縮，不但檔案的體積比較小，而且影像的品質也較佳。 版面設計與螢幕解析度 設計時必須考慮螢幕的解析度，因為每位訪客的螢幕解析度設定都不同，請瞭解網頁在不同解析度螢幕所呈現的效果。早期電腦使用者的螢幕解析度以 640 x 480 或 800 x 600 像素為主，而目前則設定為 1024x768 或 1280x1024 較多，甚至 FullHD 的解析度更高達 1920x1080 或 1920x1200，但設計版面時以比例較高的使用者為考量即可。 影像切片的運用 「影像切片」是網頁設計上常用的一種技巧，透過將完整的影像切割成較小的影像切片，訪客瀏覽網頁時可以同時下載影像檔案，減少等候時間。影像切片可依影像的內容選擇最佳化的壓縮格式。 此外，製作網頁互動效果也可以使用切片的方式製作。
切片工具 Slice 切片工具用於建立影像切片。
切片選取工具 Slice Select 切片選取工具用於選取已切割的影像切片，滑鼠拖曳時可以移動切片的位置，雙擊切片即可設定切片的選項。 從圖層自動建立切片 若您製作的影像包含圖層，就可以使用 Photoshop 依據圖層自動建立切片的功能，而且移動或縮放圖層的影像時，切片也會自動調整，讓您節省修改切片的時間。 選取背景以外的所有圖層，點選功能表 [ 圖層 > 新增基於圖層的切片 ] 就可以自動建立切片。 切片選項 切片類型設定為 影像 時，可以設定切片名稱、超連結、目標、訊息文字。
切片類型設定為 沒有影像 時，可以輸入顯示在儲存格內的文字，內容支援 HTML 語法，這部份通常配合 Dreamweaver、FrontPage 等網頁設計軟體編輯內容。
製作滑鼠指向效果影像 滑鼠指向效果影像主要運用於網頁設計，您可以在許多網站上看到互動式的導覽列按鈕。滑鼠指向效果影像實際上是兩個不同的影像檔案，並且使用 JavaScript 程式偵測滑鼠事件來製作互動的效果。 主要影像 - 正常情況下網頁顯示的影像。 次要影像 - 滑鼠游標移入時顯示的影像。 可先使用圖層製作主要影像，接著只要複製圖層，修改為次要影像。 儲存影像時若需放置於同一資料夾，因為作業系統的限制，不能使用相同的檔案名稱。 滑鼠指向效果的 JavaScript 程式需要自行撰寫，或是使用 Dreamweaver 的插入滑鼠變換影像功能。 您可以請參考 CG 數位學習網的 Dreamweaver 線上教學 瞭解實際的操作步驟。 網頁的配色 對許多網頁設計的初學者而言，網頁的色彩搭配達到專業的水準，經常會不知道怎麼著手，Kelvin 老師建議儘量觀摩不同網站的設計，並參考市面上的網頁配色相關書籍，此外，您也可以從配色網站找到實用的資訊： http://www.hlrnet.com/colormatch 樣版網站 Kelvin 老師在 1998 年時在公司擔任網頁設計的工作，當時的網頁設計幾乎從頭到尾都是由設計人員負責，而後端資料庫與程式的部份再交給不同的部門開發。現在，網路上已經有許多樣版網站，提供數量可觀的網頁樣版，適合各行各業的網頁設計。與客戶洽談時，可先從網站搜集適合的樣版提供客戶參考，至於是否請客戶自行到樣板網站挑選，就看您與客戶的交情囉~ Kelvin 老師會推薦的是 TemplateMonster 網站，瀏覽時可選擇不同的設計風格，並提供輸入關鍵字搜尋的功能。 |
留言列表
