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

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

1 第2章Web程序開發(fā)環(huán)境 1服務(wù)器端開發(fā)環(huán)境2客戶端開發(fā)環(huán)境3網(wǎng)頁設(shè)計工具DreamweaverMX簡介4DreamweaverMX的深入應(yīng)用5DreamweaverMX的站點管理本章小結(jié) 在第1章中 介紹了Web編程的基礎(chǔ)知識 本章將對Web程序開發(fā)環(huán)境和常用工具做簡單介紹 包括常用的工具軟件 編制HTML和ASP文件的DreamweaverMX 這將為以后學(xué)習(xí)具體的編程方法和技術(shù)做好準(zhǔn)備 2 2 1服務(wù)器端開發(fā)環(huán)境 服務(wù)器是對Web瀏覽器檢索信息的請求做出響應(yīng) 進(jìn)而將HTML文檔回傳到客戶機的瀏覽器屏幕上 或者運行服務(wù)器端程序的計算機 服務(wù)器端的編程語言 除現(xiàn)在一般較少采用的CGI程序外 常用ASP Perl和PHP 還有微軟公司近期推出的新一代ASP NET語言 它直接與Java比拼 力圖成為網(wǎng)絡(luò)服務(wù)器端的標(biāo)準(zhǔn)語言 目前最常用的網(wǎng)絡(luò)操作系統(tǒng)有WindowsNT UNIX和Linux等 3 2 2客戶端開發(fā)環(huán)境 客戶端的編程語言 HTML標(biāo)識語言掌握圖形工具 Web網(wǎng)頁制作工具和Web網(wǎng)頁動畫工具圖形圖像設(shè)計及處理 Photoshop6 0 CorelDRAW9 0 FireworksMX Freehand9 0 Illustrator8 0 PhotoExpress3 0動畫制作工具 FlashMX Cool3D3 0 3DSMAXR3 ImageReady3 0 FireworksMXWeb網(wǎng)頁制作軟件 Dreamweaver FrontPage 4 2 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)域 5 2 3 2DreamweaverMX的特性 1 精確性 DW采用RoundtripHTML技術(shù)實現(xiàn)對HTML源代碼的精確控制 它能生成最為簡潔和高效的HTML代碼 2 易用性 DW的編輯界面相當(dāng)友好 且操作簡單 通過各種工具面板 可以非常方便地控制頁面各種元素的屬性 3 兼容性 兼容性是DW的一個非常優(yōu)秀的特性 用它制作的頁面能在各種瀏覽器上正確地顯示 6 2 3 3DreamweaverMX界面介紹 單擊中部的 創(chuàng)建新項目 建立相應(yīng)類型的新文件 單擊中部的 從范例創(chuàng)建 建立多種形式的新文件 雙擊右部的 文件 列表中的文件名 調(diào)入指定目錄中的文件 單擊左部的 打開最近項目 可調(diào)入編輯過的文件 7 DreamweaverMX文件編輯界面 8 1 文檔窗口文檔窗口是用來顯示當(dāng)前所編輯頁面的窗口2 插入面板以下簡單介紹一些對象面板 常用 包含主頁中最常用的一些對象 如圖片 表格 超鏈接等 布局 包含常用的框架結(jié)構(gòu) 如左右分幀 上下分幀等 表單 包含表單及所涉及的所有元素 如文本框 按鈕 復(fù)選框 單選框 列表框等 文本 包含一些特殊字符 如版權(quán)符號 注冊商標(biāo)符號 商標(biāo)符號等 HTML 添加一些Script腳本等 9 3 屬性面板選擇 窗口 菜單的 屬性 項即可打開屬性面板 屬性面板用來顯示文檔窗口中選定對象的各種屬性 屬性面板一般分為上 下兩塊 在右下角有個打開 關(guān)閉下塊的箭頭 有些擴展屬性安排在下塊中 單擊屬性面板標(biāo)題行的箭頭 還可以收縮 展開該面板選定一幅圖片時 屬性面板就變?yōu)轱@示圖片的縮略圖 大小 源文件名 對齊方式及其他屬性 10 例 熱區(qū)編輯操作 方法 單擊設(shè)計區(qū)的圖片 有方框標(biāo)出已選定該圖片 再在下方的屬性區(qū)的左下角選擇矩形熱區(qū) 用鼠標(biāo)在圖片的指定區(qū)域單擊定位后再拖曳出一個矩形區(qū)域 即為 圖片熱區(qū) 相對應(yīng)的代碼會自動生成 再單擊該圖片 對該熱區(qū)的鏈接屬性進(jìn)行設(shè)定 在下方屬性區(qū) 鏈接 文本框內(nèi)填寫要指向的某個URL 以后該網(wǎng)頁在瀏覽器窗口內(nèi)顯示時 鼠標(biāo)移到該矩形區(qū)域時 鼠標(biāo)指針將變?yōu)槭中?單擊它就可以完成超鏈接的跳轉(zhuǎn) 11 例 插入一個表格 方法 先單擊插入面板 常用 項的表格對象 在設(shè)定了表格的行列值 寬度 邊框粗細(xì) 邊距 間距等屬性值后 在代碼編輯區(qū)和界面設(shè)計區(qū)將自動插入代碼和表格的實際顯示 在 所見即所得 的頁面上 拖動邊框線可改變表格的大小 選中多個單元格后 再單擊屬性區(qū)左下角的合并按鈕可將這些單元格合并為一個單元格 12 例 插入一幅Flash圖像 方法 先單擊插入面板 常用 項的媒體對象 選擇Flash 再選擇當(dāng)前目錄中的swf文件 在代碼編輯區(qū)和界面設(shè)計區(qū)將自動插入代碼和圖片的輪廓顯示 這樣在頁面的光標(biāo)位置就插入了Flash圖像 13 例 插入Frame框架 方法 先單擊插入面板 布局 項的框架對象 選擇 左側(cè)和頂部 對象 DW會自動生成4個htm文件 當(dāng)光標(biāo)在各個顯示區(qū)域單擊時 多頁標(biāo)簽行的同一個標(biāo)簽上出現(xiàn)該文件名 各個文件要分別獨立存盤 當(dāng)光標(biāo)移至窗體邊框或框架分隔處時 鼠標(biāo)指針變?yōu)闄M或豎向箭頭 單擊鼠標(biāo) 代碼編輯區(qū)顯示所設(shè)定框架布局的第4個htm文件的代碼 則該文件包含自動生成的代碼和布局的3個指向的文件 14 2 4DreamweaverMX的深入應(yīng)用 1 插入面板的其他對象組 新版的DW針對ASP ASPX PHP JSP服務(wù)器端的文檔文件編輯 添加了相應(yīng)的對象組 只要對具有這些擴展名的文件進(jìn)行編輯 在 插入面板 欄內(nèi)就會出現(xiàn)對應(yīng)的對象組 常用的語句代碼 專用的變量名稱 語言標(biāo)簽等都可以很方便地添加 這些大大減少了編程時需記憶各種語句和對應(yīng)的屬性名稱的麻煩 2 代碼面板 它預(yù)存了許多常用的HTML代碼和腳本代碼 3 命令 菜單的清理功能 解決文檔會帶來兩個問題 一是因為插入的代碼混雜在文檔中 查看時有點摸不著頭緒 無法繼續(xù)修改編輯 二是在網(wǎng)上傳輸要多花些時間 15 2 5DreamweaverMX的站點管理 16 圖2 10DreamweaverMX站點管理的編輯界面 17 1 創(chuàng)建本地站點 1 站點名稱 2 本地文件夾 3 其余項可用默認(rèn)值2 設(shè)置服務(wù)器信息 1 設(shè)置服務(wù)器選項 2 如果為服務(wù)器分配了FTP權(quán)限此時需填寫以下數(shù)據(jù) FTP主機 輸入服務(wù)器的IP地址 主機目錄 輸入服務(wù)器上設(shè)定的目錄 登錄 分配的用戶名 密碼 分配的密碼 其余項可用默認(rèn)值 18 3 完成本地站點創(chuàng)建在 站點定義為 對話框設(shè)置完成本地站點信息和服務(wù)器信息后 單擊 確定 按鈕即可完成本地站點的創(chuàng)建 同時 DW會自動以擴展窗口方式打開 遠(yuǎn)端站點 和 本地文件 左 右兩個窗口4 下載 上傳與更新網(wǎng)頁通過使用左 右站點窗口可以完成網(wǎng)頁的下載 上傳與更新操作 圖2 11遠(yuǎn)端站點和本地文件目錄窗口 19 本章小結(jié) 本章簡單介紹了服務(wù)器端和客戶端的Web程序開發(fā)環(huán)境DreamweaverMX 它是編制HTML文件和ASP文件的非常實用的編輯集成環(huán)境 DreamweaverMX采用RoundtripHTML技術(shù)實現(xiàn)對HTML源代碼的精確控制 能生成最為簡潔和高效的HTML代碼 它編輯界面友好 且操作簡單 此外 DreamweaverMX的一個非常優(yōu)秀的特性是它的兼容性 它制作的頁面能在各種瀏覽器上正確地顯示