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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-11|欄目：Dreamweaver教程|點(diǎn)擊：次

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

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

1、下載安裝Dreamweaver

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

2、打開(kāi)Dreamweaver開(kāi)始做原型

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

3、新建HTML頁(yè)面

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

4、聯(lián)想

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

5、Dreamweaver的幾種視圖一

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

第一種視圖：代碼

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

第二種視圖：拆分

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

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

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

第四種視圖：實(shí)時(shí)視圖

展示的就是頁(yè)面效果圖。

6、文件樹(shù)

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

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

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