第2章 Web程序開發(fā)環(huán)境

第2章Web程序開發(fā)環(huán)境1服務(wù)器端開發(fā)環(huán)境2客戶端開發(fā)環(huán)境3網(wǎng)頁(yè)設(shè)計(jì)工具DreamweaverMX簡(jiǎn)介4DreamweaverMX的深入應(yīng)用5DreamweaverMX的站點(diǎn)管理本章小結(jié)

在第1章中，介紹了Web編程的基礎(chǔ)知識(shí)。本章將對(duì)Web程序開發(fā)環(huán)境和常用工具做簡(jiǎn)單介紹，包括常用的工具軟件，編制HTML和ASP文件的DreamweaverMX，這將為以后學(xué)習(xí)具體的編程方法和技術(shù)做好準(zhǔn)備。12.1服務(wù)器端開發(fā)環(huán)境

服務(wù)器是對(duì)Web瀏覽器檢索信息的請(qǐng)求做出響應(yīng)，進(jìn)而將HTML文檔回傳到客戶機(jī)的瀏覽器屏幕上，或者運(yùn)行服務(wù)器端程序的計(jì)算機(jī)。服務(wù)器端的編程語(yǔ)言，除現(xiàn)在一般較少采用的CGI程序外，常用ASP，Perl和PHP，還有微軟公司近期推出的新一代ASP.NET語(yǔ)言，它直接與Java比拼，力圖成為網(wǎng)絡(luò)服務(wù)器端的標(biāo)準(zhǔn)語(yǔ)言。目前最常用的網(wǎng)絡(luò)操作系統(tǒng)有WindowsNT，UNIX和Linux等

2WindowsXPWeb服務(wù)器組件——IIS5.0Intranet上的信息服務(wù)（IIS）無(wú)論在局域網(wǎng)還是在Internet中都是非常重要的服務(wù)。IIS5.0是一套集Web服務(wù)、Ftp服務(wù)、SMTP服務(wù)等為一體的服務(wù)器軟件。其中，Web服務(wù)提供了Internet的相關(guān)服務(wù)，用它可以設(shè)定網(wǎng)頁(yè)的存取權(quán)限，執(zhí)行CGI和ASP程序，也可以在同一臺(tái)服務(wù)器上架設(shè)多個(gè)Web站點(diǎn)，是一套完整的Web服務(wù)器軟件。3IIS5.0WWW服務(wù)：支持最新的超文本傳輸協(xié)議（HTTP）1.1標(biāo)準(zhǔn)，運(yùn)行速度更快，安全性更高，還可以提供虛擬主機(jī)服務(wù)。WWW服務(wù)是指在網(wǎng)上發(fā)布可以通過(guò)瀏覽器觀看的用HTML標(biāo)識(shí)語(yǔ)言編寫的圖形化頁(yè)面的服務(wù)。IIS5.0允許用戶設(shè)定數(shù)目不限的虛擬Web站點(diǎn)。

4IIS運(yùn)行環(huán)境：硬件：

最低配置：486/50以上，16M內(nèi)存，50M硬盤空間

建議配置：PIII以上，32-64M內(nèi)存，200M以上硬盤空間

軟件：

NTServer4.0，ServicePack3，IE瀏覽器（4.0以上版本），支持TCP/IP協(xié)議

或者：Windows2000(XP,2003),IE，支持TCP/IP協(xié)議5安裝IIS5.0(1)選擇“控制面板”中的“添加/刪除程序”，打開“添加/刪除程序”窗口。(2)單擊“添加/刪除Windows組件”，打開“Windows組件向?qū)А睂?duì)話框，如圖。6安裝IIS5.0（3）單擊“詳細(xì)信息”，打開“Internet信息服務(wù)（IIS）對(duì)話框”。（4）選擇所需的服務(wù)，如Web服務(wù)和Ftp服務(wù)等，最后單擊“確定”。（5）單擊“下一步”，系統(tǒng)會(huì)從Windows光盤上復(fù)制所需的數(shù)據(jù)。（6）復(fù)制結(jié)束后，單擊“確定”按鈕結(jié)束安裝。7IIS發(fā)布WEB站點(diǎn)利用IIS發(fā)布站點(diǎn)，可以按照下面的步驟進(jìn)行：

