第2章 Web程序開(kāi)發(fā)環(huán)境ppt課件

1、第2章 Web程序開(kāi)發(fā)環(huán)境1 效力器端開(kāi)發(fā)環(huán)境 2 客戶端開(kāi)發(fā)環(huán)境 3 網(wǎng)頁(yè)設(shè)計(jì)工具Dreamweaver MX簡(jiǎn)介 4 Dreamweaver MX的深化運(yùn)用 5 Dreamweaver MX的站點(diǎn)管理本章小結(jié) 在第1章中，引見(jiàn)了Web編程的根底知識(shí)。本章將對(duì)Web程序開(kāi)發(fā)環(huán)境和常用工具做簡(jiǎn)單引見(jiàn)，包括常用的工具軟件，編制HTML和ASP文件的Dreamweaver MX，這將為以后學(xué)習(xí)詳細(xì)的編程方法和技術(shù)做好預(yù)備。12.1 效力器端開(kāi)發(fā)環(huán)境 效力器是對(duì)Web閱讀器檢索信息的懇求做出呼應(yīng)，進(jìn)而將HTML文檔回傳到客戶機(jī)的閱讀器屏幕上，或者運(yùn)轉(zhuǎn)效力器端程序的計(jì)算機(jī)。效力器端的編程言語(yǔ)，除如今普

2、通較少采用的CGI程序外，常用ASP，Perl和PHP，還有微軟公司近期推出的新一代ASP.NET言語(yǔ)，它直接與Java比拼，力圖成為網(wǎng)絡(luò)效力器端的規(guī)范言語(yǔ)。目前最常用的網(wǎng)絡(luò)操作系統(tǒng)有Windows NT，UNIX和Linux等 22.2 客戶端開(kāi)發(fā)環(huán)境 客戶端的編程言語(yǔ)，HTML標(biāo)識(shí)言語(yǔ) 掌握?qǐng)D形工具、Web網(wǎng)頁(yè)制造工具和Web網(wǎng)頁(yè)動(dòng)畫(huà)工具 圖形圖像設(shè)計(jì)及處置：Photoshop 6.0，CorelDRAW 9.0，F(xiàn)ireworks MX，F(xiàn)reehand 9.0，Illustrator 8.0，PhotoExpress 3.0 動(dòng)畫(huà)制造工具 ：Flash MX，Cool3D 3.0，3D

3、S MAX R3，ImageReady 3.0，F(xiàn)ireworks MX Web網(wǎng)頁(yè)制造軟件： Dreamweaver，F(xiàn)rontPage 32.3 網(wǎng)頁(yè)設(shè)計(jì)工具Dreamweaver MX簡(jiǎn)介 2.3.1 Dreamweaver MX概覽 Dreamweaver是Macromedia公司開(kāi)發(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)畫(huà)這3個(gè)主要的網(wǎng)絡(luò)創(chuàng)作領(lǐng)域。 42.3.2 Dreamweaver MX的特性 1.準(zhǔn)確性： DW采用Roundtrip HTML技術(shù)實(shí)現(xiàn)對(duì)

4、HTML源代碼的準(zhǔn)確控制，它能生成最為簡(jiǎn)約和高效的HTML代碼。 2.易用性：DW的編輯界面相當(dāng)友好，且操作簡(jiǎn)單。通過(guò)各種工具面板，可以非常方便地控制頁(yè)面各種元素的屬性。 3.兼容性：兼容性是DW的一個(gè)非常優(yōu)秀的特性，用它制造的頁(yè)面能在各種閱讀器上正確地顯示。 52.3.3 Dreamweaver MX界面引見(jiàn) 單擊中部的創(chuàng)建新工程，建立相應(yīng)類型的新文件；單擊中部的從范例創(chuàng)建，建立多種方式的新文件；雙擊右部的文件列表中的文件名，調(diào)入指定目錄中的文件單擊左部的翻開(kāi)最近工程，可調(diào)入編輯過(guò)的文件6Dreamweaver MX文件編輯界面 71文檔窗口文檔窗口是用來(lái)顯示當(dāng)前所編輯頁(yè)面的窗口2插入面板以

5、下簡(jiǎn)單引見(jiàn)一些對(duì)象面板：常用 包含主頁(yè)中最常用的一些對(duì)象，如圖片、表 格、超鏈接等。規(guī)劃包含常用的框架構(gòu)造，如左右分幀、上下分幀 等。表單包含表單及所涉及的一切元素，如文本框、按 鈕、復(fù)選框、單項(xiàng)選擇框、列表框等。文本包含一些特殊字符，如版權(quán)符號(hào)、注冊(cè)商標(biāo)符 號(hào)、商標(biāo)符號(hào)等。HTML添加一些Script腳本等。83屬性面板 選擇窗口菜單的屬性項(xiàng)即可翻開(kāi)屬性面板。屬性面板用來(lái)顯示文檔窗口中選定對(duì)象的各種屬性。屬性面板普通分為上、下兩塊，在右下角有個(gè)翻開(kāi)/封鎖下塊的箭頭，有些擴(kuò)展屬性安排在下塊中。單擊屬性面板標(biāo)題行的箭頭，還可以收縮/展開(kāi)該面板選定一幅圖片時(shí)，屬性面板就變?yōu)轱@示圖片的縮略圖、大小、

