Dreamweaver中怎么对齐代码

Dreamweaver对于软件工程专业的学生来说是非常熟悉的前端应用软件,适用于初学者,因此很多人在大一的时候就能够熟练应用它来开发一些简单的项目了。虽然现在的IDE非常多,层出不穷,但是Dreamweaver依旧有它的一席之地,不过Dreamweaver界面还是有一些缺点的。比如我们复制某段代码的时候,需要手动缩进每段代码进行对其,这对于小段代码是不算什么,但是如果代码很多的话就会很浪费时间。不过Dreamweaver是带有自动对其代码的功能,只是位置不太明显,下面来看看怎么在Dreamweaver中自动对其代码吧。

Dreamweaver中怎么对齐代码

操作方法

(01)安装软件Dreamweaver是编辑代码的工具,而wampserver是web页面运行的服务器。所以要安装这2个软件,在网上下载破解版本即可。

Dreamweaver中怎么对齐代码 第2张
Dreamweaver中怎么对齐代码 第3张

(02)打开软件双击打开Dreamweaver软件以及wampserver服务器。记得要打开wampserver服务器,否则Dreamweaver页面在浏览器中是无法显示的。好在这两个软件无论是安装包还是安装步骤都非常简单。

Dreamweaver中怎么对齐代码 第4张

(03)创建页面点击工具栏中的【文件】,点击【新建】,在新建页面中随便创建一个页面类型,我们就创建一个HTML类型的吧。

Dreamweaver中怎么对齐代码 第5张
Dreamweaver中怎么对齐代码 第6张

(04)然后我们在页面中复制一些代码。不然以创建【折叠面板】为例。现在头部中复制4个js代码。然后在主体中复制【折叠面板】的固定代码,会发现代码并不对齐。【<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/><link rel="stylesheet" type="text/css" href="easyui/themes/"/><script type="text/javascript" src="easyui/"></script>】【<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> content1 </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> 】

Dreamweaver中怎么对齐代码 第7张

(05)对齐代码可以看到代码并不太对齐,要是代码少一些还好,要是页面中代码太多的话,阅读起来会非常混乱,修改起来也很麻烦。对齐方法:点击工具栏中的【命令】,在下拉列表中选择【应用源格式】。页面中的所有代码就会自动对齐了。不过还是可以自己手动调整的。

Dreamweaver中怎么对齐代码 第8张
Dreamweaver中怎么对齐代码 第9张

(06)预览方法说明点击【地球形状】的图标,会弹出下拉框,选择【预览砸360se】中,就可以在浏览器中预览效果了。注意要启动wampserver服务器。

Dreamweaver中怎么对齐代码 第10张

(07)展示效果在浏览器的查看预览效果。即可显示折叠面板。点击折叠面板的标题可以打开对应面板,查看内容。

Dreamweaver中怎么对齐代码 第11张

特别提示

(1)注意启动wampserver服务器;<br/>(2)个人看法,仅供参考;