第5章

01基本操作

02網站、

文件

03文字

04超連結

05圖片

06表格、

頁框

07CSS

08AP元素

09FLASH

10表單

11程式碼

12網站、

Spry

CS3 8 MX2004

131Design Reference

04

使用 Dreamweaver選單插入圖片。將插入點游標

移到要插入圖片的位置 9 ，從「插入」選單中選取

「影像」10。

05

從「資源」面板插入圖片。按一下在「資源」面板 11

的「影像」鈕 12，會顯示網站內所有的圖片檔案，

將插入點游標移到插入圖片的位置，選擇要置入的

圖片後 13，按一下「插入」鈕 14。

memo若有經常使用的圖片檔案，可選取該圖片按右鍵

（Mac版為 Control ＋按一下），選擇「加入至最愛

的影像」指令 15，能將圖片加入「資源」面板的「最

愛」內。隨著製作的網站規模變大，很難在全部的

圖片檔案中選出想要的檔案，配合「最愛資料夾」，

就可以在平時將檔案管理好，提高工作效率。

06

利用「檔案」面板也能插入圖片。首先，在「檔案」

面板中選取插入的圖片檔案 16，直接將該檔案拖曳

至文件中的插入位置然後放開。

caution「替代文字」不只使用在圖片無法顯示時，也能取代檔案名

稱，讓螢幕讀取器讀取，所以請儘可能設定此項內容。若

插入的圖片是「間隔」，或沒有特別意義的裝飾，可以在「替

代文字」的下拉式清單中選取「<空白>」 8 。

8

10

9

1112

13

14

15

16

� drag

第5章

圖片

CS3 8 MX2004

132 Dreamweaver設計幫幫忙

01

確認檔案路徑後，可使用「屬性」面板，變更成其

他圖片檔案。選取想要更改的圖片檔案 1 ，在「屬

性」面板的「原始檔」中，會顯示選取檔案的路徑

2 ，若已知更改後的檔案路徑，可以直接輸入替

換，如不曉得請按資料夾圖示 3 。

改變插入圖片098

插入文件中的圖片可以重新設定檔案路徑，更改成其他圖片。

02

按下檔案夾圖示後，開啟「選取影像原始檔」

對話方塊，選取想要置換成的檔案 4 ，然後

按「確定」鈕 5 。

03

使用右鍵選單可以不用確認檔案路徑。點選欲置換

的圖片檔按右鍵（ Mac版為 Control ＋按一下），選

擇右鍵選單中的「原始檔案」 6 ，會出現和按下「屬

性」面板「原始檔」右側資料夾圖示相同的「選取影

像原始檔」對話方塊。

memo若想更快速替換圖片檔案，請在設計檢視中，按二下圖片檔案，就能直接開啟「選取影像原始檔」對話方塊。

1

2 3

5

4

6

第5章

01基本操作

02網站、

文件

03文字

04超連結

05圖片

06表格、

頁框

07CSS

08AP元素

09FLASH

10表單

11程式碼

12網站、

Spry

CS3 8 MX2004

133Design Reference

從 Fireworks匯出最佳化影像和 HTML檔案後，回到 Dreamweaver，將插入點游標移動至插入位置 1 ，

按一下「插入」列「常用」標籤的「影像」鈕，選取「Fireworks HTML」 2 ，或從「插入」選單的「影像物件」，

選取「Fireworks HTML」 3 。

01

插入 Fireworks的影像和 HTML檔案099

Dreamweaver具有插入 Fireworks影像和 HTML檔案的功能。

02

開啟「插入 Fireworks HTML」對

話方塊，按一下「瀏覽」鈕 4 ，

選取事先準備的 Fireworks HTML

檔案。

03

插入後，如不需要此 HTML檔

案，請選取「插入後刪除檔案」

5 ，然後按「確定」鈕。若其他

文件也需插入同樣的檔案，請不

要選取這個選項，按「確定」鈕。

memo選取「插入後刪除檔案」選項，實際上只會刪除以

Firework建立的 HTML檔，不會同時將匯出的影

像檔案刪除。

1

2

3

4

5

第5章

圖片

134 Dreamweaver設計幫幫忙

CS3 8 MX2004

01

將插入點游標移到插入位置，在文件中插入圖片

（詳細操作請參考「 097 插入圖片」）。開啟「選取

檔案原始檔」對話方塊，選擇以 Photoshop製作的

PSD檔 1 ，然後按「確定」鈕 2 。

插入 Photoshop產生的 PSD檔100

Dreamweaver與 Photoshop的連結性增強，已經可以直接處理 PSD檔（只有 CS3支援此功

能），不需先將 JPEG、GIF、PNG等格式匯出。

memo原始的 PSD檔若儲存在製作的網站內，為避免將資料誤傳至伺服器，建議使用遮罩（詳細設定請參考「036

執行遮罩排除特定檔案於同步作業外」）。

02

開啟「影像預覽」對話方塊，針對選取的

PSD檔進行網頁用最佳化設定。在「格式」

下拉式清單中，可選擇「JPEG」 3 、「GIF」

4 、「 PNG8」 5 等檔案格式。選擇 JPEG

時，可調整「品質」（畫質） 6 ，若是 GIF

或 PNG格式，則能調整顏色數目 7 ，比

較畫質與檔案大小，設定最佳化檔案。

若要設定匯出的檔案大小，請按一下「最佳化大小精靈」鈕 8 ，開啟「最佳化至某大小」對話方塊，直接輸

