管理信息系統(tǒng)Web開發(fā)基本技術(shù)

1、管理信息系統(tǒng)September 18, 2022第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0第四章 Web開發(fā)的基本技術(shù)September 18, 202211.1 Internet地址Internet地址惟一地確定Internet上每臺(tái)計(jì)算機(jī)與每個(gè)用戶的位置。對(duì)用戶來說，Internet地址有兩種表示形式：IP地址和域名。IP地址域名接入Internet的計(jì)算機(jī)也有一個(gè)由授權(quán)機(jī)構(gòu)分配的號(hào)碼，這個(gè)號(hào)碼就叫IP地址。IP地址分前后兩部分，前面的部分叫網(wǎng)絡(luò)號(hào)，

2、后面的部分叫主機(jī)號(hào)。由于IP地址的數(shù)字地址很難記憶，通常使用一個(gè)文字IP地址來表示，把它叫做域名。September 18, 202221.2 Internet提供的服務(wù)Internet提供的常用的服務(wù)有：電子郵件服務(wù)1文件傳輸服務(wù)（FTP服務(wù)）2萬(wàn)維網(wǎng)服務(wù)（www服務(wù)）3新聞公告類服務(wù)4September 18, 202231.3 www服務(wù)在萬(wàn)維網(wǎng)上不僅可以看到文字、圖片，而且可以聽到聲音、看到動(dòng)畫。www服務(wù)是通過客戶機(jī)上的Web瀏覽器和Web站點(diǎn)上的Web服務(wù)器之間的通信來實(shí)現(xiàn)的（見圖4.1）。圖4.1 Web服務(wù)器的工作原理September 18, 202241.4 網(wǎng)頁(yè)和超文本經(jīng)

3、過系統(tǒng)設(shè)計(jì)，設(shè)計(jì)人員應(yīng)能為程序開發(fā)人員提供完整、清楚的設(shè)計(jì)文檔，并對(duì)設(shè)計(jì)規(guī)范中不清楚的地方做出解釋。系統(tǒng)設(shè)計(jì)中，應(yīng)遵循以下原則：（一）網(wǎng)頁(yè)網(wǎng)頁(yè)是我們?cè)诰W(wǎng)上用瀏覽器（如Internet Explorer，簡(jiǎn)稱IE）看到的那些頁(yè)面。這些頁(yè)面實(shí)際上都是一個(gè)個(gè)文件。由若干互連的文本塊組成的文本就是超文本。在www系統(tǒng)中，信息是按超文本方式組織的。 （二）HTML文件這種文件是用超文本標(biāo)語(yǔ)言（HTML，Hyper Text Markup Language）寫的。它存放在WEB服務(wù)器上，關(guān)于HTML在下一節(jié)還要詳細(xì)闡述。（三）http協(xié)議www服務(wù)是執(zhí)行http協(xié)議進(jìn)行傳輸?shù)摹Ｈ绻斎胍韵乱痪?，進(jìn)行信息定

4、位,就可指向百度主頁(yè)所在的位置：http:/我們把它稱為百度www 服務(wù)器的URL（統(tǒng)一資源定位器）September 18, 202251.4 網(wǎng)頁(yè)和超文本經(jīng)過系統(tǒng)設(shè)計(jì)，設(shè)計(jì)人員應(yīng)能為程序開發(fā)人員提供完整、清楚的設(shè)計(jì)文檔，并對(duì)設(shè)計(jì)規(guī)范中不清楚的地方做出解釋。系統(tǒng)設(shè)計(jì)中，應(yīng)遵循以下原則：（四）www瀏覽器這是客戶機(jī)上的一種軟件，通過它可以找到并瀏覽Internet上各種WWW服務(wù)器上的主頁(yè)。常用的瀏覽器軟件有微軟公司的Internet Explorer和Netscape 公司的Navigator等。（五）搜索引擎搜索引擎是Internet上的一種www服務(wù)器，它能在Internet中主動(dòng)搜索其

5、他www服務(wù)器中的信息并對(duì)其索引。使用搜索引擎時(shí)，用戶輸入關(guān)鍵字后，搜索引擎能返回包含該關(guān)鍵字信息的URL，并提供通向該站點(diǎn)的鏈接。September 18, 20226第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0 第四章 Web開發(fā)的基本技術(shù)September 18, 202272.1 用HTML做簡(jiǎn)單的網(wǎng)頁(yè)超文本文件是由超文本標(biāo)記語(yǔ)言(HTML)寫成，這種文件的格式就是大家所熟知的ASCII格式。把文檔中各種不同的內(nèi)容用不同的標(biāo)記元素對(duì)其屬性做上標(biāo)記。

