利用Dreamweaver除錯HTML5程式碼
Dreamweaver是首套針對專業網頁設計師和製作人員的視覺化網頁開發工具，利用該工具可以非常輕鬆地製作出複雜功能的頁面，歷經多個版本的迭代，從之前的Dreamweaver1.x到現在的Dreamweaver CC 2017，功能逐步完善與強大。
接下來就帶領大家走進Dreamweaver的世界，一起開發功能強大和介面優雅的頁面。
利用Dreamweaver開發HTML5頁面非常簡單，只需要經過以下3個步驟，就可以開發出一個已新增好基本格式的HTML檔案。
1點選Dreamweaver程式圖示，進入開發工具的主介面，在介面中，點選“檔案”選單中的“新建”選項。
2點選“新建”選項按鈕後，在彈出的對話方塊中，首先，選擇需要建立檔案的型別是“HTML”，然後，再從中間區域中的文件解析型別中選擇“HTML5”，最後，點選“建立”按鍵完成。
2當在“建立文件”對話方塊中點選“建立”按鈕後，便建立了一個名稱為“Untitled-1”的HTML5頁面檔案。
在開啟的程式碼開發主介面中，整體包括三個主要部分，程式碼開發區、站點與檔案管理區、程式碼檢視與管理區，接下來介紹下各區的功能。
（1）程式碼開發區負責整個頁面檔案程式碼的編寫，左邊的快捷圖示為程式碼編寫過程中使用的相關功能，如格式化、註釋程式碼等。
（2）站點與檔案管理區負責專案檔案的開啟，定位、增加、刪除、重新命名等檔案的操作，並且站點的全部檔案都可以在該區域中檢視到。
（3）程式碼檢視與管理區負責原始檔中程式碼結構的檢視、標籤的增加、刪除；資原始檔的查詢、刪除；同時，在該域還可以執行指定框架的函式。
4完成新建HTML5頁面後，進入程式碼開發，開發過程中要不斷儲存原始碼檔案，在儲存之前，需要建立一個新的站點，將原始碼檔案儲存到該站點資料夾中，因此，先在開發主介面中點選“站點”選單的“新建站點”選項。
5點選“新建站點”選項後，彈出站點新建的對話方塊，在該對話方塊中，選擇“站點”，並輸入站點的名稱，如“我的網站”，同時選擇儲存站點頁面的資料夾。
6在新增站點的介面中，點選“儲存”按鈕後，便在站點管理區域顯示新建站點資料夾中的檔案列表，此時，點選“檔案”選單中的“儲存”按鈕，將新建的“Untitled-1”檔案重新命名為“h3_1”，並儲存至站點資料夾中。
後面專案中的所有頁面將都儲存在該站點資料夾中，在資料夾中還可以再新建子類資料夾，分級管理專案的圖片、JavaScript、CSS樣式檔案。
1 功能需求
在新建名稱為h3_1.html的頁面中，以紅色字型，居中方式顯示“hello，強大的HTML5!”字樣內容，根據上述功能。

2實現效果
頁面檔案h3_1.html在chrome瀏覽器執行後：
3原始碼分析
在上述示例的程式碼中，

元素為塊元素，中間為元素顯示的內容，通過向該元素新增“style”屬性控制文字內容顯示的顏色與格式，屬性值“color:red;text-align:center”，前者用於設定字型顏色為“red”紅色，後者設定文字對齊方式為“center”居中對齊。
4案例實踐
在頁面中，新增一個div>元素，並在元素中，以背景為藍色、字型為白色、偏右對齊的方式顯示“這是修改後的內容”字元內容。
在頁面中使用CSS樣式的方式分為以下三種：頭部使用style>標籤編寫、元素使用style>屬性控制、頁面使用標籤引入，接下來通過一個案例來分別介紹它們的使用方式。
1.功能需求
在頁面中，設定整個頁面的背景色為藍色，字型大小和顏色分別為15px和白色，並以居中方式顯示字元內容，根據上述功能，新建一個名稱為h3_2.html的頁面檔案，如果以頭部使用

根據上述功能，如果以元素使用

根據上述功能，如果以頁面使用標籤引入的方式來實現該功能，那麼，在新建的名稱為h3_2.html的頁面檔案中。

