Dreamweaver中怎麼對齊代碼

Dreamweaver對於軟件工程專業的學生來説是非常熟悉的前端應用軟件，適用於初學者，因此很多人在大一的時候就能夠熟練應用它來開發一些簡單的項目了。雖然現在的IDE非常多，層出不窮，但是Dreamweaver依舊有它的一席之地，不過Dreamweaver界面還是有一些缺點的。比如我們複製某段代碼的時候，需要手動縮進每段代碼進行對其，這對於小段代碼是不算什麼，但是如果代碼很多的話就會很浪費時間。不過Dreamweaver是帶有自動對其代碼的功能，只是位置不太明顯，下面來看看怎麼在Dreamweaver中自動對其代碼吧。

操作方法

（01）安裝軟件Dreamweaver是編輯代碼的工具，而wampserver是web頁面運行的服務器。所以要安裝這2個軟件，在網上下載破解版本即可。

（02）打開軟件雙擊打開Dreamweaver軟件以及wampserver服務器。記得要打開wampserver服務器，否則Dreamweaver頁面在瀏覽器中是無法顯示的。好在這兩個軟件無論是安裝包還是安裝步驟都非常簡單。

（03）創建頁面點擊工具欄中的【文件】，點擊【新建】，在新建頁面中隨便創建一個頁面類型，我們就創建一個HTML類型的吧。

（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> 】

（05）對齊代碼可以看到代碼並不太對齊，要是代碼少一些還好，要是頁面中代碼太多的話，閲讀起來會非常混亂，修改起來也很麻煩。對齊方法：點擊工具欄中的【命令】，在下拉列表中選擇【應用源格式】。頁面中的所有代碼就會自動對齊了。不過還是可以自己手動調整的。

（06）預覽方法説明點擊【地球形狀】的圖標，會彈出下拉框，選擇【預覽砸360se】中，就可以在瀏覽器中預覽效果了。注意要啟動wampserver服務器。

（07）展示效果在瀏覽器的查看預覽效果。即可顯示摺疊面板。點擊摺疊面板的標題可以打開對應面板，查看內容。

特別提示

（1）注意啟動wampserver服務器；<br/>（2）個人看法，僅供參考；