網(wǎng)頁制作與網(wǎng)站設計_06DreamweaverCS3中使用圖片

1、項目六項目六 Dreamweaver CS3中使用圖片 l 內容摘要內容摘要 介紹了圖片的插入與編輯 介紹了修改圖片大小 介紹了圖像的對齊、裁減圖片 介紹了設置圖片交替效果 l 學習圖片的插入及其屬性設置l 掌握如何調整圖片大小、裁剪圖片并進行效果的修復 l 學習圖片與其它元素的對齊方式l 掌握圖片的應用交換圖像行為，創(chuàng)建鼠標經(jīng)過圖像并在瀏覽器中觀察l 學習目標學習目標任務1 圖片的插入與編輯 1. 任務說明任務說明 圖像是網(wǎng)頁制作中最常用的因素之一，靈活地使用圖像會使網(wǎng)頁更加亮麗。 2. 任務說明任務說明 本任務主要介紹圖片的插入和編輯，因為此項操作的詳細講解已在項目四中做了介紹，故在此只做

2、總結性介紹。 圖像的插入方法如下 。 3. 操作步驟操作步驟 1）在文檔窗口工具箱的常用工具欄中單擊“圖像”按鈕，在圖像源文件目錄中選擇一幅圖片。2）單擊文檔窗口菜單命令“插入/圖像”。3）按F11鍵，打開資源面板，從本站點的圖像列表中點擊圖片，預覽插入圖片，也可直接拖動圖片到“文檔”編輯窗口中所需位置，如圖6-1所示 。 選中圖片后，就可在屬性面板中對該圖片進行屬性設置。如果沒有屬性面板，可單擊菜單命令“窗口/屬性” 圖6-1 資源面板 任務2修改圖片大小 1任務描述任務描述 插入的圖片過大會影響頁面的布局，需要調整圖片大小。 2. 任務說明任務說明 在 Dreamweaver 中以可視方式

3、調整圖像的大小，有助于看到不同尺寸的圖像對布局的影響情況，但不會將圖像文件縮放到您所指定的比例。但如沒有使用圖像編輯應用程序（如 Fireworks）將圖像縮放到所需大小，則可能導致用戶瀏覽器中頁面下載延遲和圖像顯示不正確。若要縮短下載時間并確保所有圖像實例以相同大小顯示，應使用圖像編輯應用程序縮放圖像。 3. 操作步驟操作步驟 1）在“文檔”窗口中選中圖像，則圖像的底部、右側及右下角出現(xiàn)調整大小的控制點。如果未出現(xiàn)調整大小控制點，則單擊該圖像以外的部分然后重新選擇它，或在標簽選擇器中單擊標簽以選擇該圖像，如圖6-2所示 圖6-2 調整圖像大小 2）在屬性面板的“寬”和“高”文本框中輸入數(shù)值，

4、調整圖像的大小。 若要將已調整大小的元素恢復為原始尺寸，在屬性檢查器中刪除“寬”和“高”文本框中的值，或者單擊圖像屬性檢查器中的“重設大小”按鈕，（如圖6-3中箭頭指向按鈕） 圖6-3 還原圖像大小 圖6-4 圖像重新取樣 3）在 Dreamweaver 中調整圖像大小時，可以對圖像進行重新取樣（如圖6-4中箭頭指向按鈕），以適應其新尺寸。重新取樣將添加或減少已調整大小的 JPEG 和 GIF 圖像文件中的像素，以與原始圖像的外觀盡可能地匹配。對圖像進行重新取樣會提高圖片在新的大小和形狀下的品質，減小該圖像的文件大小并提高下載性能 任務3對齊、裁剪圖片 1. 任務描述任務描述 除了對圖像整體大

5、小進行調整外，還需要去掉圖像的某些部分，達到所需效果。 2. 任務說明任務說明 本任務學習將圖像與本頁面中同行或同一段落的文本、圖像、插件或其它元素的對齊方式，以及對圖片進行裁剪獲取局部圖像。3. 操作步驟1）對齊圖像 在“設計”視圖中選擇該圖像。 在屬性檢查器中使用“對齊”彈出菜單設置該圖像的對齊屬性。對齊選項中包含如下選項：l默認值：指定基線對齊。（根據(jù)站點訪問者的瀏覽器的不同，默認值也會有所不同。） l基線和底部：將文本（或同一段落中的其它元素）的基線與選定對象的底部對齊。 l頂對齊 ：將圖像的頂端與當前行中最高項（圖像或文本）的頂端對齊。 l居中 ：將圖像的中線與當前行的基線對齊。 l

6、文本上方 ：將圖像的頂端與文本行中最高字符的頂端對齊。 l絕對居中：將圖像的中線與當前行中文本的中線對齊。 l絕對底部 ：將圖像的底部與文本行（這包括字母下部，例如在字母 g 中）的底部對齊。 l左邊距：將所選圖像放置在左側，文本在圖像的右側換行。如果左對齊文本在行上處于對象之前，它通常強制左對齊對象換到一個新行。l右對齊：將圖像放置在右側，文本在對象的左側換行。如果右對齊文本在行上位于該對象之前，則它通常會強制右對齊對象換到一個新行。2）裁剪圖片l在圖像屬性面板中單擊“裁剪”工具按鈕，這時會出現(xiàn)一個提示框，提示此操作將永久性改變所選圖像，并非只在Dreanweaver中進行修改，而是在Win

