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

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2019-04-11 10:47:41 作者：onlydenglisa

Dreamweaver怎么設(shè)計(jì)網(wǎng)站系統(tǒng)的demo？Dreamweaver cs6中想要設(shè)計(jì)網(wǎng)站的原型demo，客戶方便易懂，下面我們看看詳細(xì)的教程，需要的朋友可以參考下

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

Adobe Dreamweaver CS6 官方中文正式原版

類型：網(wǎng)頁設(shè)計(jì)
大?。?/span>317.3MB
語言：簡體中文
時(shí)間：2014-05-14

查看詳情

1、下載安裝Dreamweaver

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

2、打開Dreamweaver開始做原型

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

3、新建HTML頁面

Dreamweaver新建的HTML頁面已經(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í)視圖”，掌握好這幾種視圖的切換，可加速編碼效率。

第一種視圖：代碼

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

第二種視圖：拆分

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

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

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

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

展示的就是頁面效果圖。

6、文件樹

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

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

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