第5講 添加圖片與圖文混排

1、上一講回顧上一講回顧設(shè)置文本屬性設(shè)置文本屬性u(píng)CSSCSS模式用于設(shè)定文字本身格式模式用于設(shè)定文字本身格式 uHTML HTML 模式用于設(shè)定文字段落格式模式用于設(shè)定文字段落格式為文字添加移動(dòng)屬性為文字添加移動(dòng)屬性u(píng)本講主要內(nèi)容本講主要內(nèi)容網(wǎng)頁(yè)圖像的網(wǎng)頁(yè)圖像的使用使用添加圖片添加圖片編輯編輯圖片圖片圖文混排圖文混排鼠標(biāo)鼠標(biāo)經(jīng)過(guò)圖像的添加經(jīng)過(guò)圖像的添加制作滾動(dòng)制作滾動(dòng)圖片圖片一、一、網(wǎng)頁(yè)網(wǎng)頁(yè)圖像圖像的使用的使用如果網(wǎng)頁(yè)中滿是密密麻麻的文字，無(wú)論有多精彩如果網(wǎng)頁(yè)中滿是密密麻麻的文字，無(wú)論有多精彩的內(nèi)容也會(huì)令人望之卻步！所以的內(nèi)容也會(huì)令人望之卻步！所以圖片圖片的加注在網(wǎng)的加注在網(wǎng)頁(yè)設(shè)計(jì)中占了相當(dāng)?shù)匚?/p>

2、，沒(méi)有頁(yè)設(shè)計(jì)中占了相當(dāng)?shù)匚?，沒(méi)有圖片圖片來(lái)相輔，網(wǎng)站來(lái)相輔，網(wǎng)站就算不上完美。就算不上完美。在保證畫(huà)質(zhì)的前提下盡可能使圖片的數(shù)據(jù)量小一些，在保證畫(huà)質(zhì)的前提下盡可能使圖片的數(shù)據(jù)量小一些，這樣有利用戶快速的瀏覽我們的網(wǎng)頁(yè)。這樣有利用戶快速的瀏覽我們的網(wǎng)頁(yè)。插入圖片前先把網(wǎng)頁(yè)保存一下，以免圖片丟失插入圖片前先把網(wǎng)頁(yè)保存一下，以免圖片丟失圖片要放在網(wǎng)頁(yè)的同一個(gè)目錄或子目錄下圖片要放在網(wǎng)頁(yè)的同一個(gè)目錄或子目錄下網(wǎng)頁(yè)、圖片文件名只能是英文或數(shù)字不能用中文網(wǎng)頁(yè)、圖片文件名只能是英文或數(shù)字不能用中文1 1、使用圖片的原則、使用圖片的原則.GIF.GIF格式格式特點(diǎn)：特點(diǎn)：它的圖片數(shù)據(jù)量小，可以帶有動(dòng)畫(huà)信息，且

3、可它的圖片數(shù)據(jù)量小，可以帶有動(dòng)畫(huà)信息，且可以透明背景顯示，但最高只支持以透明背景顯示，但最高只支持256256種顏色。種顏色。用途：用途：大量用于網(wǎng)站的圖標(biāo)大量用于網(wǎng)站的圖標(biāo)LogoLogo、廣告條、廣告條BannerBanner及網(wǎng)及網(wǎng)頁(yè)背景圖像。但由于受到顏色的頁(yè)背景圖像。但由于受到顏色的限制限制，不適合用于照，不適合用于照片級(jí)的網(wǎng)頁(yè)圖像。片級(jí)的網(wǎng)頁(yè)圖像。2 2、網(wǎng)頁(yè)中常用的圖片格式網(wǎng)頁(yè)中常用的圖片格式.JPEG/.JPG.JPEG/.JPG格式格式特點(diǎn)：特點(diǎn)：可以高效地壓縮圖片的數(shù)據(jù)量。使圖片文件變可以高效地壓縮圖片的數(shù)據(jù)量。使圖片文件變小的同時(shí)基本不丟失顏色畫(huà)質(zhì)。小的同時(shí)基本不丟失顏色

