本实例进一步巩固网页设计中图文混排方法的使用，并把该方法运用到实际的网站制作中。示例介绍中国的传统节日为题材，利用图文混排的方法，实现页面的图文效果。
【操作步骤】
第1步，启动Dreamweaver，新建文档，保存为index.html。
第2步，构建网页的整体结构。第一个<p>标签的内容是网页的首段，在首段中用<span>标签设置了首字下沉效果。然后是各个分标题，每个分标题都由两个<p>标签、一个<img>标签组成，分别是分标题中的标题、图片和段落内容。具体代码如下：
<body>
<p><span class="first">中</span>国的传统节日形式多样，内容丰富，是我们中华民族悠久的历史文化的一个组成部分。……</p>
<p class="title1">春节</p><img src="images/chunjie.jpg" class="pic1">
<p class="content">春节是我国一个古老的节日，也是全年最重要的一个节日，如何庆贺这个节日，在千百年的历史发展中，形成了一些较为固定的风俗习惯，有许多还相传至今。……</p>
<p class="title2">清明节</p><img src="images/qingming.jpg" class="pic2"><p class="content">清明是我国的二十四节气之一。由于二十四节气比较客观地反映了一年四季气温、降雨、物候等方面的变化，所以古代劳动人民用它安排农事活动。《淮南子?天文训》云:“春分后十五日，斗指乙，则清明风至。” ……</p><p class="title1">中秋节</p><img src="images/zhongqiu.jpg" class="pic1">
<p class="content">每年农历八月十五日，是传统的中秋佳节。这时是一年秋季的中期，所以被称为中秋。……
</p>
</body>
第3步，规划整个页面的基本显示属性：为网页选择一个合适的背景颜色，设置<p>标签的字体大小，也就是所有段落的字体大小，并设置首字下沉效果。
<style type="text/css">body { background-color: #d8c7b4; /*页面背景色*/ }p {
font-size: 12px; /*段落文字大小*/ }span.first { /*首字放大*/
font-size: 60px;
font-family: 黑体;
float: left;
font-weight: bold;
color: #59340a; /*首字颜色*/}</style>
第4步，考虑到网站建设时整体的图文排版，采用一左一右的形式，所以图文混排的CSS分为左右两段，分别定义为img.pic1和img.pic2，不同的是一个在左边一个在右边。
img.pic1 { float: left; /*左侧图片混排*/
margin-right: 10px; /*图片右端与文字的距离*/
margin-bottom: 5px; /*图片底端与文字的距离*/}img.pic2 {
float: right; /*右侧图片文字的距离*/ margin-bottom: 5px;
}
第5步，设置正文的文字，文字本身不需要做太多调整，但是每一个段落的标题同样是分为左右两侧的，要根据图片的位置做出变化。所以小标题也和图片一样进行左右两个CSS设置，分别为ti-tle1和title2。
.title1 {/*左侧标题*/
text-decoration: underline; /*下划线*/
font-size: 18px;
font-weight: bold; /*粗体*/
text-align: left; /*左对齐*/
color: #59340a; /*标题颜色*/}
.title2 {/*右侧标题*/
text-decoration: underline;
font-size: 18px;
font-weight: bold;
text-align: right;
color: #59340a;}p.content {/*正文内容*/
line-height: 1.2em; /*正文行间距*/}
从代码中可以看出，两段标题的代码不同就在于文字的对齐方式，当图片应用img.pic1而位于左侧时，标题则使用title1，也相应地在左侧。当图片应用img.pic2而位于右侧时，标题则使用title2，也相应地在右侧。p.content设置了段落正文的样式。
本例主要是通过图文混排的技巧，使文字和图片一左一右应用两种不同的对齐方式，采用两组不同的CSS类样式标记，合理地将图片和文字融为一体。