網(wǎng)頁制作教程-第3章圖像與超鏈接_第1頁
網(wǎng)頁制作教程-第3章圖像與超鏈接_第2頁
網(wǎng)頁制作教程-第3章圖像與超鏈接_第3頁
網(wǎng)頁制作教程-第3章圖像與超鏈接_第4頁
網(wǎng)頁制作教程-第3章圖像與超鏈接_第5頁
已閱讀5頁，還剩64頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第3章圖像與超鏈接3.1Web頁圖像基礎(chǔ)3.2

圖像標(biāo)記符IMG3.3

在頁面中顯示動畫3.4創(chuàng)建超鏈接3.5

使用圖像映射3.1Web頁圖像基礎(chǔ)

3.1.1Web頁圖像格式

GIF格式對于目前廣泛使用的GIF格式而言，還具有透明色的特點(diǎn)，即可以將圖片中的某種顏色設(shè)置為透明色。這對于實(shí)現(xiàn)某些網(wǎng)頁效果來說，具有非?，F(xiàn)實(shí)的意義。例如，圖3-1對比了一般的GIF圖像和具有透明色的GIF圖像。對于多數(shù)圖像處理軟件（例如Fireworks）甚至某些網(wǎng)頁制作軟件（例如FrontPage），都提供了將圖片中的某種顏色轉(zhuǎn)換為透明色的功能。圖3-1普通GIF與透明GIF的區(qū)別JPEG格式圖3-2中顯示了兩種不同壓縮比率的JPEG圖的效果。圖3-2不同質(zhì)量JPEG圖像的對比PNG格式

矢量格式位圖格式與矢量格式的區(qū)別如圖

3-3所示。

位圖，用點(diǎn)描述圖像矢量圖，用線條等數(shù)學(xué)信息描述圖像圖

3-3位圖與矢量圖的對比

3.1.2選擇圖形圖像處理軟件

PhotoshopPhotoshop6.0的界面如圖3-4所示。圖3-4Photoshop6.0的基本界面FireworksFlashFlash界面如圖

3-5、3-6所示。圖

3-5Fireworks4.0基本界面圖3-6Flash5.0基本界面3.1.3使用網(wǎng)頁圖像的要點(diǎn)

確保文件較小1．使圖像具有所需的像素大小所謂圖像的像素大小就是指由圖像本身的像素寬和像素高所確定的圖像大小，例如，在同一種顯示模式下，一個1024×768的圖像就顯然比800×600的圖像大的多。在大多數(shù)情況下，如要將原來像素大小比較大的圖像縮小，應(yīng)使用圖形圖像處理軟件更改圖像的“ImageSize”。一般在修改之后，圖像的文件大小會顯著變化。例如，在Photoshop6.0中，可以使用“Image”菜單中的“ImageSize”命令，此時彈出如圖3-7所示的“ImageSize”對話框，可以在其中更改圖像的寬度、高度和分辨率。圖3-7Photoshop6.0的“ImageSize”對話框2．采用正確的格式進(jìn)行優(yōu)化處理一般圖形圖像處理軟件都可以進(jìn)行這些工作。例如，在Photoshop6.0中，如果要設(shè)置圖像的格式和優(yōu)化選項(xiàng)，可以先將圖像文件打開，然后選擇“File”菜單中的“SaveforWeb”命令，此時打開如圖3-8所示的“SaveforWeb”對話框。圖3-8“SaveforWeb”對話框圖3-8“SaveforWeb”對話框

控制圖像的數(shù)量和質(zhì)量

合理使用動畫3.2

圖像標(biāo)記符

IMG3.2.1插入圖像

以下HTML代碼說明了如何在網(wǎng)頁中插入一個圖像，在瀏覽器中的顯示效果如圖3-9所示。<HTML><HEAD><TITLE>插入圖像示例</TITLE></HEAD><BODY><P>我插入的第一幅圖像：</P><IMGsrc="oldMM.gif"alt="oldMM"></BODY></HTML>3.2.2設(shè)置圖像屬性

指定圖像的寬和高

圖像的邊框

