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

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

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

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

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

4IIS運行環(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ū)А睂υ捒?，如圖。6安裝IIS5.0（3）單擊“詳細信息”，打開“Internet信息服務（IIS）對話框”。（4）選擇所需的服務，如Web服務和Ftp服務等，最后單擊“確定”。（5）單擊“下一步”，系統(tǒng)會從Windows光盤上復制所需的數(shù)據(jù)。（6）復制結(jié)束后，單擊“確定”按鈕結(jié)束安裝。7IIS發(fā)布WEB站點利用IIS發(fā)布站點，可以按照下面的步驟進行：

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

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

掌握圖形工具、Web網(wǎng)頁制作工具和Web網(wǎng)頁動畫工具

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

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

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

Dreamweaver，F(xiàn)rontPage

152.3網(wǎng)頁設(shè)計工具DreamweaverMX簡介

2.3.1DreamweaverMX概覽

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

162.3.2DreamweaverMX的特性

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

2.易用性：DW的編輯界面相當友好，且操作簡單。通過各種工具面板，可以非常方便地控制頁面各種元素的屬性。

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

172.3.3DreamweaverMX界面介紹

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

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

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

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

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

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

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

24例：插入Frame框架

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

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

3．[命令]菜單的清理功能：解決文檔會帶來兩個問題：一是因為插入的代碼混雜在文檔中，查看時有點摸不著頭緒，無法繼續(xù)修改編輯；二是在網(wǎng)上傳輸要多花些時間。

262.5DreamweaverMX的站點管理

27圖2-10DreamweaverMX站點管理的編輯界面

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

（3）其余項可用默認值

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

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

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

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

圖2-11