【操作步骤】
第1步，启动Dreamweaver，新建一个网页，保存为index.html。
第2步，构建网页结构。本例中首先用<div>标签设置container容器，然后通过<div>标签创建网页的title和content两部分，又通过<ul>标签分别创建这两个部分的列表。
<div id="container">
<div class="title"> /*title部分*/
<h3>财经资讯</h3> /*title部分的标题*/
<ul> /*title部分的新闻栏目*/
<li><a href="#">最新资讯</a></li>
<li><a href="#">国际财经</a></li>
<li><a href="#">汽车房产</a></li>
</ul>
</div> <div class="content"> /*content部分*/
<p> /*content部分的标题*/
<a href="#"><img src="images/1.jpg"/></a>
<span><a href="#">最新资讯</a></span>
</p>
<ul> /*content部分的新闻内容*/
<li>·<a href="#">诸建芳:中国将继续加强“反通缩”明年或降准2次</a></li>
<li>·<a href="#">美联储出台系统重要性银行附加资本要求 </a></li>
<li>·<a href="#">所有省份制定大病保险实施方案 北京等全面推开</a></li>
<li>·<a href="#">减持方正证券获利3.18亿元 郑州煤电有望扭亏 </a></li>
<li>·<a href="#">牛市“撞腰”不足惧</a></li>
</ul>
</div>
<div class="list_unit" id="2">
<p> <a href="#"><img src="images/2.jpg">
</a>
<span><a href="#">国际财经</a></span>
</p>
<ul>
<li>·<a href="#">全球最大集装箱船“中海环球”轮首航宁波港</a></li>
<li>·<a href="#">中国中小企业全球发展论坛迎来重量级嘉宾</a></li>
<li>·<a href="#">建行龙卡全球支付卡跨境支付更方便</a></li>
<li>·<a href="#">明年美国经济增长3.1%</a></li>
<li>·<a href="#">汇丰：2015年全球十大风险</a></li>
<li>·<a href="#">减持方正证券获利3.18亿元 郑州煤电有望扭亏 </a></li>
<li>·<a href="#">牛市“撞腰”不足惧</a></li>
</ul>
</div>
<div class="list_unit" id="2">
<p>
<a href="#"><img src="images/2.jpg"></a> <span><a href="#">国际财经</a></span> </p>
<ul>
<li>·<a href="#">全球最大集装箱船“中海环球”轮首航宁波港</a></li>
<li>·<a href="#">中国中小企业全球发展论坛迎来重量级嘉宾</a></li>
<li>·<a href="#">建行龙卡全球支付卡跨境支付更方便</a></li>
<li>·<a href="#">明年美国经济增长3.1%</a></li>
<li>·<a href="#">汇丰：2015年全球十大风险</a></li>
</ul>
</div>
<div class="list_unit" id="3">
<p> <a href="#"><img src="images/3.jpg"></a> <span><a href="#">汽车房产</a></span> </p>
<ul>
<li>·<a href="#">上海：奥迪Q3最高让利8.6万元 豪华小型SUV</a></li>
<li>·<a href="#">上海：路虎发现4最高降13万 全国销售现车充足 </a></li>
<li>·<a href="#">2015年投产 丰田扩大投资提高Mirai产能 </a></li>
<li>·<a href="#">北京：新宝来现金优惠8500元起 置换另享补贴</a></li>
<li>·<a href="#">首套房贷利率北京外资银行能打折</a></li>
</ul>
</div>
<div class="di"></div> /*清除浮动*/ </div></body>
网页设计中，在整个container框架下，分别由title和con-tent两块组成，在title块下，又包含了h3和ul两部分。在content块下，定义了<p>标签和<ul>标签。
第3步，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，定义网页基本属性和wrap样式。
* {/*网页中所有标签的共同样式*/
margin:0; /*外边框为0*/
padding:0; /*内边框为0*/
font-size:12px; /*字体大小*/
color:#000; /*字体颜色*/
list-style:none; /*不显示项目符号*/}a {/*定义网页中所有的<a>标签样式*/
color:#03c; text-decoration:none; /*不显示下划线*/}
a:hover{ text-decoration:underline; /*当鼠标经过时显示下划线*/}#wrap{/*wrap容器样式*/
width:418px; /*宽度*/
margin:30px auto; /*上下补白是30px，左右为auto，显示为居中的效果*/
border:1px solid #999; /*边框样式*/}
在以上代码中，首先定义了网页基本属性；wrap容器样式类中定义了容器宽度和居中对齐等属性。
第4步，设置title部分样式。
.title { /*定义title样式*/
width:418px; /*title块的宽度*/
height:32px; /*title块的高宽*/
border-bottom:1px solid #999; /*添加底部边框*/
background:#f2f9fd; /*背景颜色*/}.title h3 { /*定义title部分*/
float:left; /*左浮动*/
ine-height:32px; /*行间距，实现文字垂直居中*/
padding-left:20px; /*左侧内间距*/}.title ul { /*title中列表样式*/
float:right; /*右浮动*/ width:230px; /*列表宽度*/}
.title ul li { /*<li>标签样式*/ float:left; line-height:32px; /*行间距*/
padding:0 5px; /*左右补白5px*/}.title ul li a { /*<a>标签样式*/
color:#333; /*字体颜色*/}
第5步，设置warp样式。
.warp { /*warp块样式*/
height:100px; /*块高宽*/
margin-left:15px; /*左侧补白*/
padding:15px 0 8px 0; /*顶部内边距15px，底部内边距8px*/
border-bottom:1px dotted #9AC4E9; /*底部边框*/}
第6步，完成warp块中<p>标签样式的设置，在<p>标签中，包含了<a>标签、<img>标签和<span>标签，分别定义了新闻栏目的图片和栏目标题。
在<p>标签中，包含了<a>标签、<img>标签和<span>标签，分别定义了新闻栏目的图片和栏目标题。
.warp p { /*warp块中<p>标签样式*/
float:left; /*左浮动，使<p>标签下的图片和标题靠左*/
width:156px; /* <p>标签的宽度*/}
.warp p a { /*<a>标签样式*/ display:block; /*定义<a>标签为块级元素*/}
.warp p a:hover { border:1px dashed #00f; /*当鼠标经过时显示边框*/ }
.warp span a { /*warp块下的<span>标签样式也就是标题样式*/ height:22px; /*高宽*/
line-height:22px; /*文字实现垂直居中*/ text-align:center; /*水平居中*/}.warp span a:hover { /*鼠标经过时的<span>标签样式*/ border:0; /*清除边框*/
color:#c00; /*字体颜色*/}
在以上代码中，定义了warp中的<p>标签样式，在<p>标签中分别包含了一幅图片和一个标题，在这里关键是<a>标签和<span>标签的样式设置。其中a和a:hover的样式是针对图片的设置，spana和span a:hover是针对标题的样式，其中bor-der:0是清除边框，因为在网页设计时，语句warp pa:hove{ border:1px dashed #00f;}样式类中定义了<p>标签下所有的<a>标签显示边框，所以在这里需要清除边框。
第7步，从图4.38中可以看到，网页基本已经完成，最后再给warp中的<ul>标签进行设置。
.warp ul { /*warp中ul样式*/
float:right; /*右浮动*/
width:216px; /*ul宽度*/
margin:5px 0px; /*设置上下补白*/}
.warp ul li a:hover{ /*鼠标经过时的li效果*/
color:red;}.clear { /*清除左右浮动*/ clear:both;}
以上代码设置了网站建设时warp中ul列表样式，此时网页完全创建完成。