在上述中，通過link元素引入了另外一個名稱為style.css的樣式檔案，該檔案的功能是實現需求中指定樣式的效果，因此，在HTML5檔案下，新建一個名稱為“css”文資料夾，在該資料夾下，建立一個名稱為style.css檔案。
/* CSS Document */
body{
background-color:blue;
font-size:13px;
color:white;
text-align:center;
}
2. 實現效果
新增樣式後，頁面檔案h3_2.html在chrome瀏覽器執行後：
3. 原始碼分析
需要說明的是，上述三種新增樣式的方法，僅是方式不同，實現的程式碼都是相同的，“background-color”屬性用於設定“body”元素的顏色為“blue”,而“font-size”屬性用於設定“body”元素中文字顯示的字型大小為“13”,“px”為字型單位。
4. 案例實踐
在頁面中，使用link>標籤引入樣式的方式，實現一個紅色背景，白色字型的長方形，並在長方形中，以居中的方式顯示“漂亮，HTML5！”的字樣。
與使用CSS類似，在頁中使用JavaScript也有三種方式，分別是使用script>標籤內部編寫、使用事件屬性直接繫結、使用script>標籤外部匯入，接下來分別以案例的方式來介紹。
1功能需求
在頁面中，使用script>標籤內部編寫的方式新增JavaScript程式碼，程式碼的功能是在頁面中輸出“JavaScript是頁面互動語言！”的字樣，根據上述功能，新建一個名稱為h3_3.html的頁面檔案。

2實現效果
新增樣式後，頁面檔案h3_3.html在chrome瀏覽器執行後
3原始碼分析
在頁面中，通過新增script>標籤來宣告編寫JavaScript程式碼的區域，即script>標籤中包含的內容是JavaScript程式碼。
在程式碼中，“//”為註釋符，該符號後的程式碼不執行，只是用於顯示和說明，“document”表示頁面文件，“write”為輸出內容的方法，“document.write”表示向頁面文件中輸出括號中指定的內容，由於是字元內容，因此，加上雙引號，也可是是單引號。
4案例實踐
在頁面中，使用script>標籤內部編寫JavaScript程式碼的方式，實現向頁面中輸出兩行指定任意文字內容的功能。
1 功能需求
在頁面中，使用事件屬性直接繫結的方式編寫JavaScript程式碼，當點選一個按鈕時，它變為灰色，即不可用，根據上述功能，新建一個名稱為h3_4.html的頁面檔案。

2 實現效果
新增樣式後，頁面檔案h3_4.html在chrome瀏覽器執行後：
3 原始碼分析
在上述頁面的程式碼中，“onClick”是按鈕元素的事件屬性，表示按鈕的“單擊”事件，屬性值表示事件觸發時執行的程式碼，其中，“this”表示按鈕元素本身，“disabled”表示不可用，“this.disabled=true”表示按鈕本身不可用是真的，即按鈕不可點選了。
4 案例實踐
在頁面中，使用事件屬性直接繫結的方式編寫JavaScript程式碼，實現當點選按鈕後，按鈕中顯示的文字發生變化的功能。
1 功能需求
在頁面中，使用script>標籤外部匯入的方式，在指定的標籤位置中，向頁面輸出“這是匯入JS檔案後顯示的內容”的字樣，根據上述功能，新建一個名稱為h3_5.html的頁面檔案。

在頁面中，需要從外匯入一個名稱為js_5.js的JavaScript檔案，它的功能是實現向頁面中輸出指定內容的字元內容。

2 實現效果
匯入檔案後，頁面檔案h3_5.html在chrome瀏覽器執行後
3 原始碼分析
在名稱為js_5.js的JavaScript檔案程式碼中，“var”表示定義變數的關鍵字，空格後為定義的變數名稱“HTML”, “=”等號為賦值語句，“var HTML=”表示定義了一個名稱為“HTML”的變數，並將引號中的字元內容賦值給這個變數。
此外，“document.write”方法中允許輸出變數，而字元變數可以使用標籤名與字元內容混合編寫，因此，名稱為“HTML”變數值為“h3>這是匯入JS檔案後顯示的內容”
4. 案例實踐
在頁面中，使用script>標籤外部匯入的方式編寫JavaScript程式碼，實現在頁面中指定元素位置，輸出帶字型顏色功能的標籤內容。
更多內容請新增微信：madongweikai，或掃描下方二維碼新增