網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)_03DreamweaverCS3基礎(chǔ)

1、項(xiàng)目三項(xiàng)目三Dreamweaver CS3 基礎(chǔ) 內(nèi)容摘要內(nèi)容摘要 Dreamweaver CS3的優(yōu)勢(shì)特點(diǎn)和新特性 創(chuàng)建Web站點(diǎn)工作流程 。 如何啟動(dòng)Dreamweaver CS3應(yīng)用程序 。 Dreamweaver CS3主工作區(qū) 創(chuàng)建和打開(kāi)文檔的方法 創(chuàng)建本地站點(diǎn)的方法 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 了解Dreamweaver CS3其特點(diǎn) 了解創(chuàng)建Web站點(diǎn)的工作流程 掌握啟動(dòng)Dreamweaver CS3應(yīng)用程序的幾種方法，了解主工作區(qū) 掌握創(chuàng)建、打開(kāi)文檔的方法 學(xué)會(huì)建立本地站點(diǎn)Dreamweaver CS3 基礎(chǔ) 任務(wù)一描述：任務(wù)一描述：了解了解Dreamweaver CS3 前面小剛已經(jīng)學(xué)

2、習(xí)了網(wǎng)頁(yè)制作的基礎(chǔ)，了解了網(wǎng)站的類(lèi)型。但選擇那種軟件來(lái)之制作網(wǎng)頁(yè)呢？目前所見(jiàn)即所得類(lèi)型的工具越來(lái)越多，使用也越來(lái)越方便，所以制作網(wǎng)頁(yè)已經(jīng)變成了一件輕松的工作，不像以前要手工編寫(xiě)一行行的源代碼那樣，老師向小剛推薦了Dreamweaver CS3，現(xiàn)在我們就先來(lái)了解CS3軟件。解決方案解決方案 Dreamweaver CS3是集網(wǎng)頁(yè)制作和網(wǎng)站管理與一身的“所見(jiàn)即所得” 的網(wǎng)頁(yè)編輯軟件，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。它以強(qiáng)大的功能和友好的界面?zhèn)涫軓V大網(wǎng)頁(yè)設(shè)計(jì)者的歡迎，已成為網(wǎng)頁(yè)制作的首選軟件。 通過(guò)對(duì)Dreamweaver CS3特點(diǎn)的分析和功能的介紹對(duì)其有

3、個(gè)初步的了解。Dreamweaver CS3基礎(chǔ) 知識(shí)講解及操作步驟知識(shí)講解及操作步驟Dreamweaver特點(diǎn)：靈活編寫(xiě)網(wǎng)頁(yè)的特點(diǎn)可視化編輯界面強(qiáng)大的Web站點(diǎn)管理功能 業(yè)界領(lǐng)先的網(wǎng)頁(yè)設(shè)計(jì)工具 集成的工作流 整的CSS支持 輕松的SpryDreamweaver CS3基礎(chǔ) 任務(wù)二描述：任務(wù)二描述：了解了解Dreamweaver CS3創(chuàng)建創(chuàng)建Web站點(diǎn)的工作流程站點(diǎn)的工作流程 經(jīng)過(guò)對(duì)Dreamweaver CS3特點(diǎn)、新特性的了解，小剛已經(jīng)對(duì)Dreamweaver CS3有了基本的認(rèn)識(shí)，下面我們來(lái)學(xué)習(xí)如何利用Dreamweaver CS3創(chuàng)建Web站點(diǎn)的流程。解決方案解決方案 制作網(wǎng)站上的網(wǎng)

