關於影像

圖形檔格式有許多不同的類型,但一般使用於網頁的圖形檔格式有三種:GIF、JPEG 和 PNG。GIF 和 JPEG 檔案格式受支援的情況最好,大部分的瀏覽器都能檢視。

GIF (圖形交替格式)

GIF 檔案最多使用 256 色,最適合顯示非連續色調影像或有大區域單調顏色的影像 (例如導覽列、按鈕、圖示、標誌),或其他具有單一顏色和色調的影像。

JPEG (靜態影像壓縮標準)

JPEG 檔案格式是適用於照片或連續色調影像的較佳格式,因為 JPEG 檔案可以包含數百萬色。 不過 JPEG 檔案雖然改善了品質,但同時也增加了檔案的大小和檔案的下載時間。您通常可以藉由壓縮 JPEG 檔案,而在影像品質與檔案大小之間取得良好的平衡點。

PNG (可攜式網路圖案)

PNG 檔案格式是沒有專利權的 GIF 替代品,包含了對索引色、灰階和全彩影像的支援,以及透明的 Alpha 色板支援。PNG 是 Adobe® Fireworks® 原有的檔案格式。PNG 檔案會保留所有原始圖層、向量、顏色和效果資訊 (如陰影),而且所有元素都可隨時進行編輯。檔案必須具有 .png 副檔名,Dreamweaver 才能將它辨認為 PNG 檔案。

插入影像

當您將影像插入 Dreamweaver 文件時,HTML 原始碼中會自動產生影像檔的參考。若要確保這個參考的正確性,影像檔必須位於目前的網站中。如果檔案不在目前的網站中,Dreamweaver 會詢問您是否要將檔案複製到這個網站。

您也可以動態地插入影像。動態影像便是經常變更的影像。例如,廣告橫幅旋轉系統需要從可能的橫幅清單中,隨機選取單一的橫幅,然後在要求頁面時,再以動態方式顯示所選取橫幅的影像。

將影像插入之後,您可以設定影像標籤輔助功能屬性,這樣螢幕讀取器就會為視障使用者朗讀這些屬性。您可以在 HTML 程式碼中編輯這些屬性。

如需插入影像的教學課程,請參閱加入影像

  1. 在「文件」視窗中將插入點置於您想要影像出現的地方,然後執行下列其中一項作業:

    • 在「插入」面板的「常用」類別中,按一下「影像」圖示
    • 在「插入」面板的「常用」類別中,按一下「影像」按鈕,然後選取「影像」圖示。使用「插入」面板顯示的「影像」圖示時,您可以將圖示拖曳到「文件」視窗 (如果正在使用程式碼,則可以拖曳到「程式碼」檢視視窗)。
    • 選取「插入 > 影像」。
    • 將影像從「資源」面板 (「視窗 > 資源」) 拖曳到「文件」視窗中想要的位置;然後跳到步驟 3。
    • 將影像從「檔案」面板拖曳到「文件」視窗中想要的位置;然後跳到步驟 3。
    • 將影像從桌面拖曳到「文件」視窗中想要的位置;然後跳到步驟 3。
  2. 在出現的對話方塊中,執行下列其中一項作業:
    • 選取「檔案系統」來選擇影像檔。
    • 選取「資料來源」來選擇動態影像來源。
    • 按一下「網站和伺服器」按鈕,在所有 Dreamweaver 網站當中的其中一個網站所包含的遠端資料夾中,選擇一個影像檔。
  3. 以瀏覽方式選取您要插入的影像或內容來源。

    如果您是在未儲存的文件中工作,Dreamweaver 會產生一個 file:// 影像檔參考。當您將文件儲存在網站中的任何位置時,Dreamweaver 會將這個參考轉換為文件的相對路徑。

    註解:

    插入影像時,您可以使用絕對路徑指向遠端伺服器上的影像 (也就是,本機硬碟所沒有的影像)。但是,如果在工作時遇到效能問題,您可能要在「設計」檢視中取消選取「命令>顯示外部檔案」,以停用檢視影像的功能。

  4. 按一下「確定」。如果您已啟動「偏好設定」(「編輯 > 偏好設定」) 中的對話方塊,就會出現「影像標籤輔助功能屬性」對話方塊。

  5. 在「替代文字」和「詳細描述」文字方塊中輸入值,然後按一下「確定」。
    • 在「替代文字」方塊中,輸入影像的名稱或簡短描述。 螢幕讀取器會朗讀您在這裡輸入的資訊。輸入的資訊限制在 50 個字元左右。如需較詳細的描述,可考慮在「詳細說明」文字方塊中提供該檔案的連結,以便對影像提供更詳細的資訊。
    • 在「詳細描述」方塊中,請輸入當使用者按一下影像或按一下資料夾圖示來瀏覽檔案時,將會顯示之檔案的位置。 這個文字方塊會提供與影像相關,或是能提供有關影像詳細資訊的檔案連結。

    註解:

    您可以視需要在其中一個文字方塊,或是兩個方塊中都輸入資訊。螢幕讀取器會朗讀影像的「替代」屬性。

    註解:

    若按一下「取消」,影像會出現在文件中,但是 Dreamweaver 不會將輔助功能標籤或屬性與該影像建立關聯。

  6. 在「屬性」檢視窗中 (「視窗 > 屬性」),設定影像的屬性。