入目標大小 9 ，就會配合設定的大小，自動調整畫質及顏色數目。

03

1

2

34 5

67

8

9

第5章

01基本操作

02網站、

文件

03文字

04超連結

05圖片

06表格、

頁框

07CSS

08AP元素

09FLASH

10表單

11程式碼

12網站、

Spry

135Design Reference

CS3 8 MX2004

在更動檔案格式、壓縮比率、顏色數目等設定時，可即時預覽。若想同時比較改變前和改變後的狀態，請

按一下在「影像預覽」對話方塊下方的「2個預覽視窗」鈕 10，或「4個預覽視窗」鈕 11 。

04

05

若要改變檔案大小，請點選「檔案」標籤 12。設定

縮放比率，或直接輸入像素值，可將整體檔案放大

縮小 13。如要擷取部分影像，請選取「匯出影像區

域」14，在「 X」、「 Y」、「寬」、「高」四個項目中輸

入數值 15。

06

完成所有最佳化作業後，按一下「確定」鈕，會出

現「儲存網頁影像」對話方塊，以英數半形輸入檔

案名稱 17，指定影像儲存區域，然後按「儲存」鈕。

memo若想再次編輯插入的影像檔案，請參考「 102 重

新編輯插入的 PSD檔」；如要更改最佳化的設定

內容，請參考「 109 減少 GIF、PNG影像顏色及

再次壓縮 JPEG影像」。

memo使用「匯出區域」工具 16 ，拖曳影像四周顯示的

虛線邊框，可指定匯出範圍。

10 11

12

13

14

15

16

17

第5章

圖片

136 Dreamweaver設計幫幫忙

CS3 8 MX2004

01

在 Fireworks或 Photoshop中，使用「選取」工具

1 ，指定整個影像或任何部分，甚至特定的圖層範

圍 2 ，接著選擇「編輯」選單中的「拷貝」 3 。

貼上部分 Fireworks或 Photoshop檔案101

在 Fireworks或 Photoshop中製作的影像檔案，可選取部分以複製＆貼上的方式，直接插入

Dreamweaver內。

memo使用 Photoshop時，若只想複製選取的圖層，請

選擇「編輯」選單中的「拷貝」指令。選擇「編輯」

選單中的「拷貝合併」指令，可複製所有選取範圍

內的圖層。

02

回到 Dreamweaver，將游標移動至插入位置 4 ，

在「編輯」選單中，選取「貼上」 5 。

03

與直接插入 PSD檔時相同，會出現「影像預覽」對

話方塊，進行最佳化設定後匯出檔案（詳細操作請

參考「100 插入 Photoshop產生的 PSD檔」）

1

32

4

5

第5章

01基本操作

02網站、

文件

03文字

04超連結

05圖片

06表格、

頁框

07CSS

08AP元素

09FLASH

10表單

11程式碼

12網站、

Spry

137Design Reference

CS3 8 MX2004

01

直 接 將 P h o t o s h o p做 成 的 P S D檔 插 入

Dreamweaver內（詳細操作請參考「 100 插入

Photoshop產生的 PSD檔」），選取插入的最佳化

影像 1 ，按一下「屬性」面板的「編輯」鈕 2 。

重新編輯插入的 PSD檔102

即使插入 PSD檔並匯出成最佳化影像，原始 PSD檔的編輯內容，也可立刻套用至最佳化的影

像上。

caution直接插入 PSD檔時，預覽縮圖或「編輯」鈕的外

觀會變成 Photoshop圖示。

02

啟動 Photoshop時，自動開啟的不是 Dreamweaver

中最佳化的檔案，而是「原始的 PSD檔」，使用各項

工具再次編輯後，選擇「選取」選單的「全部」，接著

在「編輯」選單中，選擇「拷貝合併」 3 。

回到 Dreamweaver，確認已選取插入的最佳化影像 4 ，再從「編輯」選單中選擇「貼上」 5 ，如此可維持

最初插入的 PSD檔最佳化設定，僅自動套用上 Photoshop所重新完成的編輯內容 6 。

03

1 2

3

5

4

6

第5章

圖片

CS3 8 MX2004

138 Dreamweaver設計幫幫忙

01

選擇「編輯」選單中的「偏好設定」（ Mac版為

「Dreamweaver」選單的「偏好設定」） 1 。

使用 Fireworks或 Photoshop開啟插入的影像檔103

可依各種檔案格式分配使用的影像編輯程式。

02

開啟「偏好設定」對話方塊，選擇分類中的「檔案

型態 /編輯器」 2 ，在副檔名選項中，依序選擇

「.png」 3 、「.gif」 4 、「.jpg .jpe .jpeg」 5 ，並選擇

對應各個副檔名所使用的編輯器 6 ，或按「＋」鈕

新增 7 ，然後按「設為主要的」鈕 8 。

03

在文件視窗中選取任何影像，按一下在「屬性」面

板的「編輯」鈕 9 ，就會啟動對應副檔名的編輯程

式，開啟影像檔案。如要暫時使用不同的編輯器開

啟，請點選影像按右鍵（ Mac版為 Control ＋按一

下），從右鍵選單中選取「編輯使用」內的任何一個

編輯器 10，或選擇「瀏覽」，直接指定想要使用的

編輯器 11 。

caution若不是直接重新編輯原始檔案，而是最佳化影像

時，可能會有畫質變差的情況，請特別留意。

1

3

4

52

7

6

8

10

119