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

来源：互联网发布：竞争算法编辑：程序博客网时间：2024/05/12 16:11

今天偶然发现了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 - 点击打开新窗口浏览全图

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

0 0