4、畫(huà)質(zhì)。用途：用途：通常用于顯示照片等顏色豐富的精美圖像。通常用于顯示照片等顏色豐富的精美圖像。2 2、網(wǎng)頁(yè)中常用的圖片格式網(wǎng)頁(yè)中常用的圖片格式借助互聯(lián)網(wǎng)查詢借助互聯(lián)網(wǎng)查詢.JPEG/.JPG.JPEG/.JPG格式格式有何區(qū)別？有何區(qū)別？?jī)煞N格式之間可以如何進(jìn)行轉(zhuǎn)換？?jī)煞N格式之間可以如何進(jìn)行轉(zhuǎn)換？.PNG.PNG格式格式特點(diǎn)：特點(diǎn)：是一種逐步流行的網(wǎng)絡(luò)圖像格式。既融合了是一種逐步流行的網(wǎng)絡(luò)圖像格式。既融合了GIFGIF能做成透明背景的特點(diǎn)，又具有能做成透明背景的特點(diǎn)，又具有JPEGJPEG處理精美圖處理精美圖像的優(yōu)點(diǎn)。像的優(yōu)點(diǎn)。用途：用途：常用于制作網(wǎng)頁(yè)效果圖。常用于制作網(wǎng)頁(yè)效果圖。2 2、網(wǎng)

5、頁(yè)中常用的圖片格式網(wǎng)頁(yè)中常用的圖片格式網(wǎng)上下載或購(gòu)買(mǎi)素材光盤(pán)網(wǎng)上下載或購(gòu)買(mǎi)素材光盤(pán)照相機(jī)、攝像機(jī)、手機(jī)照相機(jī)、攝像機(jī)、手機(jī)具有一定繪畫(huà)水平的用戶，可自己繪制具有一定繪畫(huà)水平的用戶，可自己繪制掃描儀掃描圖片掃描儀掃描圖片從電腦顯示屏抓取圖像從電腦顯示屏抓取圖像3 3、圖片的獲取、圖片的獲取用用Print ScreenPrint Screen鍵直接抓取鍵直接抓取1 1截取全屏幕畫(huà)面截取全屏幕畫(huà)面操作步驟：操作步驟：屏幕上出現(xiàn)所需抓取的圖像屏幕上出現(xiàn)所需抓取的圖像按下鍵盤(pán)上的按下鍵盤(pán)上的Print Screen SysRp(Print Screen SysRp(屏幕打印屏幕打印) )鍵，鍵，則圖像被

6、保存到了則圖像被保存到了WindowsWindows剪貼板中。剪貼板中。啟動(dòng)畫(huà)圖或啟動(dòng)畫(huà)圖或PhotoshopPhotoshop等軟件。等軟件。執(zhí)行執(zhí)行“Ctrl+V”Ctrl+V”組合鍵，把圖片粘貼到軟件中。組合鍵，把圖片粘貼到軟件中。保存圖片。保存圖片。2 2截取當(dāng)前活動(dòng)窗口截取當(dāng)前活動(dòng)窗口 操作步驟：操作步驟：按住按住Print ScreenPrint Screen的的同時(shí)按下同時(shí)按下AltAlt鍵鍵粘貼、保存圖片。粘貼、保存圖片。借助軟件進(jìn)行截圖借助軟件進(jìn)行截圖QQQQ截圖截圖SnagItSnagItSnagItSnagIt主界面主界面用用SnagItSnagIt抓取圖像的基本操作抓取

7、圖像的基本操作 確保要捕獲的內(nèi)容所在頁(yè)面處于確保要捕獲的內(nèi)容所在頁(yè)面處于激活激活狀態(tài)狀態(tài) 選擇一個(gè)選擇一個(gè)“捕獲方案捕獲方案” 單擊單擊“捕獲捕獲”按鈕按鈕 點(diǎn)擊點(diǎn)擊 “ “完成完成”按鈕按鈕 選擇保存的文件格式，對(duì)所捕獲的圖像進(jìn)行保存選擇保存的文件格式，對(duì)所捕獲的圖像進(jìn)行保存捕獲方案的選取捕獲方案的選取范圍范圍以鼠標(biāo)所選以鼠標(biāo)所選擇的區(qū)域?yàn)閾竦膮^(qū)域?yàn)楸４娴膶?duì)象保存的對(duì)象窗口：窗口：只對(duì)出現(xiàn)在屏幕上的窗口中的對(duì)象進(jìn)行捕獲只對(duì)出現(xiàn)在屏幕上的窗口中的對(duì)象進(jìn)行捕獲 全屏幕全屏幕滾動(dòng)窗口滾動(dòng)窗口以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范圍捕獲區(qū)域圖像圍捕獲區(qū)域圖像WebWeb頁(yè)（保留鏈接）頁(yè)

