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

上一講回顧設(shè)置文本屬性CSS模式用于設(shè)定文字本身格式HTML模式用于設(shè)定文字段落格式為文字添加移動(dòng)屬性<marquee>本講主要內(nèi)容網(wǎng)頁(yè)圖像的使用添加圖片編輯圖片圖文混排鼠標(biāo)經(jīng)過圖像的添加制作滾動(dòng)圖片一、網(wǎng)頁(yè)圖像的使用如果網(wǎng)頁(yè)中滿是密密麻麻的文字，無論有多精彩的內(nèi)容也會(huì)令人望之卻步！所以圖片的加注在網(wǎng)頁(yè)設(shè)計(jì)中占了相當(dāng)?shù)匚?，沒有圖片來相輔，網(wǎng)站就算不上完美。在保證畫質(zhì)的前提下盡可能使圖片的數(shù)據(jù)量小一些，這樣有利用戶快速的瀏覽我們的網(wǎng)頁(yè)。插入圖片前先把網(wǎng)頁(yè)保存一下，以免圖片丟失圖片要放在網(wǎng)頁(yè)的同一個(gè)目錄或子目錄下網(wǎng)頁(yè)、圖片文件名只能是英文或數(shù)字不能用中文1、使用圖片的原則.GIF格式特點(diǎn)：它的圖片數(shù)據(jù)量小，可以帶有動(dòng)畫信息，且可以透明背景顯示，但最高只支持256種顏色。用途：大量用于網(wǎng)站的圖標(biāo)Logo、廣告條Banner及網(wǎng)頁(yè)背景圖像。但由于受到顏色的限制，不適合用于照片級(jí)的網(wǎng)頁(yè)圖像。2、網(wǎng)頁(yè)中常用的圖片格式.JPEG/.JPG格式特點(diǎn)：可以高效地壓縮圖片的數(shù)據(jù)量。使圖片文件變小的同時(shí)基本不丟失顏色畫質(zhì)。用途：通常用于顯示照片等顏色豐富的精美圖像。2、網(wǎng)頁(yè)中常用的圖片格式實(shí)踐任務(wù)1借助互聯(lián)網(wǎng)查詢.JPEG/.JPG格式有何區(qū)別？?jī)煞N格式之間可以如何進(jìn)行轉(zhuǎn)換？.PNG格式特點(diǎn)：是一種逐步流行的網(wǎng)絡(luò)圖像格式。既融合了GIF能做成透明背景的特點(diǎn)，又具有JPEG處理精美圖像的優(yōu)點(diǎn)。用途：常用于制作網(wǎng)頁(yè)效果圖。2、網(wǎng)頁(yè)中常用的圖片格式網(wǎng)上下載或購(gòu)買素材光盤照相機(jī)、攝像機(jī)、手機(jī)具有一定繪畫水平的用戶，可自己繪制掃描儀掃描圖片從電腦顯示屏抓取圖像3、圖片的獲取用PrintScreen鍵直接抓取〈1〉截取全屏幕畫面操作步驟：①屏幕上出現(xiàn)所需抓取的圖像②按下鍵盤上的PrintScreenSysRp(屏幕打印)鍵，則圖像被保存到了Windows剪貼板中。③啟動(dòng)畫圖或Photoshop等軟件。④執(zhí)行“Ctrl+V”組合鍵，把圖片粘貼到軟件中。⑤保存圖片?！?〉截取當(dāng)前活動(dòng)窗口操作步驟：①按住PrintScreen的同時(shí)按下Alt鍵②粘貼、保存圖片。借助軟件進(jìn)行截圖QQ截圖SnagItSnagIt主界面用SnagIt抓取圖像的基本操作確保要捕獲的內(nèi)容所在頁(yè)面處于激活狀態(tài)選擇一個(gè)“捕獲方案”單擊“捕獲”按鈕點(diǎn)擊“完成”按鈕選擇保存的文件格式，對(duì)所捕獲的圖像進(jìn)行保存捕獲方案的選取范圍以鼠標(biāo)所選擇的區(qū)域?yàn)楸４娴膶?duì)象窗口：只對(duì)出現(xiàn)在屏幕上的窗口中的對(duì)象進(jìn)行捕獲全屏幕滾動(dòng)窗口以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范圍捕獲區(qū)域圖像Web頁(yè)（保留鏈接）以滾動(dòng)窗口中的內(nèi)容為標(biāo)準(zhǔn)范圍捕獲區(qū)域圖像，并保留其中的超鏈接保存為*.mht文件對(duì)象只對(duì)出現(xiàn)在屏幕中的圖標(biāo)進(jìn)行捕獲菜單的時(shí)間延遲捕獲10秒鐘內(nèi)操作的菜單窗口文字捕獲一個(gè)窗口內(nèi)的所有文字部分實(shí)踐任務(wù)2借助snagit練習(xí)采用不同捕獲方案截取圖片返回方法1：利用菜單(插入→圖像)方法2：利用工具欄(插入面板→常用→圖像)123二、插入圖片<img>標(biāo)記在HTML文檔中，引用圖片必須用<img>標(biāo)記?；菊Z(yǔ)法：<imgsrc=“url”>語(yǔ)法解釋：

