Dreamweaver CS3 ch02-网页入门-影像篇

Adobe Dreamweaver CS3大內高手CH02?網頁入門-影像篇

文魁資訊股份有限公司

Ch02 網頁入門-影像篇

圖檔說明

1

網頁開始製作時為了降低網站的空間大小，利用壓縮的方式降低檔案的位元大小，但是常常會卡在影像的品質問題而大傷腦筋，因此筆者在下列的說明中介紹網頁影像格式，透過表格中的說明讓您可以清楚了解檔案格式的差異性。

對於壓縮檔案的問題筆者舉個例子來說吧！JPG與GIF大家都知道這兩個檔案是壓縮檔，但是兩個檔案格式壓縮檔案時會因為不同的影像而產生差異性，某些亮麗的圖檔經過JPG壓縮後檔案會比GIF來的低，可是相對的有些線條圖或是單純的影像經過GIF壓縮後反而會比JPG來的低，所以如果您在製作網站時正在為檔案的格式大傷腦筋，那麼就可以先參考一下影像的說明資料，相信日後您對影像的壓縮方式會有另外一番見解。

1-1.影像類型介紹

網際網路適合使用的影像檔案目前只有JPG、GIF、PNG三種，這三種檔案格式都有不同的優缺點，若是需要將網頁的影像呈現到最佳化，認識影像的類型可以有效的提升您影像上的編輯工作，讓網頁的影像既可以節省空間又可以讓影像不失真。下列的說明中將為您介紹JPG、GIF、PNG三種影像的特性。

JPG影像

類別說明

圖檔壓縮方式JPG 檔案格式是以破壞性壓縮的技術來壓縮圖檔，影像的品質數值

越小，檔案就越小，相對的品質就越差。

壓縮後的特性影像壓縮的品質越差時，影像會有馬賽克的情形發生。

檔案特性JPG檔案適合用於風景、人像、產品等，其色彩模式為RGB，如果檔

案儲存時色彩模式是CMYK的話，那麼影像很可能無法顯示，不過如果檔

案只是要利用壓縮的特性，透過電子郵件傳輸的話，則不在此限。

GIF影像

類別說明

圖檔壓縮方式GIF的色彩模式是以索引色為主，影像壓縮的方式是以減少顏色的

技術來達到壓縮的效果，顏色越少檔案的位元大小就會降低。

壓縮後的特性影像壓縮後，畫面中的色彩會有雜點與塊面狀的情形發生。

檔案特性GIF索引色比較適合用於去背圖檔、線條圖案、各式標誌、單純的

圖案等等...之類的圖檔。一旦圖檔轉換為GIF以後，如果在影像編輯軟

體中改變影像大小，圖檔會有很嚴重的變形狀況產生！

PNG影像

類別說明

圖檔壓縮方式PNG檔案比JPG、GIF較晚應用於網際網路的流通上，PNG檔案是結合

JPG與GIF的特性，可以是JPG圖檔的壓縮方式，也可以作成GIF去背效

果！

壓縮後的特性影像壓縮後，影像會有馬賽克的情形發生，如果選擇色彩模式為索

引色，那麼畫面中的色彩會產生雜點與塊面狀情形。

檔案特性屬於多媒體軟體常用的檔案格式，例如網頁、Flash與Director。

1-2. 如何置入影像

在Dreamweaver中插入影像是一件相當輕鬆的事，只要在畫面中選擇需要的置入影像的位置，在插入影像就可以完成置入影像的工作，在影像插入時需要留意替代文字的對話框，因為為了讓使用者方便閱圖網頁圖檔，製作者必須在圖檔中加入文字如此一來可避免圖檔未載入時讓使用者不曉得圖片的功能，圖檔未載入的情況很多！例如使用者自行關閉圖片瀏覽功能，或是圖片路徑錯誤、圖片檔案遺失等等之類的問題，所以網路上的圖片有必要加入替代文字，這樣才能讓您的網站符合多重的需求。

替代文字

11

請先選擇需要插入影像的儲存格位置。

21

請選擇插入列中的「影像」將影像置入。

執行後都會出現替代文字的對話框，這個對話框主要的目的是提示將影像設定31

一個簡略的說明文字。

41

完成後影像就可以匯入到指定的位置。

若是一開始插入影像時沒有設定替代文字那怎麼辦？！

沒關係！先選擇要設定的影像。

11

21

在屬性列中的替代欄位輸入需要的文字就可以了！

利用插入工具列

我們可以使用很多種方式將以向置入到需要的位置，可以透過插入工具列上的影像按鈕將影像置入

11

首先請選擇需要置入影像的位置。

在插入工具列按下「影像」按鈕。

21

請在「選取影像原始檔」視窗中選擇需要置入的影像，完成後按下確定。

31

41

輸入替代文字後按下確定。

51

影像即可置入。

利用指令置入影像

在需要的文件區域中置入影像只要透過簡單的指令即可完成。

11

若需要在文件中置入影像請在文件中選擇要置入的儲存格。

