Web程序開(kāi)發(fā)環(huán)境.ppt

《Web程序開(kāi)發(fā)環(huán)境.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《Web程序開(kāi)發(fā)環(huán)境.ppt（19頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1 第2章Web程序開(kāi)發(fā)環(huán)境 1服務(wù)器端開(kāi)發(fā)環(huán)境2客戶端開(kāi)發(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程序開(kāi)發(fā)環(huán)境和常用工具做簡(jiǎn)單介紹 包括常用的工具軟件 編制HTML和ASP文件的DreamweaverMX 這將為以后學(xué)習(xí)具體的編程方法和技術(shù)做好準(zhǔn)備 2 2 1服務(wù)器端開(kāi)發(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等 3 2 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)畫工具圖形圖像設(shè)計(jì)及處理 Photoshop6 0 CorelDRAW9 0 FireworksMX Freehand9 0 Illustrator8 0 PhotoExpress3 0動(dòng)畫制作工具 FlashMX Cool3D3 0 3DSMAXR3 ImageReady3 0 FireworksMXWeb網(wǎng)頁(yè)制作軟件 Dreamweaver FrontPage 4 2 3網(wǎng)頁(yè)設(shè)計(jì)工具DreamweaverMX簡(jiǎn)介 2 3 1DreamweaverMX概覽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)畫這3個(gè)主要的網(wǎng)絡(luò)創(chuàng)作領(lǐng)域 5 2 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è)面能在各種瀏覽器上正確地顯示 6 2 3 3DreamweaverMX界面介紹 單擊中部的 創(chuàng)建新項(xiàng)目 建立相應(yīng)類型的新文件 單擊中部的 從范例創(chuàng)建 建立多種形式的新文件 雙擊右部的 文件 列表中的文件名 調(diào)入指定目錄中的文件 單擊左部的 打開(kāi)最近項(xiàng)目 可調(diào)入編輯過(guò)的文件 7 DreamweaverMX文件編輯界面 8 1 文檔窗口文檔窗口是用來(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腳本等 9 3 屬性面板選擇 窗口 菜單的 屬性 項(xiàng)即可打開(kāi)屬性面板 屬性面板用來(lái)顯示文檔窗口中選定對(duì)象的各種屬性 屬性面板一般分為上 下兩塊 在右下角有個(gè)打開(kāi) 關(guān)閉下塊的箭頭 有些擴(kuò)展屬性安排在下塊中 單擊屬性面板標(biāo)題行的箭頭 還可以收縮 展開(kāi)該面板選定一幅圖片時(shí) 屬性面板就變?yōu)轱@示圖片的縮略圖 大小 源文件名 對(duì)齊方式及其他屬性 10 例 熱區(qū)編輯操作 方法 單擊設(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)槭中?單擊它就可以完成超鏈接的跳轉(zhuǎn) 11 例 插入一個(gè)表格 方法 先單擊插入面板 常用 項(xiàng)的表格對(duì)象 在設(shè)定了表格的行列值 寬度 邊框粗細(xì) 邊距 間距等屬性值后 在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入代碼和表格的實(shí)際顯示 在 所見(jiàn)即所得 的頁(yè)面上 拖動(dòng)邊框線可改變表格的大小 選中多個(gè)單元格后 再單擊屬性區(qū)左下角的合并按鈕可將這些單元格合并為一個(gè)單元格 12 例 插入一幅Flash圖像 方法 先單擊插入面板 常用 項(xiàng)的媒體對(duì)象 選擇Flash 再選擇當(dāng)前目錄中的swf文件 在代碼編輯區(qū)和界面設(shè)計(jì)區(qū)將自動(dòng)插入代碼和圖片的輪廓顯示 這樣在頁(yè)面的光標(biāo)位置就插入了Flash圖像 13 例 插入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)生成的代碼和布局的3個(gè)指向的文件 14 2 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í)間 15 2 5DreamweaverMX的站點(diǎn)管理 16 圖2 10DreamweaverMX站點(diǎn)管理的編輯界面 17 1 創(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)值 18 3 完成本地站點(diǎn)創(chuàng)建在 站點(diǎn)定義為 對(duì)話框設(shè)置完成本地站點(diǎn)信息和服務(wù)器信息后 單擊 確定 按鈕即可完成本地站點(diǎn)的創(chuàng)建 同時(shí) DW會(huì)自動(dòng)以擴(kuò)展窗口方式打開(kāi) 遠(yuǎn)端站點(diǎn) 和 本地文件 左 右兩個(gè)窗口4 下載 上傳與更新網(wǎng)頁(yè)通過(guò)使用左 右站點(diǎn)窗口可以完成網(wǎng)頁(yè)的下載 上傳與更新操作 圖2 11遠(yuǎn)端站點(diǎn)和本地文件目錄窗口 19 本章小結(jié) 本章簡(jiǎn)單介紹了服務(wù)器端和客戶端的Web程序開(kāi)發(fā)環(huán)境DreamweaverMX 它是編制HTML文件和ASP文件的非常實(shí)用的編輯集成環(huán)境 DreamweaverMX采用RoundtripHTML技術(shù)實(shí)現(xiàn)對(duì)HTML源代碼的精確控制 能生成最為簡(jiǎn)潔和高效的HTML代碼 它編輯界面友好 且操作簡(jiǎn)單 此外 DreamweaverMX的一個(gè)非常優(yōu)秀的特性是它的兼容性 它制作的頁(yè)面能在各種瀏覽器上正確地顯示