- Dreamweaver+jQuery移動網頁設計從新手到高手
- 張雪玲 劉琳
- 1140字
- 2020-09-18 10:26:16
3.5 綜合實戰
本章主要講述了如何在網頁中插入圖像、設置圖像屬性、在網頁中簡單編輯圖像和插入其他圖像元素等的方法，下面通過實例重溫以上所學到的知識。
實戰1—創建圖文混排網頁
文字和圖像是網頁中最基本的元素，在網頁中插入圖像會使網頁更加生動、形象。創建如圖3-26所示的圖文混排效果的具體操作步驟如下。
圖3- 26
★指點迷津★
如何使文字和圖片內容共處？
在Dreamweaver中，圖片對象需要獨占一行，所以，文字內容只能在與其平行的一行位置上。那么，怎么樣才可以讓文字圍繞著圖片顯示呢？此時需要選中圖片并右擊，在彈出的快捷菜單中執行“對齊”|“右對齊”命令，這時會發現文字已均勻地排列在圖片的右側了。
01打開網頁文檔，如圖3-27所示。
圖3-27
02將光標置于要插入圖像的位置，執行“插入”|Image命令，彈出“選擇圖像源文件”對話框，在該對話框中選擇圖像tu.jpg，如圖3-28所示。
圖3-28
03單擊“確定”按鈕，插入圖像，如圖3-29所示。
圖3-29
04選中插入的圖像并右擊，在彈出的快捷菜單中執行“對齊”|“右對齊”命令，如圖3-30所示。
圖3-30
★高手支招★
修改圖像的高度和寬度的值可以改變圖像的顯示尺寸，但是這并不能改變圖像下載所用的時間，因為瀏覽器是先將圖像數據下載，然后再改變圖像尺寸。要想縮短圖像下載所需要的時間并使圖像無論什么時候都顯示相同的尺寸，建議在圖像編輯軟件中，重新處理該圖像，這樣得到的效果是最好的。
05保存文檔，按F12鍵在瀏覽器中預覽，效果如圖3-26所示。
實戰2—創建翻轉圖像導航
導航欄一般由一組圖像組成，這些圖像的顯示內容隨鼠標的操作而變化。導航欄可以為頁面和文件之間移動提供一條簡捷的途徑。創建鼠標經過圖像導航欄的方法非常簡單，鼠標未經過導航欄時的效果如圖3-31所示，鼠標經過導航欄時的效果如圖3-32所示，具體操作步驟如下。
01打開網頁文檔，如圖3-33所示。
02將光標置于要插入鼠標經過圖像導航欄的位置，執行“插入”|HTML|“鼠標經過圖像”命令，彈出“插入鼠標經過圖像”對話框，如圖3-34所示。
圖3-31
圖3-32
圖3-33
圖3-34
03在該對話框中單擊“原始圖像”右側的“瀏覽”按鈕，彈出“原始圖像：”對話框，在該對話框中選擇1.jpg文件，如圖3-35所示。
圖3-35
04單擊“確定”按鈕，并在“插入鼠標經過圖像”對話框中單擊“鼠標經過圖像”右側的“瀏覽”按鈕，在彈出的“鼠標經過圖像：”對話框中選擇shouye.jpg圖像文件，如圖3-36所示。
05單擊“確定”按鈕，添加到“鼠標經過圖像”文本框中，如圖3-37所示。
圖3-36
★提示★
組成鼠標經過圖像的兩幅圖像必須具有相同的大小；如果兩幅圖像的大小不同，Dreamweaver會自動將第二幅圖像的大小調整為與第一幅圖像同樣的大小。
圖3-37
06單擊“確定”按鈕，插入鼠標經過圖像導航欄，如圖3-38所示。
圖3-38
07用同樣的步驟在其他的單元格中插入導航欄圖像，如圖3-39所示。
圖3-39
08保存文檔，鼠標未經過導航欄時的效果如圖3-32所示，鼠標經過導航欄時的效果如圖3-33所示。