手把手教程

拿到Dreamweaver CS4，迫不及待想尝尝鲜，看看她倒地能给我们带来什么样的体验。

本教程适合于网页设计初学者，通过本教程，你可以制作出当前流行的网页特效，并且，他们都符合w3c xhtml1.0 Transitional规范。

创建网页

偷个懒，我们这次采用Dreamweaver CS4的模板来布局，省去了不少功夫。模板预览图中的弹簧表示这个页面是可以根据浏览器的设置显示改变大小的，比如将字体大小设置为大，那么页面会相应的增加，保持比例，我们可以看到，源码中css的定义，width的单位为em,说明宽度是字体高度的x备，这里，我们把模板改成了适合1024以上分辨率的宽度――60em.

.thrColElsHdr #container {
  width: 60em;  /* 当文本保持浏览器的默认字体大小时，此宽度将创建一个适合 800px 浏览器窗口的容器 */
  background: #FFFFFF; /* 自动边距（与宽度一起）会将页面居中 */
  border: 1px solid #000000;
  text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
} 

不知道怎么修改网页宽度吗？看看下图，在css面板中，点击选项卡，全部，双击.thrColElsHdr #container，按下图设置

制作导航条

非常好！瞬间一个完美的布局已经创建好，接下来要做的就是按自己的意愿，来让网页变得更漂亮

我们使用dreamweaver cs4的一项新功能来创建导航条，Spry (Spry 框架是一套包含JavaScript,CSS,和一些图片文件的客户端JavaScript库。支持XML数据集，动态区域，组件，动画效果。)

怎么做？在菜单栏中选择“插入”-“SPRY”-“SPRY菜单栏”，插入的位置选择在布局sidebar1中，当然要先删掉原来的文字内容。

修改设置：点击插入的导航条区域上面蓝色的柄，可以在属性栏中对导航条进行设置，操作方法很简单，可以通过+-来增减项目，然后可以在右边编辑文本、连接等信息，右侧还可以设置是否有子菜单、三级菜单。是不是很方便？最重要的是这个弹出菜单和dw8相比，有很多优势，可以说是现在的主流。

怎么修改菜单的外观：首先是控制大小。我们可以通过菜单的样式表来修改，这里，我把ul.MenuBarVertical和ul.MenuBarVertical li的宽度都改成了10.8em,然后把ul.MenuBarVertical a的背景色改成了灰色。这些根据自己的喜好设置。现在，我们可以不用在浏览器中进行预览了，直接点击实时视图即可。