Dreamweaver CC 2017 工作介面介紹、同時檢示程式碼與設計結果

Dreamweaver是一套所見即所得的網頁編輯軟體,在剛開始學網頁語法的階段,不妨選用這樣的軟體,編輯時可以隨時檢視網頁完成時的狀態,以減少不必要的測試時間。

以下先介紹工作介面:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-17-40-20

1:控制列

2:程式工具

3:檔案編輯區

4:功能面板 (所有的功能面板都從 控制列 > 視窗 開啟)

 

同時檢視程式碼和網頁成果

Dreamweaver CC 2017預設只會顯示程式碼的部份

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-14-27-02

如果想要同時檢示程式碼和設計結果,只要做一下簡單的設定就可以了

控制列 > 檢示 > 分割 > 程式碼 – 設計

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-14-27-24

設定完成後檔案編輯區就會變成左右兩邊

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-14-29-28

如果想要把程式碼和設計結果以上下排列的方式顯示的話,請執行以下的設定:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-16-25-36

控制列 > 檢示 > 分割 > 水平顯示

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-16-25-48

在檔案編輯區上方有三個按鈕顯示目前的工作區域檢示方式

最右邊的下拉選項記得要選取"設定"模式喔~

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-07-18-10-58

Leave a Reply