8、（保留鏈接）以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范圍捕獲區(qū)域圖像，并保留其中的以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范圍捕獲區(qū)域圖像，并保留其中的超鏈接超鏈接保存為保存為* *.mht.mht文件文件對(duì)象對(duì)象只對(duì)出現(xiàn)在屏幕中的圖標(biāo)進(jìn)行捕獲只對(duì)出現(xiàn)在屏幕中的圖標(biāo)進(jìn)行捕獲菜單的時(shí)間延遲菜單的時(shí)間延遲捕獲捕獲1010秒鐘內(nèi)操作的菜單秒鐘內(nèi)操作的菜單窗口文字窗口文字捕獲一個(gè)窗口內(nèi)的所有文字部分捕獲一個(gè)窗口內(nèi)的所有文字部分借助借助snagitsnagit練習(xí)采用不同捕獲方案截取圖片練習(xí)采用不同捕獲方案截取圖片返回返回方法方法1 1：利用菜單：利用菜單( (插入插入圖像圖像) )方法方法2 2：利用工具欄：利用工具欄( (插入面板

9、插入面板常用常用圖像圖像) )1 12 23 3二、插入圖片二、插入圖片標(biāo)記標(biāo)記在在HTMLHTML文檔中，引用圖片必須用文檔中，引用圖片必須用標(biāo)記。標(biāo)記?；菊Z(yǔ)法：基本語(yǔ)法：語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)?srcsrc的屬性值為所引用的圖片的的屬性值為所引用的圖片的URLURL地址。地址。 src src屬性是必須的。屬性是必須的。 url url可以是絕對(duì)地址，也可以是可以是絕對(duì)地址，也可以是相對(duì)地址相對(duì)地址。屬性屬性功能說(shuō)明功能說(shuō)明srcsrcwidthwidthheightheighthspacehspacevspacevspacealignalignborderborderaltalt指定圖片

10、源，即圖片的指定圖片源，即圖片的URLURL路徑路徑指定圖片的顯示寬度指定圖片的顯示寬度指定圖片的顯示高度指定圖片的顯示高度指定圖片的水平間距指定圖片的水平間距指定圖片的垂直間距指定圖片的垂直間距指定圖片的對(duì)齊方式指定圖片的對(duì)齊方式指定圖片的邊框大小指定圖片的邊框大小顯示圖片的說(shuō)明文字顯示圖片的說(shuō)明文字標(biāo)記包含的其他屬性：標(biāo)記包含的其他屬性：原因：正確認(rèn)識(shí)替換文本的功能原因：正確認(rèn)識(shí)替換文本的功能 當(dāng)當(dāng)圖片不能顯示圖片不能顯示時(shí)，鼠標(biāo)經(jīng)過(guò)圖片時(shí)會(huì)時(shí)，鼠標(biāo)經(jīng)過(guò)圖片時(shí)會(huì)顯示替顯示替換文字換文字的內(nèi)容；的內(nèi)容； 當(dāng)當(dāng)圖片可以顯示圖片可以顯示時(shí)，鼠標(biāo)經(jīng)過(guò)圖片時(shí)，時(shí)，鼠標(biāo)經(jīng)過(guò)圖片時(shí)，替換文替換文字就不會(huì)

11、顯示字就不會(huì)顯示出來(lái)了。出來(lái)了。設(shè)計(jì)時(shí)存在的問(wèn)題：設(shè)計(jì)時(shí)存在的問(wèn)題：鼠標(biāo)經(jīng)過(guò)圖片時(shí)圖片上的替換文本不顯示鼠標(biāo)經(jīng)過(guò)圖片時(shí)圖片上的替換文本不顯示強(qiáng)制為圖片添加提示文字強(qiáng)制為圖片添加提示文字解決辦法：解決辦法：為圖片添加為圖片添加titletitle屬性屬性用法如下：用法如下： img src=“1.jpg” title=“ 設(shè)定網(wǎng)頁(yè)背景設(shè)定網(wǎng)頁(yè)背景圖片圖片選按選按屬性屬性面板面板頁(yè)面屬性頁(yè)面屬性鈕鈕或選按菜單欄或選按菜單欄 修改修改 頁(yè)面頁(yè)面屬性，開(kāi)啟對(duì)話框進(jìn)行操屬性，開(kāi)啟對(duì)話框進(jìn)行操作：作：提示：提示：可以設(shè)置可以設(shè)置重復(fù)重復(fù)屬屬性來(lái)設(shè)置背景顯示區(qū)域性來(lái)設(shè)置背景顯示區(qū)域返回返回選中圖片，打開(kāi)圖片

