超鏈接和圖像

第2章
超鏈接和圖像
主要內容
. 在網頁中使用圖像
. 相對路徑和絕對路徑
. 超鏈接
. 使用Dreamweaver製作相冊
1. 在網頁中使用圖片
. 圖片的格式
目前在網頁中使用的圖片主要有GIF、JPG、PNG、BMP格式,但以GIF和JPG使用居多。GIF支持動畫和背景透明,但僅支持256色以內的圖像,因此色彩不夠豐富。JPEG支持1670萬種顏色,但不支持動畫和背景透明。可以根據兩者的優缺點來選擇圖像的格式。
. 在網頁中插入圖片
代碼演示:在網頁插入圖片
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在網頁中插入圖片</title>
</head>
<body>
<img src="images/rose.jpg"> ①
</body>
</html>
代碼解析:
① <img>標籤的作用是在網頁中插入圖片,src屬性指定插入圖片的路徑,運行效果如圖1所示。
圖1 在網頁中插入圖片
. 在網頁中插入背景圖片
代碼演示:在網頁插入背景圖片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在網頁中插入背景圖片</title>
</head>
<body background="images/rose.jpg" > ①
</body>
</html>
代碼解析:
① background屬性表示網頁的背景圖像,它必須放在<body>標籤內,背景圖像會在水平方向和垂直方向上平鋪,使得圖像覆蓋整個網頁,運行效果如圖2所示。
圖2 在網頁中插入背景圖片
2. <img>的屬性
通過設置圖片的屬性,可以靈活的控制圖片在網頁中的顯示,圖片的常用屬性見表1。
屬性名稱 屬性值 功能
width
數字(像素)
圖片的寬
height
數字(像素)
圖片的高
border
數字(像素)
圖片的邊框
align
left、center、right (左、中、右)
圖片的對齊方式
vspace
數字(像素)
圖片與文字的水平距離
hspace
數字(像素)
圖片與文字的垂直距離
alt
字符串
圖片的替換文本
表1 圖片的屬性
. 圖片的寬和高(width和height)
代碼演示:圖片的width和height
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片的寬和高</title>
</head>
<body>
<img src="images/rose.jpg" width="100" height="150"> ①
</body>
</html>
代碼解析:
① 控制圖片顯示大小是由width 和height兩個屬性共同完成的,當width和height不同時設置時,圖片的寬和高將按照原始比例顯示,當width和height都不設置時,圖片的寬和高按照原始大小顯示。運行效果如圖3所示。
圖3 控制圖片的寬度和高度
. 圖片的邊框(border)
對插入的圖片還可以在周圍加上邊框。
代碼演示:圖片的border
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片的邊框</title>
</head>
<body>
<img src="images/rose.jpg" width="200" height="150" border="1"> ①
</body>
</html>
代碼解析:
① border 屬性是爲圖片加一個邊框,<img border="n">,n爲一個數值,單位爲像素,運行效果如圖4所示。
圖4 設置圖片的邊框
. 圖片與文字的位置關係(align)
在網頁中經常將圖文混排,這時要設置圖片與文字的位置關係和文字與圖片的距離。
代碼演示:圖片與文字的align
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片的align屬性</title>
</head>
<body>
圖片與文字的位置關係<img src="images/rose.jpg" width="200" height="150" border="1" align=" bottom "> ①
</body>
</html>
代碼解析:
① 圖片與文字的位置關係是通過設置img標籤的align屬性實現的,當align設置爲bottom時,表示圖片與文字底部對齊,如圖5所示。還有其他的對齊方式,見表1所示。
圖5 圖片與文字絕對底部對齊
設置值 對齊方式 效果
Top
上對齊
Middle
局中對齊
Bottom
下對齊
Right
右對齊
Left
左對齊
表3 圖片的align屬性
. 圖片的上下左右區域(hspace 和 vspace)
當圖文混排時,圖片周圍(上、下、左、右)的文字與圖片的距離是可以設置的,通過hspace屬性設置水平方向的距離,vspace屬性設置垂直方向的距離。
代碼演示:圖片與文字距離
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片與文字的距離</title>
</head>
<body>
<p>上上上上上上上<br>
左<img src="images/rose.jpg" width="50" height="50" hspace="10" vspace="10" border="1" align="middle">右 <br>
下下下下下下下</p>
</body>
</html>
代碼解析:
① 運行結果如圖6所示,hspace="10"表示圖片左邊和右邊的文字距離圖片有10px,vspace="10"表示圖片上面和下面的文字距離圖片有10px。
圖6 圖片的垂直和水平距離
. 文字代替圖片顯示(alt)
有時瀏覽器不能顯示所指定的圖片,這時可以設置讓瀏覽器顯示一段文字以說明該圖片,來代替圖片的顯示,這是利用img標籤的alt屬性來完成的。
代碼演示:圖片的alt屬性
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>alt屬性</title>
</head>
<body>
<img src="images/rose.jpg" alt="這是一朵玫瑰花" > ①
</body>
</html>
代碼解析:
① alt屬性有兩種使用情況。第一,當鼠標懸停在圖片上時,鼠標的下方會提示“這是一朵玫瑰花”,如圖7所示。第二,由於某種原因導致圖片不能顯示時,這時在圖片位置會顯示Alt的值“這是一朵玫瑰花”。比如關閉了瀏覽器顯示圖片功能,這樣就可以看到如圖9所示的效果了。具體操作步驟如下:打開瀏覽器,選擇【工具】->【Internet選項】 在彈出的對話框中選擇【高級】 選項卡,然後取消“顯示圖片”選項,如圖8所示,點擊“確定”按鈕,最後再來瀏覽網頁,這時圖片不顯示了。
圖7 Alt提示
圖8 禁止瀏覽器顯示圖片
圖9 文字代替圖片
3. 相對路徑與絕對路徑
路徑是指一個文件存儲的位置,分爲相對路徑和絕對路徑。
. 相對路徑
相對路徑是指以當前文件所在位置爲參考點而建立的路徑。假設有如圖10所示的目錄結構,
圖10 相對路徑和絕對路徑
從上圖可以看出Index.html文件在web目錄下,rose.jpg文件在images目錄下,而web與images目錄同在html目錄下。index.html文件的源代碼如下。
代碼演示:相對路徑
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相對路徑 </title>
</head>
<body>
<img src="../images/rose.jpg" alt="這是一朵玫瑰花" > ①
</body>
</html>
代碼解析:
① <img>的 src屬性值"../images/rose.jpg" 是一個路徑,這個路徑是以當前文件(index.html)所在目錄(c:\html\web)爲參考點的,../ 表示參考點的上一級目錄(c:\html),因此"../images/rose.jpg",表示退到當前文件的上一級目錄,再進入到下一級目錄images中找圖片rose.jpg,這種路徑稱爲相對路徑。
相對路徑的優點在於無論html目錄移動到什麼位置,index.html文件總能找到rose.jpg文件,因此圖片顯示正常。
C:\
C:\Html目錄
index.html文件
rose.jpg文件
C:\Html\Images目錄
C:\Html\Web目錄
. 絕對路徑
絕對路徑是以硬盤根目錄或站點根目錄爲參考點而建立的路徑。仍以圖10爲例,現在將index.html文件的源代碼更改如下:
代碼演示:絕對路徑
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>絕對路徑</title>
</head>
<body>
<img src="file:///C|/html/images/rose.jpg" > ①
</body>
</html>
代碼解析:
① <img>的 src屬性值" file:///C|/html/images/rose.jpg " 是一個路徑,這個路徑是以硬盤根目錄(c:\)爲參考點的,當前網頁文件(index.html)將引用c:\html\images\rose.jpg文件,這種路徑稱爲絕對路徑。
當將html目錄移動到其他位置時,index.html文件就無法找到rose.jpg文件,因此圖片顯示出錯。在網頁製作中推薦使用相對路徑。
路徑 格式
相對
../images/rose.jpg
絕對
file:///C|/html/images/rose.jpg
表4 相對路徑與絕對路徑
4. 超鏈接
HTML文件最重要的應用之一就是超鏈接,通過網頁上提供的超鏈接功能,用戶可以鏈接到網絡上的其他網頁。如果沒有超鏈接,就只能在瀏覽器地址欄中輸入各個網頁的網址,這是一件很麻煩的事。實現超鏈接的標籤是<a>。
. 文字超鏈接
現在來做一個例子,在這個例子中要創建2個文件,分別是First.html和Second.html,實現從First.html鏈接到Second.htm。
在c:\目錄下創建一個網頁文件,命名爲First.html,代碼如下。
代碼演示:超鏈接First.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超鏈接</title>
</head>
<body>
這是第一個文件,
點擊<a href="second.html" target="_blank">這裏</a>轉到第二個文件。 ①
</body>
</html>
代碼解析
① <a>標籤實現了超鏈接,href 屬性用來明確鏈接的目標文件,target屬性用來明確目標文件的打開方式,target="_blank"時表示在新窗口中打開目標文件,省略時表示在原窗口中打開目標文件。運行後顯示如圖11所示的效果,當用鼠標點擊“這裏”時網頁轉到了目標文件Second.html運行,實現了超鏈接。
圖11 文本超鏈接
Second.html代碼如下。
代碼演示:超鏈接Second.html代碼
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超鏈接</title>
</head>
<body>
這是第二個文件。
</body>
</html>
. 錨鏈接
在製作網頁時可能會遇到網頁內容過長的情況,這樣用戶瀏覽起來就不太方便。要解決這個問題可以在網頁的上部創建一個導航,利用導航直接鏈接到下面定義好的錨點。
代碼演示:錨鏈接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>錨鏈接</title>
</head>
<body>
<p><a href="#三字經">三字經</a></p> ①
<p><a href="#百家姓">百家姓</a></p> ②
<p>三字經<a name="三字經"></a> </p> ③
<pre>
人之初,性本善。
性相近,習相遠。
苟不教,性乃遷。
教之道,貴以專。
昔孟母,擇鄰處。
子不學,斷機杼。
竇燕山,有義方。
教五子,名俱揚。
養不教,父之過。
教不嚴,師之惰。
子不學,非所宜。
幼不學,老何爲。
</pre>
<p>百家姓<a name="百家姓"></a></p> ④
<pre>
趙錢孫李周吳鄭王
馮陳褚衛蔣沈韓楊
朱秦尤許何呂施張
孔曹嚴華金魏陶姜
</pre>
</body>
</html>
代碼解析:
① href="#三字經" 表示鏈接到錨點名爲“三字經”的位置顯示。
② 作用同①。
③ name="三字經" 表示定義一個錨點,錨點的名稱是“三字經”
④ 作用同③。
當網頁運行後,點擊圖12左側的“三字經”錨鏈接,網頁就會直接跳到“三字經”錨點,如圖12右側所示。要實現這個效果,需要<a>標籤的兩個屬性配合使用,一是錨名稱“name”,二是空鏈接“#”。
圖12 錨鏈接
1. 錨鏈接可以理解爲文件內部的鏈接。
2. 錨的名稱不能重複,否則只識別第一個錨。
. 圖片超鏈接
代碼演示:圖片超鏈接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片超鏈接</title>
</head>
<body>
<a href="rose.html">
<img src="images/rose.jpg" width="200" height="150" border="0">
</a> ①
</body>
</html>
代碼解析:
① 爲圖片添加超鏈接只要將圖片源碼寫在超鏈接標籤<a>和</a>之間即可。在瀏覽器中,當鼠標點擊圖片時會打開“rose.html”文件。
. 熱區超鏈接
有些時候希望一個圖片能添加多個鏈接,這時要將圖片分割出多個鏈接區域,每一個區域叫一個熱區,每一個熱區都可以實現一個鏈接。
代碼演示:熱區鏈接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>熱區超鏈接</title>
</head>
<body>
<img src="images/china.jpg" usemap="#Map"> ①
<map name="Map"> ②
<area shape="rect" coords="456,251,485,319" href="shaanxi.html"> ③
<area shape="circle" coords="402,299,23" href="shanxi.html"> ④
<area shape="poly" coords="400,365,446,268,446,381" href="ningxia.html"> ⑤
</map>
</body>
</html>
代碼解析:
熱區的製作主要靠的是<map>標籤和<area>標籤。<map>標籤用於在圖片上劃定區域,把這個區域稱作地圖,<map>的name屬性是地圖的名稱。<area>標籤可以理解爲一個具體的區域,它被包含在<map>中。圖片通過<map>的名稱引用<area>的區域,併爲每一個<area>設置超鏈接。
① usemap="#Map" 表示引用名爲“Map”的地圖,因爲是文件內部鏈接,所以在“Map”前添加了“#”。
② 定義了一個<map>,命名爲“Map”。
③ 定義一個<area>,shape表示形狀,coords表示<area>的座標,“href”表示<area>的鏈接地址。當點擊這個區域時,鏈接到shaanxi.html文件。
④ 當點擊這個區域時,鏈接到shanxi.html 文件。
⑤ 當點擊這個區域時,鏈接到ningxia.html文件。
熱區的形狀有三種,rect(矩形)、circle(圓形)、poly (多邊形)。
. 下載超鏈接
下載超鏈接是指當用戶點擊鏈接時,能夠下載文件。製作下載超鏈接時需要將被下載的文件做成壓縮格式或者其他可以下載的格式,如 *.rar。
代碼演示:下載超鏈接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下載超鏈接</title>
</head>
<body>
<a href="images/rose.rar">下載rose.rar文件 </a> ①
</body>
</html>
代碼解析:
① href鏈接的目標文件是rar文件,當點擊這個鏈接時會自動彈出如圖14所示的對話框來下載文件。運行後如圖13所示的效果。
圖 13 下載文件超鏈接
圖14 下載文件
. 電子郵件超鏈接
電子郵件超鏈接是指當點擊超鏈接時,啓用OutLook Express軟件進行郵件的發送。
代碼演示:電子郵件超鏈接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>電子郵件超鏈接</title>
</head>
<body>
<a href="mailto:[email protected]">聯繫我們</a> ①
</body>
</html>
代碼解析:
① 電子郵件鏈接的格式是“mailto:郵件地址”,當用戶點擊這個超鏈接時,彈出如圖16所示的對話框發送郵件。運行後如圖15所示的效果。
圖15 電子郵件超鏈接
圖16 啓用OutLook Express發送郵件
OutLook Express 需要配置SMPT和POP3後才能發送郵件。
. HTTP超鏈接
HTTP超鏈接用於打開一個新的站點,通常用於友情鏈接。
代碼演示:HTTP超鏈接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTTP協議超鏈接</title>
</head>
<body>
友情鏈接<br>
<a href="http://www.shou.com">搜狐</a> ①
</body>
</html>
代碼解析:
① 當點擊這個超鏈接時,會打開搜狐網站。
5. 使用Dreamweaver製作相冊
我們要製作的相冊如圖17所示,圖17中的六張圖片默認都是灰色的,當鼠標移動到某一張圖片時,這幅圖片變成彩色的,當點擊某一幅圖時,會打開這幅圖像對應的大圖,如圖18所示。
圖片素材位於Album目錄下的Images目錄中。
1. big_color開頭的圖片文件是打開後的大圖。
2. small_color開頭的是鼠標移到圖片上時顯示的彩色圖。
3. small_gray開頭的是默認的灰度圖。
圖17 相冊
圖18 相冊的大圖
實現步驟:
1. 拷貝圖片到C:\根目錄下的images目錄中。
2. 在Dreamweaver中新建一個網頁,然後保存到C:\根目錄下,與圖片目錄images同級,命名爲index.html。
3. 在Dreamweaver的常用菜單中選擇“鼠標經過圖像”按鈕,如圖19所示。
圖19 添加鼠標經過圖像
4. 彈出對話框如圖20所示。其中
. “原始圖像”是指默認顯示的灰色小圖像;
. “鼠標經過圖像”是指當鼠標移到圖像上時,顯示的彩色小圖像;
. “替換文本”設置爲“第一幅圖片”;
. “按下時,前往的URL”是指圖片的超鏈接,設置爲“1.html”;
. 點擊“確定”按鈕關閉窗口。
圖20 設置鼠標經過圖像
5. 重複3,4步,選擇下一幅圖像,直到將6幅圖片都加入到index.html中爲止。
6. 然後在C:\根目錄下創建1.html–6.html網頁文件,並插入對應的圖片。
7. 製作完畢,瀏覽index.html觀察效果。
6. 本章總結
. <img>標籤在網頁中插入圖片
. <img>標籤的屬性有width、height、border、align、vspace、hspace、alt。
. 路徑分爲相對路徑和絕對路徑,在網頁製作中建議使用相對路徑。
. <a>標籤實現超鏈接。
超鏈接分爲文本超鏈接、新窗口中打開鏈接、錨點超鏈接、圖片超鏈接、熱區超鏈接、下載超鏈接、電子郵件超鏈接、HTTP超鏈接。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章