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 图文混排的页面效果
示例效果