12、屬性面板選中圖片，打開(kāi)圖片屬性面板圖像的圖像的數(shù)據(jù)量數(shù)據(jù)量給圖片編號(hào)，給圖片編號(hào)，以便區(qū)分以便區(qū)分以像素為單位修以像素為單位修改圖片的尺寸改圖片的尺寸輸入數(shù)值為圖輸入數(shù)值為圖片添加邊框片添加邊框重設(shè)大小重設(shè)大小按鈕按鈕三、使用三、使用DreamweaverDreamweaver編輯圖片編輯圖片1 1、調(diào)整調(diào)整圖片圖片大小大小方法方法1 1：目視調(diào)整圖片大小目視調(diào)整圖片大小選取選取圖片圖片后，將鼠標(biāo)指針移至后，將鼠標(biāo)指針移至圖片圖片對(duì)對(duì)象右下角的縮放控點(diǎn)，當(dāng)呈象右下角的縮放控點(diǎn)，當(dāng)呈 時(shí)，按時(shí)，按 Shift Shift 鍵不放再拖曳該縮放控點(diǎn)即可鍵不放再拖曳該縮放控點(diǎn)即可以正比例調(diào)整影像大小。

13、以正比例調(diào)整影像大小。方法方法2 2：在圖片屬性面板中輸入詳細(xì)設(shè)在圖片屬性面板中輸入詳細(xì)設(shè)置值置值注意注意：縮放影像時(shí)，過(guò)于放大影像會(huì)縮放影像時(shí)，過(guò)于放大影像會(huì)導(dǎo)致失真。導(dǎo)致失真。存在的問(wèn)題：存在的問(wèn)題：圖片的尺寸變小了，但占用的存儲(chǔ)空間沒(méi)有變化圖片的尺寸變小了，但占用的存儲(chǔ)空間沒(méi)有變化解決辦法：更新圖片調(diào)整尺寸后的數(shù)據(jù)量解決辦法：更新圖片調(diào)整尺寸后的數(shù)據(jù)量在選取在選取圖片圖片的狀態(tài)下，于的狀態(tài)下，于 屬性屬性 面板設(shè)重新取樣。面板設(shè)重新取樣。重新重新取樣取樣1 12 23 34 4注意：注意：原始圖片將根據(jù)設(shè)置調(diào)整原始圖片將根據(jù)設(shè)置調(diào)整2 2、圖片的、圖片的裁切裁切選取選取圖片圖片后，選按后

14、，選按 屬性屬性 面板面板 裁切裁切將鼠標(biāo)移至裁切框的任一控點(diǎn)上，呈現(xiàn)裁切箭頭將鼠標(biāo)移至裁切框的任一控點(diǎn)上，呈現(xiàn)裁切箭頭按住鼠標(biāo)左鍵不放拖拽裁切范圍按住鼠標(biāo)左鍵不放拖拽裁切范圍按回車(chē)鍵或雙擊鼠標(biāo)完成裁切動(dòng)作按回車(chē)鍵或雙擊鼠標(biāo)完成裁切動(dòng)作 注意：注意：原始圖片將根據(jù)設(shè)置調(diào)整原始圖片將根據(jù)設(shè)置調(diào)整3 3、調(diào)整圖片的、調(diào)整圖片的亮度和對(duì)比亮度和對(duì)比當(dāng)當(dāng)圖片圖片太暗或太亮?xí)r，在選取太暗或太亮?xí)r，在選取圖片圖片的狀態(tài)下，于的狀態(tài)下，于 屬性屬性 面板選按面板選按 亮度和對(duì)比亮度和對(duì)比 鈕，開(kāi)啟鈕，開(kāi)啟 亮度亮度/ /對(duì)比對(duì)話框調(diào)整。對(duì)比對(duì)話框調(diào)整。4 4、圖片的、圖片的銳利化銳利化銳利化會(huì)增加對(duì)象邊緣四

15、周的像素對(duì)比，并增加銳利化會(huì)增加對(duì)象邊緣四周的像素對(duì)比，并增加影像的清晰度或影像的清晰度或模糊模糊度。度。5 5、為圖片添加不同顏色的邊框、為圖片添加不同顏色的邊框使用使用“Border”Border”屬性直接設(shè)置邊框的寬度屬性直接設(shè)置邊框的寬度 拖動(dòng)鼠標(biāo)選擇圖片對(duì)象（注意不是點(diǎn)擊選中）拖動(dòng)鼠標(biāo)選擇圖片對(duì)象（注意不是點(diǎn)擊選中）使用使用csscss模式設(shè)定顏色模式設(shè)定顏色6 6、借助第三方軟件、借助第三方軟件編輯編輯圖片圖片返回返回預(yù)備知識(shí)：設(shè)定圖片的對(duì)齊方式預(yù)備知識(shí)：設(shè)定圖片的對(duì)齊方式1 1 2 2注意：注意：圖片屬性面板中的對(duì)齊設(shè)置表示的是在一行中圖圖片屬性面板中的對(duì)齊設(shè)置表示的是在一行中圖

