網頁上使用的圖片格式
    GIF圖檔格式
   如果你的圖片具有許多線條,或者有大塊大塊的色彩,或是圖片中含有文字,
   那麼建議存成GIF圖檔格式
 
     GIF具有以下特性:
        最多只能儲存256色
        可設定透明背景
        支援交錯式的顯示方式
        GIF動畫格式
 
    JPG圖檔格式
   也稱為JPEG,可儲存所有的色彩,因此像是全彩的照片,適合使用JPG格式。
 
     JPG具有以下特性:
        強大的壓縮率
        支援漸進式的顯示方式
 
加入圖片
   先將插入點移到想要的位置,然後按下常用面板上的影像鈕(或執行"插入\
   影像"命令),會開啟如下的交談窗,選擇要插入的圖片後,按確定即可插入。
加入圖片
 
絕對路徑與相對路徑
   在選擇圖片來源時,最好選擇目前網站資料夾中的圖檔,建議事先用檔案總管
   把要用的圖檔都搬移到網站所在的資料夾中,這樣才不會使用絕對路徑來連結
   圖片。使用絕對路徑的問題是:連結的路徑為本機電腦上的磁碟與檔案路徑,
   在自己的電腦上瀏覽不會有問題,但上傳網站之後,當別人瀏覽這個圖片時
   因為瀏覽者的電腦上沒有這個圖片,所以會有圖片無法顯示的問題,所以當我
   們插入圖片時,連結路徑一定要採取圖檔位於網站資料夾裡的相對路徑。
絕對路徑與相對路徑
 
複製確認
 
複製位置
 
修改圖片屬性(可點下圖各部份看詳細說明)
調整圖片大小 修改圖片來源 替代文字 為圖片加上超連結 文繞圖的排列方式 低解析度圖片 製作影像地圖 設定圖片周圍間距 設定圖片外框 編輯圖片
 
     1.調整圖片大小
     所插入的圖片大小不一定符合我們的需要,可以先選定圖片,然後直接拉曳
     控點來調整圖片的尺寸,或者也可以在屬性面板的寬高欄位中輸入圖片大
     小。另外,調整圖片尺寸並不會影響圖片的大小,如果想調整圖片尺寸及其
     檔案大小,必須使用影像編輯軟體來處理。
調整圖片大小
     2.修改圖片來源
     如果圖片已經加入到網頁中了但後來想換成另一張圖片可以將圖片選取
     起來,直接利用屬性面板更改圖片來源。
修改圖片來源
     3.為圖片加上超連結
為圖片加上超連結
     4.文繞圖的排列方式
     在Dreamweaver中,插入的圖片被視為文字內的元件,因此當你在一段文字
     裡插入一張圖片時,圖片會夾在二個文字之間,就好像一個放大後的文字一
     樣,而且會與上面那行文字空出相當大的距離。
文未繞圖的情形
 
     選取圖片後,拉下對齊列視窗,就可選擇文繞圖的樣式,一般常用的有靠左
     對齊與靠右對齊。
文繞圖的排列方式
     5.替代文字及低解析度圖片
     由於圖片所下載的時間一定比文字久,我們可以在圖片上加上說明文字,讓
     圖片還沒顯示出來時,滑鼠移到圖片區域上會看到所設定的說明文字。另外
     一個做法,我們先用影像處理軟體製作一張低解析度的圖片,然後在低解析
     度來源欄位中指定這張圖片,這樣瀏覽器會先顯示檔案較小的低解析度圖片
     ,等到高品質的圖檔下載完畢後再做置換。
 
替代文字及低解析度圖片
 
     如果網路速很快,可能瀏覽者還來不及看到替代用的圖片,就已經將真正要
     顯示的圖片下載回來了。
替代文字效果
     6.製作影像地圖
     請參考"製作影像地圖"的部份。
     7.設定圖片周圍間距
     在版面的安排上,若圖片和文字貼得太近,容易產生壓迫感,要調整圖片與
     文字的間距,在垂直距離與水平距離欄位中輸入適當的數值(單位是像素)。