設定影像屬性

「影像屬性」檢視窗可以讓您設定影像的屬性。如果無法看到所有的影像屬性,請按一下右下角的展開箭頭。

「屬性」檢視窗中的影像屬性。
  1. 請選取「視窗 > 屬性」,檢視所選取影像的「屬性」檢視窗。

  2. 在縮圖影像下方的文字方塊中輸入名稱,以便在使用 Dreamweaver 行為 (例如「調換影像」) 或使用 Script 語言 (例如 JavaScript 或 VBScript) 時能夠參考這個影像。
  3. 請設定下列任一個影像選項:

    寬和高

    以像素為單位的影像寬度和高度。 當您將影像插入頁面時,Dreamweaver 會自動以影像原始的尺寸來更新這些文字方塊。

    如果您將「寬」和「高」設定成無法對應影像實際寬度和高度的值,影像可能無法在瀏覽器中正確顯示 (若要恢復原始值,請按一下「寬」和「高」文字方塊標籤,或按出現在輸入新值之「寬」和「高」文字方塊右邊的「重設」影像大小按鈕)。

    註解:

    您可以變更這些值來縮放這個影像實體的顯示大小,但是這樣並不會減少下載時間,因為在縮放影像前瀏覽器仍會下載所有的影像資料。若要減少下載時間並確保所有影像實體以相同大小出現,請使用影像編輯應用程式來縮放影像。

    原始檔

    會指定影像的原始檔案。請按一下資料夾圖示來選擇原始檔案,或輸入路徑。

    連結

    會指定影像的超連結。 請將「指向檔案」圖示拖曳到「檔案」面板中的檔案,按一下資料夾圖示來瀏覽網站上的文件,或以手動方式輸入 URL。

    替代

    會指定在純文字瀏覽器或設定成手動下載影像的瀏覽器中,要出現在這個影像位置上的替代文字。 對於配合純文字瀏覽器使用語音合成器的視障使用者,這些文字會大聲地唸出來。在某些瀏覽器中,當指標滑過影像時這個文字也會出現。

    地圖名稱和連結區工具

    可讓您標示及建立用戶端影像地圖。

    目標

    指定要在其中載入連結頁面的頁框或視窗 (如果影像沒有連結到另外的檔案,則此選項就不會出現)。目前頁框組中所有頁框的名稱都會出現在「目標」清單中。您也可以選擇下列保留的目標名稱:

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。

    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的,則會在完整的瀏覽器視窗中載入連結的檔案。

    • _self 會在與連結所在的同一個頁框或視窗載入已連結的檔案。這個目標是預設值,因此您通常不需要指定它。

    • _top 會在完整的瀏覽器視窗中載入連結的檔案,然後移除所有頁框。

    編輯

    會啟動您在「外部編輯器」偏好設定中指定的影像編輯器,並且開啟選取的影像。

    從原始檔更新

    當網頁影像 (即 Dreamweaver 頁面上的影像) 和原始 Photoshop 檔案不同步時,Dreamweaver 會偵測到原始檔案已更新,智慧物件圖示的其中一個箭頭會變成紅色。當您在設計檢視中選取網頁影像,並在「屬性」檢測器中按一下「原稿」按鈕中的「更新」,影像便會自動更新和變更過的 Photoshop 檔案一致。

    編輯影像設定

    會開啟「影像最佳化」對話方塊,讓您將影像最佳化。

    裁切

    可讓您修剪影像大小,或從選取的影像移除不需要的區域。

    重新取樣

    可讓您重新取樣調整過大小的影像,依其新的大小及形狀改善影像品質。

    亮度和對比

    調整影像的亮度和對比設定。

    銳利化

    可調整影像的銳利度。

