1、,網(wǎng)頁(yè)設(shè)計(jì),LOGO,Dreamweaver軟件介紹,目錄頁(yè) CONTENTS PAGE,04 軟件安裝系統(tǒng)要求,01 什么是DW,02 軟件工作界面介紹,03 軟件功能介紹,05 軟件的基本使用,No.1 什么是Dreamweaver,1. 什么是Dreamweaver？,Adobe Dreamweaver，簡(jiǎn)稱“DW”，中文名稱 “夢(mèng)想編織者”，是一款集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，DW是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。,左側(cè)是“DW”軟件圖標(biāo) 您記住這款軟件了嗎？,1）大家都很

2、困惑，DW是什么,Adobe Dreamweaver,No.1 什么是Dreamweaver,1. 什么是Dreamweaver？,2）DW有哪些版本？,右側(cè)為DW軟件的歷史版本，此軟件分為Macromedia時(shí)代、Adobe時(shí)代以及現(xiàn)在的CC 版本時(shí)代。每一個(gè)時(shí)代的軟件都有其特色，每一個(gè)新版本的發(fā)布都比上一個(gè)版本有了更大的進(jìn)步。,No.2 界面介紹,2. DW軟件界面介紹,1）啟動(dòng)版面,安裝后，每一次打開打開軟件，它會(huì)自動(dòng)跳出此版面。在該版面可以打開軟件最近使用的文件類目或者新建不同類型的網(wǎng)頁(yè)編輯窗口，也可以打開軟件預(yù)設(shè)網(wǎng)頁(yè)編輯模板。,No.2 界面介紹,2. DW軟件界面介紹,2）屬性面板

3、介紹,屬性面板會(huì)隨著編輯的內(nèi)容而變化，屬性面板包含編輯的文字的所有內(nèi)容，包括字體，顏色，大小等。 單擊向下拉菜單屬性面板，。展開后，用戶只要選擇要編輯的對(duì)象，就可以對(duì)其屬性進(jìn)行編輯。 用戶對(duì)所有由啟動(dòng)面板彈出來(lái)的浮動(dòng)面板在被打開后可以重新組合 右側(cè)圖二為頁(yè)面屬性單擊后的界面，可編輯5個(gè)類目,圖一,圖二,No.2 文化知識(shí)概述,2. DW軟件界面介紹,3）編輯窗口界面介紹,浮動(dòng)編輯欄目分為代碼欄、設(shè)計(jì)欄，實(shí)時(shí)代碼欄可以預(yù)覽代碼效果。點(diǎn)擊拆分可以將視口分為代碼預(yù)覽和網(wǎng)頁(yè)預(yù)覽。 網(wǎng)頁(yè)預(yù)覽快捷鍵為F12，網(wǎng)頁(yè)預(yù)覽是默認(rèn)的windows瀏覽器。各個(gè)版本的瀏覽器網(wǎng)頁(yè)預(yù)覽情況不一樣。建議軟件外選擇IE瀏覽器

4、預(yù)覽。 浮動(dòng)窗口上為工具欄菜單，用戶可以根據(jù)需求進(jìn)行工具欄的拖拽，方便用戶使用。,No.2 界面介紹,2. DW軟件界面介紹,4）參數(shù)設(shè)置界面介紹,工作環(huán)境參數(shù)設(shè)置 利用“首選參數(shù)”對(duì)話框可以修改Dreamweaver的系統(tǒng)參數(shù)。選擇菜單欄中的“編輯”“首選參數(shù)”菜單或按快捷鍵【Ctrl+U】可打開該對(duì)話框，如圖所示 可對(duì)多個(gè)界面參數(shù)進(jìn)行設(shè)置，css樣式也可以直接在界面設(shè)置相應(yīng)內(nèi)容。設(shè)置完后直接單擊確定即可。,No.3 功能介紹,3.DW軟件功能介紹,1）自適應(yīng)網(wǎng)格,自適應(yīng)網(wǎng)格版面，來(lái)創(chuàng)建跨平臺(tái)和跨瀏覽器的兼容網(wǎng)頁(yè)設(shè)計(jì)。直觀地創(chuàng)建復(fù)雜網(wǎng)頁(yè)設(shè)計(jì)和頁(yè)面版面，無(wú)需忙于編寫代碼。,2）改善FTP性能,