1、您先要從“開始”->“設(shè)置”->“控制面板”->“管理工具”，如圖所示。82、打開“Internet服務(wù)管理器”93、配置Web服務(wù)器當(dāng)IIS5.0安裝結(jié)束后，系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的Web站點(diǎn)（c:\Inetpub\wwwroot）供用戶快速發(fā)布內(nèi)容。用戶只需將要發(fā)布的Web文件復(fù)制到C:\Intetpub\wwwroot文件夾中，并將主頁(yè)的文件名設(shè)置為default.htm、default.asp、index.htm或iisstart.asp，即可通過(guò)Web瀏覽器訪問(wèn)該Web服務(wù)器。打開后選中“默認(rèn)的Web站點(diǎn)”，右擊點(diǎn)屬性，出現(xiàn)IIS的配置界面，IIS中的服務(wù)配置都是通過(guò)類似的屬性界面實(shí)現(xiàn)。此外，IIS中的屬性具有繼承性，子級(jí)目錄自然繼承上級(jí)目錄的相同屬性。10主目錄選項(xiàng)卡：

11Web站點(diǎn)選項(xiàng)卡Web站點(diǎn)標(biāo)識(shí)：描述--用戶指定該站點(diǎn)的名稱。IP地址--用戶分配給該站點(diǎn)的IP地址(動(dòng)態(tài)域名的用戶,您可以使用默認(rèn)的IP地址,選中“全部未分配”,即可)。在高級(jí)對(duì)話框中還可以進(jìn)一步的設(shè)定該站點(diǎn)的IP地址，TCP端口號(hào)以及主機(jī)名稱等（注：同一臺(tái)Web服務(wù)器中，具有不同IP地址或不同主機(jī)名的不同站點(diǎn)稱為虛擬主機(jī)）。TCP端口--缺省值為80，用戶可以根據(jù)自己的需要進(jìn)行改動(dòng)。12文檔選項(xiàng)卡13配置Web服務(wù)器用戶也可以創(chuàng)建自己的Web站點(diǎn)，來(lái)擴(kuò)展Web服務(wù)器的功能：（1）建立自己的web站點(diǎn)；（2）設(shè)置默認(rèn)文檔；（3）建立站點(diǎn)下的虛擬目錄；142.2客戶端開發(fā)環(huán)境客戶端的編程語(yǔ)言，HTML標(biāo)識(shí)語(yǔ)言

掌握?qǐng)D形工具、Web網(wǎng)頁(yè)制作工具和Web網(wǎng)頁(yè)動(dòng)畫工具

圖形圖像設(shè)計(jì)及處理：Photoshop6.0，CorelDRAW9.0，F(xiàn)ireworksMX，F(xiàn)reehand9.0，Illustrator8.0，PhotoExpress3.0

動(dòng)畫制作工具：FlashMX，Cool3D3.0，3DSMAXR3，ImageReady3.0，F(xiàn)ireworksMX

Web網(wǎng)頁(yè)制作軟件：

Dreamweaver，F(xiàn)rontPage

152.3網(wǎng)頁(yè)設(shè)計(jì)工具DreamweaverMX簡(jiǎn)介

2.3.1DreamweaverMX概覽

Dreamweaver是Macromedia公司開發(fā)的網(wǎng)頁(yè)制作工具，它與Macromedia公司的另外兩項(xiàng)產(chǎn)品Firework和Flash一起組成一套功能強(qiáng)大的網(wǎng)頁(yè)創(chuàng)作系統(tǒng)，分別覆蓋了網(wǎng)頁(yè)制作、網(wǎng)頁(yè)圖形圖像處理和矢量動(dòng)畫這3個(gè)主要的網(wǎng)絡(luò)創(chuàng)作領(lǐng)域。

