網(wǎng)頁制作與網(wǎng)站設計_03DreamweaverCS3基礎

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

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

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

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

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

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

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

8、和管理網(wǎng)站文件的一種方式和方法，因此，建立站點是創(chuàng)建網(wǎng)站的一個重要前提之一。Dreamweaver CS3是一個站點創(chuàng)建和管理工具，使用它不僅可以創(chuàng)建單獨的文檔，還可以創(chuàng)建完整的站點。解決方案解決方案 在使用Dreamweaver CS3制作網(wǎng)頁前，最好先定義一個新站點，這是為了更好地利用站點對文件進行管理，盡可能減少錯誤，如路徑出錯、鏈接出錯等。我們可以使用【站點定義向導】按照提示快速創(chuàng)建本地站點 Dreamweaver CS3基礎 操作步驟操作步驟選擇【站點】|【管理站點】命令，彈出【管理站點】對話框，在對話框中單擊【新建】按鈕，在彈出菜單中選擇【站點】選項 。彈出【站點定義為】對話框，在

9、對話框中選擇【基本】選項卡，彈出【站點定義向導】的第一個界面，在該界面中可以根據(jù)網(wǎng)站的需要給網(wǎng)站起一個名字 。單擊【下一步】按鈕，出現(xiàn)向導的下一個界面，詢問是否要使用服務器技術，如果建立一個靜態(tài)站點，選擇【否，我不想使用服務器技術】選項，如果建立的是一個動態(tài)站點，選擇【是，我想使用服務器技術】選項，我們要創(chuàng)建靜態(tài)站點，所以選擇【否，我不想使用服務器技術】選項。 Dreamweaver CS3基礎 操作步驟操作步驟單擊【下一步】按鈕，彈出如圖3-21所示對話框，在該對話框中選擇要定義的本地根文件夾，并指定站點位置。 單擊【下一步】按鈕，詢問是否使用服務器，因為沒有使用遠程服務器，這里選擇【無】，將整個站點制作完成以后再上傳 單擊【下一步】按鈕，將顯示站點概要 單擊【完成】按鈕，出現(xiàn)【管理站點】對話框，其中顯示了新建站點 單擊【完成】按鈕，此時在【文件】面板中可以看見創(chuàng)建的站點文件 Dreamweaver CS3基礎 上機操作上機操作 ：用Dreamweaver CS3 新建一個網(wǎng)頁文檔 通過本章學習我們初步了解了Dreamweaver CS3功能，基本操作。下面我們將在新建的站點中通過模板新建一個