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

初識Dreamweaver

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

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

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

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

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

步驟2輸入文本。

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

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

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

3．視圖

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

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

方法一：執(zhí)行【修改】︱【頁面屬性】菜單命令，在彈出的【頁面屬性】對話框，可以設(shè)置頁面的各類屬性，單擊“確定”按鈕，完成頁面屬性設(shè)置，如圖所示。方法二：單擊【屬性】面板上的“頁面屬性”按鈕，也可以設(shè)置頁面屬性。

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

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

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

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

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

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

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

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

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

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

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