您的位置：首页 > 编程语言

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

2014-05-09 11:07 330 查看

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

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

html

head

03	< meta charset = "utf-8" />

04	< title >标题</ title >

</

head

body

07	< div id = "header" >

08	< div id = "logo" >< h1 >< a href = "#" title = "返回首页" >返回首页</ a ></ h1 ></ div >

</

div

10	< div id = "main" >

11	< h2 class = "top_title" >< a href = "#" >标题</ a ></ h2 >

12	< div id = "demo" >

内容

</

div

</

div

16	< div id = "footer" >

17	< p >foot< a href = "#" >foot</ a ></ p >

</

div

</

body

</

html

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

html

head

03	< meta charset = "utf-8" />

04	< title >标题</ title >

</

head

body

07	< div id = "header" >

08	< div id = "logo" >

09	< h1 >< a href = "#" title = "返回首页" >返回首页</ a ></ h1 >

</

div

</

div

12	< div id = "main" >

13	< h2 class = "top_title" >< a href = "#" >标题</ a ></ h2 >

14	< div id = "demo" > 内容 </ div >

</

div

16	< div id = "footer" >

17	< p >foot< a href = "#" >foot</ a ></ p >

</

div

</

body

</

html

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航