不朽情缘滴血大奖

2.5 案例實戰：使用編碼設計網頁

Dreamweaver CC不僅提供了強大的可視化操作環境，也提供了功能全面的編碼環境。這種代碼編寫環境能適應各種類型的Web應用開發，從編寫簡單的HTML代碼到設計、編寫、測試和部署復雜的動態網站以及Web應用程序。

在Dreamweaver CC主窗口中，包括4種視圖：【代碼】視圖、【拆分】視圖、【設計】視圖和【實時視圖】視圖，如圖2.47所示。

圖2.47 Dreamweaver CC主窗口中3種視圖

（1）【代碼】視圖：在該視圖狀態下，可以用HTML標記和屬性控制網頁效果，同時，可以查看和編輯網頁源代碼，在如圖2.47所示的新建文檔中，系統已經建立了網頁基本結構，并設置了頁面基本信息。對于熟練掌握HTML語言的用戶，使用該視圖設計網頁會更輕松自由，更能發揮HTML語言的威力。

（2）【拆分】視圖：在該視圖狀態下，編輯窗口被拆分為左右兩個部分，左側窗口顯示源代碼，右側窗口顯示可視化視圖，這樣可以方便在兩種視圖間進行比較操作。

（3）【設計】視圖：該視圖是比較常用的一種視圖，它是在可見即可得狀態下操作，即當前編輯的效果和發布網頁中的效果相同。

（4）【實時視圖】視圖：當頁面包含復雜的腳本、特效樣式，或者頁面是動態網頁時，在【設計】視圖下是看不到效果的，此時只有通過實時視圖才能夠看到最終效果。

使用【代碼】視圖制作網頁與【設計】視圖制作網頁稍微不同。下面介紹制作一個簡單的頁面。

【操作步驟】

第1步，啟動Dreamweaver CC，單擊【代碼】按鈕，切換到【代碼】視圖，如圖2.47所示。

第2步，先設置頁面頭部信息，由于系統已經設置了HTML文檔基本結構和頁面基礎信息，因此，可以先保持默認值，當需要時，再不斷充實。只需重定義<title>標記中網頁標題，如圖2.48所示。

圖2.48 定義網頁標題

第3步，在<body>和</body>標記之間輸入網頁源代碼文本內容，例如“<h1>學好Dreamweaver，網頁設計真不怕。</h1>”，如圖2.49所示。其中，<h1>標記表示一級標題。

圖2.49 輸入頁面內容

第4步，選擇【文件】｜【在瀏覽器中預覽】｜【IEXPLORE】命令，或者按F12鍵，即可在瀏覽器中觀看到網頁效果，如圖2.50所示。

圖2.50 網頁預覽效果

如果在運行時沒有保存頁面，系統會彈出一個提示對話框，提示用戶先保存頁面。