第六章圖片編排以美化網頁- 「網路藝廊」頁面設計

第六章圖片編排以美化網頁- 「網路藝廊」頁面設計課前指引目前的網頁設計潮流已經從單純的內容編排進步到頁面整體的美術效果。強調版面佈局、配色及強烈的個人風格，更讓頁面注入了新的生命力，也因為這股潮流的導引，讓網頁圖片設計更邁入了一個新的領域。本章的首要重點在頁面圖片的加入，以及編輯調整，其中還包括了頁面背景影像的使用技巧。

章節大綱 6-1 加入網頁圖片 6-5 影像預留位置 6-2 圖片編輯調整 6-6 應用範例- 「網路藝廊」的網頁設計 6-3 背景影像使用技巧 6-4 滑鼠變換影像備註：可依進度點選小節

6-1 加入網頁圖片 • Dreamweaver中有多種方式可讓各位在頁面中放入精美的圖片，但是為了不影響本書範例「班級網站」的內容，所以請各位另外新增一個網站，而網站中的組織架構就如圖中所示，網站名稱則命名為「圖片功能」並且開啟「index.html」來做為練習的頁面。

6-1 加入網頁圖片 1 由視窗左上角執行「新增網站」指令 2 1.輸入網站名稱為「圖片功能」 2.按此鈕瀏覽資料夾位置

6-1 加入網頁圖片 3 1.點選資料夾 2.按此鈕開啟 4 按此鈕選取

6-1 加入網頁圖片 5 按此鈕儲存

6-1 加入網頁圖片 6 在建立好的網站資料夾中，執行「開新檔案」指令，建立如圖的新網頁

6-1 加入網頁圖片 • 位於「插入」面板中的影像功能是一個清單選項，各位可以從清單中選擇要插入的影像類型，再來請選擇範例檔案中的「banner601.jpg」。 1 1.先在頁面上點選要加入影像的位置 2.按此可以看到影像清單 3.在清單中選擇「影像」

6-1 加入網頁圖片 1.在範例檔「06/images」資料夾中點選「banner601」影像檔案 2 2.按下「確定」鈕

6-1 加入網頁圖片 3 按下「是」鈕，將此圖檔複製一份到網站資料夾 4 1.選取網站中的images資料夾 2.按下「存檔」鈕，複製檔案到這個資料夾中

6-1 加入網頁圖片 1.在此欄填入影像的替代文字 2.按下「確定」鈕 5 6 插入到頁面中的影像檔案

6-2 圖片編輯調整 • 調整圖片大小 1 1.點選圖檔 2.展開「屬性」面板，其中會顯示目前圖檔的大小 2 1.拖曳控制點可以改變圖片的大小 2.變更後的影像尺寸會以粗體顯示點取此圖示可將尺寸還原成原來大小

6-2 圖片編輯調整 • 調整圖片間距 1 在圖檔後輸入此段文字，此時文字會緊貼在圖檔周圍 2 圖檔與下方文字的間距加大了 1.輸入「垂直距離」為20

6-2 圖片編輯調整 3 圖檔與右側文字的間距也加大了 1.輸入「水平距離」為20

6-2 圖片編輯調整 • 調整圖片邊框 1 1.點選圖片 2.由此可以設定邊框寬度

6-2 圖片編輯調整 2 1.出現圖片預設的黑色框線 2.開啟「CSS樣式表」，按此鈕新增CSS規則 3 3.按此鈕確定 1.選此項 2.輸入自訂的名稱

6-2 圖片編輯調整 5 1.選此項 2.設定邊框樣式 3.設定顏色 4.按此鈕確定 6 2.顯示套用的結果 1.由此下拉選擇剛剛加入的CSS樣式

6-2 圖片編輯調整 • 設定文繞圖效果 1.先點選圖檔 2.由此選單來設定圖檔與文字的排列方式 <範例檔：06_01.html>

6-2 圖片編輯調整 • 最常使用的文繞圖就是選用「靠左對齊」與「靠右對齊」，它會形成如下所顯示的編排效果。

類型名稱 對齊方式靠上對齊將圖片「頂端」與相鄰的文字「頂端」對齊。置中對齊將圖片「中央」與相鄰的文字「中央」對齊。靠下對齊將圖片「底端」與相鄰的文字「底端」對齊。基準線將圖片與相鄰的文字「底線部份」對齊。文字上方將圖片「頂端」與相鄰的文字字型作「頂端」對齊。絶對中間將圖片「中央」與相鄰的文字字型作「中央」對齊。絶對下方將圖片「底端」與相鄰的文字字型作「底端」對齊。 6-2 圖片編輯調整 • 其他對齊類型，在此說明如下：

6-2 圖片編輯調整 • 設定圖片超連結 1.先點選圖檔 2.按此鈕或直接輸入要連結的網址

6-2 圖片編輯調整 • 變更圖片影像 1 1.先點選要變更的影像 2.按下此圖示鈕，選擇要更換顯示的圖檔 2 設定完成後，圖檔立即變更

