Dreamweaver設計網站的時候，我們會用網站原型和客戶討論需求，客戶方便易懂，可以達到事半功倍的效果，該怎么制作網站的demo呢？下面我們就來看看詳細的教程。
1、下載安裝Dreamweaver
下載Dreamweavercs6，本文提供軟件下載，下載安裝即可。
2、打開Dreamweaver開始做原型
打開Dreamweaver之后，有一個窗口，可以快速選擇之前編輯過的文件，也可以新建不同類型的文件。如果不想下次進來再出現這樣的窗口，可以勾選左下方的“不在顯示”。做網站的原型我們用的一般是HTML搭配css和JavaScript文件做。所以下面我們先新建一個HTML頁面。
3、新建HTML頁面
Dreamweaver新建的HTML頁面已經有了<html><head><title><body>這些基本的標簽，我們可以在這個基礎上編輯，要引入的css文件和JavaScript文件放到<head>標簽中。
4、聯想
Dreamweaver會自動聯想標簽，屬性或關鍵字等，所以只需要輸入前幾個單詞，就會自動彈出選擇下拉框。方便編程人員快速編碼。
5、Dreamweaver的幾種視圖一
Dreamweaver有四種視圖，分別是“代碼”，“拆分”，“設計”和“實時視圖”，掌握好這幾種視圖的切換，可加速編碼效率。
第一種視圖：代碼
就是純代碼，打開文件默認的就是“代碼”視圖。這里就不截圖展示了。
第二種視圖：拆分
就是左邊代碼，右邊頁面效果的視圖，編輯左邊的源代碼，右邊的效果圖跟著實時變化。
第三種視圖：設計
展示的是頁面效果圖，但是這個頁面中的標簽塊是可以拖動的，拖動到合適的位置可以保存，這種方法設計網頁，簡單方便。
第四種視圖：實時視圖
展示的就是頁面效果圖。
6、文件樹
寫一個網站原型，有很多文件，這么多文件怎么管理呢？
點擊右側面板中的文件面板，彈出文件樹窗口。在這里可以管理網站demo使用的文件。
例如：我例子中的文件樹，common文件夾放要使用的插件，css和JavaScript文件，以及圖片等資源。login文件夾放登錄相關的html文件，register文件夾放注冊相關的html文件，根目錄中的success.html,error.html文件都是系統中使用頻繁的文件。
7、預覽
demo寫的差不多了，可以點擊菜單中的預覽按鈕，先預覽一下。Dreamweaver提供了360，IE，谷歌，火狐等瀏覽器可供預覽。
8、保存
寫好的頁面一定要保存，最好是一邊寫一遍保存，
點擊菜單中的“文件”——》選擇“保存”，或者按快捷鍵ctrl+s保存。
以上就是Dreamweaver設計網站的demo原型的教程，希望大家喜歡，請繼續關注武林網。
相關推薦：
Dreamweaver怎么設計一款拼圖游戲?
Dreamweaver怎么設計簡單的導航按鈕?
Dreamweaver怎么設計歌曲下載鏈接頁面?
新聞熱點
疑難解答
