swftext

HTML的圖像標簽

文本使網頁的內容得到充實，那圖像使網頁的內容更加豐富多彩。使用圖像不僅

能使網頁更加美觀、大方、整潔、形象和生動，而且能給網頁增添無限生機，從

而吸引更多的瀏覽者。因此圖像在網頁中的作用是舉足輕重的。作為一個網頁設

計者，掌握好網頁中圖像的應用尤為重要。下面我們就開始介紹常用的圖片格式，

以及如何在網頁中實現圖文并茂的頁面。

本節單詞記憶：標簽屬性

網頁學習網提示：html語言非常簡單，不需要邏輯理解，而絕大部分朋友覺得

它難以掌握，90%的原因在于英語單詞不過關，所以每節記憶幾個單詞是非常有

必要的。

一五寸蛋糕 、常見的圖片格式

在日常生活中，使用比較多的圖像格式有4種，即JPG、GIF、SWF、BMP。在網

頁中使用比較多的是JPG、GIF和SWF，大多數瀏覽器都可以顯示這些圖像。下

面我們就來分別介紹這4種常用圖像。

JPG(JPEG)格式圖像是在Intemet上被廣泛支持的圖像格式，它是聯合圖像專家

組文件格式(JointPhotographicExpertsGroup)的英文縮寫。JPG格式采用的

是有損壓縮，

會造成圖像畫面的失真，不過壓縮之后的體積很小，而且還比較清晰，所以比較

適合在網頁中應用。

此格式最適合用于攝影或連續色調圖像的高級格式，這是因為JPG文件可以包含

數百萬種顏色。隨著JPG文件品質的提高，文件的大小和下載時間也會隨之增加。

通常可以通

過壓縮JPG文件在圖像品質和文件大小之間達到良好的平衡。

制作JPG文件的軟件很多，比較常見的有Photoshop、HyperSnap等。

GIF圖像是網頁中使用最廣泛，最普遍的一種圖像格式，它是圖像交換格式

(GraphicsInterc聲樂學習 hangeFormat)的英文縮寫。GIF文件的眾多特點恰恰適應了

Intemet的需要，于是它成了Internet上最流行的圖像格式，它的出現為

Internet注入了一股新鮮的活力。

GIF格式圖像采用的是無損壓縮，由于只支持256色，所以GIF格式圖像體積也

很小。支持透明色，使得GIF在網頁的背景和一些多層特效的顯示上用得非常多，

還支持幀動

畫，這是它最突出的一個特點。要設計GIF動畫，首先要用圖像處理軟件做好

GIF動畫中的每一幅單幀畫面，然后再用專門的GIF動畫軟件把這些靜止的畫面

連在一起，再定

好幀與幀之間的時間間隔，最后保存成GIF格式就可以了。

制作GIF文件的軟件也很多，比較常見的有Photoshop、GIFConstructionSet

等。

3．SWF

SWF動畫是網頁中應用非常廣泛的一種多媒體圖像動畫，這種格式的動畫圖像能

夠用比較小的體積來表現豐富的多媒體形式。在圖像的傳輸方面，可以邊傳輸邊

觀看，因此

特別適合網絡傳輸，特別是在傳輸速率不佳的情況下，也能取得較好的效果。事

實也證明了這一點，SWF如今已被大量應用于Web網頁進行多媒體播放與交互性

設計。此

外，SWF動畫是基干矢量技術制作的，因此不管將畫面放大多少倍，畫面不會因

此而有任何失真。綜上所述，SWF格式作品以其高清晰度的畫質和小巧的體積，

受到了越

來越多網頁設計者的青睞，也越來越成為網頁動畫和網頁圖片設計制作的主流，

目前已成為網頁上動畫的事實標準。SWF文件的缺點就是制作起來非常耗時耗

力。

制作SWF文件的軟件也很多，比較常見的有Flash、SWFText等。

4．BMP

BMP圖像是在Windows操作系統中使用得比較多，它是“位圖”的英文縮寫。BMP

圖像可以用任何顏色深度（從黑白到24位顏色）存儲單個光柵圖像。BMP圖像

文件格式

與其他MicrosoftWindows程序兼容。它不支持文件壓縮，也不適用于Web頁。

從總體上看，BMP圖像格式的缺點超過了它的優點。為了保證照片圖像的質量，

請使用

JPG文件。BMP文件適用于Windows中的墻紙。BMP的優點支持l位到24位顏色

深追夢環游記 度，并且與現有Windows程序廣泛兼容。BMP的缺點是不支持壓縮，這會造成

文件非

常大。

制作BMP文件的軟件也很多，比較常見的有Photoshop、Windows自帶的“畫圖”

軟件等。

二、圖像的基本語法

標簽用于在HTML文檔中插入圖像，該標簽可以放在要顯示圖像的位置。

標簽不含任何內容，它使用src屬性指定圖像源文件所在的路徑。

演唱會開幕">

其中，src參數用來設置圖像文件所在的位置，width和height屬性用來指定圖

像的寬度和高度，alt屬性有兩個作用：第一個是在網頁中，如果圖像沒有被下

載，在圖像位置

上出現的提示文字；第二個是在網頁中，如果圖像下禁毒的意義 載完，將鼠標放在該圖像上，

在鼠標旁邊出現的提示文字。

示例1：

height="150">

示例1在瀏覽器中預覽效果如圖1所示，把鼠標指向圖像上方，稍等片刻，就會

出現提示文字“明星演唱會開幕”。

圖1給圖像添加提示文字的效果小書蟲作文300字三年級

三、圖像與文本的對齊

標簽的align屬性可用于調整圖像相對于周圍文本的對齊方式。align屬

性可取下面的值：top、bottom、middle、left或right。

語法：

其中，align=”top”籃球的圖片 表示圖片的頂端和當前行文字頂端對齊，align=”bottom”

表示圖片的底部和當前行文字底部對齊，ali紅船精神 gn=”middle”表示圖片的中部和當

前行文字中部對齊，

align=”left”表示圖片記金華的雙龍洞 左對齊，align=”right”表示圖片右對齊。

示例2

height="95"border="0"/>

請點擊廣告進入明星專區

border="0"/>晚上睡覺打呼嚕

請點擊廣告進入明星專區

示例2在瀏覽器中預覽效果如圖2所示。

圖2圖像與文本的對象方式

本節作業：

制作如下圖網頁。

注意事項：

1.圖片的寬度，高度可自由設置。

2.圖片與文本的對齊方式。

3.如何居中，如何空格等簡單排版。

網頁學習網提示：光看教程是無法讓你掌握HTML知識，最好是完成作業后才進

入下一次教程，動起手來吧！

點擊下載第一章案例及作業資源返回《HTML入門經典》教程列表

轉載請注明本文地址:/html/jc/