項(xiàng)目四編輯網(wǎng)頁(yè)圖像課件

項(xiàng)目四編輯網(wǎng)頁(yè)圖像項(xiàng)目四編輯網(wǎng)頁(yè)圖像1情境設(shè)置

在當(dāng)今的信息化時(shí)代里，網(wǎng)絡(luò)已經(jīng)成為了人們溝通的紐帶，我們也經(jīng)常通過(guò)網(wǎng)絡(luò)去了解社會(huì)，了解產(chǎn)品等，所以一個(gè)好的網(wǎng)站將成為一個(gè)最大的展示平臺(tái)，那么一個(gè)好的網(wǎng)站顯得更加重要，其中最具吸引力的，使頁(yè)面更加豐富多彩的當(dāng)屬圖像元素的使用。情境設(shè)置在當(dāng)今的信息化時(shí)代里2項(xiàng)目展示本項(xiàng)目完成后的大體效果如下。（不要求大家做的和樣張完全一樣，但要盡量模仿）項(xiàng)目展示本項(xiàng)目完成后的大體效果如下。（不要3項(xiàng)目目標(biāo)能正確插入普通圖像能合理設(shè)置圖像屬性能正確插入鼠標(biāo)經(jīng)過(guò)圖像認(rèn)識(shí)常用的圖像文件類(lèi)型項(xiàng)目目標(biāo)能正確插入普通圖像4項(xiàng)目分析具體工作任務(wù)：制作一個(gè)網(wǎng)頁(yè)，主題為“文學(xué)天地”輸入文字，進(jìn)行適當(dāng)?shù)脑O(shè)置插入普通圖像，合理設(shè)置來(lái)美化頁(yè)面插入其他圖像元素來(lái)修飾頁(yè)面設(shè)置頁(yè)面背景，使效果更加完美項(xiàng)目分析具體工作任務(wù)：制作一個(gè)網(wǎng)頁(yè)，主題為5實(shí)施步驟步驟一：創(chuàng)建一個(gè)新的站點(diǎn)并將站點(diǎn)的存放位置設(shè)為e:\sucai\chaper4中。在站點(diǎn)根文件下創(chuàng)建子文件夾images和網(wǎng)頁(yè)文件index.html。步驟二：輸入并格式化文本步驟三：插入普通圖像步驟四：設(shè)置圖像屬性步驟五：插入鼠標(biāo)經(jīng)過(guò)圖像需要注意的仍是所插入圖像若不在站點(diǎn)內(nèi)時(shí)，要將所有的圖像均保存到images文件中，這是一個(gè)好的習(xí)慣，也是行業(yè)慣例。實(shí)施步驟步驟一：創(chuàng)建一個(gè)新的站點(diǎn)并將站點(diǎn)的6知識(shí)鏈接一、網(wǎng)頁(yè)中的顏色在網(wǎng)頁(yè)中是以RGB來(lái)表示顏色的，我們所看到的成千上萬(wàn)的顏色都是由紅、綠、藍(lán)三種基礎(chǔ)顏色調(diào)和而成的。網(wǎng)頁(yè)安全顏色范圍：由紅，綠，藍(lán)三種基色可以調(diào)和成16777216種，但網(wǎng)頁(yè)中常用到的是216種顏色，這是由于瀏覽器能正常顯示的這，超出這個(gè)范圍就失真，因此我們也把這216種顏色叫做網(wǎng)頁(yè)的安全顏色范圍。知識(shí)鏈接一、網(wǎng)頁(yè)中的顏色在網(wǎng)頁(yè)中是7知識(shí)鏈接二、網(wǎng)頁(yè)中的圖像格式

1.GIF格式：是網(wǎng)頁(yè)中常用的一種圖像格式，在絕大多數(shù)瀏覽器中都能正常顯示。

2.JPEG格式：是網(wǎng)頁(yè)中常用的一種圖像格式，下載速度非常快，適合于顯示顏色豐富、細(xì)膩的圖像

3.PNG格式：適合于在網(wǎng)絡(luò)上傳播。但是，它只有

在MicrosoftInternetExplorer(4.0及以上版本)和NetscapeNavigator（4.04及以上版本）才能得到支持。