6、源文件名、對(duì)齊方式及其他屬性 9例：熱區(qū)編輯操作： 方法：?jiǎn)螕粼O(shè)計(jì)區(qū)的圖片，有方框標(biāo)出已選定該圖片，再在下方的屬性區(qū)的左下角選擇矩形熱區(qū)，用鼠標(biāo)在圖片的指定區(qū)域單擊定位后再拖曳出一個(gè)矩形區(qū)域，即為“圖片熱區(qū)，相對(duì)應(yīng)的代碼會(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)。 10例：插入一個(gè)表格方法：先單擊插入面板常用項(xiàng)的表格對(duì)象，在設(shè)定了表格的行列值、寬度、邊框粗細(xì)、邊距、間距等屬性值后，在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入代碼和表格的實(shí)踐顯示

7、，在“所見(jiàn)即所得的頁(yè)面上，拖動(dòng)邊框線可改動(dòng)表格的大小，選中多個(gè)單元格后，再單擊屬性區(qū)左下角的合并按鈕可將這些單元格合并為一個(gè)單元格。11例：插入一幅Flash圖像 方法：先單擊插入面板常用項(xiàng)的媒體對(duì)象，選擇Flash，再選擇當(dāng)前目錄中的swf文件，在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入代碼和圖片的輪廓顯示，這樣在頁(yè)面的光標(biāo)位置就插入了Flash圖像。 12例：插入Frame框架 方法：先單擊插入面板規(guī)劃項(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)指針變

8、為橫或豎向箭頭，單擊鼠標(biāo)，代碼編輯區(qū)顯示所設(shè)定框架規(guī)劃的第4個(gè)htm文件的代碼，那么該文件包含自動(dòng)生成的代碼和規(guī)劃的3個(gè)指向的文件。132.4 Dreamweaver MX的深化運(yùn)用1插入面板的其他對(duì)象組：新版的DW針對(duì)ASP，ASPX，PHP，JSP效力器端的文檔文件編輯，添加了相應(yīng)的對(duì)象組，只需對(duì)具有這些擴(kuò)展名的文件進(jìn)展編輯，在插入面板欄內(nèi)就會(huì)出現(xiàn)對(duì)應(yīng)的對(duì)象組，常用的語(yǔ)句代碼、公用的變量稱號(hào)、言語(yǔ)標(biāo)簽等都可以很方便地添加，這些大大減少了編程時(shí)需記憶各種語(yǔ)句和對(duì)應(yīng)的屬性稱號(hào)的費(fèi)事。2代碼面板：它預(yù)存了許多常用的HTML代碼和腳本代碼。 3命令菜單的清理功能：處理文檔會(huì)帶來(lái)兩個(gè)問(wèn)題：一是由于插

9、入的代碼混雜在文檔中，查看時(shí)有點(diǎn)摸不著頭緒，無(wú)法繼續(xù)修正編輯；二是在網(wǎng)上傳輸要多花些時(shí)間。 142.5 Dreamweaver MX的站點(diǎn)管理15圖2-10 Dreamweaver MX站點(diǎn)管理的編輯界面 161創(chuàng)建本地站點(diǎn)1站點(diǎn)稱號(hào)2本地文件夾 3其他項(xiàng)可用默許值 2設(shè)置效力器信息 1設(shè)置效力器選項(xiàng) 2假設(shè)為效力器分配了FTP權(quán)限此時(shí)需填寫以下數(shù)據(jù)： FTP主機(jī)。輸入效力器的IP地址。 主機(jī)目錄。輸入效力器上設(shè)定的目錄。 登錄。分配的用戶名。 密碼。分配的密碼。 其他項(xiàng)可用默許值。 173完本錢地站點(diǎn)創(chuàng)建在“站點(diǎn)定義為對(duì)話框設(shè)置完本錢地站點(diǎn)信息和效力器信息后，單擊確定按鈕即可完本錢地站點(diǎn)的創(chuàng)建。同時(shí)，DW會(huì)自動(dòng)以擴(kuò)展窗口方式翻開(kāi)遠(yuǎn)端站點(diǎn)和本地文件左、右兩個(gè)窗口4下載、上傳與更新網(wǎng)頁(yè)經(jīng)過(guò)運(yùn)用左、右站點(diǎn)窗口可以完成網(wǎng)頁(yè)的下載、上傳與更新操作 圖2-11 遠(yuǎn)端站點(diǎn)和本地文件目錄窗口18本 章 小 結(jié)本章簡(jiǎn)單引見(jiàn)了效力器端和客戶端的Web程序開(kāi)發(fā)環(huán)境Dreamweaver MX，它是編制HTML文件和ASP文