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

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

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

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

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

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

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

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

8、文本 體驗(yàn)活動(dòng)三：通過“頁面屬性”在網(wǎng)頁中添加背景活動(dòng)步驟：添加背景后的效果如圖。 項(xiàng)目5 使用美化網(wǎng)頁文本 體驗(yàn)活動(dòng)四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動(dòng)任務(wù)：在“好書熱評(píng)”頁面中添加背景圖像?；顒?dòng)指導(dǎo)：在網(wǎng)頁中利用“標(biāo)簽檢查器”也能為網(wǎng)頁添加背景。 項(xiàng)目5 使用美化網(wǎng)頁文本 體驗(yàn)活動(dòng)四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動(dòng)步驟：?jiǎn)螕魧傩詸谏戏降摹啊睒?biāo)簽。在“標(biāo)簽檢查器”中在“background”項(xiàng)右側(cè)點(diǎn)擊一下鼠標(biāo)。 項(xiàng)目5 使用美化網(wǎng)頁文本 體驗(yàn)活動(dòng)四：通過“標(biāo)簽檢查器”在網(wǎng)頁中添加背景活動(dòng)步驟：這時(shí)會(huì)出現(xiàn)一個(gè)文件夾的圖標(biāo)，點(diǎn)擊它會(huì)出現(xiàn)“選擇文件”對(duì)話框，便可從中選取要設(shè)為背景的圖

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

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

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

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

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

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