6、這樣一來，超文本就是由標(biāo)記和文本內(nèi)容兩者組成的了。還有一種標(biāo)記方式叫做單標(biāo)記方式，它不是成對(duì)地出現(xiàn)標(biāo)記，只需一個(gè)標(biāo)記單獨(dú)使用，就能完整地表達(dá)意思。雙標(biāo)記方式單標(biāo)記方式例September 18, 202282.2 HTML文檔的一般結(jié)構(gòu)下面舉例說明HTML文檔的一般結(jié)構(gòu)：網(wǎng)上手機(jī)市場(chǎng)你想要買手機(jī)嗎?你可以訪問手機(jī)網(wǎng)站 了解有關(guān)信息。建立和運(yùn)行上述HTML文件的最原始的辦法是將它寫到Window附件中的記事本上，形成 .txt 文件，然后將后綴改為 .html, 用鼠標(biāo)雙擊文件名，即可運(yùn)行。這里：html和/html表示超文本的開始與結(jié)束；head和/head是超文本文件頭的起止；body和/b

7、ody是超文本正文主體的起止；p和/p是段落的起止；a和/a是定義超文本鏈接點(diǎn)的標(biāo)記元素。 href是標(biāo)記元素a的屬性。September 18, 202292.3 在網(wǎng)頁(yè)中插入圖片如果想在方才顯示的屏幕上增加一個(gè)名為gxkj.gif的圖形（見圖4.2），只要在上述HTML文檔中增加下面一句即可：IMG SRC=“gxkj.gif” width“20”height“15” 這里IMG是插入圖形文件的標(biāo)記?！癝RC=”后面的gxkj.gif 是圖形文件名。此圖寬20 MM，高15MM,可由掃描得到。圖4.2 插入圖片 你想買手機(jī)嗎？可以訪問手機(jī)網(wǎng)站來了解有關(guān)信息圖片September 18, 2

8、022102.4 用HTML定義表格運(yùn)用標(biāo)記元素可以寫出供瀏覽表格用的HTML文本。下面列出的HTML文本可以顯示出圖4.3所示的表格：表格名稱第一標(biāo)題列第二標(biāo)題列第三標(biāo)題列第一標(biāo)題列第二標(biāo)題列第三標(biāo)題列圖4.3 瀏覽器上顯示的表格September 18, 202211第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0 第四章 Web開發(fā)的基本技術(shù)September 18, 2022123. Frontpage如果使用微軟公司的FrontPage這種WEB編程

9、工具就可以做到在幾乎不需要編寫HTML代碼的情況下，完成網(wǎng)頁(yè)的制作，同時(shí)自動(dòng)地生成HTML文件。產(chǎn)品號(hào)產(chǎn)品型號(hào)生產(chǎn)廠家價(jià)格產(chǎn)品價(jià)格表圖4.5 一個(gè)被鏈接的頁(yè)面下面通過將圖4.4和圖4.5二個(gè)頁(yè)面相鏈接的例子來說明用FrontPage制作HTML文件的過程。動(dòng)態(tài)字幕網(wǎng)上手機(jī)商場(chǎng)產(chǎn)品價(jià)格表見正按八折銷售，歡迎選購(gòu)手機(jī)照片圖4.4 一個(gè)主頁(yè)面September 18, 2022133. Frontpage1.定義主網(wǎng)頁(yè)2.網(wǎng)頁(yè)分區(qū)3.輸入網(wǎng)頁(yè)標(biāo)題文字第1步第2步第3步第4步第5步第6步第7步4.插入照片6.做被連接的網(wǎng)頁(yè)5.做動(dòng)態(tài)字幕7.建立超鏈接，填URL地址新建網(wǎng)頁(yè)普通網(wǎng)頁(yè)確定網(wǎng)頁(yè)名字并存儲(chǔ)點(diǎn)擊

10、“插入表格”按鈕，做出22表格，并把表格實(shí)線變?yōu)樘摼€方法同用WORD編寫文字，在左上格寫上“網(wǎng)上手機(jī)商場(chǎng)”幾個(gè)字點(diǎn)擊選圖片鈕 用右鍵點(diǎn)圖片 點(diǎn)擊圖片屬性 外觀尺寸在右下格寫“正按八折銷售,歡迎選購(gòu)”字樣，選中后 插入 組件 字幕 字幕屬性 樣式 格式 字體另外做一個(gè)被連接的網(wǎng)頁(yè)（手機(jī)價(jià)格表）主網(wǎng)頁(yè)右上寫“產(chǎn)品價(jià)格表見”,選中后，用右鍵點(diǎn)擊選“超鏈接屬性”，填上URL地址.September 18, 202214第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0

