本例模仿淘宝网上的图片布局，进一步展示了在网页设计中图片与文字之间混排和用图片布局的方法。
【操作步骤】
第1步，启动Dreamweaver，新建文档，保存为index.html.。
第2步，构建网页结构。在本例中，首先用<div>标签设置container容器，在此页面中，所有内容分为4个部分，每个部分用one和two分为两块，one中又分为left和right两部分，分别定义图片和下边框，在two中也分为left和right两部分，分别定义了图片和文字列表。
以下为部分代码，其余代码请浏览本节案例示例源代码。
<div class="container">
<div class="one">
<div class="left">
<img src="images/001.jpg"/>
</div>
<div class="right">
</div>
</div>
<div class="two">
<div class="left"> <img src="images/002.jpg"/> </div>
<div class="right">
<h3>性感透视衫席卷8月街头</h3>
<ul>
<li>明星来示范 早秋穿搭有新招</li>
<li>时尚女生2011早秋的色调搭</li>
<li>秋风起 最潮手袋购入必读美容</li>
</ul>
</div>
</div></div>
此时可以看到，网页的基本结构已经搭建好了，但是由于没有进行CSS样式设置，界面并不美观。
第3步，定义网页基本属性以及container容器的宽度和左侧内边距。
* {
margin: 0px;
padding: 0px;}
.container {
width: 430px;
padding-left: 30px;}
以上代码中，*{margin:0px;padding:0px}表示将网页中所有标签的padding和margin都设定为0px，*可以理解为一个通配符，指的是所有标签。
第4步，定义第一部分内容中的one部分，这一部分为one.left和one.right。
.one .left { float: left; /*左浮动*/
width: 85px; /*宽度*/
height: 30px; /*高度*/
margin-top: 10px; /*顶部补白*/}
.one .right {
float: right;
width: 345px;
border-bottom: #CCCCCC 1px dashed; /*底部边框*/
height: 35px;
margin-bottom: 15px;}
.left中的内容包含了一个<img>标签，left类样式定义了其浮动为左浮动。.right中没有实际的内容，只是在right类样式中定义了底部边框。
第5步，第4步实现了one部分的设置，接下来进行two.left和two.right部分的设置。
.two .left {
float: left;
width: 120px;
height: 85px;}
.two .right {
float: right;
width: 280px;
height: 85px; padding-left: 30px;}
.two .left img { border: #FF3300 1px solid; /*图片边框*/ margin-left: 5px;}
two.left与one.left一样，在设计网页时都包含了一个<img>标签，同样将图片设置为左浮动。two.right标签中包含了一个<h3>标签和一个<ul>标签，分别定义了标题和文字列表。另外，在left.img中定义了图片样式。
第6步，定义<h3>标签的标题样式和<ul>标签的列表样式。
h3 { color: #FF0000;
padding-bottom: 10px;
font-size: 16px;}
ul { padding-left: 10px;
font-size: 14px;}li { padding-bottom: 5px; }
在<h3>标签中定义了网页设计时标题的字体大小和颜色，并设置了底部补白。<ul>标签定义了文字列表，关于对<ul>标签的样式定义会在后面的章节中详细介绍。