- HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
- 聶斌 張明遙
- 554字
- 2019-10-23 17:37:36
2.5 在網頁中插入圖像
在網頁中可以插入Logo（網站標志）、Banner（橫幅廣告）、照片等各種圖片，瀏覽者瀏覽網頁時，這些圖片將會自動顯示出來。合理應用圖片，可以讓網頁看起來更美觀、重點更突出、形式更活潑、瀏覽更方便。在HTML中可以通過<IMG>元素插入圖片，其語法格式如下。
<IMG SRC="URL" ALT=" 替代文本" NAME=" 名字" WIDTH="寬度" HEIGHT=" 高度" BORDER=" 邊框” ALIGN=" 對齊方式" ID=" 編號">
<IMG>元素的屬性很多，上面代碼只包含了常用的8種，其說明如下。
? SRC：用于指定圖片所在位置，可以是相對路徑或絕對路徑。
? ALT：指定用于替代圖片的文本，當圖片不能正常顯示時，可以使用該文本替代圖片。
? WIDTH：指定圖片的寬度。
? HEIGHT：指定圖片的高度。
? BORDER：指定圖片的邊框大小。該屬性的值越大，邊框越粗。
? ALIGN：用于設置圖片的對齊方式。該屬性有5個值：LEFT、RIGHT、TOP、MIDDLE和BOTTOM，分別表示左對齊、右對齊、頂部、中間和底部對齊方式。
? NAME：圖片的名稱，很多時候可以省略。
? ID：圖片的編號，也可以省略。在同一個HTML文檔中不允許出現相同的ID，但可以出現相同的NAME。
【示例2-15】設置不同屬性的圖片。
01 <HTML> 02 <HEAD> 03 <TITLE>縮放圖</TITLE> 04 </HEAD> 05 <BODY> 06 <P> 07 原圖大小：<BR> 08 <IMG SRC="2.1.jpg" NAME="page1" ID="page1"> 09 </P> 10 <P> 11 縮小的圖片：<BR> 12 <IMG SRC="2.1.jpg" WIDTH="100" HEIGHT="75"> 13 </P> 14 <P> 15 替代圖片的文本：<BR> 16 <IMG SRC="2.2.jpg" ALT="這是圖片2.2.jpg"> 17 </P> 18 <P> 19 設置圖片邊框為5 像素：<BR> 20 <IMG SRC="2.1.jpg" BORDER="5px" > 21 </P> 22 </BODY> 23 </HTML>
第8行演示了普通圖片標簽<IMG>的使用，在第12行為<IMG>標簽添加WIDTH與HEIGHT屬性以指定尺寸顯示；在第16行使用ALT屬性為圖片指定替代文本；在第20行使用BORDER屬性為圖片添加邊框。示例2-15運行效果如圖2.18所示。
圖2.18 在網頁中插入圖片運行效果
推薦閱讀
- 大型網站架構實戰
- Dreamweaver CS5+ASP動態網站設計實用手冊
- 中文版Flash CC完全自學教程
- 園區網互聯及網站建設
- 小白實戰大前端：移動端與前端的互通之路
- Div+CSS網頁制作實戰教程
- 網頁美工
- jQuery Web開發案例教程（在線實訓版）
- 社交網站界面設計（原書第2版）
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 電子商務網頁設計（第二版）
- Premiere Pro CS6多功能教材
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計基礎培訓教程
- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- 從零開始讀懂Web3