DreamWeaver實(shí)例教程前5例.doc

DW網(wǎng)頁設(shè)計(jì)100例1：構(gòu)建開發(fā)環(huán)境（ 1 ）單擊【開始】【控制面板】，如圖 1-1 所示。圖 1-1 打開控制面板（ 2 ）在彈出的【控制面板】窗口中雙擊【添加或刪除程序】按鈕圖標(biāo)，在彈出的【添加或刪除程序】對話框中選擇安裝 IIS 服務(wù)器，如圖 1-2 所示。（ 3 ）安裝好 IIS 服務(wù)器后，在【控制面板】窗口中單擊管理工具，然后在彈出的【管理工具】窗口中單擊【 Internet 信息服務(wù)】，進(jìn)行默認(rèn)站點(diǎn)屬性的設(shè)置，具體操作如圖 1-3 所示。（ 4 ）安裝 .NET 框架。 .NET 框架是創(chuàng)建、部署和運(yùn)行 Web 服務(wù)及其他應(yīng)用程序的一個(gè)環(huán)境。它包括三個(gè)主要部分：公共語言運(yùn)行時(shí)、框架類和 ASP.NET 。安裝 .NET 框架其實(shí)就是構(gòu)建 ASP.NET 開發(fā)環(huán)境。.NET 框架 SDK 可在微軟的網(wǎng)站上下載，如 .NET Framework 2.0 和相應(yīng)版本的 SDK 工具包的下載安裝網(wǎng)址如下： .NET Framework 2.0 框架（ .NET Framework 2.0 版可再發(fā)行組件包測試版 2 x86 ），下載地址為 /downloads/details.aspx?displaylang =zh-cn&FamilyID =7abd 8c 8f -287e -4c 7e -9a 4a -a4ecff40fc8e ； .NET Framework 2.0 SDK 工具包（ .NET Framework 2.0 SDK Beta 2 x86 ），下載地址為 /downloads/details.aspx?FamilyID=41070791-8912-4f94-ac46-7ce0e386dsc9&DisplayLang=en ；（上面兩個(gè)下載地址，可直接復(fù)制【光盤】 | 【源文件】 | 【實(shí)例 1 】【 1.1.txt 】中的內(nèi)容而獲得） .NET Framework 2.0 中文語言包已附在隨書光盤的【源文件】 | 【實(shí)例 1 】中。（ 5 ）測試環(huán)境。安裝完成后打開 IE 瀏覽器，在地址欄上輸入“ localhost/text.aspx ”，假定 text.aspx 文檔不存在，那么 IE 瀏覽器上一定會(huì)返回錯(cuò)誤信息。如果出現(xiàn)如圖 1-4 所示的錯(cuò)誤信息，則說明 ASP.NET 的運(yùn)行環(huán)境基本構(gòu)建完畢。（ 6 ）在windows 2003操作系統(tǒng)中構(gòu)建 ASP.NET 運(yùn)行環(huán)境。上面介紹的是在windows 2000或 XP 操作系統(tǒng)中構(gòu)建 ASP.NET 運(yùn)行環(huán)境的步驟和方法。在這里順便介紹一下在windows 2003操作系統(tǒng)中構(gòu)建 ASP.NET 運(yùn)行環(huán)境的兩種方法。一是使用【配置您的服務(wù)器向?qū)А堪惭b IIS 6.0 和 ASP.NET ，操作步驟如下： 放入windows 2003系統(tǒng)安裝盤，在【開始】菜單中單擊【管理您的服務(wù)器】； 在【管理您的服務(wù)器角色】下單擊【添加或刪除角色】； 閱讀【配置您的服務(wù)器向?qū)А恐械念A(yù)備步驟，然后單擊【下一步】； 在【服務(wù)器角色】下單擊【應(yīng)用程序服務(wù)器（ IIS ， ASP.NET ）】，然后單擊【下一步】； 在【應(yīng)用程序服務(wù)器選項(xiàng)】對話框中選中【啟用 ASP.NET 】復(fù)選框，然后單擊【下一步】，再單擊“下一步”； 閱讀概要信息，然后單擊【下一步】； 最后單擊【完成】按鈕完成安裝。二是使用【控制面板】安裝 IIS 6.0 和 ASP.NET ，操作步驟如下：放入windows 2003系統(tǒng)安裝盤，在【開始】菜單中單擊【控制面板】，打開【控制面板】窗口； 雙擊【添加或刪除程序】圖標(biāo)； 在彈出的【添加或刪除程序】對話框中單擊【添加 / 刪除 Windows 組件】； 在彈出的【 Windows 組件向?qū)А繉υ捒蛑械摹窘M件】列表框里單擊【應(yīng)用程序服務(wù)器】； 接著單擊【詳細(xì)信息】； 單擊【 Internet 信息服務(wù)】管理器； 單擊【詳細(xì)信息】以查看 IIS 可選組件的列表； 選擇要安裝的所有可選組件； 單擊【確定】，直到返回【 Windows 組件向?qū)А繉υ捒颍?單擊【下一步】，退出【 Windows 組件向?qū)А繉υ捒?。?7 ）在windows 2003服務(wù)器中的 IIS 管理器中直接啟用 ASP.NET 的操作步驟如下： 在【開始】菜單中單擊【運(yùn)行】，打開【運(yùn)行】對話框； 在【運(yùn)行】對話框中的【打開】框中鍵入 inetmgr ，然后單擊【確定】； 在 IIS 管理器中展開本地計(jì)算機(jī)，然后單擊【 Web 服務(wù)擴(kuò)展】； 在右側(cè)窗格中用鼠標(biāo)右鍵單擊【 ASP.NET 】，然后單擊【允許】， ASP.NET 的狀態(tài)變?yōu)椤霸试S”。DW網(wǎng)頁設(shè)計(jì)100例2：快速建立站點(diǎn)在 Dreamweaver 中建立站點(diǎn)，是進(jìn)行網(wǎng)站開發(fā)的第二個(gè)關(guān)鍵步驟。這里所講的建立站點(diǎn)，其實(shí)就是在 Dreamweaver 中定義站點(diǎn)、策劃站點(diǎn)結(jié)構(gòu)、部署開發(fā)環(huán)境。定義站點(diǎn)是為了更好地利用【文件】面板對站點(diǎn)文件進(jìn)行管理，也是為減少一些錯(cuò)誤的出現(xiàn)，如路徑出錯(cuò)，鏈接出錯(cuò)等等。許多初學(xué)者開始做網(wǎng)頁時(shí)，就只知道做單一網(wǎng)頁，對文件的條理性、結(jié)構(gòu)性不加以管理，沒有對文件進(jìn)行分類管理，使整個(gè)站點(diǎn)結(jié)構(gòu)顯得很亂；所以在開發(fā)之前應(yīng)該認(rèn)真策劃好站點(diǎn)結(jié)構(gòu)。由于本書后面講解的是 ASP.NET 網(wǎng)絡(luò)應(yīng)用程序的開發(fā)，所以其開發(fā)之前，應(yīng)該部署好 Dreamweaver 有關(guān)開發(fā)運(yùn)行組件。效果說明圖 2-1 所示是用 Dreamweaver 建立的站點(diǎn)“ Dreamweaver100 ”，該站點(diǎn)是第 75 例至第 90 例中玩具公司構(gòu)建網(wǎng)站的站點(diǎn)。本例就是介紹這個(gè)站點(diǎn)的建立方法。打開 Dreamweaver MX 2004 軟件，執(zhí)行【站點(diǎn)】 | 【站點(diǎn)管理】命令，在彈出的【站點(diǎn)管理】對話框中選擇【新建】，按新建站點(diǎn)的步驟逐步進(jìn)行設(shè)置，最后保存完成制作。操作步驟步驟一 定義站點(diǎn)（ 1 ）開始新建站點(diǎn)。啟動(dòng) Dreamweaver MX 2004 ，切換到【文件】面板，單擊【管理站點(diǎn)】，然后在彈出的【管理站點(diǎn)】對話框中單擊【新建】按鈕，如圖 2-2 所示。（ 2 ）設(shè)置站點(diǎn)屬性參數(shù)。在彈出的【 Dreamweaver 100 的站點(diǎn)定義為】對話框的“編輯文件”、“編輯文件，第 2 部分”、“編輯文件，第 3 部分”中定義站點(diǎn)，如圖 2-3 所示。提示：本實(shí)例是切換到【基本】選項(xiàng)卡中設(shè)置站點(diǎn)，建議初學(xué)者先以此方式建立站點(diǎn)，再通過【高級(jí)】選項(xiàng)卡對站點(diǎn)進(jìn)行更詳細(xì)的設(shè)置。圖 2-3 中的步驟 4 如果選擇的是【否，我不想使用服務(wù)器技術(shù)】，則站點(diǎn)為靜態(tài)網(wǎng)站，此時(shí)將直接執(zhí)行步驟 6 。靜態(tài)網(wǎng)站與動(dòng)態(tài)網(wǎng)站的區(qū)別不是指網(wǎng)站有沒有 GIF 、 FLASH 動(dòng)畫，而是指有沒有互動(dòng)性?！盎?dòng)性”是指網(wǎng)站根據(jù)用戶的要求和選擇能夠動(dòng)態(tài)作出改變及響應(yīng)，能夠自動(dòng)更新網(wǎng)站，自動(dòng)生成批量頁面，能夠根據(jù)用戶的條件（時(shí)間、瀏覽器類型、用戶在站點(diǎn)的使用權(quán)限等），自動(dòng)生成不同頁面。圖 2-3 中的步驟 5 主要是根據(jù)自身熟悉的服務(wù)器技術(shù)進(jìn)行選擇。如果讀者熟悉 ASP 服務(wù)器技術(shù)，則可選擇【 ASP JavaScript 】、【 ASP VBScript 】這兩種腳本中的一種，如果熟悉 ASP.NET ，則應(yīng)選擇【 ASP.NET C# 】、【 ASP.NET VB 】或【 ASP.NET Jscript 】。圖 2-3 中的步驟 7 如果選擇的是【在本地進(jìn)行編輯，然后上傳到遠(yuǎn)程測試服務(wù)器】，那么在執(zhí)行完步驟 9 之后，將會(huì)進(jìn)入到【測試文件】中進(jìn)行遠(yuǎn)程服務(wù)器的有關(guān)設(shè)置；如果選擇的是【使用本地網(wǎng)絡(luò)直接在遠(yuǎn)程測試服務(wù)器上進(jìn)行編輯】，那么在第 8 步操作中就應(yīng)輸入該服務(wù)器的地址，鑒于安全性，建議初學(xué)者不要使用這種方式編輯網(wǎng)站。圖 2-3 中的步驟 8 輸入的是網(wǎng)站在本地網(wǎng)絡(luò)中的物理存儲(chǔ)位置，其設(shè)置一般與 IIS 服務(wù)器默認(rèn)站點(diǎn)主目錄的物理存儲(chǔ)位置一致。（ 3 ）接著測試站點(diǎn)及完成站點(diǎn)定義，如圖 2-4 所示。提示：圖 2-4 中所示的第 1 步操作輸入“ http:/localhost/ ”來代替在圖 2-3 中第 8 步操作所設(shè)置的物理路徑，現(xiàn)在打開 IE 就可以訪問 http:/localhost 站點(diǎn)下的所有 ASP.NET 網(wǎng)頁了。圖 2-4 中的步驟 5 是關(guān)于編輯完每一個(gè)網(wǎng)頁后是否將其傳到遠(yuǎn)程服務(wù)器上的設(shè)置，如果選擇【是的，我要使用遠(yuǎn)程服務(wù)器】，則執(zhí)行完步驟 7 之后，將會(huì)進(jìn)入到【測試文件】中進(jìn)行遠(yuǎn)程服務(wù)器的相關(guān)設(shè)置。步驟二 規(guī)劃站點(diǎn)結(jié)構(gòu)前面已說過，要認(rèn)真規(guī)劃好結(jié)構(gòu)，對站點(diǎn)的文件進(jìn)行分類管理，把不同類的文件分別放在不同的目錄下面。本實(shí)例的站點(diǎn)結(jié)構(gòu)規(guī)劃如下：站點(diǎn)目錄規(guī)劃用于存放所有網(wǎng)頁文件，文件夾“ bin ”用于部署 DreamweaverCtrls.dll 控件，文件夾“ dat ”用于存放數(shù)據(jù)庫，文件夾“ images ”用于存放與站點(diǎn)有關(guān)的圖片文件。具體操作如下：在文件面板中為站點(diǎn)“ Dreamweaver100 ”建立新文件夾“ bin ”、“ images ”、“ dat ”，如圖 2-5 所示。提示：不是每個(gè)新建站點(diǎn)都必須包括這三個(gè)文件夾。但文件夾“ bin ”一般是用于存放站點(diǎn)運(yùn)行的必要組件，文件夾“ images ”一般是用于存放與站點(diǎn)有關(guān)的圖片文件。讀者在站點(diǎn)規(guī)劃時(shí)，可以規(guī)劃更細(xì)一點(diǎn)，如網(wǎng)站的圖像放在一個(gè)文件中，產(chǎn)品圖像放在另一個(gè)文件中等等。但要注意的是，如果規(guī)劃要存放站點(diǎn)運(yùn)行的必要組件的文件夾名稱，要與步驟三中的步驟（ 2 ）所使用的文件夾相對應(yīng)步驟三 部署站點(diǎn)組件（ 1 ）選擇【文件】【新建】菜單命令，在彈出的【新建文檔】對話框中創(chuàng)建動(dòng)態(tài)頁為【 ASP.NET VB 】，如圖 2-6 所示。提示：由于本書主要講解 ASP.NET 網(wǎng)絡(luò)應(yīng)用程序的開發(fā)，所以是要通過新建 ASP.NET 動(dòng)態(tài)頁進(jìn)行開發(fā)的。而且如果不通過新建空白的 ASP.NET 動(dòng)態(tài)頁，是不能進(jìn)行下一步驟的（ 2 ）設(shè)置部署目錄。切換到【應(yīng)用程序】面板，選擇【綁定】選項(xiàng)卡，單擊【部署】按鈕，在彈出的【將支持文件部署到測試服務(wù)器】對話框中將部署目錄設(shè)置為“ C:Inetpubwwwrootbin ”，如圖 2-7 所示。提示：這里的綁定其實(shí)就是綁定 DreamweaverCtrls.dll 文件， DreamweaverCtrls.dll 文件是 Dreamweaver 下 服務(wù)器行為運(yùn)行的必要組件。 DreamweaverCtrls.dll 文件名稱及其所在目錄 bin 名稱不能更改，并且 bin 文件夾必須保存在站點(diǎn)的根目錄下。（ 3 ）如果在“ c:Intepubwwwroot ”文件夾下找不到“ aspnet_client ”文件，請將“光碟 源文件 實(shí)例 2aspnet_client ”文件夾復(fù)制到“ c:Intepubwwwroot ”文件夾下。提示：“ aspnet_client ”文件在安裝 .NET 框架時(shí)，默認(rèn)情況下安裝到“ c:Intepubwwwroot ”文件夾下（系統(tǒng)盤為 C 盤時(shí)）。構(gòu)建好了開發(fā)環(huán)境，在 Dreamweaver 中建立好站點(diǎn)之后，可以說是網(wǎng)絡(luò)應(yīng)用程序的加工廠的構(gòu)建完畢，可以加工各種產(chǎn)品網(wǎng)頁、網(wǎng)絡(luò)應(yīng)用程序等等。在 Dreamweaver 中建立站點(diǎn)，是進(jìn)行網(wǎng)站開發(fā)的第二個(gè)關(guān)鍵步驟。這里所講的建立站點(diǎn)，其實(shí)就是在 Dreamweaver 中定義站點(diǎn)、策劃站點(diǎn)結(jié)構(gòu)、部署開發(fā)環(huán)境。定義站點(diǎn)是為了更好地利用【文件】面板對站點(diǎn)文件進(jìn)行管理，也是為減少一些錯(cuò)誤的出現(xiàn)，如路徑出錯(cuò)，鏈接出錯(cuò)等等。許多初學(xué)者開始做網(wǎng)頁時(shí)，就只知道做單一網(wǎng)頁，對文件的條理性、結(jié)構(gòu)性不加以管理，沒有對文件進(jìn)行分類管理，使整個(gè)站點(diǎn)結(jié)構(gòu)顯得很亂；所以在開發(fā)之前應(yīng)該認(rèn)真策劃好站點(diǎn)結(jié)構(gòu)。由于本書后面講解的是 ASP.NET 網(wǎng)絡(luò)應(yīng)用程序的開發(fā)，所以其開發(fā)之前，應(yīng)該部署好 Dreamweaver 有關(guān)開發(fā)運(yùn)行組件。效果說明圖 2-1 所示是用 Dreamweaver 建立的站點(diǎn)“ Dreamweaver100 ”，該站點(diǎn)是第 75 例至第 90 例中玩具公司構(gòu)建網(wǎng)站的站點(diǎn)。本例就是介紹這個(gè)站點(diǎn)的建立方法。創(chuàng)作思想打開 Dreamweaver MX 2004 軟件，執(zhí)行【站點(diǎn)】 | 【站點(diǎn)管理】命令，在彈出的【站點(diǎn)管理】對話框中選擇【新建】，按新建站點(diǎn)的步驟逐步進(jìn)行設(shè)置，最后保存完成制作DW網(wǎng)頁設(shè)計(jì)100例3：巧用框架建立網(wǎng)站有時(shí)看到一些論壇，左邊是每個(gè)討論區(qū)的名稱，點(diǎn)擊任意一個(gè)討論區(qū)就可以在右部區(qū)域中看見相應(yīng)討論區(qū)的內(nèi)容，不過左右部分是獨(dú)立顯示的，比如拖動(dòng)左邊的滾動(dòng)條不會(huì)影響右側(cè)的顯示效果。其實(shí)這是在頁面中利用了框架技術(shù)，因此可以把瀏覽器的顯示空間分割為幾個(gè)部分，每個(gè)部分都獨(dú)立顯示網(wǎng)頁內(nèi)容。而且把幾個(gè)框架結(jié)合在一起構(gòu)成框架集，能夠讓頁面具有更為豐富的效果。效果說明先建立兩個(gè)頁面，分別為“ myphoto.htm ”、“ mydiary.htm ”。前一個(gè)是相冊頁面，后一個(gè)是日記頁面。再建立一個(gè)含有框架的頁面，并添加導(dǎo)航欄。創(chuàng)作思想打開 Dreamweaver MX 2004 軟件新建兩個(gè)頁面，在左邊輸入導(dǎo)航文字：“網(wǎng)站首頁、我的日記、我的相冊”，在每個(gè)相對應(yīng)的頁面輸入相對應(yīng)的文字，比如網(wǎng)站首頁鏈接的頁面內(nèi)容，就輸入“我的網(wǎng)站首頁”。再建立一個(gè)新頁面，單擊【布局】中的框架圖標(biāo)，建立左右框架，然后保存頁面，在左框架建立網(wǎng)站導(dǎo)航欄，在右框架隨便輸入文字，接著再次保存頁面。操作步驟（ 1 ）打開 Dreamweaver MX 2004 軟件新建文件，具體操作如圖 3-1 所示。提示：也可使用快捷鍵 Ctrl + N 打開【新建文檔】對話框。（ 2 ）保存頁面，保存時(shí)可以隨意設(shè)置文件名稱，比如輸入“ myphoto （我的相冊）”，如圖 3-2 所示。提示：也可使用快捷鍵 Ctrl+S 打開【另存為】對話框。（ 3 ）用同樣的方法新建文件，并保存頁面為“ mydiary （我的日記）”。4 ）接著再次新建文件，在頁面中創(chuàng)建左右框架設(shè)置參數(shù)，并在左右框架中輸入相應(yīng)的文字，如圖 3-3 所示。5 ）為了方便操作，先將該頁面保存為 3 個(gè)不同名稱的頁面，如圖 3-4 所示。（ 6 ）設(shè)置頁面的鏈接。首先設(shè)置“網(wǎng)站首頁”鏈接，如圖 3-5 所示。（ 7 ）接著是添加“我的日記”超鏈接，如圖 3-6 所示。（ 8 ）然后再添加“我的相冊”超鏈接，如圖 3-7 所示。（ 9 ）在【文件】菜單中選擇保存命令，保存全部頁面，完成操作。使用框架時(shí)，讀者務(wù)必要理解好框架的構(gòu)成關(guān)系，才能很好地使用和控制框架DW網(wǎng)頁設(shè)計(jì)100例4：嵌入式框架的妙用正確使用嵌入式框架可以給網(wǎng)站的創(chuàng)建帶來許多方便，比如當(dāng)單擊某個(gè)在線播放的 MP3 文件時(shí)，就可以使用嵌入式框架進(jìn)行局部刷新。效果說明建立文件，以大型網(wǎng)站的鏈接作為實(shí)例，當(dāng)單擊鏈接時(shí)，該網(wǎng)站的內(nèi)容就會(huì)出現(xiàn)在表格中，供用戶瀏覽。創(chuàng)作思想打開 Dreamweaver MX 2004 軟件新建頁面及表格，表格的第一行為導(dǎo)航欄，第二行為內(nèi)容顯示，在第二行中插入嵌入式框架代碼。操作步驟（ 1 ） 打開 Dreamweaver MX 2004 軟件新建文件，如圖 4-1 所示。（ 2 ）為了便于操作，先保存頁面，如圖 4-2 所示。（ 3 ）為了使頁面美觀，可插入表格，如圖 4-3 所示。（ 4 ）添加導(dǎo)航文字并設(shè)置表格參數(shù)，如圖 4-4 所示。（ 5 ）插入如下嵌入式框架代碼，如圖 4-5 所示。（讀者可打開【光盤】【源文件】【實(shí)例 4 】【 4.1.txt 】文件，直接復(fù)制獲得）提示： iframe 的參數(shù)中 width 表示寬度， height 表示高度， name 表示名稱， frameborder 表示邊框， src 表示默認(rèn)網(wǎng)址， scrolling 表示是否顯示頁面滾動(dòng)條。（ 6 ）設(shè)置文字“網(wǎng)易”的鏈接。當(dāng)單擊“網(wǎng)易”二字時(shí)，嵌入式框架的內(nèi)容就會(huì)跳轉(zhuǎn)到網(wǎng)易頁面，如圖 4-6 所示（ 7 ）接著用相同的方法為“ 21CN ”和“新浪”建立超級(jí)鏈接，注意【目標(biāo)】參數(shù)一定要設(shè)置為“ main ”。（ 8 ）保存文件，完成操作。本例是用一些網(wǎng)站的首頁來做鏈接案例的，一般這個(gè)技術(shù)適用于某些相關(guān)內(nèi)容之間的瀏覽，如一個(gè)教程案例需要幾個(gè)頁面顯示，那么這幾個(gè)頁面間連接就可以用此技術(shù)來實(shí)現(xiàn)。DW網(wǎng)頁設(shè)計(jì)100例5：以模板構(gòu)建網(wǎng)站和更新網(wǎng)站網(wǎng)站內(nèi)頁的設(shè)計(jì)大部分是一致的，