知識(shí)鏈接二、網(wǎng)頁(yè)中的圖像格式1.GIF8知識(shí)鏈接三、圖像屬性參數(shù)我們可以通過(guò)屬性參數(shù)面板來(lái)設(shè)置圖像的各種屬性。操作方法：選中要編輯的圖像，然后編輯、修改圖像屬性面板的參數(shù)。知識(shí)鏈接三、圖像屬性參數(shù)我們可以通過(guò)屬性參9知識(shí)鏈接四、調(diào)整圖像插入到頁(yè)面中的圖像可以進(jìn)行必要的修改。圖像的調(diào)整主要是：調(diào)整大小、裁剪圖像、調(diào)整亮度和對(duì)比度、銳化圖像。知識(shí)鏈接四、調(diào)整圖像插入到頁(yè)面中的10知識(shí)鏈接五、插入鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像是一種圖像在瀏覽器中顯示的特殊效果，為了實(shí)現(xiàn)這個(gè)效果，需要兩副圖像，正常狀態(tài)下顯示一副圖像，而當(dāng)鼠標(biāo)指針經(jīng)過(guò)該圖像時(shí)，它將變化為另外一副圖像，從而達(dá)到一種圖像動(dòng)態(tài)變化的特殊效果。

注意：“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”所設(shè)置的兩個(gè)圖像尺寸大小最好相等，如果大小不等，系統(tǒng)將自動(dòng)調(diào)整第二個(gè)圖像的大小，使其與第一個(gè)圖像匹配。知識(shí)鏈接五、插入鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像是11知識(shí)鏈接六、插入圖像占位符圖像占位符：是臨時(shí)替代圖像的，頂替圖像的位置，是在設(shè)計(jì)好頁(yè)面后又不能確定插入什么樣的具體圖像時(shí)，在圖像的位置上使用圖像占位符，可以避免由于沒(méi)有圖像而導(dǎo)致無(wú)法正常設(shè)計(jì)的問(wèn)題。圖像占位符與圖像的屬性基本相同。

知識(shí)鏈接六、插入圖像占位符圖像占位符：是臨12知識(shí)拓展項(xiàng)目展示知識(shí)拓展項(xiàng)目展示13知識(shí)拓展制作要點(diǎn)提示1.創(chuàng)建一個(gè)本地站點(diǎn)并且新建一個(gè)子文件夾images來(lái)管理素材文件2.新建一個(gè)網(wǎng)頁(yè)，保存網(wǎng)頁(yè)文件，將其命名為“index.html”3.插入一個(gè)3行3列的表格4.在每個(gè)單元格中分別插入一幅圖像5.保存文件，預(yù)覽最終效果知識(shí)拓展制作要點(diǎn)提示1.創(chuàng)建一個(gè)本地站點(diǎn)并14小結(jié)本項(xiàng)目中主要介紹了網(wǎng)頁(yè)圖像的相關(guān)知識(shí)，如何插入、編輯圖像，以及鼠標(biāo)經(jīng)過(guò)圖像特殊效果的使用方法。小結(jié)本項(xiàng)目中主15項(xiàng)目四編輯網(wǎng)頁(yè)圖像項(xiàng)目四編輯網(wǎng)頁(yè)圖像16情境設(shè)置

在當(dāng)今的信息化時(shí)代里，網(wǎng)絡(luò)已經(jīng)成為了人們溝通的紐帶，我們也經(jīng)常通過(guò)網(wǎng)絡(luò)去了解社會(huì)，了解產(chǎn)品等，所以一個(gè)好的網(wǎng)站將成為一個(gè)最大的展示平臺(tái)，那么一個(gè)好的網(wǎng)站顯得更加重要，其中最具吸引力的，使頁(yè)面更加豐富多彩的當(dāng)屬圖像元素的使用。情境設(shè)置在當(dāng)今的信息化時(shí)代里17項(xiàng)目展示本項(xiàng)目完成后的大體效果如下。（不要求大家做的和樣張完全一樣，但要盡量模仿）項(xiàng)目展示本項(xiàng)目完成后的大體效果如下。（不要18項(xiàng)目目標(biāo)能正確插入普通圖像能合理設(shè)置圖像屬性能正確插入鼠標(biāo)經(jīng)過(guò)圖像認(rèn)識(shí)常用的圖像文件類(lèi)型項(xiàng)目目標(biāo)能正確插入普通圖像19項(xiàng)目分析具體工作任務(wù)：制作一個(gè)網(wǎng)頁(yè)，主題為“文學(xué)天地”輸入文字，進(jìn)行適當(dāng)?shù)脑O(shè)置插入普通圖像，合理設(shè)置來(lái)美化頁(yè)面插入其他圖像元素來(lái)修飾頁(yè)面設(shè)置頁(yè)面背景，使效果更加完美項(xiàng)目分析具體工作任務(wù)：制作一個(gè)網(wǎng)頁(yè)，主題為20實(shí)施步驟步驟一：創(chuàng)建一個(gè)新的站點(diǎn)并將站點(diǎn)的存放位置設(shè)為e:\sucai\chaper4中。在站點(diǎn)根文件下創(chuàng)建子文件夾images和網(wǎng)頁(yè)文件index.html。步驟二：輸入并格式化文本步驟三：插入普通圖像步驟四：設(shè)置圖像屬性步驟五：插入鼠標(biāo)經(jīng)過(guò)圖像需要注意的仍是所插入圖像若不在站點(diǎn)內(nèi)時(shí)，要將所有的圖像均保存到images文件中，這是一個(gè)好的習(xí)慣，也是行業(yè)慣例。實(shí)施步驟步驟一：創(chuàng)建一個(gè)新的站點(diǎn)并將站點(diǎn)的21知識(shí)鏈接一、網(wǎng)頁(yè)中的顏色在網(wǎng)頁(yè)中是以RGB來(lái)表示顏色的，我們所看到的成千上萬(wàn)的顏色都是由紅、綠、藍(lán)三種基礎(chǔ)顏色調(diào)和而成的。網(wǎng)頁(yè)安全顏色范圍：由紅，綠，藍(lán)三種基色可以調(diào)和成16777216種，但網(wǎng)頁(yè)中常用到的是216種顏色，這是由于瀏覽器能正常顯示的這，超出這個(gè)范圍就失真，因此我們也把這216種顏色叫做網(wǎng)頁(yè)的安全顏色范圍。知識(shí)鏈接一、網(wǎng)頁(yè)中的顏色在網(wǎng)頁(yè)中是22知識(shí)鏈接二、網(wǎng)頁(yè)中的圖像格式

