網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程第3章AdobeDreamweaveCS3入課件

網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程機(jī)械工業(yè)出版社同名教材配套電子課件2009.4網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程機(jī)械工業(yè)出版社同名教材1第3章AdobeDreamweaveCS3入門知識(shí)3.1Dreamweave

概述3.2AdobeDreamweaveCS3工作環(huán)境3.3站點(diǎn)的建立3.4站點(diǎn)文件的基本操作3.5邊學(xué)邊做第3章AdobeDreamweaveCS3入門知識(shí)23.1Dreamweave

概述

Dreamweave特點(diǎn)Dreamweave是一款專業(yè)的HTML編輯器，它的功能特點(diǎn)如下：可視化編輯功能高效的站點(diǎn)管理全面的編碼環(huán)境支持服務(wù)器功能擴(kuò)展功能3.1Dreamweave概述Dreamweave特33.2AdobeDreamweaveCS3工作環(huán)境工作區(qū)布局選擇3.2AdobeDreamweaveCS3工作環(huán)境工43.2AdobeDreamweaveCS3工作環(huán)境“設(shè)計(jì)器”工作區(qū)布局3.2AdobeDreamweaveCS3工作環(huán)境“53.2AdobeDreamweaveCS3工作環(huán)境Dreamweaver的工作區(qū)組成:

文檔窗口“插入”欄文檔工具欄面板組標(biāo)簽選擇器“屬性”面板“文件”面板3.2AdobeDreamweaveCS3工作環(huán)境D63.2AdobeDreamweaveCS3工作環(huán)境“插入”欄文檔工具欄A.顯示代碼視圖

B.顯示代碼視圖和設(shè)計(jì)視圖C.顯示設(shè)計(jì)視圖

D.文檔標(biāo)題

E.文件管理

F.在瀏覽器中預(yù)覽/調(diào)試G.刷新設(shè)計(jì)視圖H.視圖選項(xiàng)

I.可視化助理J.驗(yàn)證標(biāo)記 K.檢查瀏覽器兼容性3.2AdobeDreamweaveCS3工作環(huán)境“73.2AdobeDreamweaveCS3工作環(huán)境狀態(tài)欄屬性面板3.2AdobeDreamweaveCS3工作環(huán)境狀83.2AdobeDreamweaveCS3工作環(huán)境“文件”面板3.2AdobeDreamweaveCS3工作環(huán)境“93.2AdobeDreamweaveCS3工作環(huán)境菜單功能

文件菜單編輯菜單視圖菜單插入菜單站點(diǎn)菜單窗口菜單幫助菜單快捷菜單3.2AdobeDreamweaveCS3工作環(huán)境菜103.2AdobeDreamweaveCS3工作環(huán)境自定義DreamweavrCS3工作區(qū)

1、顯示和隱蔽面板3.2AdobeDreamweaveCS3工作環(huán)境自113.2AdobeDreamweaveCS3工作環(huán)境2、設(shè)置Dreamweaver的首選參數(shù)