6-2 圖片編輯調整 • 圖片編輯功能 • 在屬性面板中，提供幾個可以針對影像作簡易編修的功能圖示。圖片編修功能

6-2 圖片編輯調整

6-2 圖片編輯調整 • 設定外部編輯器 • 外部編輯器的功能可讓我們直接開啟影像軟體來編輯網頁影像，以增加影像編修時的便利性。Dreamweaver在進行安裝時，就會與系統中同一系列的相關軟體做連結。例如，按下「編輯」鈕，電腦就會自動開啟Photoshop工具。 1

6-2 圖片編輯調整 2 1.執行「編輯/使用外部編輯器編輯」指令，使進入此視窗 3.按下「+」號鈕 2.先決定要設定哪一種檔案格式的外部編輯器，這裡我們選擇「.jpg .jpe .jpeg」這裡會顯示目前設定的外部編輯工具

6-2 圖片編輯調整 3 2.按此鈕可以將它設為主要的程式 1.這裡我們加入了PhotoImpact作為外部編輯器 3.按下「確定」鈕

6-2 圖片編輯調整 4 屬性列上的「編輯」圖示不一樣了，點選要編輯的影像，再按下此鈕，就會自動將影像帶入PhotoImpact視窗中

6-3 背景影像使用技巧 • 設定背景影像 1 2.另外自行設定一種背景顏色 1.按此鈕選擇「back6-3-1.jpg」圖檔 3.按下「確定」鈕

6-3 背景影像使用技巧 2 設定後的畫面效果

6-3 背景影像使用技巧 • 背景影像拼貼方式

6-3 背景影像使用技巧 • 各種拼貼模式的效果說明

6-3 背景影像使用技巧 • 固定不動的背景影像 1 2.設定「back6-3-3.jpg」為背景影像 1.建立新網頁「large.html」

6-3 背景影像使用技巧 2 1.開啟「CSS樣式」面板 2.點選「body」 3 3.按下「增加屬性」的連結 1.在下拉的選單中選此項 2. 從清單中選擇「fixed」

6-4 滑鼠變換影像 • 使用「滑鼠變換影像」所設計的變換效果比較單純，也就是只能使用二張影像來進行動態切換，請在網站中新增一個「Page1.html」頁面，以範例檔中的「back6-4-1」來做為背景影像，並且設定為「水平重覆」，而下表就是我們所要完成的動態效果。

6-4 滑鼠變換影像 1 1.新增page1.html網頁，並以back6-4-1.jpg作背景，設定為「水平重覆」 2.在「插入」面板點選「影像」鈕，並執行「滑鼠變換影像」指令

6-4 滑鼠變換影像 3.按下「確定」鈕 2 1.指定banner604.jpg圖檔 2.指定banner603.jpg圖檔

6-4 滑鼠變換影像 1.由「文件」工具列上按下「即時檢視」鈕 3 2.一般時候的影像畫面 4 滑鼠移過時的影像畫面

6-5 影像預留位置 1 1.新增「page2.html」網頁檔，並加入「back6-4-2.jpg」為其背景 2.下拉選擇此項 2 1.設定「影像預留位置」的相關資訊 2.按下「確定」鈕

6-5 影像預留位置 加入完成的「影像預留位置」，在上方連按二下可啟動加入影像視窗 3

6-6 應用範例-「網路藝廊」的網頁設計 • 請開啟「班級網站」中的「網路藝廊」頁面「graphic.htm」。

6-6 應用範例-「網路藝廊」的網頁設計 • 設定網頁背景 1.開啟「班級網站」中的「graphic.html」 1 2.執行「修改/頁面屬性」指令，或按下此鈕

6-6 應用範例-「網路藝廊」的網頁設計 1.選擇frame_main_graphic.jpg作為背景影像 2 2.指定為不重複 3.按下「確定」鈕

6-6 應用範例-「網路藝廊」的網頁設計 3 顯示插入的背景

6-6 應用範例-「網路藝廊」的網頁設計 • 利用表格建立相簿主頁面 • 在這裡我們假設各位沒有安裝Fireworks程式，所以我們要利用表格來設計相簿，這樣相簿的內容是完全手工打造，由於相簿中的每一張影像都需要有縮圖及原始影像兩個檔案，以作為連結之用。所以下方列出縮圖影像及原始影像檔的說明。

6-6 應用範例-「網路藝廊」的網頁設計 1 由「插入」面板按下「表格」鈕

6-6 應用範例-「網路藝廊」的網頁設計 2 1.設定表格屬性如圖 2.按此鈕確定

6-6 應用範例-「網路藝廊」的網頁設計 3 開啟屬性面板，設定「置中對齊」

6-6 應用範例-「網路藝廊」的網頁設計 1.儲存格中輸入文字 4 2.點選所有儲存格，由此下拉選擇儲存格顏色

6-6 應用範例-「網路藝廊」的網頁設計 1.點選儲存格 2.按下「影像」鈕 5

第六章 圖片編排以美化網頁- 「網路藝廊」頁面設計