片是網頁上不可缺少的元素,在網頁上放置適當數量和大小的圖片可以使網頁顯得更加生動和活潑,但是,在網頁上使用圖片也有一些問題和技巧需要注意,由于Dreamweaver是當前最流行的可視化網頁制作工具,所以這里就借Dreamweaver3.0對這些方面作一點兒探討。
1:關于圖片的格式
嚴格地說,在網頁上放置何種格式的圖片對于Dreamweaver3.0來說沒有太大的關系,因為任何一種網頁制作工具用的幾乎都是Jpg和Gif格式的圖片,當然,Dreamweaver3.0也不例外,這是因為Jpg和Gif格式的圖片體積小,易于在網上傳輸,但兩者還是有區別的,Jpg圖片雖然沒有Bmp圖片那樣多的顏色數,但它的顯示效果還是比Gif圖片理想一點,所以網頁上比較大的圖片用的一般都是Jpg格式,而256色的Gif圖片也有它的優勢:Gif圖片可以將圖片中的背景設為透明色,以便更好地與網頁融為一體;Gif圖片最大的優點是它能夠在一幅圖片中內嵌多幅圖片,并設置一定的時間間隔讓這多幅圖片循環交替顯示,以此達到動畫的效果,由著Gif圖片的這些特點,它比較多地用在網頁上顯示面積比較小的圖片上,比如導航欄中的標題、一些小動畫,等等。
如果過多地使用動態的Gif圖片,可能會因為占用太多的資源而使網頁瀏覽速度變慢,因為動態的Gif圖片文件的體積還是比較大,其實我們可以使用Dreamweaver3.0中的時間線來做動畫――用這種方法制作的動畫是建立在普通的超文本或腳本語言上的,所以不用擔心“體積”問題,另外時間線動畫可以比Gif動畫有多得多的動畫效果,制作時間線動畫時首先要選中一幅圖片或一個層(在Dreamweaver3.0中,時間線只支持圖片和層),然后訪問主菜單Modify中的Timeline子菜單下的級聯菜單Add Object to Timeline,打開時間線檢測器,即可在其中制作動畫。
對于需要鼠標感應,在兩幅圖片之間作“翻轉”的動畫來說,還有比用時間線檢測器更簡單的方法:打開Insert菜單,選擇其下的Rollover Image子菜單,在出現的對話框中的Original Image和Rollover Image文本框中設置兩幅圖片的路徑,在When clicked,Go To URL文本框中,還可以設置單擊圖片時跳轉的超鏈接,其實這種方法就是為其中一幅圖片設置了一個事件行為,如果你此時打開Behaviors檢測器窗口,就會發現在窗口中已建立了兩個行為。
現在對于網上圖片的使用已不囿于Jpg和Gif兩種格式了,PNG圖片正在悄悄崛起,它是Dreamweaver的同門師弟Fireworks生成的圖片格式,PNG圖片是專為網頁圖片而“生”的,因此,在網頁上它比Jpg和Gif圖片有更強的生命力。
2:關于圖片的編輯
在Dreamweaver3.0中,編輯圖片可以使用外掛的圖片處理軟件,當然事先要設定:打開Edit菜單中的Preferences子菜單,在Category列表中選擇External Editors,在右下角左邊的Extensions列表框中選擇.gif ;在右邊的Editors列表框的上方單擊加號按鈕,出現一個文件選定框,指定一個你喜歡的圖片處理軟件,這樣做的意義是為后綴名為gif的文件連接一個編輯軟件,以后只要在gif圖片上單擊鼠標右鍵,在出現的快捷菜單的Edit With菜單項中,即可找到你指定的圖片處理軟件,用類似的方法可以為jpg圖片也指定相應的圖片處理軟件。
3:關于圖片的屬性
Dreamweaver3.0中的圖片都有一個屬性窗口,在此窗口中可以設置圖片的各種屬性。值得一提的是,改變屬性窗口中的W和H參數固然可以在視覺上調整圖片的大小,但這種改變卻不會影響瀏覽時圖片的下載速度,也就是說,如果你通過W和H參數調小了圖片的寬度和高度,但在瀏覽時圖片的顯示速度并不會因此而改善,這是因為瀏覽器下載圖片時總是按照圖片的原始大小工作的,至于調整大小后的圖片顯示,則是在下載之后的事兒,所以要使圖片的下載速度快一些,關鍵不是在網頁設計時調整圖片的大小,而是應該事先就控制原始圖片的大??;另外,那些過于“花哨”的圖片的下載速度也會慢一些,為了不使瀏覽者在圖片下載完成前因為等得不耐煩而跑掉,你可以事先制作一幅與原始圖片大小、內容相同但顏色數少一點,最好為黑白的圖片,把它賦給屬性窗口中的Low Src參數,這樣一來,在顏色數較多的圖片下載完成之前,瀏覽器會以較快的速度先行顯示Low Src參數指定的圖片,這樣既可以使瀏覽者避免等得過于焦急,又可使瀏覽者以最快的速度知曉目標圖片的內容;有一些瀏覽者為了加快瀏覽速度,特地在瀏覽器的設置中將“允許圖片下載”的選項關掉,這樣網頁上原來放置圖片的地方將會是“白板”一塊,為了不使這種不雅的情況出現,可以在這些“白板”處放置一些說明文字,這些文字可以寫在圖片屬性窗口中的Alt文本框內,在瀏覽者的鼠標指針滑過圖片上方時,Alt文本框內的文字還會出現在提示框內。
4:關于圖像地圖
所謂圖像地圖,就是在一幅圖片上,存在多個區域,而每個區域都有自己的鏈接,有時候,這些區域也被稱為“熱點”(hotspot),在Dreamweaver3.0中制作圖像地圖很簡單。
選中一幅圖片,打開它的屬性窗口,在窗口左下角中你會發現有一個Map文本框和三個小按鈕――它們就是用來作圖像地圖的:在Map文本框中鍵入圖像地圖的名字,第一個小按鈕可以在圖片上畫出一個矩形“熱點”;第二個小按鈕可以在圖片上畫出一個圓形“熱點”;第三個小按鈕可以在圖片上畫出一個不規則形狀的“熱點”;選中任何一個“熱點”,屬性窗口會變化,在窗口的Link文本框中可以為當前“熱點”指定一個超鏈接
本文作者:新聞熱點
疑難解答