Web程序設(shè)計(jì)集成開發(fā)環(huán)境

Web程序設(shè)計(jì)集成開發(fā)環(huán)境

內(nèi)容簡(jiǎn)介：本章主要介紹安裝和運(yùn)行DreamweaverMX、Dreamweaver工作區(qū)窗口和面板、菜單及“插入欄”概述、使用屬性檢查器、管理面板和面板組、使用文檔工具欄、狀態(tài)欄、調(diào)整“文檔”窗口的大小、使用快速啟動(dòng)條、“標(biāo)準(zhǔn)”工具欄、上下文菜單、DreamweaverMX創(chuàng)建Web站點(diǎn)與設(shè)計(jì)網(wǎng)頁、設(shè)置本地站點(diǎn)、使用“站點(diǎn)”面板、頁面屬性設(shè)置、添加超鏈接、添加圖片、添加表格。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所2.1DreamweaverMX基礎(chǔ)2.2使用DreamweaverMX創(chuàng)建Web站點(diǎn)與設(shè)計(jì)網(wǎng)頁Web程序設(shè)計(jì)集成開發(fā)環(huán)境

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所2.1DreamweaverMX基礎(chǔ)

MacromediaDreamweaverMX是一款專業(yè)的HTML編輯器，用于對(duì)Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。利用Dreamweaver中的可視化編輯功能，可以快速地創(chuàng)建頁面而無需編寫任何代碼?？梢圆榭此姓军c(diǎn)元素或資源并將它們從易于使用的面板直接拖到文檔中?？梢栽贛acromediaFireworks中創(chuàng)建和編輯圖像，然后將它們直接導(dǎo)入Dreamweaver，或者直接在Dreamweaver中添加MacromediaFlash對(duì)象，從而優(yōu)化開發(fā)工作流程。

Dreamweaver還包括許多與編碼相關(guān)的工具和功能，其中包括代碼視圖中的代碼編輯工具（如代碼加色和標(biāo)簽完成）；有關(guān)HTML、CSS、JavaScript、CFML、ASP和JSP的參考資料以及一個(gè)JavaScript調(diào)試器。并且，還可以借助Dreamweaver，使用服務(wù)器語言（例如ASP、ASP.NET、ColdFusion標(biāo)記語言(CFML)、JSP和PHP）生成支持動(dòng)態(tài)數(shù)據(jù)庫(kù)的Web應(yīng)用程序。

Dreamweaver現(xiàn)在包含并擴(kuò)展了MacromediaUltraDev中的所有功能，以幫助您使用ASP、ASP.NET、ColdFusion標(biāo)記語言(CFML)、JSP和PHP等服務(wù)器語言來生成由動(dòng)態(tài)數(shù)據(jù)庫(kù)支持的Web應(yīng)用程序。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所1．安裝和運(yùn)行DreamweaverMX硬件和軟件:MicrosoftWindows的系統(tǒng)要求：IntelPentiumII處理器或等效處理器，300MHz或更快；Windows98、

2000、

NT（具有ServicePack3或更高版本）、WindowsME或XP；NetscapeNavigator4.0版或更高版本或MicrosoftInternetExplorer；96MB的可用內(nèi)存(RAM)（建議采用128MB內(nèi)存）；275MB的可用磁盤空間；分辨率可達(dá)800x600像素的256色顯示器；CD-ROM驅(qū)動(dòng)器；安裝Dreamweaver：將DreamweaverCD插入計(jì)算機(jī)的CD-ROM驅(qū)動(dòng)器。在Windows中，選擇“開始”>“運(yùn)行”。單擊“瀏覽”并從DreamweaverCD上選擇DreamweaverMXInstaller.exe文件。在出現(xiàn)“運(yùn)行”對(duì)話框后，單擊“確定”開始安裝。按照屏幕上的指導(dǎo)執(zhí)行。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所2．Dreamweaver工作區(qū)

