dreamweaver網(wǎng)頁(yè)設(shè)計(jì)之：網(wǎng)頁(yè)中的圖片

《dreamweaver網(wǎng)頁(yè)設(shè)計(jì)之：網(wǎng)頁(yè)中的圖片》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、網(wǎng)頁(yè)中的圖片第三章網(wǎng)頁(yè)設(shè)計(jì)與制作2021/10/8本章要求主要內(nèi)容：了解網(wǎng)頁(yè)中圖片的主要格式掌握與圖片相關(guān)的HTML標(biāo)簽掌握用Dreamweaver插入圖片，并能調(diào)整圖片的相關(guān)參數(shù)主要目的：學(xué)會(huì)使用HTML語(yǔ)言插入圖片掌握在Dreamweaver中修改圖片尺寸的方法。能夠創(chuàng)建網(wǎng)站相冊(cè)2021/10/82本章內(nèi)容與圖片相關(guān)的HTML標(biāo)簽3.2實(shí)踐與練習(xí)：修改圖片大小3.4使用Dreamweaver8插入圖片3.3網(wǎng)頁(yè)中的圖片格式3.1實(shí)踐與練習(xí)：對(duì)齊圖像3.5小結(jié)2021/10/83第3章網(wǎng)頁(yè)中的圖片圖片是網(wǎng)頁(yè)中不可缺少的元素，巧妙地在網(wǎng)頁(yè)中使用圖片可以為網(wǎng)頁(yè)增色不少。本章先介

2、紹在網(wǎng)頁(yè)中常用的兩種圖片格式，再介紹如何在網(wǎng)頁(yè)中插入圖片，以及圖片的樣式和插入的位置。2021/10/843.1網(wǎng)頁(yè)中的圖片格式Web頁(yè)中通常使用的圖像文件有JPEG、GIF、PNG3種格式，但最常用的網(wǎng)頁(yè)圖片為JPEG、GIF兩種圖像格式。為了保證瀏覽者下載網(wǎng)頁(yè)的速度，常使用JPEG和GIF這兩種壓縮格式的圖像。GIF文件JPEG文件PNG文件2021/10/853.1網(wǎng)頁(yè)中的圖片格式目前在網(wǎng)頁(yè)上使用的圖片格式主要是GIF和JPG兩種。GIF格式即為圖像交換格式。GIF格式只支持256色以內(nèi)的圖像，且采用無(wú)損壓縮存儲(chǔ)，在不影響圖像質(zhì)量的情況下，可以生成很小的文件；同時(shí)它支持

3、透明色，可以使圖像浮現(xiàn)在背景之上；其為交換格式，在瀏覽器下載整張圖片之前，用戶就可以看到該圖像，所以在網(wǎng)頁(yè)制作中首選的圖片格式為GIF。JPG格式為靜態(tài)圖像壓縮標(biāo)準(zhǔn)格式。它為攝影圖片提供了一種標(biāo)準(zhǔn)的有損耗壓縮方案。在保存時(shí)能夠?qū)⑷搜蹮o(wú)法分辨的資料刪除,以節(jié)省存儲(chǔ)空間,但這些被刪除的資料無(wú)法在解壓時(shí)還原。2021/10/863.1網(wǎng)頁(yè)中的圖片格式在網(wǎng)頁(yè)中使用圖像時(shí)應(yīng)該注意的幾個(gè)問(wèn)題1．網(wǎng)頁(yè)的圖像文件要小2．控制網(wǎng)頁(yè)中圖像的數(shù)量和質(zhì)量3．在網(wǎng)頁(yè)中恰到好處地添加動(dòng)畫2021/10/873.2與圖片相關(guān)的HTML標(biāo)簽1、插入圖片標(biāo)簽的作用就是插入圖片，其中屬性“src”是該

4、標(biāo)簽的必要屬性，該屬性指定導(dǎo)入圖片的導(dǎo)入位置和名稱。注意：導(dǎo)入的圖片與HTML文件是出于同一目錄下的，如果不處于同一目錄下，可以采用設(shè)置路徑的方式來(lái)導(dǎo)入。關(guān)于路徑的概念在下一章中進(jìn)行介紹。2021/10/883.2與圖片相關(guān)的HTML標(biāo)簽【例】在網(wǎng)頁(yè)中插入圖片示例2021/10/893.2與圖片相關(guān)的HTML標(biāo)簽圖片的插入2021/10/8103.2與圖片相關(guān)的HTML標(biāo)簽2、圖片標(biāo)簽屬性的應(yīng)用“width”“height”“bo

5、rder”“alt”2021/10/8113.2與圖片相關(guān)的HTML標(biāo)簽①“width”和“height”屬性控制圖片大小依靠“width”和“height”屬性：“width”屬性控制圖片的寬度，“height”屬性控制圖片的高度。當(dāng)圖片只設(shè)置了其中一個(gè)屬性的時(shí)候，另一個(gè)屬性就自動(dòng)依照原始圖片的兩個(gè)屬性值的比例變化。如圖片原始大小為80*60，當(dāng)只設(shè)置了該圖片的顯示寬度為160，高度將自動(dòng)以？來(lái)顯示。2021/10/8123.2與圖片相關(guān)的HTML標(biāo)簽“width”和“height”屬性寬度和高度的語(yǔ)法結(jié)構(gòu)：或

6、th=m%>或其中，n代表一個(gè)數(shù)值，單位為像素，m代表0～100的數(shù)，即m%的取值范圍為0%～m%，圖片將以相對(duì)于當(dāng)前窗口大小的百分比來(lái)表示。2021/10/8133.2與圖片相關(guān)的HTML標(biāo)簽【例】圖片大小控制示例

7、2021/10/8143.2與圖片相關(guān)的HTML標(biāo)簽2021/10/815②Border屬性主要是用來(lái)給圖片的周圍加上指定粗細(xì)的邊框。語(yǔ)法結(jié)構(gòu)：其中，n為一個(gè)數(shù)值，單位為像素。3.2與圖片相關(guān)的HTML標(biāo)簽2021/10/816【例】圖片邊框設(shè)置示例