3.2AdobeDreamweaveCS3工作環(huán)境123.2AdobeDreamweaveCS3工作環(huán)境顯示和隱藏歡迎屏幕3.2AdobeDreamweaveCS3工作環(huán)境顯133.3站點(diǎn)的建立建立站點(diǎn)的目的就是為了有效的組織管理設(shè)計(jì)網(wǎng)頁(yè)所需要的各種元素。站點(diǎn)需要一個(gè)名稱和存儲(chǔ)位置也就是目錄，它可以是存儲(chǔ)磁盤的任何位置。站點(diǎn)有網(wǎng)絡(luò)服務(wù)器中的站點(diǎn)（即遠(yuǎn)程站點(diǎn)）和本地站點(diǎn)兩種創(chuàng)建形式。3.3站點(diǎn)的建立建立站點(diǎn)的目的就是為了有效的組織管理設(shè)計(jì)網(wǎng)143.3站點(diǎn)的建立選擇主菜單【站點(diǎn)】/【新建站點(diǎn)】命令，在文本框內(nèi)輸入站點(diǎn)的名稱，單擊“確定”按鈕3.3站點(diǎn)的建立選擇主菜單【站點(diǎn)】/【新建站點(diǎn)】命令，在153.3站點(diǎn)的建立如果要使用服務(wù)器技術(shù)（如：ASP等），可單擊選擇第二個(gè)單選項(xiàng)，否則默認(rèn)選擇第一個(gè)單選項(xiàng)。單擊“下一步”。3.3站點(diǎn)的建立如果要使用服務(wù)器技術(shù)（如：ASP等），可單163.3站點(diǎn)的建立選擇在本地編輯還是在服務(wù)器編輯。并在文本框中指定站點(diǎn)文件夾的位置。單擊“下一步”。3.3站點(diǎn)的建立選擇在本地編輯還是在服務(wù)器編輯。并在文本框173.3站點(diǎn)的建立選擇如何連接到服務(wù)器。選擇是否啟用存回和取出模式。3.3站點(diǎn)的建立選擇如何連接到服務(wù)器。選擇是否啟用存回和取183.3站點(diǎn)的建立總結(jié)新創(chuàng)建的站點(diǎn)的所有設(shè)置信息，確認(rèn)后單擊“完成”按鈕?！拔募泵姘鍟?huì)顯示出新創(chuàng)建的站點(diǎn)文件夾。3.3站點(diǎn)的建立總結(jié)新創(chuàng)建的站點(diǎn)的所有設(shè)置信息，確認(rèn)后單擊193.3站點(diǎn)的建立創(chuàng)建站點(diǎn)目錄和文件操作方法可以是：在“文件”面扳中右鍵擊“我的網(wǎng)站”站點(diǎn)，在彈出的快捷菜單中執(zhí)行“新建文件（或新建文件夾）”命令。在出現(xiàn)文本框中重命名文件名（或文件夾名稱），這樣就方便地達(dá)到了有序管理所有站點(diǎn)資源的目的3.3站點(diǎn)的建立創(chuàng)建站點(diǎn)目錄和文件203.3站點(diǎn)的建立修改站點(diǎn)信息選擇主菜單【站點(diǎn)】/【管理站點(diǎn)】目錄，彈出“管理站點(diǎn)”對(duì)話框，如圖所示。單擊需要修改的站點(diǎn)名稱，再單擊“編輯”按鈕，即可再次彈出“站點(diǎn)定義”對(duì)話框，然后重新進(jìn)行站點(diǎn)設(shè)置。

3.3站點(diǎn)的建立修改站點(diǎn)信息213.3站點(diǎn)的建立站點(diǎn)視圖單擊“文件”面板中的“展開/折疊”按鈕（），將站點(diǎn)文件窗口展開為最大化。對(duì)窗口可以調(diào)整查看區(qū)域的大小，并利用該窗口更改站點(diǎn)視圖方式。如圖所示的是分別以“站點(diǎn)文件”視圖方式和“站點(diǎn)地圖和文件”視圖方式查看站點(diǎn)信息。3.3站點(diǎn)的建立站點(diǎn)視圖223.4站點(diǎn)文件的基本操作

創(chuàng)建和打開文檔1、新建文檔2、打開文檔3、保存文檔3.4站點(diǎn)文件的基本操作創(chuàng)建和打開文檔233.4站點(diǎn)文件的基本操作管理文件和文件夾文件”面板功能十分重要，它可以用于：訪問站點(diǎn)、服務(wù)器和本地驅(qū)動(dòng)器、查看文件和文件夾、管理文件和文件夾，以及使用站點(diǎn)的可視化地圖等工作。在“文件”面板中，可以及時(shí)處理站點(diǎn)文件和文件夾，如：打開文件、更改文件名；添加、移動(dòng)或刪除文件；在進(jìn)行更改后刷新“文件”面板。對(duì)于Dreamweaver站點(diǎn)，還可以確定哪些文件（本地站點(diǎn)或遠(yuǎn)程站點(diǎn)上）在上次傳輸后進(jìn)行了更新。在“文件”面板中，選擇一個(gè)文件或文件夾。右鍵單擊，在彈出的快捷菜單中選擇“新建文件”或“新建文件夾”選項(xiàng)；輸入新文件或新文件夾的名稱，按“Enter”鍵即可創(chuàng)建新的文件（文件夾）。3.4站點(diǎn)文件的基本操作管理文件和文件夾243.4站點(diǎn)文件的基本操作3.4站點(diǎn)文件的基本操作253.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）從“開始”按鈕的彈出菜單中選擇AdobeDreamweaverCS3，啟動(dòng)軟件。單擊“歡迎”屏幕中“打開最近的項(xiàng)目”底部的“打開”按鈕。在“打開”對(duì)話框中選擇“index1.html”文檔，并確認(rèn)打開，如圖所示，此時(shí)窗口默認(rèn)以“設(shè)計(jì)視圖”方式顯示文檔編輯內(nèi)容。3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏263.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏273.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）在Dreamweaver中，單擊“文檔”工具欄中“代碼視圖”按鈕，窗口顯示如圖所示。3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏283.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）單擊“拆分視圖”按鈕，窗口顯示如圖所示。3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏293.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）單擊“文檔”工具欄中預(yù)覽按鈕，如圖所示，在瀏覽器窗口中獲得網(wǎng)頁(yè)效果。也可以按F12瀏覽網(wǎng)頁(yè)。3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏303.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽網(wǎng)頁(yè)）思考與練習(xí)描述改變面板的大小、位置的操作方法。簡(jiǎn)述屬性面板的作用。描述文件打開、存儲(chǔ)的操作過程。創(chuàng)建站點(diǎn)的基本步驟是什么？簡(jiǎn)述站點(diǎn)視圖的幾種查看方式？創(chuàng)建一個(gè)個(gè)人主頁(yè)站點(diǎn)。3.5邊學(xué)邊做（用DreamweaverCS3打開并瀏31網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程機(jī)械工業(yè)出版社同名教材配套電子課件2009.4網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程機(jī)械工業(yè)出版社同名教材32第3章AdobeDreamweaveCS3入門知識(shí)3.1Dreamweave