設(shè)置圖像周圍的空白

圖像的對齊1．圖像在頁面中的對齊設(shè)置圖像在頁面中的對齊與設(shè)置文本對齊類似，可以使用DIV或P標(biāo)記符將IMG標(biāo)記符括起來，然后使用align屬性。例如，以下HTML語句將使圖像居中對齊（圖像默認(rèn)時與文本一樣是左對齊的）：<Palign="center"><IMGsrc="oldMM.gif"alt="oldMM"></P>

效果如圖3-10所示。圖

3-10圖像在頁面中居中對齊

2．圖像與周圍內(nèi)容的垂直對齊以下HTML代碼說明了align屬性如何控制文本與圖像的垂直對齊（同時顯示了border屬性的效果），如圖3-11所示。<HTML><HEAD><TITLE>文本與圖像的垂直對齊示例</TITLE></HEAD><BODY><DIValign="center"><P>此圖像與文本<IMGsrc="nba.gif"border="1"align="top">頂部對齊</P><P>此圖像與文本<IMGsrc="nba.gif"border="1"align="middle">中央對齊</P><P>此圖像與文本<IMGsrc="nba.gif"border="1"align="bottom">底部對齊</P></DIV></BODY></HTML>圖3-11文字與圖像的垂直對齊3．圖文混排時的圖像對齊以下HTML代碼顯示了文本與圖像的環(huán)繞效果（同時顯示了hspace

和vspace

屬性的效果），如圖3-12所示。<HTML><HEAD><TITLE>文本與圖像的環(huán)繞示例</TITLE></HEAD><BODY>

<P><IMGsrc="barbarian.jpg"align="right"hspace="10"vspace="10">野蠻人--文明邊緣的幾個部落中的成員之一，拒絕一切看起來溫柔和軟弱的事物對他的影響。在部落之間的不斷戰(zhàn)爭中他活了下來，這得益于堅(jiān)定的意志和強(qiáng)健的體格。雖然缺乏文明人的心計(jì)，但是他能夠敏銳的感覺到周圍的環(huán)境，因?yàn)檫@一切來自他那動物般的直覺，這也使得野蠻人讓人想起了民間關(guān)于狼人的一些傳說。事實(shí)上他們堅(jiān)信能夠召喚圖騰上動物的靈魂來鼓舞他們，并且因而得到非凡的力量和能力，不過這些召喚只是改善他們早已完美的戰(zhàn)斗技能罷了。</P>

<P><IMGsrc="sorceress.jpg"align="left"hspace="10"vspace="10">女巫——反叛的女人，她從東方男性魔法師占優(yōu)勢的魔法部落中偷取了如何使用魔法的秘密，使她成為了使用神秘巫術(shù)的專家，盡管她在白刃戰(zhàn)斗中有很大不足，但她可以使用兇猛的進(jìn)攻和防御魔法來彌補(bǔ)這一點(diǎn)不足。狐獨(dú)和隱居的個性使很多人不理解她，有時候她看起來反復(fù)無常，但是事實(shí)上，她懂得怎樣在次序和混亂中找到勝利的真諦。</P><BODY></HTML>圖3-12文本與圖像的環(huán)繞示例3.3在頁面中顯示動畫3.3.1動畫的基本原理

3.3.2使用

Flash動畫

以下我們用Flash5.0制作一個簡單的動畫實(shí)例，來體會一下Flash動畫的優(yōu)越性，步驟如下：（1）啟動Flash5.0。（2）單擊工具面板上的橢圓工具，然后在工具面板的填充色區(qū)域選擇一種填充顏色，按住【Shift】鍵的同時在畫布上拖動鼠標(biāo)，繪制一個圓形，如圖3-14所示。（3）單擊工具面板上的箭頭工具，按住鼠標(biāo)左鍵不放，從圓形左上向右下拖動，圈選整個圓形，然后釋放鼠標(biāo)，如圖3-15所示。圖3-14繪制圓形圖3-15選中剛繪制的圓形（4）選擇“Modify”菜單中的“Group”命令，或者直接按【Ctrl+G】鍵，將圓形對象群組。（5）在時間線面板的第20幀處單擊鼠標(biāo)右鍵，然后選擇“InsertKeyframe”（插入關(guān)鍵幀）命令，如圖3-16所示。（6）用箭頭工具將圓形移動到畫布右邊，選擇“Window”菜單“Panels”（浮動面板）子菜單中的“Transform”（變形）命令，打開變形面板，選中“Constrain”（鎖定縱橫比）選項(xiàng)，然后在寬度框中輸入50%，最后按【Enter】鍵，如圖3-17所示。