src的屬性值為所引用的圖片的URL地址。

src屬性是必須的。

url可以是絕對(duì)地址，也可以是相對(duì)地址。屬性功能說明srcwidthheighthspacevspacealignborderalt指定圖片源，即圖片的URL路徑指定圖片的顯示寬度指定圖片的顯示高度指定圖片的水平間距指定圖片的垂直間距指定圖片的對(duì)齊方式指定圖片的邊框大小顯示圖片的說明文字<img>標(biāo)記包含的其他屬性：原因：正確認(rèn)識(shí)替換文本的功能當(dāng)圖片不能顯示時(shí)，鼠標(biāo)經(jīng)過圖片時(shí)會(huì)顯示替換文字的內(nèi)容；當(dāng)圖片可以顯示時(shí)，鼠標(biāo)經(jīng)過圖片時(shí)，替換文字就不會(huì)顯示出來了。設(shè)計(jì)時(shí)存在的問題：

鼠標(biāo)經(jīng)過圖片時(shí)圖片上的替換文本不顯示強(qiáng)制為圖片添加提示文字解決辦法：為圖片添加title屬性用法如下：

<imgsrc=“1.jpg”title=“提示文字">設(shè)定網(wǎng)頁(yè)背景圖片選按屬性面板頁(yè)面屬性鈕或選按菜單欄修改\頁(yè)面屬性，開啟對(duì)話框進(jìn)行操作：提示：可以設(shè)置重復(fù)屬性來設(shè)置背景顯示區(qū)域回顧返回選中圖片，打開圖片屬性面板圖像的數(shù)據(jù)量給圖片編號(hào)，以便區(qū)分以像素為單位修改圖片的尺寸輸入數(shù)值為圖片添加邊框重設(shè)大小按鈕三、使用Dreamweaver編輯圖片1、調(diào)整圖片大小方法1：目視調(diào)整圖片大小選取圖片后，將鼠標(biāo)指針移至圖片對(duì)象右下角的縮放控點(diǎn)，當(dāng)呈時(shí)，按Shift鍵不放再拖曳該縮放控點(diǎn)即可以正比例調(diào)整影像大小。方法2：在圖片屬性面板中輸入詳細(xì)設(shè)置值注意：縮放影像時(shí)，過于放大影像會(huì)導(dǎo)致失真。存在的問題：

圖片的尺寸變小了，但占用的存儲(chǔ)空間沒有變化解決辦法：更新圖片調(diào)整尺寸后的數(shù)據(jù)量在選取圖片的狀態(tài)下，于屬性面板設(shè)重新取樣。重新取樣1234注意：原始圖片將根據(jù)設(shè)置調(diào)整2、圖片的裁切選取圖片后，選按屬性面板裁切將鼠標(biāo)移至裁切框的任一控點(diǎn)上，呈現(xiàn)裁切箭頭按住鼠標(biāo)左鍵不放拖拽裁切范圍按回車鍵或雙擊鼠標(biāo)完成裁切動(dòng)作

