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

最新推荐文章于 2016-07-13 09:34:32 发布

petercnmei

最新推荐文章于 2016-07-13 09:34:32 发布

阅读量4.9k

点赞数

分类专栏：开发工具 jsp & html

jsp & html 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

开发工具

35 篇文章 0 订阅

订阅专栏

今天偶然发现了dreamweaver的一个非常有用的功能，就是代码的格式化功能。以dreamweaver8.0版本为例，一般情况下，我们写的html或者css代码都计较混乱，难以阅读，即使刚开始很在意代码的可读性，但是等到所使用的标签越来越多，嵌套越来越深，这时我们已经很难去掌控html代码的格式问题了。先看看没有格式化的代码和格式化后的代码的区别：

例如这是没有格式化的代码，是不是很让人抓狂呢？

 
<html>
 
<head>
 
<meta charset="utf-8" />
 
<title>标题</title>
 
</head>
 
<body>
 
<div id="header">
 
<div id="logo"><h1><a href="#" title="返回首页">返回首页</a></h1></div>
 
</div>
 
<div id="main">
 
<h2 class="top_title"><a href="#">标题</a></h2>
 
<div id="demo">
 
内容
 
</div>
 
</div>
 
<div id="footer">
 
<p>foot<a href="#">foot</a></p>
 
</div>
 
</body>
 
</html>

这是经过dreamweaver自动缩进过的格式化代码，是不是看起来一目了然呢？

 
<html>
 
<head>
 
<meta charset="utf-8" />
 
<title>标题</title>
 
</head>
 
<body>
 
<div id="header">
 
    <div id="logo">
 
        <h1><a href="#" title="返回首页">返回首页</a></h1>
 
    </div>
 
</div>
 
<div id="main">
 
    <h2 class="top_title"><a href="#">标题</a></h2>
 
    <div id="demo"> 内容 </div>
 
</div>
 
<div id="footer">
 
    <p>foot<a href="#">foot</a></p>
 
</div>
 
</body>
 
</html>

格式化代码只需要3步骤：

第一步：依次点击菜单栏的 "编辑" - "首选参数" - "代码格式" （注：Dreamweaver版本不同可能会有些许差异）

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

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

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

petercnmei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dreamweaver使用技巧之格式化代码自动缩进

今天偶然发现了dreamweaver的一个非常有用的功能，就是代码的格式化功能。以dreamweaver8.0版本为例，一般情况下，我们写的html或者css代码都计较混乱，难以阅读，即使刚开始很在意代码的可读性，但是等到所使用的标签越来越多，嵌套越来越深，这时我们已经很难去掌控html代码的格式问题了。先看看没有格式化的代码和格式化后的代码的区别：例如这是没有格式化的代码，是不是很让人抓
复制链接

扫一扫

专栏目录