插入圖片

一.前言

一般網路上所使用的圖檔大多為 Jpg 及 Gif 格式,這兩種格式的圖檔都有檔案小以方便網路傳輸下載的優點。

Jpg圖檔可顯示全彩圖片,採用破壞性壓縮法使圖檔檔案變小,壓縮的愈多,檔案愈小,但圖片失真的情況也愈嚴重。此種圖檔格式多適用於照片影像、有羽化效果的漸層、或是顏色很多的圖片。

Gif圖檔最多只能顯示256色,它是以減色的方式來使檔案變小,而不是用破壞性壓縮法,因此畫面不會失真。適用於顏色少、沒有羽化漸層的圖檔,如線條、按鈕、商標、卡通圖畫等圖案。另外,Gif圖檔也可以製作動畫圖檔及去背景色的透明圖,這是Jpg圖檔無法作到的。

因此在選擇圖檔的格式時,可以針對圖案本身的特性及傳輸速度來考慮輸出何種格式。

二.如何插入圖片及相關設定說明:

插入圖片步驟:
Step1

先在影像處理軟體或繪圖軟體處理好圖檔,在 Site 下的網頁資料夾中建立一個 image 的資料夾,並將檔案存放在此資料夾裡,如果沒有先將圖檔放在 Site 的資料夾下就直接插入圖檔,Dreamweaver 會出現對話框,要求先將圖檔複製到 Site 之下。

Step2
在Insert面板的一般物件 ( Common ) 選項上點選圖示
或是點選選項列的插入→影像
Step3
出現下圖 選取影像原始檔 對話框:

 

 

點選圖檔後按 確定,圖片就會被會置入網頁畫面中。

在插入圖檔時,為必免網頁上傳後發生掉圖現象,有下列幾點要注意:
(1) 圖檔要存放在 Site 下的網頁資料夾中。
(2) 圖檔要以英文命名。
(3)

新開啟的網頁要先存檔後再來插入圖檔、作編輯的動作。如果沒有先存檔就插入圖檔,則會出現如下之對話框:

  Dreamweaver 會將圖檔路徑轉為 file:// 的路徑,而不是相對路徑。(路徑的的說明將在超連結的課程中有介紹。)

內容設定介紹:

選取圖片後,屬性面板會如下所示:
面板其他指令說明:
編輯 呼叫外部編輯軟體。
當點選此鈕後,會開啟預先設定的外部軟體,直接修改該圖檔。
外部軟體的設定,可由 Edit→References 開啟設定對話框
重新取樣

當圖檔在外部修改過尺寸後,網頁中的圖案尺寸不會自動更新,仍舊是原尺寸大小,且圖案畫面會變的不清楚,此時只要按重新取樣 就可以更新尺寸了。

選取圖案後,會出現三個小黑點,直接拖曳可改變尺寸大小,但是影像會變的不清楚,最好是在外部的影像處理軟體修改存檔後,用 重新取樣 指令更新尺寸,才能保持影像的清晰度。

回課程目錄