注意：原始圖片將根據(jù)設(shè)置調(diào)整3、調(diào)整圖片的亮度和對(duì)比當(dāng)圖片太暗或太亮?xí)r，在選取圖片的狀態(tài)下，于屬性面板選按亮度和對(duì)比鈕，開啟亮度/對(duì)比對(duì)話框調(diào)整。4、圖片的銳利化銳利化會(huì)增加對(duì)象邊緣四周的像素對(duì)比，并增加影像的清晰度或模糊度。5、為圖片添加不同顏色的邊框使用“Border”屬性直接設(shè)置邊框的寬度拖動(dòng)鼠標(biāo)選擇圖片對(duì)象（注意不是點(diǎn)擊選中）使用css模式設(shè)定顏色6、借助第三方軟件編輯圖片返回預(yù)備知識(shí)：設(shè)定圖片的對(duì)齊方式12注意：圖片屬性面板中的對(duì)齊設(shè)置表示的是在一行中圖形和文本的對(duì)齊方式（即：垂直方向）四、圖文混排設(shè)計(jì)要求：圖片和段落一起水平居中解決辦法：在css樣式中設(shè)定圖片的對(duì)齊方式首先將鼠標(biāo)放在在段落的最左邊進(jìn)入css模式，選中居中，圖片將居中顯示圖文混排實(shí)例設(shè)計(jì)要求：圖片左對(duì)齊；垂直邊距和水平邊距為20；段落間距為4512添加文字段落光標(biāo)定位在段首插入圖片3選中圖片在圖片屬性面板中設(shè)置對(duì)齊4選中圖片在圖片屬性面板設(shè)置圖片垂直邊距和水平邊距5選中段落，以圖片大小為基準(zhǔn)，設(shè)定段落的間距6在「印象師大」網(wǎng)站站點(diǎn)中添加jianjie01.html網(wǎng)頁(yè)，實(shí)現(xiàn)文字和圖片的圖文混排。要求:添加三個(gè)段落（每個(gè)段落都有標(biāo)題，樣式為“標(biāo)題1”）添加水平線將三個(gè)段落分隔開將三張圖片分別插入在文字段落中，圖片靠右對(duì)齊,并為每幅圖片添加提示文字效果如圖所示提交時(shí)間：本次課實(shí)踐任務(wù)3實(shí)踐任務(wù)3效果圖移除Word產(chǎn)生的無關(guān)HTML程序代碼是否常遇到需要將Word制作的內(nèi)容轉(zhuǎn)成網(wǎng)頁(yè)型態(tài)？但該文檔在Dreamweaver中開啟時(shí)，卻夾帶Word中不必要的HTML程序代碼，可以移除Word所產(chǎn)生的無關(guān)HTML程序代碼，讓網(wǎng)頁(yè)完整呈現(xiàn)。小竅門1.在Dreamweaver中開啟先前在Word中轉(zhuǎn)存成網(wǎng)頁(yè)的檔案。2.選按菜單欄命令\清理WordHTML開啟對(duì)話框進(jìn)行相關(guān)設(shè)定即可。返回要求：將一個(gè)已經(jīng)進(jìn)行圖文混排處理的word文檔轉(zhuǎn)存為網(wǎng)頁(yè)格式，借助Dreamweaver刪除冗余代碼。提交形式：word原文檔、消除冗余代碼后的網(wǎng)頁(yè)文檔提交時(shí)間：本次課實(shí)踐任務(wù)4“插入”“圖像對(duì)象”“鼠標(biāo)經(jīng)過圖像”實(shí)例五、鼠標(biāo)經(jīng)過更換圖像在「印象師大」網(wǎng)站站點(diǎn)中添加jianjie02.html網(wǎng)頁(yè)，實(shí)現(xiàn)文字和圖片的圖文混排。要求:添加四個(gè)文字段落添加水平線將標(biāo)題與段落隔開將2個(gè)鼠標(biāo)經(jīng)過圖像分別插入在文字段落中，圖片1靠右對(duì)齊,圖片2靠左對(duì)齊，并為每幅圖片添加提示文字效果如圖所示提交時(shí)間：本次課實(shí)踐任務(wù)5實(shí)踐任務(wù)5效果圖返回思路：把滾動(dòng)字幕中的文字改為圖片即可<marquee><