圖3-16添加關(guān)鍵幀圖3-17移動圓形并將其變形（7）在時間線上第1幀到第20幀之間的任意幀上單擊鼠標(biāo)右鍵，然后選擇“CreateMotionTween”（創(chuàng)建運(yùn)動漸變）命令，如圖3-18所示。（8）此時Flash將自動生成動畫效果，在第1幀到第20幀之間出現(xiàn)一個箭頭，表示動畫創(chuàng)建成功。（9）按【Ctrl+Enter】鍵查看動畫效果，我們發(fā)現(xiàn)圓形可以自動從左向右滾動，并且在滾動的過程中，圓形會縮小。圖3-18創(chuàng)建漸變動畫

根據(jù)以上創(chuàng)建過程，我們發(fā)現(xiàn)在Flash中制作動畫效果是非常簡單的，很多時候并不需要我們一幅圖一幅圖地畫，因?yàn)镕lash能自動生成所需要的圖。有關(guān)用Flash制作動畫的進(jìn)一步內(nèi)容，請讀者參考其他相關(guān)書籍。制作完Flash動畫后，需要將它導(dǎo)出為網(wǎng)頁中能夠使用的格式，即使用“File”菜單中的“ExportMovie”（導(dǎo)出電影）命令，將所制作的動畫導(dǎo)出為.swf

格式。說明：Flash源文件的格式是.fla，而能夠在網(wǎng)頁中使用的格式是.swf。

SWF格式的文件不能用IMG標(biāo)記符插入，必須使用OBJECT標(biāo)記符。假如我們剛才制作的圓形滾動動畫被導(dǎo)出為ball.swf，那么可以使用以下HTML語句將其插入到網(wǎng)頁中：<OBJECTclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http:///pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"width="550"height="400"><paramname=movievalue="ball.swf"><paramname=qualityvalue=high>

<EMBEDsrc="ball.swf"quality=highpluginspage="/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash"width="550"height="400"></EMBED></OBJECT>說明：只有.swf

文件能用以上代碼插入到網(wǎng)頁中。很多從網(wǎng)上下載的Flash動畫，比如一些“阿貴”的小電影，都已經(jīng)打包成為.exe文件，它們是不能被嵌入到網(wǎng)頁中的。一般情況下，我們都不直接用

HTML的方式插入

Flash動畫，更多的是直接用Dreamweaver

插入（能夠自動生成以上代碼）。說明：有關(guān)

OBJECT標(biāo)記符的內(nèi)容，請參見本書第

5章。有關(guān)

Dreamweaver

的內(nèi)容，請參見本書第

9章。3.3.3

使用

GIF動畫

GIF動畫是最基本的一類動畫，它的創(chuàng)建反映了動畫的最基本原理。例如，下面以在Fireworks中制作前面介紹的馬兒奔跑動畫為例，簡要說明GIF動畫的制作過程：（1）啟動Fireworks4.0。（2）選擇“File”菜單中的“New”命令，在“NewDocument”（新建文檔）對話框中，將寬度和高度設(shè)置為動畫所需大小，將分辨率設(shè)置為72，畫布顏色設(shè)置為白色，如圖3-19所示。圖3-19設(shè)置新文檔的屬性（3）直接在畫布上繪制圖像，或者選擇“File”菜單中的“Import”命令導(dǎo)入要制作動畫的素材，如圖3-20所示。圖3-20動畫的第一幀（4）單擊“Frames”（幀）面板中的“新建/復(fù)制幀”按鈕，然后在畫布上繪制或?qū)氲诙系膱D像，如圖3-21所示。圖3-21制作第二幀（5）重復(fù)步驟（3），制作其余的6幀，如圖3-22所示。單擊文檔窗口中的“播放按鈕”，則可以觀看動畫的效果。圖