11、第四章 Web開發(fā)的基本技術(shù)September 18, 2022154.交互網(wǎng)頁(yè)的制作我們需要通過網(wǎng)頁(yè)實(shí)現(xiàn)網(wǎng)上注冊(cè)、網(wǎng)上交談、網(wǎng)上查詢。這就需要使用交互性標(biāo)記元素，通過交互性標(biāo)記元素在網(wǎng)頁(yè)上顯示出一個(gè)人機(jī)對(duì)話的表單接口界面（參圖4.6）請(qǐng)?zhí)峁┮韵滦畔?，然后單擊提交姓名：密碼：提交清除圖4.6 人機(jī)對(duì)話的界面September 18, 2022164.交互網(wǎng)頁(yè)的制作我們看一下，用FORM標(biāo)記元素在HTML頁(yè)面上實(shí)現(xiàn)“提交”（一部分功能）的HTML文檔。tijiao.htm請(qǐng)?zhí)峁┮韵滦畔?然后單擊提交。姓名：密碼：FORM語(yǔ)句段的結(jié)構(gòu)如下：FORM METHOD =”POST”(指 從客戶機(jī)將信息

12、發(fā)送到 Web服務(wù)器)ACTION =”URL”(激活處 理交互信息的程序)/FORMHTML的交互性標(biāo)記元素FORM和INPUT僅僅提供了一個(gè)接口界面, 要全部實(shí)現(xiàn)交互功能，僅靠HTML是不夠的，還必須有ASP環(huán)境來進(jìn)行處理。September 18, 202217第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0 第四章 Web開發(fā)的基本技術(shù)September 18, 202218例：ASP文件VB-SCR-EXM.ASPhtml head title手機(jī)市

13、場(chǎng)標(biāo)題/title /head body % for i=3 to 7% Font size =%=i% 這里是手機(jī)市場(chǎng)！BR % next % /body/html5.1 ASP的定義和工作原理ASP（Active Server Pages）是微軟公司推出的，為其WEB服務(wù)器開發(fā)的一個(gè)組件。通過ASP，我們能夠?qū)TML頁(yè)面、腳本命令、ASP內(nèi)置對(duì)象和Active X組件結(jié)合起來，建立動(dòng)態(tài)、交互的Web應(yīng)用程序。簡(jiǎn)單地講，ASP是位于Web服務(wù)器端的腳本運(yùn)行環(huán)境。ASP文件可以包含以下的幾個(gè)部分：1. 文本；2. HTML標(biāo)記；3. ASP腳本命令。其中ASP腳本命令可以包含ASP對(duì)象，Ac

14、tiveX組件和任何腳本語(yǔ)言（如VB腳本所言、JAVA腳本語(yǔ)言等）。ASP腳本命令寫在“%”和“%”兩個(gè)符號(hào)之間。September 18, 202219圖4.8 ASP的工作過程5.1 ASP的定義和工作原理運(yùn)行下列ASP文件VB-SCR-EXM.ASP后能顯示出五行文字，內(nèi)容都是“這里是手機(jī)市場(chǎng)！”，但字體將逐行放大。例：ASP文件VB-SCR-EXM.ASPhtml head title手機(jī)市場(chǎng)標(biāo)題/title /head body % for i=3 to 7% Font size =%=i% 這里是手機(jī)市場(chǎng)！BR % next % /body/html上述ASP文件是怎樣執(zhí)行（運(yùn)行）

15、的呢？其過程如圖4.8所示：September 18, 2022205.2 ASP腳本編程ASP的目的是實(shí)現(xiàn)用戶與WEB服務(wù)器之間的信息交互。那么，通過什么來交換信息呢？首先，前面第三節(jié)中講過，可以使用HTML中的FORM（表單）。接收用戶輸入的HTML文件為：tijiao.htm form method=“post”action=“fanhui.asp”p請(qǐng)?zhí)峁┮韵滦畔?，然后單擊提交。p姓名：input name=“myname”size=“36”p密碼：input name=“password”type=password size=“36”pinput type=submit value=

16、“提交”/form處理上面表單提交的數(shù)據(jù)，并將有關(guān)內(nèi)容返回給用戶的ASP文件為：fanhui.asp% myname=Request.Form(“myname”)password=request.form(“password”)If password=”123456”then%=myname %先生（女士）：我們接受您的申請(qǐng)。您可以用以下密碼查閱我們的資料：abcde% else%對(duì)不起！您的密碼不對(duì)。%End if%September 18, 2022215.3 Internet信息服務(wù)在調(diào)試和運(yùn)行ASP文件之前，需在操作系統(tǒng)中先裝好IIS服務(wù)，然后才可以運(yùn)行，步驟如下：1.安裝IIS2.啟