在Windows中，DreamweaverMX提供了兩種可供選擇的工作區(qū)布局：一種將全部元素置于一個(gè)窗口中的集成布局和一種非常類似于Dreamweaver4的浮動(dòng)布局。DreamweaverMX工作區(qū)是一個(gè)使用MDI（多文檔界面）的集成工作區(qū)，其中Dreamweaver4工作區(qū)樣式全部“文檔”窗口和面板被集成在一個(gè)更大的應(yīng)用程序窗口中，并將面板組?？吭谟覀?cè)。建議大多數(shù)用戶使用它。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所3．窗口和面板概述“歡迎使用”窗口提供有關(guān)針對(duì)各種目的設(shè)置工作區(qū)的提示，并為使用過Dreamweaver早期版本的用戶提供有關(guān)新功能的信息?！安迦搿睓诎糜趯⒏鞣N類型的對(duì)象（如圖像、表格和層）插入到文檔中的按鈕?！拔臋n”工具欄包含按鈕和彈出式菜單，它們提供各種“文檔”窗口視圖（如“設(shè)計(jì)”視圖和“代碼”視圖）、各種查看選項(xiàng)和一些普通操作（如在瀏覽器中預(yù)覽）?！拔臋n”窗口顯示您當(dāng)前創(chuàng)建和編輯的文檔。屬性檢查器用于查看和更改所選對(duì)象或文本的各種屬性。面板組是一組?？吭谀硞€(gè)標(biāo)題下面的相關(guān)面板的集合?！罢军c(diǎn)”面板使您可以管理組成站點(diǎn)的文件和文件夾。它還提供了本地磁盤上全部文件的視圖，非常類似于Windows資源管理器。Dreamweaver還提供了“歷史記錄”面板和代碼檢查器。若要打開Dreamweaver面板、檢查器和窗口，請(qǐng)使用“窗口”菜單。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所4．菜單概述“文件”菜單和“編輯”菜單包含用于“文件”菜單和“編輯”菜單的標(biāo)準(zhǔn)菜單項(xiàng)?！拔谋尽辈藛问鼓梢暂p松地設(shè)置文本的格式?！懊睢辈藛翁峁?duì)各種命令的訪問?！罢军c(diǎn)”菜單提供一些菜單項(xiàng)，這些菜單項(xiàng)可用于創(chuàng)建、打開和編輯站點(diǎn)，以及用于管理當(dāng)前站點(diǎn)中的文件?！按翱凇辈藛翁峁?duì)Dreamweaver中的所有面板、檢查器和窗口的訪問?！皫椭辈藛翁峁?duì)Dreamweaver文檔的訪問，包括用于使用Dreamweaver以及創(chuàng)建對(duì)Dreamweaver的擴(kuò)展的幫助系統(tǒng)，并且包括各種語言的參考材料。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所5．“插入”欄概述“插入”欄包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕。這些按鈕被組織到選項(xiàng)卡中。顯示或隱藏“插入”欄：選擇“窗口”>“插入”。展開或折疊“插入”欄：?jiǎn)螕簟安迦搿睓跇?biāo)題條左角處的展開箭頭。若要顯示某個(gè)特定選項(xiàng)卡中的按鈕，請(qǐng)執(zhí)行以下操作之一：插入對(duì)象：在“插入”欄中選擇適當(dāng)?shù)倪x項(xiàng)卡。單擊一個(gè)對(duì)象按鈕或?qū)⒃摪粹o的圖標(biāo)拖到“文檔”窗口中。繞過對(duì)象插入對(duì)話框并插入空的占位符對(duì)象：按住Ctrl鍵并單擊該對(duì)象的按鈕。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所6．使用屬性檢查器屬性檢查器可以檢查和編輯當(dāng)前選定頁面元素的屬性?？梢栽凇霸O(shè)計(jì)”視圖或“代碼”視圖中選擇頁面元素。若要顯示或隱藏屬性檢查器，請(qǐng)選擇“窗口”>“屬性”。注意：屬性檢查器的內(nèi)容根據(jù)選定的元素而變化。屬性檢查器最初顯示選定元素的大多數(shù)屬性。單擊屬性檢查器右下角的展開箭頭，可以折疊屬性檢查器使之僅顯示最常用的屬性。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所7．管理面板和面板組（1）展開或折疊面板組：?jiǎn)螕裘姘褰M標(biāo)題條左側(cè)的展開箭頭。

（2）取消?？恳粋€(gè)面板組：通過手柄拖動(dòng)面板組，直到其輪廓表明它不再處于?？繝顟B(tài)為止。