16、形和文本的對(duì)齊方式（即：垂直方向）形和文本的對(duì)齊方式（即：垂直方向）四、圖文混排四、圖文混排設(shè)計(jì)要求設(shè)計(jì)要求：圖片和段落一起：圖片和段落一起水平居中水平居中解決辦法：在解決辦法：在css樣式中設(shè)定圖片的對(duì)齊方式樣式中設(shè)定圖片的對(duì)齊方式首先將鼠標(biāo)放在在段落的最左邊首先將鼠標(biāo)放在在段落的最左邊進(jìn)入進(jìn)入css模式，選中居中，圖片將居中顯示模式，選中居中，圖片將居中顯示圖文混排實(shí)例圖文混排實(shí)例設(shè)計(jì)要求：設(shè)計(jì)要求：圖片左對(duì)齊；垂直邊距和水平邊距為圖片左對(duì)齊；垂直邊距和水平邊距為2020；段落間距為；段落間距為45451 12 2添加文字段落添加文字段落光標(biāo)定位在段首光標(biāo)定位在段首插入圖片插入圖片3 3選

17、中圖片選中圖片在圖片屬性面板中設(shè)置對(duì)齊在圖片屬性面板中設(shè)置對(duì)齊4 4選中圖片選中圖片在圖片屬性面板設(shè)置圖片在圖片屬性面板設(shè)置圖片垂直邊距和水平邊距垂直邊距和水平邊距5 5選中段落，以圖片大小為基準(zhǔn)，選中段落，以圖片大小為基準(zhǔn)，設(shè)定段落的間距設(shè)定段落的間距6 6在印象師大網(wǎng)站站點(diǎn)中添加在印象師大網(wǎng)站站點(diǎn)中添加jianjie01.htmljianjie01.html網(wǎng)頁(yè)，實(shí)現(xiàn)網(wǎng)頁(yè)，實(shí)現(xiàn)文字和圖片的圖文混排。要求文字和圖片的圖文混排。要求: :添加三個(gè)段落（每個(gè)段落都有標(biāo)題，樣式為添加三個(gè)段落（每個(gè)段落都有標(biāo)題，樣式為“標(biāo)題標(biāo)題1 1”）添加水平線將三個(gè)段落分隔開(kāi)添加水平線將三個(gè)段落分隔開(kāi)將將三張三

18、張圖片圖片分別插入在文字段落中分別插入在文字段落中，圖片，圖片靠右對(duì)齊靠右對(duì)齊, ,并為每幅圖片添加提示文字并為每幅圖片添加提示文字效果如圖所示效果如圖所示提交時(shí)間：本次課提交時(shí)間：本次課移除移除WordWord產(chǎn)生的產(chǎn)生的無(wú)關(guān)無(wú)關(guān)HTMLHTML程序代碼程序代碼是否常遇到需要將是否常遇到需要將WordWord制作的內(nèi)容轉(zhuǎn)成網(wǎng)頁(yè)型態(tài)？制作的內(nèi)容轉(zhuǎn)成網(wǎng)頁(yè)型態(tài)？但該但該文檔文檔在在 Dreamweaver Dreamweaver 中開(kāi)啟時(shí)，卻夾帶中開(kāi)啟時(shí)，卻夾帶 Word Word 中不必要的中不必要的 HTML HTML 程序代碼，程序代碼，可以可以移除移除 Word Word 所產(chǎn)生的所產(chǎn)生的無(wú)關(guān)無(wú)關(guān) HTML HTML 程序代碼，讓網(wǎng)頁(yè)完整呈現(xiàn)。程序代碼，讓網(wǎng)頁(yè)完整呈現(xiàn)。1. 1. 在在 Dreamweaver Dreamweaver 中開(kāi)啟先前在中開(kāi)啟先前在 Word Word 中轉(zhuǎn)存成中轉(zhuǎn)存成網(wǎng)頁(yè)的檔案。網(wǎng)頁(yè)的檔案。2. 2. 選按菜單欄選按菜單欄 命令命令 清理清理 Word HTML Word HTML 開(kāi)啟對(duì)話框開(kāi)啟對(duì)話框進(jìn)行相關(guān)設(shè)定即可。進(jìn)行相關(guān)設(shè)定即可。返回返回要求：要求：將一個(gè)已經(jīng)進(jìn)行圖文混排處理的將一個(gè)已經(jīng)進(jìn)行圖文混排處理的wordword文檔轉(zhuǎn)存為文檔轉(zhuǎn)存為網(wǎng)頁(yè)格式，借助網(wǎng)頁(yè)格式，借助DreamweaverDreamweaver刪除冗余