3-22制作出所有的幀

（6）如果要更改動畫播放的速度，可以雙擊幀面板右邊的幀延時數(shù)字列表項(xiàng)，然后在彈出的面板中修改幀的延長時間。如果修改了某一幀的幀延時，那么可以變化這一幀的播放時間。如果要更改整個動畫的播放速度，那么應(yīng)修改所有幀的幀延時，此時按住【Shift】鍵選中所有幀，然后雙擊“幀延時”列，則可以修改整個動畫的播放速度。（7）選擇“File”菜單中的“Save”命令，將文檔保存。注意：此時保存的是Fireworks的默認(rèn)格式.png

格式，如果要將動畫插入到網(wǎng)頁中，還應(yīng)該將其導(dǎo)出為動畫GIF格式。（8）選擇“Window”菜單中的“Optimize”（優(yōu)化）命令，打開優(yōu)化面板，在優(yōu)化面板中將文件的優(yōu)化格式設(shè)置為“AnimatedGIF”（動畫GIF），如圖3-23所示。圖

3-23設(shè)置優(yōu)化格式為動畫GIF（9）選擇“File”菜單中的“Export”（導(dǎo)出）命令，然后在“導(dǎo)出”對話框中將文件保存在特定位置即可，此時導(dǎo)出的文件格式為動畫GIF（擴(kuò)展名為.gif）。

GIF動畫制作完成之后，可以用插入普通圖像的方式將其插入到網(wǎng)頁中，即使用IMG標(biāo)記符。實(shí)際上，插入GIF動畫與插入普通圖像沒有任何區(qū)別（因?yàn)镚IF動畫只是GIF這種圖像格式的一種特殊表現(xiàn)），也可以設(shè)置動畫的寬度高度等屬性，具體效果請讀者自行嘗試。3.4創(chuàng)建超鏈接3.4.1

相對地址與絕對地址

什么是URL

絕對URL與相對URL3.4.2

頁面鏈接

以下HTML代碼顯示了如何在網(wǎng)頁中創(chuàng)建超鏈接，效果如圖3-24所示。說明：超鏈接默認(rèn)時有下劃線，并且顯示為藍(lán)色。當(dāng)瀏覽者將鼠標(biāo)移動到超鏈接上時，鼠標(biāo)指針通常會變成手形，同時在狀態(tài)欄中顯示出超鏈接的目標(biāo)文件。另外，超鏈接包括多種不同的狀態(tài)，可以在body標(biāo)記符中設(shè)置link等屬性來控制超鏈接顏色的顯示，具體請參見本書第1章。<HTML><HEAD><TITLE>超鏈接示例</TITLE></HEAD><BODY><P>這是一個<Ahref="page2.htm">超鏈接</A></P><P>歡迎參觀我的<Ahref="http://">個人網(wǎng)站</A></P></BODY></HTML>圖3-24在網(wǎng)頁中設(shè)置超鏈接說明：如果href屬性指定的文件格式是瀏覽器能夠直接顯示的，那么單擊超鏈接時將會直接顯示相應(yīng)文件。例如，如將href的值指定為圖像文件，那么單擊超鏈接就可以直接在瀏覽器中顯示圖像。如果href屬性指定的文件格式是瀏覽器所不能識別的格式，那么將獲得下載超鏈接的效果。例如，如果我們將超鏈接的目標(biāo)文件指定為xxx.zip，那么當(dāng)瀏覽者在瀏覽器中單擊相應(yīng)超鏈接時，則將彈出如圖3-25所示的對話框，提示進(jìn)行下載。圖3-25提示文件下載對話框3.4.3錨點(diǎn)鏈接