（3）重命名面板組：從面板組標(biāo)題條右側(cè)的“選項(xiàng)”菜單中選擇“重命名面板組”。（4）從面板組中取消?？恳粋€(gè)面板：通過其選項(xiàng)卡拖動(dòng)該面板，直到其輪廓表明它不再處于?？繝顟B(tài)為止。（5）在面板組中?？恳粋€(gè)面板：通過其選項(xiàng)卡拖動(dòng)該面板，直到其輪廓表明它處于停靠狀態(tài)為止。（6）關(guān)閉一個(gè)面板組使它完全消失：從面板組標(biāo)題條中的“選項(xiàng)”菜單中選擇“關(guān)閉面板組”。（7）打開屏幕上不可見的面板組：從“窗口”菜單中選擇一個(gè)面板的名稱。（8）更改整個(gè)面板組集合的大?。和蟿?dòng)調(diào)整。（9）設(shè)置“面板”參數(shù)：請(qǐng)選擇“編輯”>“參數(shù)選擇”，然后從左側(cè)的“分類”列表中選擇“面板”。

備注：當(dāng)一個(gè)面板組處于浮動(dòng)（取消?？浚顟B(tài)時(shí)，面板組的頂部會(huì)顯示一個(gè)窄的空白條。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所8．使用文檔工具欄若要查看或隱藏文檔工具欄，請(qǐng)選擇“查看”>“工具欄”>“文檔”。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所9．關(guān)于狀態(tài)欄“文檔”窗口底部的狀態(tài)欄提供與您正創(chuàng)建的文檔有關(guān)的其他信息。標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部?jī)?nèi)容。單擊<body>以選擇文檔的整個(gè)正文。若要設(shè)置標(biāo)簽選擇器中某個(gè)標(biāo)簽的class或id屬性，請(qǐng)右擊該標(biāo)簽，然后從上下文菜單中選擇一個(gè)類或ID。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所10．調(diào)整“文檔”窗口的大小

狀態(tài)欄顯示當(dāng)前“文檔”窗口的當(dāng)前尺寸（以像素為單位）。若要設(shè)置窗口大小以適合幾種普通顯示器大小中的任何一個(gè)，請(qǐng)單擊窗口大小并從“窗口大小”彈出式菜單中選擇一種大小。備注：顯示的窗口大小反映瀏覽器窗口的內(nèi)部尺寸（不包括邊框）；顯示器大小列在括號(hào)中。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所11．使用快速啟動(dòng)條快速啟動(dòng)條顯示在狀態(tài)欄中，包含用以打開和關(guān)閉各種面板、檢查器和窗口的按鈕。若要顯示快速啟動(dòng)條，請(qǐng)?jiān)凇懊姘濉眳?shù)選擇中啟用“在面板和啟動(dòng)器中顯示圖標(biāo)”選項(xiàng)?？梢灾付ㄔ诳焖賳?dòng)條中顯示哪些項(xiàng)目。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所12．使用“標(biāo)準(zhǔn)”工具欄“標(biāo)準(zhǔn)”工具欄中包含“文件”和“編輯”菜單中的普通操作的按鈕：“新建”、“打開”、“保存”、“保存全部”、“剪切”、“拷貝”、“粘貼”、“撤消”和“重做”。若要顯示“標(biāo)準(zhǔn)”工具欄，請(qǐng)選擇“查看”>“工具欄”>“標(biāo)準(zhǔn)”。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所13．使用上下文菜單使上下文菜單可以很方便地訪問與正在處理的對(duì)象或窗口有關(guān)的最有用的命令和屬性。用法：右擊對(duì)象或窗口。選定對(duì)象或窗口的上下文菜單隨即出現(xiàn)。從該上下文菜單中選擇一個(gè)命令。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所2.2使用DreamweaverMX創(chuàng)建Web站點(diǎn)與設(shè)計(jì)網(wǎng)頁1．在Dreamweaver中創(chuàng)建您的第一個(gè)Web站點(diǎn)（1）工作流程規(guī)劃和準(zhǔn)備；創(chuàng)建頁；對(duì)頁進(jìn)行布局和設(shè)置；向頁中添加內(nèi)容；將頁鏈接在一起；發(fā)布您的站點(diǎn)；昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（2）設(shè)置本地站點(diǎn)——1Dreamweaver中的站點(diǎn)：Web站點(diǎn)：一組位于服務(wù)器上的頁，使用Web瀏覽器訪問該站點(diǎn)的訪問者可以對(duì)其進(jìn)行瀏覽。遠(yuǎn)程站點(diǎn)：服務(wù)器上組成Web站點(diǎn)的文件，這是從創(chuàng)作者的角度而不是訪問者的角度來看的。

