《Web應(yīng)用開發(fā)》課件-01 初識(shí)Dreamweaver CS6

初識(shí)Dreamweaver

CS6項(xiàng)目2任務(wù)目標(biāo)

了解DreamweaverCS6的界面環(huán)境與功能1掌握創(chuàng)建和管理站點(diǎn)的方法21認(rèn)識(shí)DreamweaverCS6Dreamweaver的工作區(qū)將多個(gè)文檔集中到一個(gè)窗口中，不僅降低了系統(tǒng)資源的占用，還可以更加方便地操作文檔。DreamweaverCS6的工作窗口由5部分組成，分別是“插入”控制面板、“文檔”工具欄、“文檔”窗口、控制面板組和“屬性”控制面板。Dreamweaver的操作環(huán)境簡(jiǎn)潔明快，可大大提高設(shè)計(jì)效率。

雙擊桌面上的“DreamweaverCS6”快捷圖標(biāo)，如圖所示，彈出DreamweaverCS6的“歡迎窗口”。

“DreamweaverCS6”歡迎窗口1.1歡迎窗口1.2新建/打開網(wǎng)頁(yè)

步驟1在“DreamweaverCS6”歡迎窗口中選擇新建HTML命令項(xiàng)，啟動(dòng)“DreamweaverCS6”并創(chuàng)建新文檔，默認(rèn)文件名為Untitled-1。

步驟2輸入文本。

步驟3執(zhí)行保存命令，保存文件。

步驟4單擊文檔工具欄上的“預(yù)覽”按鈕。

1．標(biāo)題欄2．菜單欄

3．視圖

提供了“代碼”“拆分”和“設(shè)計(jì)”3種視圖方式。

代碼視圖可以直接用HTML編寫網(wǎng)頁(yè)，能夠?qū)υ创a進(jìn)行精確的控制；設(shè)計(jì)視圖以所見即所得的方式，不必書寫網(wǎng)頁(yè)源代碼，也可以制作出漂亮的網(wǎng)頁(yè)；拆分視圖是將窗口分為上下兩部分，分別以代碼和設(shè)計(jì)視圖模式顯示網(wǎng)頁(yè)。1.3工作界面介紹4．屬性面板執(zhí)行【窗口】︱【屬性】菜單命令，可以打開“屬性”面板，如圖所示?！緦傩浴棵姘逵糜陲@示在文檔窗口中選中對(duì)象的屬性，【屬性】面板中可以對(duì)對(duì)象的屬性直接進(jìn)行設(shè)置和修改。1.3工作界面介紹5.首選參數(shù)設(shè)置啟動(dòng)Dreamweaver后，執(zhí)行【編輯】︱【首先參數(shù)】命令，打開【首選參數(shù)】對(duì)話框，如圖所示。1.3工作界面介紹6.設(shè)置頁(yè)面屬性

方法一：執(zhí)行【修改】︱【頁(yè)面屬性】菜單命令，在彈出的【頁(yè)面屬性】對(duì)話框，可以設(shè)置頁(yè)面的各類屬性，單擊“確定”按鈕，完成頁(yè)面屬性設(shè)置，如圖所示。方法二：?jiǎn)螕簟緦傩浴棵姘迳系摹绊?yè)面屬性”按鈕，也可以設(shè)置頁(yè)面屬性。

1.3工作界面介紹【頁(yè)面屬性】對(duì)話框中各類屬性的含義：外觀：設(shè)置頁(yè)面的背景顏色或圖像、默認(rèn)字體和頁(yè)邊距等。鏈接：用于設(shè)置超鏈接文本的字體、顏色和下劃線樣式等。標(biāo)題：用于重新定義HTML文檔各級(jí)標(biāo)題的格式。標(biāo)題/編碼：用于設(shè)置在瀏覽器中顯示的網(wǎng)頁(yè)標(biāo)題和定義當(dāng)前網(wǎng)頁(yè)字體采用的編碼種類。跟蹤圖像：用于設(shè)置圖像類別，可以在設(shè)計(jì)頁(yè)面時(shí)插入用作參考的圖像文件。1.3工作界面介紹2.1站點(diǎn)的概念