21

請選擇選單執行「插入 > 影像」。

31

請在「選取影像原始檔」視窗中選擇需要置入的影像，完成後按下確定。

請輸入替代文字並按下確定。

41

51

影像就會置入到指定的位置了。

從Photoshop貼入圖片

自從Dreamweaver加入Adobe大家族以後，與Adobe軟體共通性變成是廣大使用者的一大福音了，現在只要在Photoshop上複製影像就可以直接貼到Dreamweaver 中，等等或許大家會有這樣的疑惑？這樣的方式聽起來不錯，可是檔案會不會有問題呢？其實這一點不用擔心，因為檔案除了可以直接在Dreamweaver的文件中貼上之外，影像也會產生一個實體的檔案儲存到網站的資料夾中哦！

首先請到Photoshop中開啟需要置入到Dreamweaver的影像後，執行「選取 > 11

全部」。

選取後請執行「編輯 > 拷貝」。

21

31

請回到Dreamweaver的編輯區中，選擇需要置入影像的儲存格位置。

41

按下Ctrl + V貼上，畫面就會開啟檔案轉存的視窗，此時請調整影像的品質後按下儲存。

51

將影像儲存到網站的資料夾中就可以完成影像置入的工作。

利用HTML語法

如果需要利用HTML標籤連結圖片，可以利用輸入HTML標籤語法加入影像，首先請選擇需要插入影像的位置。

11

點選分割將視窗分割成雙視窗。

2.請在程式碼視窗中輸入下列的標籤語言

3.請選擇需要置入的影像檔案，完成後按下確定即可。

4.影像選擇確定後Html標籤就會自動產生該圖檔的正確路徑，如果您要自行輸入亦可直接輸入下列的標籤語言即可。

置入圖片時可能會發生的狀況

如果置入的影像並非是網站根目錄底下的影像檔案，Dreamweaver將會要求將該檔案儲存網站的相對應的根目錄底下。

1.檔案從非本地根資料夾以外的檔案夾插入影像時會出現這個對話框，此時請按下「是(Y)」。

2.請將該檔案儲存於本地根資料夾中。

3.完成儲存後影像就會順利的插入到文件中了。

其實置入影像只要利用一個指令就可以完成，但是為了迎合不同使用者的需求，筆者將置入的方式分為四種，希望這四種功能可以符合不同使用者需求！當然如果您只想了解如何快速的插入圖片，那麼您就可以直接選擇第一個說明就可以了！

1-3. 使用Adobe Bridge

Dreamweaver加入Adobe大家族以後與Adobe的互通性變的更廣，若是需要在Dreamweaver中置入影像您也可以使用Bridge來置入圖片，只要利用拖曳的方式就可以輕鬆完成。

1.同一個根目錄置入影像

1.開啟Bridge後選擇需要置入的影像。

2.請按下滑鼠左鍵不放將影像拖曳到Dreamweaver中後再放開。

3.開啟「影像邊千輔助功能屬性」視窗後請輸入替代文字，完成後請按下確定即可將影像置入。

2.不同根目錄置入影像

11請在Bridge中選擇需要拖曳的影像，並按下左鍵不放。

2.請將影像拖曳到Dremaweaver中，會出現下列複製檔案的視窗請按下「是」。

31請選擇本地根目錄的資料夾後按下「儲存」。

41請在替代文字中輸入文字後按下確定後影像就可以置入到版面中。

1-4. 相對路徑與絕對路徑

若是談到影像置入就必須說明影像的路徑，影像的路徑分為絕對路徑與相對路徑兩種，有時候為了避免不必要的問題，了解這兩種路徑的方法是必須的，因為這樣才能避免影像無法顯示的問題，舉個例來說吧！為了節省網站空間必須從其他網站上連結圖片，就會將影像的路徑設定為https://www.wendangku.net/doc/ba4438343.html,/4/ userfile/l/linkit/blog/14725a9e086860.jpg，所以利用這個語法就可以將該網站的影像連結到指定的網頁中，當然也有人稱這樣的方法為網頁貼圖！

利用絕對路徑連結圖片

請開啟一個新的文件。

11

21

選擇插入列中的影像按鈕。

31 https://www.wendangku.net/doc/ba4438343.html,/4/

請於選取影像原始檔視窗中的URL欄位中輸入

userfile/l/linkit/blog/14725a9e086860.jpg，完成後按下確定。

41

請於替代文字中加入影像路徑練習。

51

完成後請按下F12預覽，只要電腦可以連結網際網路，就可以看見這個路徑的影像了。

另外一種也就是我們常用的相對路徑，相對路徑的比起絕對路徑的語法相對容易許多，舉個實際的例子！大部分的網站都會不同的資料夾儲存需要的網頁資料，例如folder01、images、pic等等，只要將影像的路徑設定為pic/chrysler. jpg，就可以完成影像的連結。

利用相對路徑連結圖片

11

選擇插入列中的影像按鈕。

21

直接選擇需要匯入的影像即可。