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

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

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

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

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

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

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

7、圖像的基本操作 確保要捕獲的內(nèi)容所在頁面處于確保要捕獲的內(nèi)容所在頁面處于激活激活狀態(tài)狀態(tài) 選擇一個選擇一個“捕獲方案捕獲方案” 單擊單擊“捕獲捕獲”按鈕按鈕 點擊點擊 “ “完成完成”按鈕按鈕 選擇保存的文件格式，對所捕獲的圖像進行保存選擇保存的文件格式，對所捕獲的圖像進行保存捕獲方案的選取捕獲方案的選取范圍范圍以鼠標所選以鼠標所選擇的區(qū)域為擇的區(qū)域為保存的對象保存的對象窗口：窗口：只對出現(xiàn)在屏幕上的窗口中的對象進行捕獲只對出現(xiàn)在屏幕上的窗口中的對象進行捕獲 全屏幕全屏幕滾動窗口滾動窗口以滾動窗口中的內(nèi)容為標準范以滾動窗口中的內(nèi)容為標準范圍捕獲區(qū)域圖像圍捕獲區(qū)域圖像WebWeb頁（保留鏈接）頁

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

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

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

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

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

13、以正比例調(diào)整影像大小。方法方法2 2：在圖片屬性面板中輸入詳細設(shè)在圖片屬性面板中輸入詳細設(shè)置值置值注意注意：縮放影像時，過于放大影像會縮放影像時，過于放大影像會導(dǎo)致失真。導(dǎo)致失真。存在的問題：存在的問題：圖片的尺寸變小了，但占用的存儲空間沒有變化圖片的尺寸變小了，但占用的存儲空間沒有變化解決辦法：更新圖片調(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、，選按 屬性屬性 面板面板 裁切裁切將鼠標移至裁切框的任一控點上，呈現(xiàn)裁切箭頭將鼠標移至裁切框的任一控點上，呈現(xiàn)裁切箭頭按住鼠標左鍵不放拖拽裁切范圍按住鼠標左鍵不放拖拽裁切范圍按回車鍵或雙擊鼠標完成裁切動作按回車鍵或雙擊鼠標完成裁切動作 注意：注意：原始圖片將根據(jù)設(shè)置調(diào)整原始圖片將根據(jù)設(shè)置調(diào)整3 3、調(diào)整圖片的、調(diào)整圖片的亮度和對比亮度和對比當當圖片圖片太暗或太亮?xí)r，在選取太暗或太亮?xí)r，在選取圖片圖片的狀態(tài)下，于的狀態(tài)下，于 屬性屬性 面板選按面板選按 亮度和對比亮度和對比 鈕，開啟鈕，開啟 亮度亮度/ /對比對話框調(diào)整。對比對話框調(diào)整。4 4、圖片的、圖片的銳利化銳利化銳利化會增加對象邊緣四

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

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

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

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