17、動(dòng)Internet信息服務(wù)3.將你設(shè)計(jì)的asp加入4.運(yùn)行打開“控制面板”，然后單擊啟動(dòng) “添加/刪除程序”，按向?qū)е甘荆瓿蓪?duì)IIS的安裝。單擊Windows開始菜單所有程序管理工具IIS，即可啟動(dòng)“Internet信息服務(wù)”管理工具；IIS默認(rèn)的文檔只有default.htm和default.asp，根據(jù)需要，應(yīng)將你設(shè)計(jì)的asp加入.在瀏覽器中輸入http:/localhost/syasp/cx-send.asp,即可運(yùn)行。這里我們假定cx-send.asp是你的asp程序文件名。September 18, 202222第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié)

18、Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0 第四章 Web開發(fā)的基本技術(shù)September 18, 2022236. Web數(shù)據(jù)庫(kù)Web數(shù)據(jù)庫(kù)系統(tǒng)是指以HTML為代表的Web頁(yè)面（即網(wǎng)頁(yè)）與位于底層的數(shù)據(jù)庫(kù)的集成。Internet用戶可以通過Web頁(yè)面來訪問和數(shù)據(jù)庫(kù)中的數(shù)據(jù)。Oracle，Sybase，SQL Server 等都可以為Web提供數(shù)據(jù)庫(kù)支持。重要的是要解決Web頁(yè)面和數(shù)據(jù)庫(kù)之間的通信問題。September 18, 2022246. Web數(shù)據(jù)庫(kù)ODBC是一種編程接口，它能使應(yīng)用程序訪問支持SQL查詢語(yǔ)言的數(shù)

19、據(jù)庫(kù)管理系統(tǒng)，實(shí)現(xiàn)與各種數(shù)據(jù)庫(kù)的通信。只要在互聯(lián)網(wǎng)信息服務(wù)器（IIS）的Web服務(wù)器上安裝ODBC驅(qū)動(dòng)程序，就可方便地實(shí)現(xiàn)Web頁(yè)面與數(shù)據(jù)庫(kù)的連接。第一步ODBC與數(shù)據(jù)庫(kù)聯(lián)系前需要知道數(shù)據(jù)庫(kù)源名（簡(jiǎn)稱DSN）第二步用數(shù)據(jù)庫(kù)查詢語(yǔ)言SQL對(duì)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行操作，實(shí)現(xiàn)Internet遠(yuǎn)程用戶對(duì)數(shù)據(jù)庫(kù)數(shù)據(jù)及信息的訪問。September 18, 202225第一節(jié) 萬(wàn)維網(wǎng)（World Wide Web）第二節(jié) HTML第三節(jié) Frontpage第四節(jié) 交互網(wǎng)頁(yè)的制作第五節(jié) ASP（動(dòng)態(tài)服務(wù)主頁(yè)）第六節(jié) Web數(shù)據(jù)庫(kù)第七節(jié) 關(guān)于Web2.0 第四章 Web開發(fā)的基本技術(shù)September 18, 2

20、022267.關(guān)于Web2.0Web2.0是新一代互聯(lián)網(wǎng)應(yīng)用技術(shù)的統(tǒng)稱。與Web1.0相比改變了傳統(tǒng)用戶從互聯(lián)網(wǎng)網(wǎng)頁(yè)獲取信息的模式，將用戶與網(wǎng)絡(luò)的交互作為新一代技術(shù)的基本內(nèi)核。以人為核心構(gòu)建網(wǎng)絡(luò)，提供個(gè)性化服務(wù)是其重要指導(dǎo)思想。Web2.0目前主要的代表應(yīng)用有：博客（BLOG）、聚合內(nèi)容(RSS)、百科全書(Wiki)、社會(huì)網(wǎng)絡(luò)（SNS）、即時(shí)信息（IM）等September 18, 2022277.關(guān)于Web2.0Web2.0具有以下特點(diǎn)：1.以人為核心2.以開放性為特征3.以AJAX為技術(shù)保障September 18, 202228Web 是Internet網(wǎng)上的一種超文本的信息檢索服務(wù)程序。它具有的超鏈接功能可以支持文本、圖象、聲音和視頻等多種數(shù)據(jù)類型。為了解決客戶與Web服務(wù)器間的動(dòng)態(tài)交互問題和與數(shù)據(jù)庫(kù)的聯(lián)接問題，人們開發(fā)了ASP。通過ASP，用戶可以創(chuàng)建和運(yùn)行動(dòng)態(tài)的、交互式的Web服務(wù)器應(yīng)用程序。September 18, 202229 本 章 小 結(jié)September 18, 202230 習(xí) 題超文本電子數(shù)據(jù)交換技術(shù)ww