今天偶然发现了dreamweaver的一个非常有用的功能，就是代码的格式化功能。以dreamweaver8.0版本为例，一般情况下，我们写的html或者css代码都计较混乱，难以阅读，即使刚开始很在意代码的可读性，但是等到所使用的标签越来越多，嵌套越来越深，这时我们已经很难去掌控html代码的格式问题了。先看看没有格式化的代码和格式化后的代码的区别：
例如这是没有格式化的代码，是不是很让人抓狂呢？
01 |
<html>
|
02 |
<head>
|
03 |
<meta charset="utf-8" />
|
04 |
<title>标题</title>
|
05 |
</head>
|
06 |
<body>
|
07 |
<div id="header">
|
08 |
<div id="logo"><h1><a href="#" title="返回首页">返回首页</a></h1></div>
|
09 |
</div>
|
10 |
<div id="main">
|
11 |
<h2 class="top_title"><a href="#">标题</a></h2>
|
12 |
<div id="demo">
|
13 |
内容 |
14 |
</div>
|
15 |
</div>
|
16 |
<div id="footer">
|
17 |
<p>foot<a href="#">foot</a></p>
|
18 |
</div>
|
19 |
</body>
|
20 |
</html>
|
这是经过dreamweaver自动缩进过的格式化代码，是不是看起来一目了然呢？
01 |
<html>
|
02 |
<head>
|
03 |
<meta charset="utf-8" />
|
04 |
<title>标题</title>
|
05 |
</head>
|
06 |
<body>
|
07 |
<div id="header">
|
08 |
<div id="logo">
|
09 |
<h1><a href="#" title="返回首页">返回首页</a></h1>
|
10 |
</div>
|
11 |
</div>
|
12 |
<div id="main">
|
13 |
<h2 class="top_title"><a href="#">标题</a></h2>
|
14 |
<div id="demo"> 内容 </div>
|
15 |
</div>
|
16 |
<div id="footer">
|
17 |
<p>foot<a href="#">foot</a></p>
|
18 |
</div>
|
19 |
</body>
|
20 |
</html>
|
格式化代码只需要3步骤：
第一步：依次点击菜单栏的 "编辑" - "首选参数" - "代码格式" （注：Dreamweaver版本不同可能会有些许差异）
第二步：代码格式设置，可参照下图
第三步：依次点击菜单栏的 "命令" -"套用源格式"。