設定圖片周圍間距
     8.設定圖片外框
     若想在圖片周圍加上框線,在邊框欄位中輸入外框的粗細數值;如果此圖片
     含有超連結,則外框將自動變成藍色(會隨著預設的超連結文字色彩而變色)
     ;要取消外框的話,將邊框欄位清空即可。
設定圖片外框
     9.編輯圖片
     先選取圖片後,按下屬性面板上的編輯鈕,就會呼叫電腦裡的圖形編輯軟體
     來修改圖片。
編輯圖片
指定預設的圖片編輯器
   如果有安裝Fireworks,則Dreamweaver會自動將Fireworks當做預設的圖片編
   輯器,若要將預設的圖片編輯器指定為其他軟體,執行"編輯\使用外部編輯器
   編輯"命令,並在"檔案型態\編輯器"頁次做設定。
指定預設的圖片編輯器
 
加入影像預留位置
   在編輯網頁內容時,若是網頁中的圖片尚未製作完成,可以使用影像預留位置
   功能,先空出一塊範圍,待日後圖片做好後,再置入到這個先前保留的範圍中
   。將插入點移到要預留影像的位置,在常用面板按下鈕(或執行"插入\影像
   預留位置"命令),再依下列步驟操作:
設定影像預留位置
 
加入影像預留位置
 
影像預留位置效果
 
製作影像地圖(Image Map)
   是一種網頁上常見的超連結技巧,瀏覽者在圖片上的不同位置按下滑鼠左鍵,
   就會分別連到不同的地方,例如:
影像地圖效果
 
    建立影像地圖的連結區域
   選取一張圖片,在屬性面板上選擇一種形狀工具,然後在圖片上拉曳出要的做
   為連結的範圍。
製作影像地圖
 
   所拉曳出的區域會呈現藍色半透明狀態,只要在屬性面板的連結欄位指定超連
   結位址即可,而替代欄位則可輸入該區域的說明文字,重複這兩個步驟,便可
   在圖片上的不同區域加入超連結。
影像地圖屬性
 
    影像地圖的代號問題
   將圖片做成影像地圖之後,必須為這張影像地圖取一個代號,以做為HTML碼的
   辨識之用,點選一個影像地圖,在屬性面板的地圖欄位,就是該影像地圖的代
   號,可以採用預設的名字(Map、Map2、Map3…),或自己另外命名,這並不會
   影響到超連結內容,不過若是同一個網頁中有兩個以上的影像地圖,它們的代
   號要設不一樣才行。
 
    修改與刪除影像地圖的連結區域
   要刪除或修改已畫出的連結區域前,先按下屬性面板的鈕,讓指標回到箭頭
   樣式,這樣才能選取連結區域。當連結區域的劃分有誤時,可以選取該半透明
   區域,再按下鍵盤上的Delete鍵,即可刪除此連結區域;要移動連結區域的位
   置,將指標移到半透明區域裡面,再按住滑鼠左鍵不放即可移動該區域;拉曳
   區域框線周圍的控點,則可改變連結區域的形狀。
 
設定網頁背景圖片
    設定網頁背景圖片的方法
   在要設定背景的網頁中執行"修改\頁面屬性"命令(或是在網頁的空白處按右鍵
   選擇頁面屬性命令),在開啟的交談窗中指定一張背景圖片。
無網頁背景圖片
 
設定網頁背景圖片
 
網頁背景圖片效果
 
    背景圖片的注意事項
        圖片顏色不要太過強烈或鮮艷
        圖片與文字的搭配
        用小圖片拼接時要注意接縫問題
圖片拼接時接縫問題
        用大圖片填滿背景時要注意視窗捲動問題
視窗捲動前
 
視窗捲動問題
 
    設定不會捲動的背景圖片
   大張的背景圖片如果碰到要捲動畫面時就會穿梆,我們可以利用特殊的HTML語
   法,使背景不會跟著畫面而捲動,不過這只有對IE瀏覽器有效而已。
設定不會捲動的背景圖片
 
     1. 按下此鈕切換到顯示程式碼和設計檢視模式。
     2. 在<body>標籤中寫入 bgproperties="fixed",在輸入前按一下空白鍵,
          與前一個屬性做出區隔,然後到IE瀏覽器預覽。
 
正常的網頁畫面
 
背景圖片不會捲動的效果
 
加入隨滑鼠指標變換(Rollover)的圖片
   也就是當滑鼠指標移某一張圖片上面時,就會變成另外一張圖片的效果。
    加入隨指標變換的圖片(Rollover Image)
   準備兩張大小相同的圖片,一張是滑鼠還沒移上去時的狀態,另一張是滑鼠
   移上去後的圖片;通常第二張圖片只會做顏色或文字上簡單變化。
準備兩張大小相同的圖片
 
   在常用面板按下滑鼠變換影像鈕,(或是執行"插入\互動式影像\滑鼠變換影
   像"命令),就會出現如下的交談窗。
設定隨滑鼠指標變換的圖片
 
     1. 圖片代號(不是檔名),供Java Script判別之用,採用預設值即可,但不
        能與其他圖片重複。
     2. 可在此輸入圖片說明(當滑鼠移到圖片上方時會出現文字)
 
   按下確定鈕,在Dreamweaver中看不出什麼變化,利用瀏覽器來進行預覽,就
   可以測試Rollover Image的效果了。
 
    更改Rollover Image的屬性
   從屬性面板可以修改第一張滑鼠還沒移上去時圖片的來源路徑,但第二張圖片
   是利用Script語法指定的,要切換到設計\行為面板來修改其來源路徑。
更改屬性
 
加入導覽列(Navigation Bar)
   在網站的首頁中,難免要放一些連結文字或圖片,讓瀏覽者能夠進入其他的主
   題網頁。首先準備好要做為導覽列的圖片,一個導覽圖片最好含有四種變化,
   ,也就是四張圖片為一組,最少也要有兩種變化,導覽列看起來才不會單調。
準備導覽列所需圖片
 
   將插入點移到要加入導覽列的位置,然後按下常用面板上的導覽列鈕(或者
   執行"插入\互動式影像\導覽列"命令),再於如下的交談窗中做設定。
設定第一組導覽列圖片
 
     1. 顯示目前導覽列中已加入的圖片組代號。
     2. 目前這組圖片的名稱代號,預設是使用一般狀態影像的圖檔名,最好不要
        使用中文。
     3. 滑鼠未移到導覽列時所顯示的圖片(也就是預設的導覽圖片)。
     4. 滑鼠移到導覽列上時所顯示的圖片。
     5. 按下圖片再放開滑鼠左鍵時,原導覽圖片會換成這一張。
     6. 滑鼠移到已是滑鼠按下影像的圖片上時,會變成這張圖片。
     7. 按下導覽圖片時所連結到的網頁位置。
     8. 所連結到的網頁要顯示在哪個視窗,此為有分割頁框(Frame)時才需要設
        定。
     9. 若勾選此項,則網頁載入時就會將所有狀態的導覽圖片先行下載回來。
    10. 若勾選此項,則該圖片一開始就會以滑鼠按下影像狀態顯現,表示目前正
        在該圖片所連結的網頁中。
    11. 使導覽列水平或垂直排列,可視版面需求來選擇。
    12. 用表格來排列導覽列中的各組圖片,建議最好勾選此項。
    13. 輸入說明文字,當滑鼠移到圖片上時,會出現此說明文字。
 
   加入第一組圖片後,按下交談窗中的鈕來新增第二組圖片,操作方式同上,
   可依同一方式繼續加入第三組、第四組導覽圖片。
增加其他組導覽列圖片
 
   按下確定鈕後,所加入的各組圖片就會橫向或縱向排成一排列(依選擇而定),
   請用瀏覽器來預覽,才能測試各種狀態下的導覽圖片。
測試狀態列
 
   日後若想修改導覽列裡的圖片來源,執行"修改\導覽列"命令,便可以開啟類
   似的交談窗修改屬性,要注意的是,一個網頁裡只能有一條導覽列而已。
 
下一章:加超連結 回首頁