在程式碼中編輯影像輔助功能屬性

如果您已插入影像的輔助功能屬性,就可以在 HTML 程式碼中編輯這些值。

  1. 在「文件」視窗中,選取影像。
  2. 請執行下列其中一項作業:
    • 在「程式碼」檢視中編輯適當的影像屬性。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh),然後選取「編輯標籤」。
    • 在「屬性」檢視窗中編輯「替代」值。

目視調整影像大小

您可以在 Dreamweaver 中,以目視方式調整元素 (如影像、外掛程式、Shockwave 或 SWF 檔、Applet 及 ActiveX 控制項等) 的大小。

以目視方式調整影像大小,讓您能夠看見影像在不同尺寸時影響版面的方式,但是不會依您指定的比例縮放影像檔。如果您是使用目視方式調整 Dreamweaver 中影像的大小,而不是使用影像編輯應用程式 (如 Adobe Fireworks) 將影像檔縮放為需要的大小,則使用者的瀏覽器會在載入該頁面時縮放影像。這可能會延長頁面下載時間,並且無法適當地在使用者的瀏覽器中顯示該影像。若要減少下載時間並確保所有影像實體以相同大小出現,請使用影像編輯應用程式來縮放影像。

在 Dreamweaver 中調整影像大小時,您可以進行「重新取樣」以容納其新的尺寸。重新取樣會增加或減少已調整大小之 JPEG 與 GIF 影像檔的像素,以盡量符合原始影像的外觀。重新取樣影像會縮減影像檔的大小,使得下載效能改善。

目視調整元素大小

  1. 在「文件」視窗中選取元素 (例如影像檔或 SWF 檔)。

    調整大小控制點會出現在元素的底部、右邊和右下角。如果調整大小控制點沒有出現,請在您想要調整大小的元素外面按一下,然後重新選取它,或按一下標籤選取器中的適當標籤來選取此元素。

  2. 請依下列其中一種方式來調整元素大小:
    • 若要調整元素的寬度,請拖曳右邊的選取範圍控點。
    • 若要調整元素的高度,請拖曳底部的選取範圍控點。
    • 若要同時調整元素的寬度和高度,請拖曳角落的選取範圍控點。
    • 若要在調整元素尺寸時保存它的比例 (它的寬高比),請按住 Shift 並拖曳角落的選取範圍控點。
    • 若要將元素的寬度和高度調整為特定的大小 (例如 1 x 1 像素),請使用「屬性」檢視窗輸入數值。以目視方式調整元素大小,最小可調整成 8 x 8 像素。
  3. 若要將調整過的元素還原成原來的尺寸,請在「屬性」檢視窗中刪除「寬」和「高」文字方塊中的值,或按一下影像「屬性」檢視窗中的「重設大小」按鈕。

將影像回復為原來的大小

  1. 按一下影像「屬性」檢視窗中的「重設大小」按鈕 。

重新取樣已調整大小的影像

  1. 如上述方式調整影像的大小。
  2. 按一下影像「屬性」檢視窗中的「重新取樣」按鈕 。

    註解:

    您無法重新取樣點陣圖影像以外的影像預留位置或元素。

插入影像預留位置

