dreamweaver網(wǎng)頁設(shè)計(jì)之：網(wǎng)頁中的圖片課件_第1頁
dreamweaver網(wǎng)頁設(shè)計(jì)之：網(wǎng)頁中的圖片課件_第2頁
dreamweaver網(wǎng)頁設(shè)計(jì)之：網(wǎng)頁中的圖片課件_第3頁
dreamweaver網(wǎng)頁設(shè)計(jì)之：網(wǎng)頁中的圖片課件_第4頁
dreamweaver網(wǎng)頁設(shè)計(jì)之：網(wǎng)頁中的圖片課件_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁中的圖片第三章網(wǎng)頁設(shè)計(jì)與制作.2023/7/29本章要求主要內(nèi)容：了解網(wǎng)頁中圖片的主要格式掌握與圖片相關(guān)的HTML標(biāo)簽掌握用Dreamweaver插入圖片，并能調(diào)整圖片的相關(guān)參數(shù)主要目的：學(xué)會使用HTML語言插入圖片掌握在Dreamweaver中修改圖片尺寸的方法。能夠創(chuàng)建網(wǎng)站相冊.2023/7/292本章內(nèi)容與圖片相關(guān)的HTML標(biāo)簽

3.2實(shí)踐與練習(xí)：修改圖片大小

3.4使用Dreamweaver

8插入圖片

3.3網(wǎng)頁中的圖片格式3.1實(shí)踐與練習(xí)：對齊圖像

3.5小結(jié)

.2023/7/293第3章網(wǎng)頁中的圖片圖片是網(wǎng)頁中不可缺少的元素，巧妙地在網(wǎng)頁中使用圖片可以為網(wǎng)頁增色不少。本章先介紹在網(wǎng)頁中常用的兩種圖片格式，再介紹如何在網(wǎng)頁中插入圖片，以及圖片的樣式和插入的位置。.2023/7/2943.1網(wǎng)頁中的圖片格式Web頁中通常使用的圖像文件有JPEG、GIF、PNG3種格式，但最常用的網(wǎng)頁圖片為JPEG、GIF兩種圖像格式。為了保證瀏覽者下載網(wǎng)頁的速度，常使用JPEG和GIF這兩種壓縮格式的圖像。GIF文件JPEG文件PNG文件.2023/7/2953.1網(wǎng)頁中的圖片格式目前在網(wǎng)頁上使用的圖片格式主要是GIF和JPG兩種。GIF格式即為圖像交換格式。GIF格式只支持256色以內(nèi)的圖像，且采用無損壓縮存儲，在不影響圖像質(zhì)量的情況下，可以生成很小的文件；同時(shí)它支持透明色，可以使圖像浮現(xiàn)在背景之上；其為交換格式，在瀏覽器下載整張圖片之前，用戶就可以看到該圖像，所以在網(wǎng)頁制作中首選的圖片格式為GIF。JPG格式為靜態(tài)圖像壓縮標(biāo)準(zhǔn)格式。它為攝影圖片提供了一種標(biāo)準(zhǔn)的有損耗壓縮方案。在保存時(shí)能夠?qū)⑷搜蹮o法分辨的資料刪除,以節(jié)省存儲空間,但這些被刪除的資料無法在解壓時(shí)還原。.2023/7/2963.1網(wǎng)頁中的圖片格式在網(wǎng)頁中使用圖像時(shí)應(yīng)該注意的幾個(gè)問題1．網(wǎng)頁的圖像文件要小2．控制網(wǎng)頁中圖像的數(shù)量和質(zhì)量3．在網(wǎng)頁中恰到好處地添加動畫.2023/7/2973.2與圖片相關(guān)的HTML標(biāo)簽1、插入圖片

<img>標(biāo)簽的作用就是插入圖片，其中屬性“src”是該標(biāo)簽的必要屬性，該屬性指定導(dǎo)入圖片的導(dǎo)入位置和名稱。注意：導(dǎo)入的圖片與HTML文件是出于同一目錄下的，如果不處于同一目錄下，可以采用設(shè)置路徑的方式來導(dǎo)入。關(guān)于路徑的概念在下一章中進(jìn)行介紹。.2023/7/2983.2與圖片相關(guān)的HTML標(biāo)簽【例】在網(wǎng)頁中插入圖片示例<html><head><title>圖片的插入</title></head><body>