162.3.2DreamweaverMX的特性

1.精確性：DW采用RoundtripHTML技術(shù)實(shí)現(xiàn)對(duì)HTML源代碼的精確控制，它能生成最為簡(jiǎn)潔和高效的HTML代碼。

2.易用性：DW的編輯界面相當(dāng)友好，且操作簡(jiǎn)單。通過(guò)各種工具面板，可以非常方便地控制頁(yè)面各種元素的屬性。

3.兼容性：兼容性是DW的一個(gè)非常優(yōu)秀的特性，用它制作的頁(yè)面能在各種瀏覽器上正確地顯示。

172.3.3DreamweaverMX界面介紹

①單擊中部的[創(chuàng)建新項(xiàng)目]，建立相應(yīng)類型的新文件；②單擊中部的[從范例創(chuàng)建]，建立多種形式的新文件；③雙擊右部的[文件]列表中的文件名，調(diào)入指定目錄中的文件④單擊左部的[打開最近項(xiàng)目]，可調(diào)入編輯過(guò)的文件18DreamweaverMX文件編輯界面

191．文檔窗口文檔窗口是用來(lái)顯示當(dāng)前所編輯頁(yè)面的窗口2．插入面板以下簡(jiǎn)單介紹一些對(duì)象面板：[常用] 包含主頁(yè)中最常用的一些對(duì)象，如圖片、表格、超鏈接等。[布局] 包含常用的框架結(jié)構(gòu)，如左右分幀、上下分幀等。[表單] 包含表單及所涉及的所有元素，如文本框、按鈕、復(fù)選框、單選框、列表框等。[文本] 包含一些特殊字符，如版權(quán)符號(hào)、注冊(cè)商標(biāo)符號(hào)、商標(biāo)符號(hào)等。[HTML] 添加一些Script腳本等。203．屬性面板

選擇[窗口]菜單的[屬性]項(xiàng)即可打開屬性面板。屬性面板用來(lái)顯示文檔窗口中選定對(duì)象的各種屬性。屬性面板一般分為上、下兩塊，在右下角有個(gè)打開/關(guān)閉下塊的箭頭，有些擴(kuò)展屬性安排在下塊中。單擊屬性面板標(biāo)題行的箭頭，還可以收縮/展開該面板選定一幅圖片時(shí)，屬性面板就變?yōu)轱@示圖片的縮略圖、大小、源文件名、對(duì)齊方式及其他屬性

21例：熱區(qū)編輯操作：

方法：?jiǎn)螕粼O(shè)計(jì)區(qū)的圖片，有方框標(biāo)出已選定該圖片，再在下方的屬性區(qū)的左下角選擇矩形熱區(qū)，用鼠標(biāo)在圖片的指定區(qū)域單擊定位后再拖曳出一個(gè)矩形區(qū)域，即為“圖片熱區(qū)”，相對(duì)應(yīng)的<map>代碼會(huì)自動(dòng)生成；再單擊該圖片，對(duì)該熱區(qū)的鏈接屬性進(jìn)行設(shè)定。在下方屬性區(qū)[鏈接]文本框內(nèi)填寫要指向的某個(gè)URL，以后該網(wǎng)頁(yè)在瀏覽器窗口內(nèi)顯示時(shí)，鼠標(biāo)移到該矩形區(qū)域時(shí)，鼠標(biāo)指針將變?yōu)槭中危瑔螕羲涂梢酝瓿沙溄拥奶D(zhuǎn)。

22例：插入一個(gè)表格方法：先單擊插入面板[常用]項(xiàng)的表格對(duì)象，在設(shè)定了表格的行列值、寬度、邊框粗細(xì)、邊距、間距等屬性值后，在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入<table>代碼和表格的實(shí)際顯示，在“所見即所得”的頁(yè)面上，拖動(dòng)邊框線可改變表格的大小，選中多個(gè)單元格后，再單擊屬性區(qū)左下角的合并按鈕可將這些單元格合并為一個(gè)單元格。23例：插入一幅Flash圖像