概述3.2AdobeDreamweaveCS3工作環(huán)境3.3站點(diǎn)的建立3.4站點(diǎn)文件的基本操作3.5邊學(xué)邊做第3章AdobeDreamweaveCS3入門知識(shí)333.1Dreamweave

概述

Dreamweave特點(diǎn)Dreamweave是一款專業(yè)的HTML編輯器，它的功能特點(diǎn)如下：可視化編輯功能高效的站點(diǎn)管理全面的編碼環(huán)境支持服務(wù)器功能擴(kuò)展功能3.1Dreamweave概述Dreamweave特343.2AdobeDreamweaveCS3工作環(huán)境工作區(qū)布局選擇3.2AdobeDreamweaveCS3工作環(huán)境工353.2AdobeDreamweaveCS3工作環(huán)境“設(shè)計(jì)器”工作區(qū)布局3.2AdobeDreamweaveCS3工作環(huán)境“363.2AdobeDreamweaveCS3工作環(huán)境Dreamweaver的工作區(qū)組成:

文檔窗口“插入”欄文檔工具欄面板組標(biāo)簽選擇器“屬性”面板“文件”面板3.2AdobeDreamweaveCS3工作環(huán)境D373.2AdobeDreamweaveCS3工作環(huán)境“插入”欄文檔工具欄A.顯示代碼視圖

B.顯示代碼視圖和設(shè)計(jì)視圖C.顯示設(shè)計(jì)視圖

D.文檔標(biāo)題

E.文件管理

F.在瀏覽器中預(yù)覽/調(diào)試G.刷新設(shè)計(jì)視圖H.視圖選項(xiàng)

I.可視化助理J.驗(yàn)證標(biāo)記 K.檢查瀏覽器兼容性3.2AdobeDreamweaveCS3工作環(huán)境“383.2AdobeDreamweaveCS3工作環(huán)境狀態(tài)欄屬性面板3.2AdobeDreamweaveCS3工作環(huán)境狀393.2AdobeDreamweaveCS3工作環(huán)境“文件”面板3.2AdobeDreamweaveCS3工作環(huán)境“403.2AdobeDreamweaveCS3工作環(huán)境菜單功能

文件菜單編輯菜單視圖菜單插入菜單站點(diǎn)菜單窗口菜單幫助菜單快捷菜單3.2AdobeDreamweaveCS3工作環(huán)境菜413.2AdobeDreamweaveCS3工作環(huán)境自定義DreamweavrCS3工作區(qū)

1、顯示和隱蔽面板3.2AdobeDreamweaveCS3工作環(huán)境自423.2AdobeDreamweaveCS3工作環(huán)境2、設(shè)置Dreamweaver的首選參數(shù)