<imgsrc=01.jpg></body></html>.2023/7/2993.2與圖片相關(guān)的HTML標(biāo)簽圖片的插入.2023/7/29103.2與圖片相關(guān)的HTML標(biāo)簽

2、圖片標(biāo)簽屬性的應(yīng)用“width”“height”“border”“alt”.2023/7/29113.2與圖片相關(guān)的HTML標(biāo)簽①“width”和“height”屬性控制圖片大小依靠“width”和“height”屬性：“width”屬性控制圖片的寬度，“height”屬性控制圖片的高度。當(dāng)圖片只設(shè)置了其中一個(gè)屬性的時(shí)候，另一個(gè)屬性就自動依照原始圖片的兩個(gè)屬性值的比例變化。如圖片原始大小為80*60，當(dāng)只設(shè)置了該圖片的顯示寬度為160，高度將自動以？來顯示。.2023/7/29123.2與圖片相關(guān)的HTML標(biāo)簽“width”和“height”屬性寬度和高度的語法結(jié)構(gòu)：<imgwidth=n>或<imgheight=n><imgwidth=m%>或<imgwidth=m%>其中，n代表一個(gè)數(shù)值，單位為像素，

m代表0～100的數(shù)，即m%的取值范圍為0%～m%，圖片將以相對于當(dāng)前窗口大小的百分比來表示。.2023/7/29133.2與圖片相關(guān)的HTML標(biāo)簽【例】圖片大小控制示例<html><head><title>圖片的大小控制</title></head><body><imgsrc=01.jpg><imgsrc=01.jpgheight=100><imgsrc=01.jpgwidth=100><imgsrc=01.jpgheight=150width=200><imgsrc=01.jpgheight=50%><imgsrc=01.jpgwidth=50%></body></html>.2023/7/29143.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/2915②Border屬性主要是用來給圖片的周圍加上指定粗細(xì)的邊框。語法結(jié)構(gòu)：<imgborder=n>其中，n為一個(gè)數(shù)值，單位為像素。3.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/2916【例】圖片邊框設(shè)置示例<html><head><title>圖片的邊框</title></head><body><imgsrc=01.jpgwidth=80height=60border=6><imgsrc=01.jpgwidth=120height=100border=4><imgsrc=01.jpgwidth=160height=140border=2></body></html>

3.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/29173.2與圖片相關(guān)的HTML標(biāo)簽圖片的邊框.2023/7/2918③alt屬性“alt”屬性用來設(shè)置代替圖片的文字，其屬性值設(shè)置的是在圖片不能顯示時(shí)轉(zhuǎn)而顯示的文字。3.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/2919【例】圖片替代文字設(shè)置示例<html><head><title>文字代替圖片</title></head><body><imgsrc=01.jpgalt=兩只小熊><br>

文字代替圖片

</body></html>3.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/29203.2與圖片相關(guān)的HTML標(biāo)簽正常顯示圖片無法顯示，文字代替圖片.2023/7/29213.2與圖片相關(guān)的HTML標(biāo)簽測試時(shí)可能會發(fā)現(xiàn)瀏覽器不會不顯示圖片，那是因?yàn)閳D片就在本地計(jì)算機(jī)中，可以先關(guān)閉瀏覽器中顯示圖片的功能。.2023/7/2922取消顯示圖片3.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/29233.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/29243.2與圖片相關(guān)的HTML標(biāo)簽.2023/7/29253.3使用Dreamweaver

8插入圖片將文本光標(biāo)移到要插入圖片的地方,選擇“插入”菜單中的“圖像”命令，在出現(xiàn)的文件選擇對話框中選擇要插入的圖片文件。在目錄窗口下方有一行“相對于”下拉框，選擇“文檔”為與文檔的相對路徑，另一個(gè)選項(xiàng)是與根目錄的相對路徑，通常選擇“文檔”。.2023/7/2926設(shè)置圖片屬性3.3使用Dreamweaver