影像預留位置是將最終插圖加入到網頁之前暫時使用的圖形。您可以設定預留位置的大小和顏色,並提供其文字標籤。

  1. 在「文件」視窗中,將插入點置於您想要插入預留位置圖形的地方。
  2. 選取「插入 > 影像物件 > 影像預留位置」。

  3. 在「名稱」(選擇性) 中,輸入您想要顯示為影像預留位置標籤的文字。如果您不想顯示標籤,請讓文字方塊保留空白。這個名稱必須以字母開頭而且只能含有字母和數字;不允許有空格和高 ASCII 字元。
  4. 在「寬度」和「高度」(必要項) 中,鍵入數字以設定影像大小 (以像素為單位)。
  5. 對於「顏色」(選擇性),請執行下列其中一項作業來套用顏色:
    • 使用顏色挑選器來選取顏色。
    • 輸入顏色的十六進位值 (例如 #FF0000)。
    • 輸入網頁安全色的名稱 (例如,紅色)。
  6. 在「替代文字」(選擇性) 中,針對使用純文字瀏覽器的檢視者,輸入描述影像的文字。

    註解:

    影像標籤會自動插入到含有空白 src 屬性的 HTML 程式碼中。

  7. 按一下「確定」。

    預留位置的顏色、大小屬性和標籤便會出現,如下所示:

    含有屬性的影像預留位置。

    如果在瀏覽器視窗中檢視,標籤和大小文字並不會出現。

取代影像預留位置

影像預留位置不會在瀏覽器中顯示影像。發佈網站之前,您應該以適合 Web 的影像檔 (如 GIF 或 JPEG),來取代任何已經加入的影像預留位置。

如果您有 Fireworks,便可以從 Dreamweaver 影像預留位置建立新的圖形。這個新影像會設定成與預留位置影像同樣的大小。您可以編輯這個影像,然後在 Dreamweaver 中取代。

  1. 在「文件」視窗中,執行下列其中一項作業:
    • 按兩下影像預留位置。
    • 按一下影像預留位置來選取它;然後在「屬性」檢視窗中 (「視窗 > 屬性」),按一下「原始檔」文字方塊旁的資料夾圖示。
  2. 在「影像原始檔」對話方塊中,導覽到您要用來取代影像預留位置的影像,然後按一下「確定」。

設定影像預留位置屬性

若要設定影像預留位置的屬性,請在「文件」視窗中選取預留位置,然後再選取「視窗 > 屬性」來顯示「屬性」檢視窗。若要查看所有屬性,請按一下右下角的展開箭頭。

使用「屬性」檢視窗來設定預留位置影像的名稱、寬度、高度、影像來源、替代文字描述、對齊和顏色。

影像預留位置的「屬性」檢視窗。

在預留位置「屬性」檢視窗中,灰色的文字方塊和「對齊」文字方塊是停用的。當您用影像取代預留位置時,您可以在影像「屬性」檢視窗中設定這些屬性。

  1. 請設定下列任一種選項:

    寬和高

    以像素為單位設定影像預留位置的寬度和高度。

    原始檔

    會指定影像的原始檔案。對於預留位置影像,這個文字方塊是空白。按一下「瀏覽」按鈕來選取預留位置圖形的取代影像。

    連結

    會指定影像預留位置的超連結。請將「指向檔案」圖示拖曳到「檔案」面板中的檔案,按一下資料夾圖示來瀏覽網站上的文件,或以手動方式輸入 URL。

    替代

    會指定在純文字瀏覽器或設定成手動下載影像的瀏覽器中,要出現在這個影像位置上的替代文字。 對於配合純文字瀏覽器使用語音合成器的視障使用者,這些文字會大聲地唸出來。在某些瀏覽器中,當指標滑過影像時這個文字也會出現。

    建立

    啟動 Fireworks 以建立取代影像。除非您的電腦上也安裝了 Fireworks,否則「建立」按鈕是停用的。

    從原始檔更新

    當網頁影像 (即 Dreamweaver 頁面上的影像) 和原始 Photoshop 檔案不同步時,Dreamweaver 會偵測到原始檔案已更新,智慧物件圖示的其中一個箭頭會變成紅色。當您在設計檢視中選取網頁影像,並在「屬性」檢測器中按一下「原稿」按鈕中的「更新」,影像便會自動更新和變更過的 Photoshop 檔案一致。

    顏色

    會指定影像預留位置的顏色。

在 Dreamweaver 中編輯影像

您可以在 Dreamweaver 中重新取樣、裁切、最佳化以及銳利化影像。您也可以調整影像的亮度和對比。

影像編輯功能

Dreamweaver 提供了基本的影像編輯功能,可讓您修改影像而不需要使用外部影像編輯應用程式,如 Fireworks 或 Photoshop。Dreamweaver 影像編輯工具的設計,讓您能輕易地與負責建立您網站上所用之影像檔的內容設計人員一起工作。

註解:

您不需要在電腦上安裝 Fireworks 或其他影像編輯應用程式,就可以使用 Dreamweaver 影像編輯功能。

  1. 選取「修改 > 影像」。設定下列任一項 Dreamweaver 影像編輯功能:

    重新取樣

    會增加或減少已調整大小之 JPEG 與 GIF 影像檔的像素,以盡量符合原始影像的外觀。 重新取樣影像會縮減影像檔的大小,使得下載效能改善。

    在 Dreamweaver 中調整影像大小時,您可以進行「重新取樣」以容納其新的尺寸。當重新取樣點陣圖物件時,會在影像中增加或移除像素,以使其變大或縮小。將影像重新取樣提高解析度,基本上會損失些微的品質。然而將影像重新取樣降低解析度,就一定會造成資料流失,品質通常也會降低。

    裁切

    可讓您藉由縮小影像範圍來編輯影像。 通常您會想要裁切影像以強調影像的主題,並移除四周不需要的部分,而留下您在影像中感興趣的範圍。

    亮度和對比

    可修改影像的對比或亮度 (以像素為單位)。這會影響到影像的標示、陰影和中間色調。修正太暗或太亮的影像時,您通常會使用「亮度/對比」。

    銳利化

    會增加影像內所存在輪廓邊緣的對比來調整影像焦點。 當您掃描影像或拍攝數位相片時,大部分影像擷取軟體的預設動作,都是柔化影像中的物件邊緣。這可避免過度精緻的細節,在數位影像的組成像素中遺失。然而要在數位影像檔中帶出細節,通常需要銳利化影像,同時增加邊緣對比,並使影像顯得更銳利。

    註解:

    Dreamweaver 影像編輯功能只適用於 JPEG、GIF 和 PNG 影像檔案格式。其他點陣圖影像檔格式無法使用這些影像編輯功能進行編輯。

裁切影像

Dreamweaver 讓您能夠裁切 (或修剪) 點陣圖檔案影像。

註解:

當您裁切影像時,磁碟上的來源影像檔會變更。因此,您可能要保留影像檔的備份複本,以便在需要時可以回復到原來的影像。

  1. 開啟包含要裁切的影像的頁面,選取該影像,然後執行下列其中一項作業:
    • 按一下影像「屬性」檢視窗中的「裁切工具」圖示
    • 選取「修改 > 影像 > 裁切」。
    • 裁切控制點會出現在選取影像的周圍。
  2. 請調整裁切控制點,直到邊界方框圍繞您要保留之點陣圖影像的區域為止。
  3. 在邊界方框內按兩下,或是按 Enter 鍵來裁切選取範圍。
  4. 這時會出現一個對話方塊,通知您磁碟上正在裁切的影像檔將會變更。按一下「確定」。這時會移除在邊界方框外所選取點陣圖中的每一個像素,但文件中的其他物件則維持不變。
  5. 請預覽此影像,並確定它能符合您預期的樣子。如果不是這樣,請選取「編輯 > 還原裁切」以回復至原來的影像。

    註解:

    您可以還原「裁切」命令造成的效果 (並回復至原來的影像檔) 直到您離開 Dreamweaver,或是在外部影像編輯應用程式編輯檔案為止。

最佳化影像

您可以使用 Dreamweaver 最佳化您網頁中的影像。

  1. 開啟包含要最佳化的影像的頁面,選取該影像,然後執行下列其中一項作業:
    • 按一下影像「屬性」檢視窗中的「編輯影像設定」按鈕
    • 選取「修改 > 影像 > 最佳化」。
  2. 在「影像預覽」對話方塊中進行編輯,然後按一下「確定」。

銳利化影像

「銳利化」會增加物件邊緣四周的像素對比,並增加影像的清晰度或銳利度。

  1. 開啟包含要銳利化的影像的頁面,選取該影像,然後執行下列其中一項作業:
    • 按一下影像「屬性」檢視窗中的「銳利化」按鈕 
    • 選取「修改 > 影像 > 銳利化」。
  2. 您可以藉由拖曳滑桿控制項來指定 Dreamweaver 套用在影像的銳利化程度,或在文字方塊中輸入介於 0 到 10 的值。使用「銳利化」對話方塊調整影像的銳利度時,您可以預覽影像的變更。
  3. 當您對影像的變更感到滿意時,請按一下「確定」。
  4. 請選取「檔案 > 儲存」來儲存您的變更,或是選取「編輯 > 還原銳利化」來回復至原始的影像。

    註解:

    您只能在儲存包含該影像的頁面之前,還原「銳利化」命令造成的效果 (並回復至原始的影像檔)。一旦您儲存該頁面,對影像所做的變更將永久儲存。

調整影像的亮度和對比

「亮度/對比」可修改影像中像素的對比或亮度。這會影響到影像的標示、陰影和中間色調。修正太暗或太亮的影像時,您通常會使用「亮度/對比」。

  1. 開啟包含要調整之影像的頁面,選取該影像,然後執行下列其中一項作業:
    • 按一下影像「屬性」檢視窗中的「亮度/對比」按鈕 
    • 選取「修改 > 影像 > 亮度/對比」。
  2. 拖曳「亮度和對比」滑動軸來調整設定值。值的範圍從 -100 到 100。
  3. 按一下「確定」。

建立滑鼠變換影像

您可以在頁面中插入滑鼠變換影像。變換影像是一種在瀏覽器中檢視時,當指標滑過它時會變更的影像。

您必須有兩個影像才能建立變換影像:主要影像 (頁面剛載入時顯示的影像) 和次要影像 (指標滑過主要影像上方時出現的影像)。滑鼠變換影像中的兩個影像大小必須一致;如果影像不是同樣大小,則 Dreamweaver 會調整第二個影像的大小以符合第一個影像的屬性。

變換影像會自動設定成回應「滑鼠滑過時」事件。您可以設定影像來回應不同事件 (例如,滑鼠按下) 或變更變換影像。

  1. 在「文件」視窗中,將插入點置於您想要變換影像出現的地方。
  2. 使用下列其中一種方法插入變換影像:
    • 在「插入」面板的「常用」類別中,按一下「影像」按鈕,然後選取「滑鼠變換影像」圖示。使用「插入」面板中顯示的「滑鼠變換影像」圖示,可以將圖示拖曳至「文件」視窗。
    • 選取「插入 > 影像物件 > 滑鼠變換影像」。
  3. 設定選項,然後按一下「確定」。

    影像名稱

    變換影像的名稱。

    原始影像

    要在頁面載入時顯示的影像。請在文字方塊中輸入路徑,或按一下「瀏覽」選取影像。

    變換影像

    要在指標滑過原始影像時顯示的影像。請輸入路徑,或按一下「瀏覽」選取影像。

    預先載入變換影像

    會將影像預先載入瀏覽器的快取中,讓使用者指標滑過影像時不會發生延遲。

    替代文字

    (選擇性) 向使用純文字瀏覽器的檢視者描述影像的文字。

    按下時,前往的 URL

    要在使用者按一下變換影像時開啟的檔案。請輸入路徑,或按一下「瀏覽」選取檔案。

    註解:

    如果您不設定影像的連結,Dreamweaver 會在滑鼠變換行為所在的 HTML 原始碼中,插入 Null 連結 (#)。如果您移除這個 Null 連結,滑鼠變換影像將無法繼續運作。

  4. 選取「檔案 > 在瀏覽器中預覽」,或按 F12 鍵。

  5. 請在瀏覽器中,移動指標滑過原始影像來查看變換影像。

    註解:

    您無法在「設計」檢視中看到滑鼠變換影像的效果。

使用外部影像編輯器

即使在 Dreamweaver 中,您仍可以在外部影像編輯器中開啟選取的影像;當您儲存編輯的影像檔並且返回 Dreamweaver 後,您對影像所做的任何變更都可以在「文件」視窗中看到。

您可以將 Fireworks 設定為您主要的外部編輯器。您可以設定編輯器會開啟哪些檔案類型,也可以選取多個影像編輯器。例如,您可以設定所有偏好設定在您要編輯 GIF 時應該啟動 Fireworks,而在您要編輯 JPG 或 JPEG 時則啟動不同的影像編輯器。

啟動外部影像編輯器

  1. 請執行下列其中一項作業:
    • 按兩下您要編輯的影像。
    • 在您要編輯的影像上按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh),然後再選取「編輯程式 > 瀏覽」並選取編輯器。
    • 選取您要編輯的影像,然後按一下「屬性」檢視窗中的「編輯」。
    • 在「檔案」面板中按兩下影像檔,啟動主要影像編輯器。如果您還沒有指定影像編輯器,則 Dreamweaver 會啟動這個檔案類型的預設編輯器。

    註解:

    當您從「檔案」面板開啟影像時,Fireworks 的整合功能不會發生作用;Fireworks 不會開啟原始 PNG 檔案。 若要使用 Fireworks 整合功能,請從「文件」視窗開啟影像。

    如果回到 Dreamweaver 視窗時看不到更新過的影像,請選取這個影像然後按一下「屬性」檢視窗中的「重新整理」按鈕。

設定現有檔案類型的外部影像編輯器

您可以選取用來開啟和編輯圖形檔的影像編輯器。

  1. 請執行下列其中一項作業,開啟「檔案類型/編輯器偏好設定」對話方塊:
    • 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh),然後在左邊的「分類」清單中選取「檔案類型/編輯器」。
    • 選取「編輯 > 使用外部編輯器編輯」,然後再選取「檔案類型/編輯器」。
  2. 在「副檔名」清單中,選取您要對它設定外部編輯器的副檔名。
  3. 按一下「編輯器」清單上方的「新增」(+) 按鈕。
  4. 在「選取一個外部編輯程式」對話方塊中,選取您要針對這種檔案類型啟動做為編輯器的應用程式。

  5. 在「偏好設定」對話方塊中,如果您要這個編輯器成為這種檔案類型的主要編輯器,請按一下「設為主要的」。

  6. 如果您還要對這個檔案類型設定其他編輯器,請重複步驟 3 和 4。

    當您要編輯這種影像類型時,Dreamweaver 會自動使用主要編輯器。您也可以在「文件」視窗中,從影像的快速選單中選取其他列出的編輯器。