站點(diǎn)是網(wǎng)站資源的存放場(chǎng)所，網(wǎng)站的所有資源都需要保存在站點(diǎn)內(nèi)，如各級(jí)網(wǎng)頁(yè)和其中用到的素材。站點(diǎn)是一個(gè)管理網(wǎng)頁(yè)的場(chǎng)所，在Dreamweaver中可以實(shí)現(xiàn)站點(diǎn)即時(shí)修改，幫助用戶管理和維護(hù)整個(gè)站點(diǎn)的所有文檔，自動(dòng)更新和修復(fù)文檔中的鏈接和路徑。站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。創(chuàng)建一個(gè)本地站點(diǎn)，實(shí)質(zhì)上是在本地計(jì)算機(jī)的硬盤上創(chuàng)建一個(gè)文件夾，并將這個(gè)文件夾定義為站點(diǎn)，稱為站點(diǎn)根目錄。

網(wǎng)站規(guī)劃分為：網(wǎng)站的功能、欄目、結(jié)構(gòu)、命名和人員規(guī)劃等內(nèi)容。設(shè)置網(wǎng)站欄目時(shí)要緊扣主題，盡量將最有價(jià)值最近更新的內(nèi)容列在顯要的欄目上，并可以設(shè)置動(dòng)態(tài)交互性欄目，或?yàn)樵L問(wèn)者服務(wù)的欄目，如“問(wèn)題解答”、“資源下載”等，既增強(qiáng)了瀏覽者的參與性，又使瀏覽者得到實(shí)質(zhì)性的服務(wù)。網(wǎng)站建設(shè)的系統(tǒng)設(shè)計(jì)方法分為：自頂向下、自底向上和不斷增補(bǔ)三種類型。2.2網(wǎng)站規(guī)劃【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話框以“樂(lè)途網(wǎng)”為例創(chuàng)建站點(diǎn)，操作步驟如下：步驟1執(zhí)行【站點(diǎn)】︱【新建站點(diǎn)】菜單命令，彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話框，如圖所示。2.3創(chuàng)建與管理站點(diǎn)

步驟2選擇“基本”選項(xiàng)卡，并定義站點(diǎn)名為“l(fā)etuweb”，如圖所示。

定義站點(diǎn)名2.3創(chuàng)建與管理站點(diǎn)步驟3選擇“高級(jí)設(shè)置”選項(xiàng)卡，彈出“基本信息”選項(xiàng)，設(shè)置“默認(rèn)圖像文件夾”為“D:\letuweb\img”，如圖所示?！綥etuweb的站點(diǎn)定義為】對(duì)話框2.3創(chuàng)建與管理站點(diǎn)步驟4單擊“保存”按鈕，在【文件】面板中可以看到已定義好的站點(diǎn)“l(fā)etuweb”，如圖所示。

使用文件的參數(shù)設(shè)置2.3創(chuàng)建與管理站點(diǎn)

站點(diǎn)管理在DreamweaverCS6中可以同時(shí)管理多個(gè)站點(diǎn)，但每次只能對(duì)一個(gè)站點(diǎn)進(jìn)行操作，在文件面板中可以切點(diǎn)。2.3創(chuàng)建與管理站點(diǎn)

在【管理站點(diǎn)】對(duì)話框中，可以管理多個(gè)站點(diǎn)，實(shí)現(xiàn)對(duì)站點(diǎn)的創(chuàng)建、編輯、復(fù)制、刪除、導(dǎo)出和導(dǎo)入等操作。

（1）新建站點(diǎn)單擊“新建”按鈕，將打開“站點(diǎn)定義”對(duì)話框，可以創(chuàng)建新站點(diǎn)。（2）編輯站點(diǎn)

單擊“編輯”按鈕，將重新打開所選站點(diǎn)的“站點(diǎn)定義”對(duì)話框，可以逐步修改站點(diǎn)屬性。

（3）復(fù)制站點(diǎn)單擊“復(fù)制”按鈕，可以復(fù)制選中的站點(diǎn)。復(fù)制站點(diǎn)功能可以省掉重復(fù)創(chuàng)建結(jié)構(gòu)相同的站點(diǎn)操作，可以保持站點(diǎn)相似的風(fēng)格，并提高工作效率。（4）刪除站點(diǎn)單擊“刪除”按鈕，將刪除選中的站點(diǎn)。這個(gè)操作只是將站點(diǎn)從DW中刪除，網(wǎng)站的文件仍保留在還存儲(chǔ)位置上，并沒(méi)有被刪除。2.3創(chuàng)建與管理站點(diǎn)（5）導(dǎo)出站點(diǎn)單擊“導(dǎo)出”按鈕，