電子商務(wù)網(wǎng)頁制作05課件

1、主編：謝嶸網(wǎng)頁中包括文本、圖片、鏈接等要素，在網(wǎng)頁中添加適當(dāng)?shù)膱D片并對其進(jìn)行處理，能使網(wǎng)頁看起來更加美觀、生動。本項目將詳細(xì)介紹在網(wǎng)頁中添加圖像以及如何對它進(jìn)行編輯處理的方法。 項目5 使用美化網(wǎng)頁文本 項目導(dǎo)學(xué) 體驗活動一：在頁面中添加圖像活動任務(wù)：在“好書熱評”頁面中直接插入圖像文件；通過插入占位符來添加圖像?；顒又笇?dǎo)：網(wǎng)頁中圖片的添加不宜過多過雜，圖片的選擇一定要符合網(wǎng)頁的主題，在素材中應(yīng)選取最具代表性，比較清晰的圖片來美化網(wǎng)頁。在網(wǎng)頁中的圖像還可以添加鼠標(biāo)經(jīng)過效果，這樣可使網(wǎng)頁看起來更加生動、美觀，要特別注意的是盡量使用兩張大小基本一致的圖片來創(chuàng)建。 項目5 使用美化網(wǎng)頁文本 體驗活動

2、一：在頁面中添加圖像 活動步驟：在Dreamweaver中打開網(wǎng)頁，將光標(biāo)定位在需要插入圖片的位置。在“插入”菜單下點選“圖像”命令，或者單擊“常用”工具欄中的“圖像”按鈕。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：在對話框的查找范圍中選擇圖片所在的文件夾，點選需要插入的圖片。如果所選擇的圖片不在當(dāng)前網(wǎng)頁的網(wǎng)站文件夾中，那么會彈出對話框，此時單擊“是”按鈕。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：點擊“images”文件夾，單擊“保存”按鈕，圖像文件一般保存在“images”文件夾中。當(dāng)瀏覽網(wǎng)頁時圖片無法顯示，或者當(dāng)鼠標(biāo)指向圖片時就會顯示

3、“替換文本”中所輸入的內(nèi)容。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：圖片添加圖像后的效果。在網(wǎng)頁左邊需要插入圖像的位置定位光標(biāo)。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：在“插入”菜單下點選“圖像對象/圖像占位符”命令。在彈出的“圖像占位符”對話框中輸入圖像的名稱和寬度、高度。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：圖像占位符上顯示了圖像的名稱以及大小。在圖像占位符的區(qū)域內(nèi)雙擊，在對話框的查找范圍中選擇圖片所在的文件夾，點選需要插入的圖片。 項目5 使用美化網(wǎng)頁文本 體驗活動一：在頁面中添加圖像 活動步驟：首先將

4、鼠標(biāo)定位在要創(chuàng)建鼠標(biāo)經(jīng)過圖像的位置，再從“插入”菜單中點選“圖像對象/鼠標(biāo)經(jīng)過圖像”命令。在彈出的對話框中設(shè)置“原始圖像”、鼠標(biāo)經(jīng)過圖像”的圖片，然后再設(shè)置“前往的URL”中設(shè)置鏈接網(wǎng)址即可。 項目5 使用美化網(wǎng)頁文本 活動小結(jié)在完成了以上體驗活動后，根據(jù)操作步驟請?zhí)顚懲旰竺娴牟僮鳌?項目5 使用圖像美化頁面 如何在網(wǎng)頁中插入圖像1將鼠標(biāo)定位在要插入圖像文件的位置。2在“插入”菜單下點選“圖像”命令。3456創(chuàng)建鼠標(biāo)經(jīng)過效果的步驟1 將鼠標(biāo)定位在要創(chuàng)建鼠標(biāo)經(jīng)過效果的位置。23體驗活動二：Dreamweaver 內(nèi)置編輯器編輯圖像活動任務(wù)：設(shè)置字號、字體顏色和顯示位置?；顒又笇?dǎo)：通過編輯圖像設(shè)置