8插入圖片插入圖像后，在“屬性”面板中顯示該圖像的屬性。.2023/7/2927給圖片添加文字說明當(dāng)圖片不能在瀏覽器中正常顯示時(shí)，網(wǎng)頁中圖片的位置就變成空白區(qū)域。為了讓瀏覽者在不能正常圖片顯示時(shí)也能了解圖片的信息，常為網(wǎng)頁的圖像設(shè)置“替換”屬性。

“替換文本”的作用是當(dāng)發(fā)布站點(diǎn)之后，因?yàn)榫W(wǎng)速或者其他因素造成圖片不能很快顯示時(shí)，替換的文本內(nèi)容就可以優(yōu)先顯示出來，以減少瀏覽者因長時(shí)間等待圖片而產(chǎn)生的疲倦感。.2023/7/2928插入圖像占位符在網(wǎng)頁布局時(shí)，網(wǎng)站設(shè)計(jì)者需要先設(shè)計(jì)圖像在網(wǎng)頁中的位置，等設(shè)計(jì)方案通過后，再將這個(gè)位置變成具體圖像。Dreamweaver提供的“圖像占位符”功能，可滿足上述需求。 在網(wǎng)頁中插入圖像占位符的具體操作步驟如下。 （1）在文檔窗口中，將插入點(diǎn)放置在要插入占位符圖形的位置。 （2）通過以下幾種方法啟用“圖像占位符”命令，彈出“圖像占位符”對話框。 選擇“插入”面板“常用”選項(xiàng)卡，單擊“圖像”展開式工具按鈕，選擇“圖像占位符”選項(xiàng)。 選擇“插入記錄>圖像對象>圖像占位符”命令。.2023/7/2929插入鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是指在瀏覽器中查看網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)指針經(jīng)過該圖像時(shí)顯示另外一幅圖像的動態(tài)圖像效果。插入鼠標(biāo)經(jīng)過圖像需要準(zhǔn)備兩幅圖像。.2023/7/2930插入導(dǎo)航條選擇【插入】|【圖像對象】|【導(dǎo)航條】命令，或者單擊【插入】工具欄【常規(guī)】類別中的【圖像】按鈕，從彈出的下拉菜單中選擇【導(dǎo)航條】命令，彈出【插入導(dǎo)航條】命令，根據(jù)需要設(shè)置其中的選項(xiàng)，即可創(chuàng)建導(dǎo)航條。.2023/7/2931【插入導(dǎo)航條】對話框.2023/7/2932插入FLASH選擇【插入】|【媒體對象】|【FLASH】命令。.2023/7/29333.4實(shí)踐與練習(xí)：修改圖片大小本練習(xí)的目的是掌握在Dreamweaver8中修改圖片尺寸的方法和“重新取樣”按鈕的功能。.2023/7/2934預(yù)覽效果.2023/7/2935輸入文字.2023/7/2936提示框

.2023/7/2937將圖片放置到站點(diǎn)目錄下

.2023/7/2938設(shè)置替換文本.2023/7/2939插入圖片

.2023/7/2940當(dāng)前圖片的尺寸

.2023/7/2941在屬性面板中修改圖片的尺寸

.2023/7/2942恢復(fù)原始尺寸

.2023/7/2943縮小后的圖片效果

.2023/7/2944直接修改圖片的尺寸

.2023/7/2945啟用“重新取樣”功能

.2023/7/2946有關(guān)提示信息的對話框

.2023/7/2947“重新取樣”后的圖片

.2023/7/2948居中對齊圖片.2023/7/2949預(yù)覽效果.2023/7/2950創(chuàng)建網(wǎng)站相冊在開始創(chuàng)建網(wǎng)站相冊之前，將相冊的所有圖像放置在一個(gè)文件夾中，并確保圖像文件名的擴(kuò)展名為：“.Gif”、“.Jpg”、“.Jpeg”、“.Png”、“.Psd”、“.Tif”或“.Tiff”。首先，使用Fireworks來為該文

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論