dreamweaver使用技巧之格式化代码自动缩进

dreamweaver使用技巧之格式化代码自动缩进

今天偶然发现了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版本不同可能会有些许差异）

第二步：代码格式设置，可参照下图

 

dreamweaver格式化代码.jpg - 大小: 49.79 KB - 尺寸: 493 x 325 - 点击打开新窗口浏览全图

 

第三步：依次点击菜单栏的 "命令" -"套用源格式"。

posted @ 2012-11-08 19:44  孟祥路  阅读(290)  评论(0)    收藏  举报