5、可對圖像作一些基本的處理。 項目5 使用美化網(wǎng)頁文本 體驗活動二：Dreamweaver 內(nèi)置編輯器編輯圖像活動步驟：在網(wǎng)頁中選中所要編輯的圖像，點擊屬性欄中的圖標(biāo) 。點擊圖像編輯設(shè)置后，在彈出的“圖像預(yù)覽”中可對圖片進(jìn)行處理。 項目5 使用美化網(wǎng)頁文本 體驗活動二：Dreamweaver 內(nèi)置編輯器編輯圖像活動步驟：如果對網(wǎng)頁中的圖像品質(zhì)不滿意，可以重新設(shè)置品質(zhì)的參數(shù)，數(shù)字越大品質(zhì)越高圖像越清晰，反之圖像就越模糊。通過設(shè)置“平滑”參數(shù)可使圖像線條看起來更加的柔和，數(shù)字越大圖像會越柔和。 項目5 使用美化網(wǎng)頁文本 體驗活動二：Dreamweaver 內(nèi)置編輯器編輯圖像活動步驟：在“文件”選項卡

6、中，可設(shè)置縮放的百分比或是直接輸入高與寬的像素值來改變圖像的大小。 項目5 使用美化網(wǎng)頁文本 活動小結(jié)在完成了以上體驗活動后，根據(jù)操作步驟請?zhí)顚懲旰竺娴牟僮鳌?項目5 使用圖像美化頁面 如何通過內(nèi)置編輯器改變圖像的大小1選中要編輯的圖片。2單擊屬性欄中的“編輯圖像設(shè)置”。3.4.5.體驗活動三：通過“頁面屬性”在網(wǎng)頁中添加背景活動任務(wù)：在“好書熱評”頁面中添加背景圖像?；顒又笇?dǎo)：為網(wǎng)頁添加背景圖像時要注意素材的選取，一般色彩淡雅、像素較高的圖片作為背景會使整個網(wǎng)頁錦上添花， 添加的背景圖像一定不能遮住網(wǎng)頁的文本，否則影響信息的傳達(dá)。 項目5 使用美化網(wǎng)頁文本 體驗活動三：通過“頁面屬性”在網(wǎng)頁

7、中添加背景活動步驟：鼠標(biāo)在網(wǎng)頁的空白處單擊一下，在“屬性”欄中點擊“頁面屬性”按鈕。在彈出的“頁面屬性”對話框中點擊“背景圖像”后面的“瀏覽”按鈕。 項目5 使用美化網(wǎng)頁文本 體驗活動三：通過“頁面屬性”在網(wǎng)頁中添加背景活動步驟：在“選擇圖像源文件”對話框中找到要設(shè)為背景的圖像文件，并單擊“確定”按鈕。選擇“是”按鈕，將圖片保存在本站點內(nèi)。 項目5 使用美化網(wǎng)頁文本 體驗活動三：通過“頁面屬性”在網(wǎng)頁中添加背景活動步驟：在彈出的“復(fù)制文件為”對話框中選擇“images”文件夾，然后單擊“保存”按鈕即可。此時“背景圖像”后面的文本框內(nèi)顯示出所選圖像的名稱，點擊“確定”按鈕。 項目5 使用美化網(wǎng)頁

8、文本 體驗活動三：通過“頁面屬性”在網(wǎng)頁中添加背景活動步驟：添加背景后的效果如圖。 項目5 使用美化網(wǎng)頁文本 體驗活動四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動任務(wù)：在“好書熱評”頁面中添加背景圖像。活動指導(dǎo)：在網(wǎng)頁中利用“標(biāo)簽檢查器”也能為網(wǎng)頁添加背景。 項目5 使用美化網(wǎng)頁文本 體驗活動四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動步驟：單擊屬性欄上方的“”標(biāo)簽。在“標(biāo)簽檢查器”中在“background”項右側(cè)點擊一下鼠標(biāo)。 項目5 使用美化網(wǎng)頁文本 體驗活動四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動步驟：這時會出現(xiàn)一個文件夾的圖標(biāo)，點擊它會出現(xiàn)“選擇文件”對話框，便可從中選取要設(shè)為背景的圖