7、dows的文件夾里的圖像已經(jīng)被永久改變，被截掉的部分不會被恢復。l裁剪時可以拖動各個方面的裁剪手柄，滿意后雙擊鼠標或按回車鍵確認，如圖6-5所示。任務4設置圖片交替效果 1 1任務說明任務說明 在Dreamweaver中只需要簡單的操作，就可以制作出極具動感的交替圖像按鈕，而且占用空間少，建立一組相互交替的圖像，當鼠標移至目標圖像上時，會顯示出另外一幅圖像，就像會動的按鈕，既動感，又時尚。 2 2任務說明任務說明 通過“屬性”檢查器的“行為”面板中的“交換圖像”，可以將一個圖像和另一個圖像進行交換。3. 操作步驟1）應用交換圖像行為 “交換圖像”行為通過更改 標簽的src屬性將一個圖像和另一個

8、圖像進行交換。使用此行為可創(chuàng)建鼠標經(jīng)過按鈕的效果以及其它圖像效果（包括一次交換多個圖像）。因為只有 src 屬性受此行為的影響，所以應換入一個與原圖像具有相同尺寸（高度和寬度）的圖像。否則，換入的圖像顯示時會被壓縮或擴展，以使其適應原圖像的尺寸。還有一個“恢復交換圖像”行為，可以將最后一組交換的圖像恢復為它們以前的源文件。 在新建頁面中，選擇“插入/圖像”或單擊“插入”欄的“圖像”按鈕來插入一個圖像。 在“屬性”檢查器最左邊的文本框中為該圖像輸入一個名稱，并不是一定要對圖像指定名稱，在將行為附加到對象時會自動對圖像命名。但是，如果所有圖像都預先命名，則在“交換圖像”對話框中就更容易區(qū)分它們，如

9、圖6-6所示。 選擇該對象（通常是將交換的圖像），然后從“行為”面板的“動作”菜單中選擇“交換圖像”（點擊菜單命令“窗口/行為”會出現(xiàn)“行為”面板），如圖6-7所示. 在“交換圖像”對話框中，從“圖像”列表中，選擇要更改其來源的圖像，這里是“奧運圖標”圖像，單擊“瀏覽”選擇新圖像文件，或在“設定源文件為”框中輸入新圖像的路徑和文件名，這里被交換的圖像為“奧運冠軍”，如圖6-8所示 對所有要更改的其它圖像重復第步。同時對所有要更改的圖像使用相同的“交換圖像”動作；否則，相應的“恢復交換圖像”動作就不能全部恢復它們。 選擇“預先載入圖像”選項可在加載頁面時對新圖像進行緩存，這樣可防止當圖像應該出現(xiàn)

10、時由于下載而導致延遲。 單擊“確定”，完成操作。這樣在瀏覽器中當鼠標經(jīng)過“奧運圖標”圖片時就會顯示出另外一幅”乒乓冠軍”圖片.2）創(chuàng)建鼠標經(jīng)過圖像 鼠標經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標指針移過它時發(fā)生變化的圖像。 它是由以下兩個圖像來創(chuàng)建鼠標經(jīng)過圖像：主圖像（首次加載頁面時顯示的圖像）和次圖像（鼠標指針移過主圖像時顯示的圖像）。鼠標經(jīng)過圖像中的這兩個圖像應大小相等，如果這兩個圖像大小不同，Dreamweaver 將調整第二個圖像的大小以與第一個圖像的屬性匹配。插入鼠標經(jīng)過圖像的步驟如下： 在“文檔”窗口中，將插入點放置在要顯示鼠標經(jīng)過圖像的位置。 使用以下方法之一插入鼠標經(jīng)過圖像：在“插

11、入”欄的“常用”標簽中，單擊“圖像”按鈕右邊的下拉按鈕，找到命令圖標“鼠標經(jīng)過圖像”。 選擇“插入/圖像對象/鼠標經(jīng)過圖像 在彈出的“插入鼠標經(jīng)過圖像”對話框中進行相應設置，如圖6-9所示。圖像名稱：用于設置該圖像的名稱l原始圖像：頁面加載時要顯示的圖像。在文本框中輸入路徑，或單擊“瀏覽”并選擇該圖像。 l鼠標經(jīng)過圖像：鼠標指針滑過原始圖像時要顯示的圖像。輸入路徑或單擊“瀏覽”選擇該圖像。 l預載鼠標經(jīng)過圖像：將圖像預先加載瀏覽器的緩存中，以便用戶將鼠標指針滑過圖像時不會發(fā)生延遲。 l替換文本：這是一種（可選）文本，為使用只顯示文本的瀏覽器的訪問者描述圖像。 l單擊時，轉到 URL：用于設置變換圖像上應用的超級鏈接，當鼠標指針移至該圖像上并且