以下HTML代碼說明了如何使用指向同一頁面特定部分的超鏈接，效果如圖3-26所示。<HTML><HEAD><TITLE>錨點(diǎn)鏈接示例</TITLE></HEAD><BODY><P><Aname="top"></A>目錄</P><P><Ahref="#amazon">亞馬遜戰(zhàn)士</A>|<Ahref="#paladin">游俠</A>|<Ahref="#necromancer">巫師</A></P><HR><Aname="amazon">亞馬遜戰(zhàn)士</A>——一個強(qiáng)悍的女人，唯一知道的是，她來自靠近南部海域的廣闊平原上的游牧民族，因?yàn)椴柯渲g不斷發(fā)生沖突，使得這位游牧戰(zhàn)士習(xí)慣為自已而戰(zhàn)，并促使她擁有強(qiáng)烈的中立個性和能在惡劣的環(huán)境中戰(zhàn)斗旅行的體能。她擅長使用弓箭對付敵人，并能熟練使用長矛和其他的一些投擲類武器，空手格斗也是她所擅長的。<P><Ahref="#top">返回目錄</A></P><HR><Aname="paladin">游俠</A>——來自一個特殊的軍隊(duì)，靠近宗教圣地Zakarum，一個以信念為盾隨時準(zhǔn)備戰(zhàn)斗的軍人。他為自己認(rèn)為正確的信念而戰(zhàn)，他的堅(jiān)定給予他力量并祝福他的戰(zhàn)友，同時殘酷的懲罰那些罪人。因此有一些人稱他為過度緊張的狂熱者，但是其他的人公認(rèn)他充滿了力量并且散發(fā)著仁慈的光芒。<P><Ahref="#top">返回目錄</A></P><HR><Aname="necromancer">巫師</A>——來自南方充滿蒸汽的沼澤地，一位披著斗蓬的神秘人物。就像他的名字一樣，巫師來自不體面的男巫師族，他能夠使用死亡和召喚魔法控制怪物為已所用，擅長使用召喚亡靈的魔法。因?yàn)樾r候在沼澤地里生活和學(xué)習(xí)魔法，致使他的皮膚猶如死尸，體型和骨胳的怪異更使得人們不敢正視并且遠(yuǎn)離他。但是毫無疑問，他是一位充滿魔法力量的法師。<P><Ahref="#top">返回目錄</A></P></BODY></HTML>3.4.4電子郵件鏈接

當(dāng)瀏覽網(wǎng)頁的用戶單擊了指向電子郵件的超鏈接后，系統(tǒng)將自動啟動郵件客戶程序（對于安裝了Windows98/2000操作系統(tǒng)的計(jì)算機(jī)，默認(rèn)時啟動OutlookExpress），并將指定的郵件地址填寫到“收件人”欄中，用戶可以編輯并發(fā)送該郵件，如圖3-27所示。圖3-27單擊電子郵件鏈接后會啟動郵件程序3.5

使用圖像映射3.5.1什么是圖像映射

例如，圖3-28顯示了一個表示中國政區(qū)的電子地圖頁面，如果單擊圖中的不同區(qū)域，將跳轉(zhuǎn)到不同的頁面，介紹中國的各政區(qū)。圖3-28電子地圖頁面又例如，圖3-29顯示了一個采用圖像映射作為導(dǎo)航圖的例子，當(dāng)單擊圖中不同區(qū)域時，將把瀏覽者帶到不同的欄目（圖3-30是跳轉(zhuǎn)到某個欄目后的頁面）。此外，在這兩個頁面中，最下面一行的導(dǎo)航條也是用圖像映射做的。圖3-29頁面導(dǎo)航圖實(shí)例圖3-29頁面導(dǎo)航圖實(shí)例圖3-30跳轉(zhuǎn)到的欄目頁面3.5.2創(chuàng)建圖像映射

定義映射區(qū)域

對映射區(qū)域進(jìn)行引用下面以一個簡單的實(shí)例來說明圖像映射的制作方法。（1）首先在任意圖形圖像處理軟件中打開要制作為圖像映射的圖像，找出所要定義的映射區(qū)域的坐標(biāo)（例如在Fireworks中可以借助Info

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論