4、頁(yè)，對(duì)于熟練網(wǎng)頁(yè)制作的使用者來(lái)說(shuō)，通常是先建立本站站點(diǎn)，然后在本地站點(diǎn)中創(chuàng)建網(wǎng)站文件夾，把制作網(wǎng)頁(yè)的相關(guān)文件、圖像復(fù)制到相應(yīng)的文件夾內(nèi)，接著再利用相關(guān)文件和素材，制作網(wǎng)站上的網(wǎng)頁(yè)。最后，在完成網(wǎng)頁(yè)制作以后，利用本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的鏈接，發(fā)布網(wǎng)頁(yè)，完成真正的網(wǎng)頁(yè)制作過(guò)程。因此，在制作網(wǎng)頁(yè)之前，本小節(jié)將簡(jiǎn)單地介紹站點(diǎn)建設(shè)。Dreamweaver CS3基礎(chǔ) 知識(shí)講解及操作步驟知識(shí)講解及操作步驟站點(diǎn)的規(guī)劃管理站點(diǎn)文件設(shè)計(jì)web頁(yè)面布局向頁(yè)面添加內(nèi)容手工編碼設(shè)置web應(yīng)用程序創(chuàng)建動(dòng)態(tài)頁(yè)快速開(kāi)發(fā)應(yīng)用程序Dreamweaver CS3基礎(chǔ) 任務(wù)三描述：任務(wù)三描述：了解了解Dreamweaver CS3的啟

5、動(dòng)和主工作區(qū)的啟動(dòng)和主工作區(qū) 小剛在了解了Dreamweaver CS3創(chuàng)建網(wǎng)站的工作流程之后，已經(jīng)迫不及待地要制作自己的網(wǎng)站了，但老師告訴他在使用之前你還需要學(xué)會(huì)如何啟動(dòng)它，了解Dreamweaver CS3的主工作區(qū)。解決方案解決方案 使用Dreamweaver CS3之前，應(yīng)該先啟動(dòng)它。根據(jù)軟件安裝的不同情況，啟動(dòng)Dreamweaver CS3的方法有通過(guò)快速啟動(dòng)欄啟動(dòng)、通過(guò)桌面快捷方式圖標(biāo)啟動(dòng)、通過(guò)選擇命令啟動(dòng)及通過(guò)“運(yùn)行”對(duì)話框啟動(dòng)。Dreamweaver CS3基礎(chǔ) 知識(shí)講解及操作步驟知識(shí)講解及操作步驟 成功安裝好后，它會(huì)自動(dòng)出現(xiàn)在“開(kāi)始”菜單的程序組中，選擇“開(kāi)始”|“所有程序”

6、|“Adobe Dreamweaver CS3”命令，即可啟動(dòng)Dreamweaver CS3。如下圖Dreamweaver CS3基礎(chǔ) 其他啟動(dòng)方法：其他啟動(dòng)方法：l 通過(guò)快速啟動(dòng)欄啟動(dòng)：，單擊快速啟動(dòng)欄中啟動(dòng) Dreamweaver CS3的快捷方式圖標(biāo)。l 通過(guò)桌面快捷方式圖標(biāo)啟動(dòng)：雙擊Dreamweaver CS3快捷方式圖 標(biāo)即可打開(kāi)應(yīng)用程序。l 通過(guò)“運(yùn)行”對(duì)話框啟動(dòng) 選擇“開(kāi)始”|“運(yùn)行”命令，在打開(kāi)的對(duì)話框中輸入“dreamweaver”,單擊確定即可。Dreamweaver CS3基礎(chǔ) Dreamweaver CS3的工作區(qū)主要包括以下幾個(gè)部分 ，如圖所示：Dreamweave

7、r CS3基礎(chǔ) 知識(shí)講解及操作步驟知識(shí)講解及操作步驟單擊“保存”按鈕，保存網(wǎng)頁(yè)為HTML文檔，保存后，網(wǎng)頁(yè)的名稱(chēng)、路徑、類(lèi)型都顯示在Dreamweaver上的標(biāo)題欄上 如果要將網(wǎng)頁(yè)另存為其他文件，可以選擇菜單“文件”|“另存為”命令，打開(kāi)的“另存為”對(duì)話框，然后在“文件名”文本框中輸入其他網(wǎng)頁(yè)名稱(chēng)即可，默認(rèn)情況下，保存的網(wǎng)頁(yè)類(lèi)型是HTML文檔。使用另存網(wǎng)頁(yè)的方法主要是方便使用者制作結(jié)構(gòu)、樣式、屬性等相同的頁(yè)面。如果要打開(kāi)網(wǎng)頁(yè)文件，可以選擇菜單“文件”|“打開(kāi)”命令，在“打開(kāi)”對(duì)話框中選擇需要打開(kāi)的網(wǎng)頁(yè)文件 Dreamweaver CS3基礎(chǔ) 任務(wù)五描述：任務(wù)五描述：建立站點(diǎn)建立站點(diǎn) 站點(diǎn)是建立

