Dreamweaver怎么設(shè)計網(wǎng)站的demo原型?

來源：本站原創(chuàng)|時間：2020-01-11|欄目：Dreamweaver教程|點擊：次

Dreamweaver設(shè)計網(wǎng)站的時候，我們會用網(wǎng)站原型和客戶討論需求，客戶方便易懂，可以達(dá)到事半功倍的效果，該怎么制作網(wǎng)站的demo呢？下面我們就來看看詳細(xì)的教程。

軟件名稱：: Adobe Dreamweaver CS6 官方中文正式原版(附激活補丁)
軟件大?。?/dt>: 317.3MB
更新時間：: 2014-05-14

1、下載安裝Dreamweaver

下載Dreamweavercs6，本文提供軟件下載，下載安裝即可。

2、打開Dreamweaver開始做原型

打開Dreamweaver之后，有一個窗口，可以快速選擇之前編輯過的文件，也可以新建不同類型的文件。如果不想下次進(jìn)來再出現(xiàn)這樣的窗口，可以勾選左下方的“不在顯示”。做網(wǎng)站的原型我們用的一般是HTML搭配css和JavaScript文件做。所以下面我們先新建一個HTML頁面。

3、新建HTML頁面

Dreamweaver新建的HTML頁面已經(jīng)有了<html><head><title><body>這些基本的標(biāo)簽，我們可以在這個基礎(chǔ)上編輯，要引入的css文件和JavaScript文件放到<head>標(biāo)簽中。

4、聯(lián)想

Dreamweaver會自動聯(lián)想標(biāo)簽，屬性或關(guān)鍵字等，所以只需要輸入前幾個單詞，就會自動彈出選擇下拉框。方便編程人員快速編碼。

5、Dreamweaver的幾種視圖一

Dreamweaver有四種視圖，分別是“代碼”，“拆分”，“設(shè)計”和“實時視圖”，掌握好這幾種視圖的切換，可加速編碼效率。

第一種視圖：代碼

就是純代碼，打開文件默認(rèn)的就是“代碼”視圖。這里就不截圖展示了。

第二種視圖：拆分

就是左邊代碼，右邊頁面效果的視圖，編輯左邊的源代碼，右邊的效果圖跟著實時變化。

第三種視圖：設(shè)計

展示的是頁面效果圖，但是這個頁面中的標(biāo)簽塊是可以拖動的，拖動到合適的位置可以保存，這種方法設(shè)計網(wǎng)頁，簡單方便。

第四種視圖：實時視圖

展示的就是頁面效果圖。

6、文件樹

寫一個網(wǎng)站原型，有很多文件，這么多文件怎么管理呢？

點擊右側(cè)面板中的文件面板，彈出文件樹窗口。在這里可以管理網(wǎng)站demo使用的文件。

例如：我例子中的文件樹，common文件夾放要使用的插件，css和JavaScript文件，以及圖片等資源。login文件夾放登錄相關(guān)的html文件，register文件夾放注冊相關(guān)的html文件，根目錄中的success.html,error.html文件都是系統(tǒng)中使用頻繁的文件。