如何用dreamweaver制作網(wǎng)站,dreamweaver網(wǎng)頁源代碼

　　如何設計Dreamweaver網(wǎng)站系統(tǒng)的demo？在設計Dreamweaver網(wǎng)站時，我們會使用網(wǎng)站原型與客戶討論需求?？蛻舴奖阋锥?，可以達到事半功倍的效果。想讓客戶方便易懂，怎么做網(wǎng)站的demo？下面我們來看看詳細教程。

　　1.下載并安裝Dreamweaver

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

　　2.打開Dreamweaver并開始原型制作。

　　打開Dreamweaver后，會出現(xiàn)一個窗口，您可以在其中快速選擇以前編輯過的文件或創(chuàng)建不同類型的新文件。如果你不想讓這個窗口下次再出現(xiàn)，可以勾選左下方的“未顯示”。我們一般用HTML配合css和JavaScript文件來做網(wǎng)站的原型。所以讓我們先創(chuàng)建一個新的HTML頁面。

　　3.創(chuàng)建新的HTML頁面

　　Dreamweaver的新HTML頁面已經(jīng)有了基本的標簽htmlheadtitlebody，我們可以在此基礎上進行編輯。要介紹的css文件和JavaScript文件放在head標簽里。

　　4.聯(lián)想（電腦的品牌名）

　　Dreamweaver會自動關聯(lián)標簽、屬性、關鍵字等。所以你只需要輸入前幾個字，選擇下拉框就會自動彈出。方便程序員快速編碼。

　　5.Dreamweaver 1的幾個視圖

　　Dreamweaver有四個視圖，即代碼、拆分、設計和實時視圖。掌握這些視圖的切換可以加快編碼效率。

　　第一種觀點：代碼

　　這是純代碼。打開文件時，默認視圖是代碼。這里就不截圖了。

　　第二種觀點：分裂

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

　　第三觀：設計

　　顯示的是頁面效果圖，但是可以拖動該頁面中的標簽塊，并將其拖動到適當?shù)奈恢眠M行保存。這種方法設計網(wǎng)頁簡單方便。

　　第四個視圖：實時視圖

　　顯示的是頁面效果圖。

　　6.文件樹

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

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

　　舉個例子：我例子中的文件樹，常用文件夾包含要使用的插件，css和JavaScript文件，以及圖片等資源。login文件夾包含登錄相關的html文件，register文件夾包含注冊相關的html文件，根目錄下的success.html、error.html文件都是系統(tǒng)中經(jīng)常使用的文件。

　　7.試映

　　Demo寫的差不多了，可以點擊菜單中的預覽按鈕先預覽一下。Dreamweaver提供360，IE，Google，F(xiàn)irefox等瀏覽器進行預覽。

　　8.救援

　　寫好的頁面一定要保存，最好寫一次就保存。

　　點擊菜單中的“文件”——，選擇“保存”，或按快捷鍵ctrl s保存。

　　以上是邊肖給大家分享的關于如何使用Dreamweaver設計網(wǎng)站演示原型的具體解決方案。感興趣的用戶可以按照上面的步驟，試一試。希望以上教程能幫到你，不間斷關注精彩資訊教程。