本地站點(diǎn)：與遠(yuǎn)程站點(diǎn)上的文件對(duì)應(yīng)的本地磁盤上的文件。Dreamweaver站點(diǎn)定義：本地站點(diǎn)的一組定義特性，以及有關(guān)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)對(duì)應(yīng)方式的信息。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（2）設(shè)置本地站點(diǎn)——2定義站點(diǎn)：選擇“站點(diǎn)”>“新建站點(diǎn)”。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（2）設(shè)置本地站點(diǎn)——3存儲(chǔ)站點(diǎn)文件后，系統(tǒng)在IIS中或PWS中建立相應(yīng)的虛根目錄，完成后，單擊測(cè)試URL按鈕會(huì)出現(xiàn)如右圖所示的對(duì)話框。單擊確定返回。單擊“下一步”進(jìn)入下一個(gè)步驟。

昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（2）設(shè)置本地站點(diǎn)——4“站點(diǎn)”面板現(xiàn)在顯示當(dāng)前站點(diǎn)的新本地根文件夾，同時(shí)顯示一個(gè)圖標(biāo)允許以分層樹視圖查看所有本地磁盤。該圖標(biāo)標(biāo)為“桌面”?！罢军c(diǎn)”面板通常顯示站點(diǎn)中的所有文件和文件夾，但是目前站點(diǎn)中不包含任何文件或文件夾。當(dāng)站點(diǎn)中存在文件時(shí)，“站點(diǎn)”面板中的文件列表將充當(dāng)文件管理器，允許拷貝、粘貼、刪除、移動(dòng)和打開文件。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（3）關(guān)于“站點(diǎn)”面板

“站點(diǎn)”面板允許您定義一個(gè)站點(diǎn)、管理站點(diǎn)的本地文件、向遠(yuǎn)程站點(diǎn)上傳文件或者從遠(yuǎn)程站點(diǎn)下載文件以及瀏覽本地磁盤上站點(diǎn)外部的文件。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（4）使用“站點(diǎn)”面板若要打開或關(guān)閉“站點(diǎn)”面板，請(qǐng)選擇“窗口”>“站點(diǎn)”。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所2．創(chuàng)建一個(gè)簡(jiǎn)單頁（1）網(wǎng)頁的組成頁面標(biāo)題、網(wǎng)頁名稱和標(biāo)志、頁眉、導(dǎo)航欄、主內(nèi)容區(qū)、頁腳。（2）網(wǎng)頁的布局和風(fēng)格簡(jiǎn)介

Dreamweaver提供了兩種方式：標(biāo)準(zhǔn)視圖和布局視圖。在“布局視圖”中，對(duì)使用表格做了簡(jiǎn)化，用“繪畫”的形式進(jìn)行表格排版操作，需要什么樣的版面，用鼠標(biāo)畫一個(gè)就行了。注意：在布局視圖中，不能使用在“標(biāo)準(zhǔn)”視圖中可以使用的“插入表格”和“繪制層”工具。若要使用這些工具，必須先切換到“標(biāo)準(zhǔn)”視圖。切換按鈕在插入面板的布局視圖中。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（3）新建一個(gè)簡(jiǎn)單頁——1當(dāng)啟動(dòng)Dreamweaver時(shí)，將自動(dòng)創(chuàng)建一個(gè)空的HTML文檔。也可以選擇“文件”>“新建”。即會(huì)出現(xiàn)“新建文檔”對(duì)話框。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（3）新建一個(gè)簡(jiǎn)單頁——2在新建的空白文檔上單擊鼠標(biāo)右建，選擇頁面屬性，出現(xiàn)如下屬性對(duì)話框，可設(shè)置頁面屬性。昌吉學(xué)院計(jì)算機(jī)應(yīng)用研究所（3）新建一個(gè)簡(jiǎn)單頁——3