1、启动dreamweaver cs5，执行文件-新建命令，在弹出新建文档对话框中选择html后，点击创建按钮，进入主界面。
2、点击拆分按钮切换到拆分窗口，在<title>标签中输入名称为“项目列表”，在浏览时就可以看到名称。
3、接着在标题标签下方输入代码为：<style type="text/css">.cr{width:60%; height:400px;margin:auto; margin-top:60px; border:solid 1px #fcc;}</style>定义一个新的类，可以根据自己的实际设计进行设置参数。
4、在<body>标签里创建一个div层,并设置它的class属性值为cr，在下方区域你就会看到一个长方形框架。
5、重新回到<style>标签里定义项目列表样式，并输入代码为：#cd ul{ list-style:none; margin:0px; padding:8px 25px 18px 25px; height:10px;}#rq1{ width:100px; height:20px; float:right;}
6、在div框架中创建列表项目，使用标签<ul></ul>进行创建，并设置相关的项目，包括文字内容、图片、日期内容等等。
7、重复步骤六，采用同样的方法建立14个<li></li>标签，并且输入不同的文字信息内容。
8、接着就可以测试效果了，按f12键弹出“是否将改变保存到”提示信息，点击是，就会在默认的浏览器中出现效果了，如果不满意可以继续修改相关参数。
9、通过效果查看判定自己是否满意，如果不满意可以再次进行修改相关代码，比方说整体框架太大，就可以修改cr中width数值就可以，直至自己满意为止。
10、执行文件-另存为命令，在弹出的对话框中输入名称为“项目列表”，找到一个合适的位置进行保存即可。