1.GIF格式：是網(wǎng)頁(yè)中常用的一種圖像格式，在絕大多數(shù)瀏覽器中都能正常顯示。

2.JPEG格式：是網(wǎng)頁(yè)中常用的一種圖像格式，下載速度非常快，適合于顯示顏色豐富、細(xì)膩的圖像

3.PNG格式：適合于在網(wǎng)絡(luò)上傳播。但是，它只有

在MicrosoftInternetExplorer(4.0及以上版本)和NetscapeNavigator（4.04及以上版本）才能得到支持。

知識(shí)鏈接二、網(wǎng)頁(yè)中的圖像格式1.GIF23知識(shí)鏈接三、圖像屬性參數(shù)我們可以通過(guò)屬性參數(shù)面板來(lái)設(shè)置圖像的各種屬性。操作方法：選中要編輯的圖像，然后編輯、修改圖像屬性面板的參數(shù)。知識(shí)鏈接三、圖像屬性參數(shù)我們可以通過(guò)屬性參24知識(shí)鏈接四、調(diào)整圖像插入到頁(yè)面中的圖像可以進(jìn)行必要的修改。圖像的調(diào)整主要是：調(diào)整大小、裁剪圖像、調(diào)整亮度和對(duì)比度、銳化圖像。知識(shí)鏈接四、調(diào)整圖像插入到頁(yè)面中的25知識(shí)鏈接五、插入鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像是一種圖像在瀏覽器中顯示的特殊效果，為了實(shí)現(xiàn)這個(gè)效果，需要兩副圖像，正常狀態(tài)下顯示一副圖像，而當(dāng)鼠標(biāo)指針經(jīng)過(guò)該圖像時(shí)，它將變化為另外一副圖像，從而達(dá)到一種圖像動(dòng)態(tài)變化的特殊效果。

注意：“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”所設(shè)置的兩個(gè)圖像尺寸大小最好相等，如果大小不等，系統(tǒng)將自動(dòng)調(diào)整第二個(gè)圖像的大小，使其與第一個(gè)圖像匹配。知識(shí)鏈接五、插入鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像是26知識(shí)鏈接六、插入圖像占位符圖像占位符：是臨時(shí)替代圖像的，頂替圖像的位置，是在設(shè)計(jì)好頁(yè)面后又不能確定插入什么樣的具體圖像時(shí)，在圖像的位置上使用圖像占位符，可以避免由于沒(méi)有圖像而導(dǎo)致無(wú)法正常設(shè)計(jì)的問(wèn)題。圖像占位符與圖像的屬性基本相同。

知識(shí)鏈接六、插入圖像占位符圖像占位符：是臨27知識(shí)拓展項(xiàng)目展示知識(shí)拓展項(xiàng)目展示28知識(shí)拓展制作要點(diǎn)提示1.創(chuàng)建一個(gè)本地站點(diǎn)并且新建一個(gè)子文件夾images來(lái)管理素材文件2.新建一個(gè)網(wǎng)頁(yè)，保存網(wǎng)頁(yè)