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

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

2. 章節大綱 6-1 加入網頁圖片 6-5 影像預留位置 6-2 圖片編輯調整 6-6 建立網頁相簿 6-3 背景影像使用技巧 6-7 應用範例-「網路藝廊」的網 頁設計 6-4 影像導覽功能 備註：可依進度點選小節

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

4. 由視窗左上角執行「新增網站」指令 1.輸入網站名稱為「圖片功能」 2.按「下一步」鈕

5. 1.選此項 2.按「下一步」鈕 1.設定資料夾位置 2.按「下一步」鈕

6. 1.遠端伺服器選擇「無」 2.按「下一步」鈕 按下「完成」鈕離開

7. 在建立好的網站資料夾中，執行「開新檔案」指令，建立如圖的新網頁

8. 位於「插入」面板中的影像功能是一個清單選項，各位可以從清單中選擇要插入的影像類型，再來請選擇範例檔案中的「banner601.jpg」，但因為要插入的來源影像是位於網站資料夾以外的其他位置，所以在插入時會詢問是否要將影像檔案複製一份到網站中，只要選擇「是」鈕就行了。位於「插入」面板中的影像功能是一個清單選項，各位可以從清單中選擇要插入的影像類型，再來請選擇範例檔案中的「banner601.jpg」，但因為要插入的來源影像是位於網站資料夾以外的其他位置，所以在插入時會詢問是否要將影像檔案複製一份到網站中，只要選擇「是」鈕就行了。 1.先在頁面上點選要加入影像的位置 2.按此可以看到影像清單 3.在清單中選擇「影像」

9. 1.先點選「banner601」影像檔案 2.按下「確定」鈕

10. 按下「是」鈕，將此圖檔複製一份到網站資料夾 1.選取網站中的images資料夾 2.按下「存檔」鈕，複製檔案到這個資料夾中

11. 1.在此欄填入影像的替代文字 2.按下「確定」鈕 插入到頁面中的影像檔案

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

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

14. 圖檔與右側文字的間距也加大了 1.輸入「水平距離」為20

15. 調整圖片邊框 1.點選圖片 2.由此可以設定邊框寬度

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

17. 1.選此項 2.設定邊框樣式 3.設定顏色 4.按此鈕確定 2.顯示套用的結果 1.由此下拉選擇剛剛加入的CSS樣式

18. 設定文繞圖效果 1.先點選圖檔 2.由此選單來設定圖檔與文字的排列方式 <範例檔：06_01.html>

19. 最常使用的文繞圖就是選用「靠左對齊」與「靠右對齊」，它會形成如下所顯示的編排效果。最常使用的文繞圖就是選用「靠左對齊」與「靠右對齊」，它會形成如下所顯示的編排效果。

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

21. 設定圖片超連結 1.先點選圖檔 2.按此鈕或直接輸入要連結的網址

22. 變更圖片影像 1.先點選要變更的影像 2.按下此圖示鈕，選擇要更換顯示的圖檔 設定完成後，圖檔立即變更

23. 圖片編輯功能 在屬性面板中，提供幾個可以針對影像作簡易編修的功能圖示。 圖片編修功能

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

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

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

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

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

30. 設定後的畫面效果

31. 背景影像拼貼方式 在預設情況下Dreamweaver會將我們指定的影像檔案自動拼貼填滿網頁畫面，不過各位也可以根據頁面效果的需要來調整拼貼模式，請執行功能表中的「修改/頁面屬性」指令進入如圖視窗，我們一起來了解拼貼方式。

32. 下表中就是各種拼貼模式的效果說明：

33. 固定不動的背景影像 2.設定「back6-3-3.jpg」為背景影像 1.建立新網頁「large.html」

34. 1.開啟「CSS樣式」面板 2.點選「body」 3.切換到「背景」屬性 4.選此項 5.從清單中選擇「fixed」

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

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

37. 3.按下「確定」鈕 1.指定banner604.jpg圖檔 2.指定banner603.jpg圖檔

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

39. 網站導覽列(1) 「導覽列」能夠使用的變化就比滑鼠變換影像還要多了，每一個連結按鈕最多可以使用4張影像來建立動態效果，而且可以在一個視窗畫面中設定完畢，與「滑鼠變換影像」中一次只能建立一個影像效果而有所不同。下表則為「導覽列」功能中所具有的4種影像狀態。

40. 網站導覽列(2) 準備工作 1.建立新網頁page2.html 2.加入背景圖檔back6-4-2.jpg，設定「水平重覆」，背景顏色也調整成相近的顏色

41. 附表中則是本小節會使用到的相關檔案名稱，所有的影像檔案都位於範例光碟之中。附表中則是本小節會使用到的相關檔案名稱，所有的影像檔案都位於範例光碟之中。

42. 網站導覽列(3) 開始加入導覽列 1.「最新消息」連結按鈕 1.先點頁面上要加入「導覽列」的位置 2.由「插入」面板的「影像」下拉選擇「導覽列」

43. 3.按下「確定」鈕 1.輸入項目名稱 2.依序點取「瀏覽」鈕選擇影像檔案

44. 2.「成績查詢」連結按鈕 按下「影像：導覽列」鈕

45. 按下「確定」鈕 1.按下「+」鈕，使建立第2組導覽鈕 2.先輸入項目名稱 3.再依序點選「瀏覽」鈕選擇影像檔案

46. 3.完成其他連結按鈕 1.依序按下「+」鈕，使增加項目 4.設定完成按下「確定」鈕 2.依序輸入項目名稱 3.再依序點選「瀏覽」鈕選擇影像檔案

47. 建立完成的導覽列

48. 6-5 影像預留位置 1.先在頁面上新增一個段落 2.下拉選擇此項 1.設定「影像預留位置」的相關資訊 2.按下「確定」鈕

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

50. 6-6 建立網頁相簿 要快速建立網頁相簿，Dreamweaver提供了「命令/建立網頁相簿」指令，只要電腦中有安裝Fireworks程式，然後將所有網頁相簿的圖檔整理到同一個資料夾中，同時以數字編列號碼，這樣相簿就會依照編碼的順序來排列影像。如圖示：