9、像文件。 項目5 使用美化網(wǎng)頁文本 體驗活動五：創(chuàng)建圖像熱區(qū)活動任務(wù)：為網(wǎng)頁中的圖像創(chuàng)建熱區(qū)?；顒又笇?dǎo)：在圖像上繪制熱區(qū)時，區(qū)域盡量大一點，但一定不要把周圍的圖像以及文本框選進(jìn)去了。 項目5 使用美化網(wǎng)頁文本 體驗活動五：創(chuàng)建圖像熱區(qū)活動步驟：選中要創(chuàng)建熱點的圖像，在屬性欄的“地圖”下面有三個創(chuàng)建熱點的圖標(biāo)，方形、圓形、多邊形?？筛鶕?jù)實際需要點選一個熱點工具，將光標(biāo)移至圖像上再按住鼠標(biāo)不放并拖動繪制一個圓形。 項目5 使用美化網(wǎng)頁文本 體驗活動五：創(chuàng)建圖像熱區(qū)活動步驟：點擊“鏈接”文本框后的“文件夾”按鈕。在彈出的“選擇文件”對話框中選擇要鏈接的文件，單擊“確定”按鈕。 項目5 使用美化網(wǎng)頁文

10、本 體驗活動五：創(chuàng)建圖像熱區(qū)活動步驟：確定要鏈接的網(wǎng)頁后“屬性”欄的“鏈接”文本框中會顯示已鏈接的目標(biāo)網(wǎng)頁名稱,此時可按“F12”鍵在瀏覽器中查看網(wǎng)頁，當(dāng)鼠標(biāo)指向圖像熱區(qū)時會變成小手的標(biāo)記。 項目5 使用美化網(wǎng)頁文本 活動小結(jié)在完成了以上體驗活動后，根據(jù)操作步驟請?zhí)顚懲旰竺娴牟僮鳌?項目5 使用圖像美化頁面 如何創(chuàng)建圖像熱區(qū)1選中要創(chuàng)建熱區(qū)的圖像。2單擊屬性欄中的熱區(qū)圖標(biāo)。3.4.5.體驗活動六：創(chuàng)建導(dǎo)航條活動任務(wù)：為網(wǎng)頁中創(chuàng)建導(dǎo)航條?；顒又笇?dǎo)：狀態(tài)圖像：鼠標(biāo)沒有點擊時的最初始狀態(tài)。鼠標(biāo)經(jīng)過圖像：當(dāng)鼠標(biāo)在導(dǎo)航條上劃過時呈現(xiàn)的狀態(tài)。按下圖像：鼠標(biāo)點擊后的狀態(tài)。按下時鼠標(biāo)經(jīng)過圖像：點擊后鼠標(biāo)再次經(jīng)

11、過所呈現(xiàn)的狀態(tài)。 項目5 使用美化網(wǎng)頁文本 體驗活動六：創(chuàng)建導(dǎo)航條活動步驟：將鼠標(biāo)定位在要創(chuàng)建導(dǎo)航條的位置，選擇“插入”菜單下的“圖像對象/導(dǎo)航條”命令。在彈出的“插入導(dǎo)航條”對話框中已經(jīng)自動生成了第一個導(dǎo)航條元件的名稱。點擊“狀態(tài)圖像”文本框后面的“瀏覽”按鈕。 項目5 使用美化網(wǎng)頁文本 體驗活動六：創(chuàng)建導(dǎo)航條活動步驟：在彈出的“選擇圖像源文件”對話框中找到要設(shè)置為“狀態(tài)圖像”的圖像文件，并單擊“確定”按鈕。按照前面體驗活動中講述過的方法保存圖片，“狀態(tài)圖像”文本框內(nèi)便顯示出圖像的路徑及名稱。 項目5 使用美化網(wǎng)頁文本 體驗活動六：創(chuàng)建導(dǎo)航條活動步驟：按照上述方法分別設(shè)置其它的圖像狀態(tài)，完成

