- HTML5+CSS3+JavaScript從入門到精通(微課精編版)
- 前端科技
- 994字
- 2019-08-15 16:37:52
4.1 使用圖像
網頁美化最簡單、最直接的方法就是在網頁上添加圖像,圖像不但使網頁更加美觀、形象和生動,而且使網頁中的內容更加豐富多彩。利用圖像創建精美網頁,能夠給網頁增加生機,從而吸引更多的瀏覽者。
4.1.1 插入圖像

視頻講解
在HTML5中,使用<img>標簽可以把圖像插入到網頁中,具體用法如下:
<img src="URL" alt="替代文本" />
img元素向網頁中嵌入一幅圖像,從技術上分析,<img>標簽并不會在網頁中插入圖像,而是從網頁上鏈接圖像,<img>標簽創建的是被引用圖像的占位空間。
提示:<img>標簽有兩個必需的屬性:src屬性和alt屬性。具體說明如下:
(1)alt:設置圖像的替代文本。
(2)src:定義顯示圖像的URL。
【示例】在下面示例中,在頁面中插入一幅照片,在瀏覽器中預覽效果如圖4.1所示。
<img src="images/1.jpg" width="400" alt="讀書女生"/>

圖4.1 在網頁中插入圖像
HTML5為<img>標簽定義了多個可選屬性,簡單說明如下。
height:定義圖像的高度。取值單位可以是像素或者百分比。
width:定義圖像的寬度。取值單位可以是像素或者百分比。
ismap:將圖像定義為服務器端圖像映射。
usemap:將圖像定義為客戶端圖像映射。
longdesc:指向包含長的圖像描述文檔的URL。
其中,不再推薦使用HTML4中的部分屬性,如align(水平對齊方式)、border(邊框粗細)、hspace(左右空白)、vspace(上下空白),對于這些屬性,HTML5建議使用CSS屬性代替使用。
4.1.2 案例:圖文混排

視頻講解
在網頁中經常會看到圖文混排的版式,不管是單圖或者是多圖,也不管是簡單的文字介紹或者是大段正文,圖文版式的處理方式也很簡單。在本節示例中所展示的圖文混排效果,主要是文字圍繞在圖片的旁邊進行顯示。
【操作步驟】
第1步,啟動Dreamweaver,新建網頁,保存為test.html,在<body>標簽內輸入以下代碼。
<div class="pic_news"> <h1>雨巷</h1> <h2>戴望舒</h2> <p><img src="images/1.jpg" alt="" /></p> <p> 撐著油紙傘,獨自 彷徨在悠長、悠長 又寂寥的雨巷, 我希望逢著 一個丁香一樣的 結著愁怨的姑娘。 </p> <p>她是有 丁香一樣的顏色, 丁香一樣的芬芳, 丁香一樣的憂愁, 在雨中哀怨, 哀怨又彷徨; </p> …… <!--省略部分結構雷同的文本,請參考示例源代碼--> </div>
第2步,在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,設置圖片的屬性,將其控制到內容區域的左上角。
.pic_news { width: 800px; /* 控制內容區域的寬度,根據實際情況考慮,也可以不需要 */ } .pic_news h2 {/* 定義標題樣式 */ font-family: "隸書"; font-size: 24px; /* 字體樣式:隸書、大小為24像素 */ text-align: right; /* 標題2居右顯示 */ } .pic_news img {/* 定義圖片樣式 */ float: left; /* 使圖片旁邊的文字產生浮動效果 */ margin-right: 5px; /* 增加圖片與文字的間距 */ height: 250px; /* 控制圖片大小 */ }
第3步,在瀏覽器中預覽,效果如圖4.2所示。簡單幾行CSS樣式代碼就能實現圖文混排的頁面效果,其中重點內容就是將圖片設置浮動,float:left就是將圖片向左浮動。

圖4.2 圖文混排的頁面效果

示例效果
- Web應用系統開發實踐(C#)
- Visual FoxPro 程序設計
- Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
- aelf區塊鏈應用架構指南
- 編寫高質量代碼:改善C程序代碼的125個建議
- SAS數據統計分析與編程實踐
- 用戶體驗增長:數字化·智能化·綠色化
- 單片機應用與調試項目教程(C語言版)
- 移動界面(Web/App)Photoshop UI設計十全大補
- Mastering Elasticsearch(Second Edition)
- Go語言開發實戰(慕課版)
- 青少年學Python(第2冊)
- 計算機應用基礎案例教程(第二版)
- 計算機系統解密:從理解計算機到編寫高效代碼
- 現代C++語言核心特性解析