新增檔案類型到副檔名清單

  1. 請執行下列其中一項作業,開啟「檔案類型/編輯器偏好設定」對話方塊:

    • 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh),然後在左邊的「分類」清單中選取「檔案類型/編輯器」。
    • 選取「編輯 > 使用外部編輯器編輯」,然後再選取「檔案類型/編輯器」。
  2. 在「檔案類型/編輯器偏好設定」對話方塊中,按一下「副檔名」清單上方的「新增」(+) 按鈕。

    「副檔名」清單中就會出現一個文字方塊。

  3. 請為啟動編輯器時所針對的檔案類型,輸入其副檔名。
  4. 若要針對這個檔案類型選取外部編輯器,請按一下「編輯器」清單上方的「新增」(+) 按鈕。
  5. 在出現的對話方塊中,選取您要用來編輯這種影像類型的應用程式。
  6. 如果您要這個編輯器成為這種影像類型的主要編輯器,請按一下「設為主要的」。

變更現有編輯器的偏好設定

  1. 請執行下列其中一項作業,開啟「檔案類型/編輯器偏好設定」對話方塊:

    • 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh),然後在左邊的「分類」清單中選取「檔案類型/編輯器」。
    • 選取「編輯 > 使用外部編輯器編輯」,然後再選取「檔案類型/編輯器」。
  2. 在「檔案類型/編輯器」偏好設定對話方塊中,於「副檔名」清單選取您要變更以在現有編輯器中檢視的檔案類型。

  3. 在「編輯器」清單中,選取您要處理的編輯器,然後執行下列其中一項作業:
    • 按一下「編輯器」清單上方的「新增」(+) 或「刪除」(-) 按鈕,以新增或移除編輯器。
    • 按一下「設為主要的」按鈕,以變更編輯時預設要啟動的編輯器。

套用行為到影像

您可以將任何可用的行為套用到影像或影像連結區。當您將行為套用到連結區時,Dreamweaver 會將 HTML 原始碼插入到 area 標籤中。有三個專門套用到影像的行為:「預先載入影像」、「調換影像」和「復原調換影像」。

預先載入影像

會將不能立即出現在頁面上的影像 (例如,要與行為、AP 元素或 JavaScript 調換的影像),載入到瀏覽器的快取中。 這樣就可避免在影像應該出現時由於下載而導致延遲。

調換影像

變更 img 標籤的 SRC 屬性,即可調換影像。請使用這個動作來建立按鈕變換影像和其他影像效果 (包括一次調換多個影像)。

復原調換影像

會將上一組調換的影像復原為先前的原始檔案。只要您將「調換影像」動作附加到物件,這個動作就會依預設值自動被加入;您應該都不需要以手動方式選取它。

您也可以使用行為來建立較複雜的導覽系統,例如跳頁選單。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策