方法：先單擊插入面板[常用]項(xiàng)的媒體對(duì)象，選擇Flash，再選擇當(dāng)前目錄中的swf文件，在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入<object>代碼和圖片的輪廓顯示，這樣在頁(yè)面的光標(biāo)位置就插入了Flash圖像。

24例：插入Frame框架

方法：先單擊插入面板[布局]項(xiàng)的框架對(duì)象，選擇[左側(cè)和頂部]對(duì)象，DW會(huì)自動(dòng)生成4個(gè)htm文件。當(dāng)光標(biāo)在各個(gè)顯示區(qū)域單擊時(shí)，多頁(yè)標(biāo)簽行的同一個(gè)標(biāo)簽上出現(xiàn)該文件名；各個(gè)文件要分別獨(dú)立存盤；當(dāng)光標(biāo)移至窗體邊框或框架分隔處時(shí)，鼠標(biāo)指針變?yōu)闄M或豎向箭頭，單擊鼠標(biāo)，代碼編輯區(qū)顯示所設(shè)定框架布局的第4個(gè)htm文件的代碼，則該文件包含自動(dòng)生成的<frame>代碼和布局的3個(gè)<src>指向的文件。252.4DreamweaverMX的深入應(yīng)用

1．插入面板的其他對(duì)象組：新版的DW針對(duì)ASP，ASPX，PHP，JSP服務(wù)器端的文檔文件編輯，添加了相應(yīng)的對(duì)象組，只要對(duì)具有這些擴(kuò)展名的文件進(jìn)行編輯，在[插入面板]欄內(nèi)就會(huì)出現(xiàn)對(duì)應(yīng)的對(duì)象組，常用的語(yǔ)句代碼、專用的變量名稱、語(yǔ)言標(biāo)簽等都可以很方便地添加，這些大大減少了編程時(shí)需記憶各種語(yǔ)句和對(duì)應(yīng)的屬性名稱的麻煩。2．代碼面板：它預(yù)存了許多常用的HTML代碼和腳本代碼。

3．[命令]菜單的清理功能：解決文檔會(huì)帶來(lái)兩個(gè)問(wèn)題：一是因?yàn)椴迦氲拇a混雜在文檔中，查看時(shí)有點(diǎn)摸不著頭緒，無(wú)法繼續(xù)修改編輯；二是在網(wǎng)上傳輸要多花些時(shí)間。

262.5DreamweaverMX的站點(diǎn)管理

27圖2-10DreamweaverMX站點(diǎn)管理的編輯界面

281．創(chuàng)建本地站點(diǎn)（1）站點(diǎn)名稱（2）本地文件夾

（3）其余項(xiàng)可用默認(rèn)值

2．設(shè)置服務(wù)器信息

（1）設(shè)置服務(wù)器選項(xiàng)（2）如果為服務(wù)器分配了FTP權(quán)限此時(shí)需填寫以下數(shù)據(jù)：

①FTP主機(jī)。輸入服務(wù)器的IP地址。②主機(jī)目錄。輸入服務(wù)器上設(shè)定的目錄。③登錄。分配的用戶名。④密碼。分配的密碼。⑤其余項(xiàng)可用默認(rèn)值。

293．完成本地站點(diǎn)創(chuàng)建在“站點(diǎn)定義為”對(duì)話框設(shè)置完成本地站點(diǎn)信息和服務(wù)器信息后，單擊[確定]按鈕即可完成本地站點(diǎn)的創(chuàng)建。同時(shí)，DW會(huì)自動(dòng)以擴(kuò)展窗口方式打開[遠(yuǎn)端站點(diǎn)]和[本地文件]左、右兩個(gè)窗口4．下載、上傳與更新網(wǎng)頁(yè)通過(guò)使用左、右站點(diǎn)窗口可以完成網(wǎng)頁(yè)的下載、上傳與更新操作

圖2-11