3.2AdobeDreamweaveCS3工作環(huán)境433.2AdobeDreamweaveCS3工作環(huán)境顯示和隱藏歡迎屏幕3.2AdobeDreamweaveCS3工作環(huán)境顯443.3站點(diǎn)的建立建立站點(diǎn)的目的就是為了有效的組織管理設(shè)計(jì)網(wǎng)頁(yè)所需要的各種元素。站點(diǎn)需要一個(gè)名稱和存儲(chǔ)位置也就是目錄，它可以是存儲(chǔ)磁盤的任何位置。站點(diǎn)有網(wǎng)絡(luò)服務(wù)器中的站點(diǎn)（即遠(yuǎn)程站點(diǎn)）和本地站點(diǎn)兩種創(chuàng)建形式。3.3站點(diǎn)的建立建立站點(diǎn)的目的就是為了有效的組織管理設(shè)計(jì)網(wǎng)453.3站點(diǎn)的建立選擇主菜單【站點(diǎn)】/【新建站點(diǎn)】命令，在文本框內(nèi)輸入站點(diǎn)的名稱，單擊“確定”按鈕3.3站點(diǎn)的建立選擇主菜單【站點(diǎn)】/【新建站點(diǎn)】命令，在463.3站點(diǎn)的建立如果要使用服務(wù)器技術(shù)（如：ASP等），可單擊選擇第二個(gè)單選項(xiàng)，否則默認(rèn)選擇第一個(gè)單選項(xiàng)。單擊“下一步”。3.3站點(diǎn)的建立如果要使用服務(wù)器技術(shù)（如：ASP等），可單473.3站點(diǎn)的建立選擇在本地編輯還是在服務(wù)器編輯。并在文本框中指定站點(diǎn)文件夾的位置。單擊“下一步”。3.3站點(diǎn)的建立選擇在本地編輯還是在服務(wù)器編輯。并在文本框483.3站點(diǎn)的建立選擇如何連接到服務(wù)器。選擇是否啟用存回和取出模式。3.3站點(diǎn)的建立選擇如何連接到服務(wù)器。選擇是否啟用存回和取493.3站點(diǎn)的建立總結(jié)新創(chuàng)建的站點(diǎn)的所有設(shè)置信息，確認(rèn)后單擊“完成”按鈕?！拔募泵姘鍟?huì)顯示出新創(chuàng)建的站點(diǎn)文件夾。3.3站點(diǎn)的建立總結(jié)新創(chuàng)建的站點(diǎn)的所有設(shè)置信息，確認(rèn)后單擊503.3站點(diǎn)的建立創(chuàng)建站點(diǎn)目錄和文件操作方法可以是：在“文件”面扳中右鍵擊“我的網(wǎng)站”站點(diǎn)，在彈出的快捷菜單中執(zhí)行“新建文件（或新建文件夾）”命令。在出現(xiàn)文本框中重命名文件名（或文件夾名稱），這樣就方便地達(dá)到了有序管理所有站點(diǎn)資源的目的3.3站點(diǎn)的建立創(chuàng)建站點(diǎn)目錄和文件513.3站點(diǎn)的建立修改站點(diǎn)信息選擇主菜單【站點(diǎn)】/【管理站點(diǎn)】目錄，彈出“管理站點(diǎn)”對(duì)話框，如圖所示。單擊需要修改的站點(diǎn)名稱，再單擊“編輯”按鈕，即可再次彈出“站點(diǎn)定義”對(duì)話框，然后重新進(jìn)行站點(diǎn)設(shè)置。

3.3站點(diǎn)的建立修改站點(diǎn)信息523.3站點(diǎn)的建立站點(diǎn)視圖單擊“文件”面板中的“展開/折疊”按鈕（），將站點(diǎn)文件窗口展開為最大化。對(duì)窗口可以調(diào)整查看區(qū)域的大小，并利用該窗口更改站點(diǎn)視圖方式。如圖所示的是分別以“站點(diǎn)文件”視圖方式和“站點(diǎn)地圖和文件”視圖方式查看站點(diǎn)信息。3.3站點(diǎn)的建立站點(diǎn)視圖533.4站點(diǎn)文件的基本操作

創(chuàng)建和打開文檔1、新建文檔2、打開文檔3、保存文檔3.4站點(diǎn)文件的基本操作創(chuàng)建和打開文檔543.4站點(diǎn)文件的基本操作管理文件和文件夾文件”面板功能十分重要，它可以用于：訪問站點(diǎn)、服務(wù)器和本地驅(qū)動(dòng)器、查看文件和文件夾、管理文件和文件夾，以及使用站點(diǎn)的可視化地圖等工作。在“文件”面板中，可以及時(shí)處理站點(diǎn)文件和文件夾，如：打開文件、更改文件名；添加、移動(dòng)或刪除文件；在進(jìn)行更改后刷新“文件”面板。對(duì)于Dreamweaver站點(diǎn)，還可以確定哪些文件（本地站點(diǎn)或遠(yuǎn)程站點(diǎn)上）在上次傳輸后進(jìn)行了更新。在“文件”面板中，選擇一個(gè)文件或文件夾。右鍵單擊，在彈出的快捷菜單中選擇“新建文件”或“新建文件夾”選項(xiàng)；輸入新文件或新文件夾的名稱，按“Enter”鍵即可創(chuàng)建新的文件（文件夾）。3.4站點(diǎn)文件的基本操作管理文件和文件夾553.4站點(diǎn)文件的基本操作3.4站點(diǎn)文件的基本操作563.5邊學(xué)邊做（用DreamweaverCS3打開并瀏覽