5、利用重新改良的多線程FTP傳輸工具節(jié)省上傳大型文件的時(shí)間。更快速高效地上傳網(wǎng)站文件，縮短制作時(shí)間。,3）更新的實(shí)時(shí)視圖,使用更新的“實(shí)時(shí)視圖”功能在發(fā)布前測(cè)試頁(yè)面?！皩?shí)時(shí)視圖”現(xiàn)已使用最新版的WebKit轉(zhuǎn)換引擎，能夠提供絕佳的HTML5支持。,4）每一個(gè)版本都有對(duì)應(yīng)功能的更新與優(yōu)化,No.4 安裝要求,4.DW軟件安裝系統(tǒng)要求,軟件安裝對(duì)電腦系統(tǒng)及硬件都有一定要求,以DreamweaverCC為例 Windows Intel或AMD處理器 Windows7、Windows8、Windows10 512MB內(nèi)存 1GB可用硬盤空間用于安裝；安裝過(guò)程中需要額外的可用空間（無(wú)法安裝在可移動(dòng)閃存設(shè)備

6、上）1024x768屏幕，16位顯卡 DVD-ROM驅(qū)動(dòng)器 MacOS Intel 多核處理器 Mac OS X 10.5.8 或10.6 版 512MB 內(nèi)存 1.8GB 可用硬盤空間用于安裝；安裝過(guò)程中需要額外的可用空間（無(wú)法安裝在使用區(qū)分大小寫的文件系統(tǒng)的卷或可移動(dòng)閃存設(shè)備上） 1280 x800 屏幕，16 位顯卡DVD-ROM 驅(qū)動(dòng)器,No.5 軟件的基本使用,5.DW的基本使用,1）新建網(wǎng)頁(yè)文件,新建文件點(diǎn)擊菜單欄的文件-新建，會(huì)出來(lái)一個(gè)新建文件窗口，選擇新建文件的類型，系統(tǒng)默認(rèn)是HTML文檔，最后點(diǎn)擊創(chuàng)建，就會(huì)出來(lái)一個(gè)HTML文檔 根據(jù)用戶需求創(chuàng)建相應(yīng)類型的網(wǎng)頁(yè)文件，還可以對(duì)新建

7、的網(wǎng)頁(yè)文件進(jìn)行格式限定，如左右側(cè)欄目的改改變，標(biāo)題固定。,No.5 軟件的基本使用,5.DW基本使用,2）站點(diǎn)文件的保存,保存、重命名創(chuàng)建一個(gè)html標(biāo)準(zhǔn)格式的文件頁(yè)面，默認(rèn)的文件名是untitled1.html，點(diǎn)擊文件-另存為，會(huì)彈出一個(gè)保存位置的窗口，文件名改為test.html，保存類型為All Documents（*.html;*.html;*.shtm;*）類型。點(diǎn)擊保存按鈕即可 站點(diǎn)文件的命名不建議用中文，中文名字在使用ftp軟件上傳在網(wǎng)上容易出錯(cuò)。站點(diǎn)文件夾不建議存在桌面。,No.5 軟件的基本使用,5.DW的基本使用,3）網(wǎng)頁(yè)內(nèi)容的編寫,點(diǎn)擊代碼欄，在Body與Body之間為網(wǎng)頁(yè)內(nèi)容，Title與Title之間為網(wǎng)頁(yè)標(biāo)題.設(shè)計(jì)界面為網(wǎng)頁(yè)預(yù)覽界面。 This is a headingThis is a headingThis is a heading 輸出的內(nèi)容就為：This is a heading 均為控制字體大小的雙標(biāo)記 具體文字大小可在頁(yè)面屬性及CSS格式中調(diào)整。,No.5 軟件的基本使用,5.DW的基本使用,4）網(wǎng)頁(yè)內(nèi)容的預(yù)覽,按F12鍵進(jìn)行網(wǎng)站內(nèi)容預(yù)覽，也可以點(diǎn)擊預(yù)覽按鈕進(jìn)行預(yù)覽瀏覽器的選擇。在