8、和管理網(wǎng)站文件的一種方式和方法，因此，建立站點(diǎn)是創(chuàng)建網(wǎng)站的一個(gè)重要前提之一。Dreamweaver CS3是一個(gè)站點(diǎn)創(chuàng)建和管理工具，使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的站點(diǎn)。解決方案解決方案 在使用Dreamweaver CS3制作網(wǎng)頁(yè)前，最好先定義一個(gè)新站點(diǎn)，這是為了更好地利用站點(diǎn)對(duì)文件進(jìn)行管理，盡可能減少錯(cuò)誤，如路徑出錯(cuò)、鏈接出錯(cuò)等。我們可以使用【站點(diǎn)定義向?qū)А堪凑仗崾究焖賱?chuàng)建本地站點(diǎn) Dreamweaver CS3基礎(chǔ) 操作步驟操作步驟選擇【站點(diǎn)】|【管理站點(diǎn)】命令，彈出【管理站點(diǎn)】對(duì)話框，在對(duì)話框中單擊【新建】按鈕，在彈出菜單中選擇【站點(diǎn)】選項(xiàng) 。彈出【站點(diǎn)定義為】對(duì)話框，在

9、對(duì)話框中選擇【基本】選項(xiàng)卡，彈出【站點(diǎn)定義向?qū)А康牡谝粋€(gè)界面，在該界面中可以根據(jù)網(wǎng)站的需要給網(wǎng)站起一個(gè)名字 。單擊【下一步】按鈕，出現(xiàn)向?qū)У南乱粋€(gè)界面，詢(xún)問(wèn)是否要使用服務(wù)器技術(shù)，如果建立一個(gè)靜態(tài)站點(diǎn)，選擇【否，我不想使用服務(wù)器技術(shù)】選項(xiàng)，如果建立的是一個(gè)動(dòng)態(tài)站點(diǎn)，選擇【是，我想使用服務(wù)器技術(shù)】選項(xiàng)，我們要?jiǎng)?chuàng)建靜態(tài)站點(diǎn)，所以選擇【否，我不想使用服務(wù)器技術(shù)】選項(xiàng)。 Dreamweaver CS3基礎(chǔ) 操作步驟操作步驟單擊【下一步】按鈕，彈出如圖3-21所示對(duì)話框，在該對(duì)話框中選擇要定義的本地根文件夾，并指定站點(diǎn)位置。 單擊【下一步】按鈕，詢(xún)問(wèn)是否使用服務(wù)器，因?yàn)闆](méi)有使用遠(yuǎn)程服務(wù)器，這里選擇【無(wú)】，將整個(gè)站點(diǎn)制作完成以后再上傳 單擊【下一步】按鈕，將顯示站點(diǎn)概要 單擊【完成】按鈕，出現(xiàn)【管理站點(diǎn)】對(duì)話框，其中顯示了新建站點(diǎn) 單擊【完成】按鈕，此時(shí)在【文件】面板中可以看見(jiàn)創(chuàng)建的站點(diǎn)文件 Dreamweaver CS3基礎(chǔ) 上機(jī)操作上機(jī)操作 ：用Dreamweaver CS3 新建一個(gè)網(wǎng)頁(yè)文檔 通過(guò)本章學(xué)習(xí)我們初步了解了Dreamweaver CS3功能，基本操作。下面我們將在新建的站點(diǎn)中通過(guò)模板新建一個(gè)