12、第一個導(dǎo)航條元件的設(shè)置。點擊“添加項”按鈕，按上述的方法可繼續(xù)設(shè)置第二個導(dǎo)航條元件，根據(jù)網(wǎng)頁設(shè)計需要可添加多個導(dǎo)航條元件。 項目5 使用美化網(wǎng)頁文本 體驗活動六：創(chuàng)建導(dǎo)航條活動步驟：可以在瀏覽器中查看導(dǎo)航條的效果。 項目5 使用美化網(wǎng)頁文本 活動小結(jié)在完成了以上體驗活動后，根據(jù)操作步驟請?zhí)顚懲旰竺娴牟僮鳌?項目5 使用圖像美化頁面 導(dǎo)航條的四種圖像狀態(tài)狀態(tài)圖像：鼠標(biāo)經(jīng)過圖像：按下圖像：按下時鼠標(biāo)經(jīng)過圖像：相關(guān)知識一、圖像的格式GIF ：是目前大量使用的圖片格式之一，其優(yōu)點是它可以使圖像文件變得相當(dāng)小，并可以包含動態(tài)信息。JPG：支持最高級別的壓縮，不過這種壓縮是有損耗的。優(yōu)點是體積小顏色豐富，

13、所以運用較方法。PNG：具有JPG與GIF兩種格式的優(yōu)點，既有GIF能透明顯示的特點，又具有JPG處理精美圖像的優(yōu)勢，所以運用較為廣泛。 項目5 使用美化網(wǎng)頁文本 相關(guān)知識二、設(shè)置圖像的屬性當(dāng)我們選中網(wǎng)頁中的一張圖像時，就可以通過屬性欄中各項設(shè)置處理圖像。1“圖像ID”和“高”、“寬”“圖像下的ID”是用來設(shè)置圖像的名稱，“寬”與“高”欄用來設(shè)置圖像的大小尺寸，默認(rèn)的單位是像素 項目5 使用美化網(wǎng)頁文本 相關(guān)知識2.“源文件”和“鏈接” 源文件用來設(shè)置圖像所在的路徑和文件名，可以單擊右邊的文件夾圖標(biāo)來更改。鏈接欄設(shè)置圖片的鏈接地址，當(dāng)瀏覽者在圖片上單擊時即可轉(zhuǎn)向該鏈接。 項目5 使用美化網(wǎng)頁文

14、本 相關(guān)知識3.“替換”和“編輯”“替換”欄用來設(shè)置當(dāng)前鼠標(biāo)移到圖像上時所顯示的提示文本。當(dāng)單擊編輯后的按鈕，當(dāng)前選中的圖像會在Fireworks中打開，并可進(jìn)行編輯。 項目5 使用美化網(wǎng)頁文本 相關(guān)知識4.“垂直邊距”和“水平邊距”在這兩個設(shè)置的文本框中輸入數(shù)字，可設(shè)置圖像與文本在垂直方向和水平方向的距離。 項目5 使用美化網(wǎng)頁文本 相關(guān)知識5.“裁剪”按鈕“裁剪”按鈕用于圖像的裁切。首先選中圖像，再單擊該按鈕，在彈出的對話框中選“是”，圖像上會出現(xiàn)一個選框，選框以外的區(qū)域是被裁剪掉的，用鼠標(biāo)拖動選框的控點可以調(diào)整選區(qū)大小。 項目5 使用美化網(wǎng)頁文本 相關(guān)知識6.重新取樣當(dāng)圖像裁剪過或是改變了大小后再次被選中時