小明音樂庫管理系統(tǒng)課件02. 第2章

小明音樂庫管理系統(tǒng)第2章Web界面開發(fā)學習目標理解界面設計包括美工和交互兩個方面的內(nèi)容。掌握什么是HTML、XHTML以及HTML元素的概念和運用規(guī)則。掌握HTML文件結(jié)構(gòu)和基本標簽，掌握列表、圖像和表格元素。了解網(wǎng)站發(fā)布的原理，理解動態(tài)網(wǎng)站的工作原理。掌握ASP.NET項目的創(chuàng)建和發(fā)布。理解HTML表單的概念，掌握常用表單輸入控件。深刻理解Request和Response對象，掌握Request和Response的簡單用法。理解ASP.NET控件的作用，掌握Literal控件的使用。

2.1編寫頁面

1.HTML文件結(jié)構(gòu)

2.MPMM首頁標題標記<h>段落標記<p>超鏈接標記<a>符號標記&xxxx;水平分隔標記<hr/>

MPMM首頁index.html的瀏覽效果3.HTML列表無序列表標記<ul><li>

音樂分類頁面category.html瀏覽效果搖滾音樂列表頁面listrock.html瀏覽效果有序列表標記<ol><li>4.圖片標記<imgsrc="Images/m10001.jpg"alt="cdPhoto"width="200"/>絕對引用相對引用

音樂《海闊天空》詳細資料頁面detail_hktk.html瀏覽效果5.HTML表格標準表格<table><tr><td>合并單元格colspanrowspan圖文混排

音樂《海闊天空》詳細資料頁面detail_hktk.html瀏覽效果2.2發(fā)布網(wǎng)站

1.發(fā)布原理瀏覽器和服務器之間的網(wǎng)絡通信遵守HTTP協(xié)議。瀏覽器在展示HTML頁面上，不區(qū)分從磁盤讀取還是通過網(wǎng)絡通信來獲取HTML文件。要在網(wǎng)絡上發(fā)布一個網(wǎng)站供用戶訪問，必須要有一臺執(zhí)行HTTP協(xié)議的服務器，這個服務器稱為Web服務器。

2.發(fā)布MPMM網(wǎng)站W(wǎng)indows自帶Web服務器，叫做InternetInformationService，簡稱IIS。IIS服務器安裝完后，會增加一個c:\inetpub\wwwroot文件夾，這是IIS默認讀取HTML文檔的文件夾。將前面編寫好的HTML文檔復制到這個文件夾中，MPMM網(wǎng)站就發(fā)布成功了。Localhost和默認文檔在和Web服務器聯(lián)網(wǎng)的任意一臺計算機中打開瀏覽器，輸入Web服務器的IP地址或域名（如果有）打開這個頁面。這樣的網(wǎng)站，其內(nèi)容不會隨著訪問者、訪問時間發(fā)生變化，所以稱為靜態(tài)網(wǎng)站。

3.動態(tài)網(wǎng)站原理當ASP.NET程序完成處理生成結(jié)果后，這個結(jié)果就和ASP.NET程序沒有任何關(guān)系了。ASP.NET程序不可能去修改已經(jīng)提交給Web服務器的結(jié)果，更不可能修改送回到客戶端展現(xiàn)在瀏覽器中的結(jié)果。用戶在瀏覽器中和HTML頁面進行交互的過程，Web服務器和ASP.NET程序都是一無所知的。此時，Web服務器和ASP.NET程序所能做的就是等待客戶端的另一次請求。像這種每次請求都是獨立的情況，稱為無狀態(tài)的（Stateless），Web服務是典型的無狀態(tài)服務。

4.ASP.NET網(wǎng)站1) 新建Web項目選擇開發(fā)語言：C#選擇框架版本：4.5版本選擇模板：Web先前版本中的“ASP.NET空網(wǎng)站”指定項目名稱：MPMM選擇保存的位置：默認實際保存在默認位置下的MPMM文件夾

4.ASP.NET網(wǎng)站2) ASPX頁面“添加

Web窗體”命令添加Default.aspx頁面展開出現(xiàn)Default.aspx.cs文件Default.aspx可理解為動態(tài)生成網(wǎng)頁的框架對應cs代碼文件負責動態(tài)處理這個框架生成最終HTML頁面的程序。通常把包含HTML代碼的文件稱為前臺頁面文件，把包含對應C#代碼的文件稱為后臺代碼文件

4.ASP.NET網(wǎng)站3) 設計頁面控件：控件就是一個對象，具有一定的屬性，可以通過代碼操控實現(xiàn)特定的功能?？梢暱丶簳尸F(xiàn)在HTML頁面上。ASP.NET將HTML元素封裝成控件，開發(fā)人員可通過代碼操控，最終實現(xiàn)HTML頁面的動態(tài)生成。Lable控件<asp:LabelID="Label1"runat="server"Font-Bold="True"Font-Names="黑體"Font-Size="28pt"Text="Label"></asp:Label>

設置Label控件的Font屬性操控Label控件的后臺代碼4.ASP.NET網(wǎng)站4) 調(diào)試運行內(nèi)部簡化版IIS，支持查看網(wǎng)站運行結(jié)果，還支持在代碼中設置斷點?！皢诱{(diào)試”按鈕（綠色向右的三角小箭頭）啟動內(nèi)部IIS將網(wǎng)站文件發(fā)布到這個IIS中啟動瀏覽器訪問這個網(wǎng)站Localhost：51460（隨機端口號）

MPMM運行效果4.ASP.NET網(wǎng)站5) 發(fā)布網(wǎng)站解決方案管理器，右鍵“發(fā)布Web應用”命令“配置文件”頁中選擇“自定義”，配置文件名MPMM發(fā)布方法選擇“文件系統(tǒng)”，指定目標位置c:\inetpub\wwwroot文件夾在IIS管理器中，將MPMM網(wǎng)站的應用程序池從DefaultAppPool修改為ASP.NETv4.0。打開瀏覽器，訪問localhost其他聯(lián)網(wǎng)的計算機通過服務器IP地址來訪問這個網(wǎng)站。

演示：MPMM運行效果2.3實現(xiàn)首頁

1.首頁布局表格布局布局效果差布局不容易理解布局不容易調(diào)整。實現(xiàn)圖標和標題行對齊，嵌套了另一個表格圖片路徑

Images的文件夾源代碼

使用2行3列的表格實現(xiàn)首頁布局2.表單和輸入表單：一個包含表單元素的區(qū)域表單元素：一些允許用戶輸入信息的元素<form>…</form>標記定義ASP.NET頁面默認生成一個表單，不要刪除。首頁表單輸入：使用文本框?qū)崿F(xiàn)關(guān)鍵字的輸入提交按鈕，表示輸入完畢將表單信息發(fā)送給Web服務器注意將表單元素置于表單<form>…</form>標記內(nèi)部

快速查找的活動圖2.表單和輸入1)文本框和密碼框<inputtype=”text”/>用name屬性指定文本框的名稱密碼輸入框?qū)ype屬性的值設置為password文本區(qū)域，可輸入多行文本，<textarea>…</textarea>2)單選按鈕和復選框單選按鈕代碼：同組選項標記name屬性值相同的名稱，不同選項設置不同的value屬性值<inputtype="radio"name="genre"value="male"/>Male<br/><inputtype="radio"name="genre"value="female"/>Female復選框代碼：每個選項獨立，設置不同name來區(qū)分<inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacarvalue屬性用來標識選項的，不會呈現(xiàn)在瀏覽器中

2.表單和輸入3)下拉列表：帶有下拉按鈕的文本框，單擊按鈕會彈出一組選項<selectname="cars"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="fiat"selected="selected">Fiat</option><optionvalue="audi">Audi</option></select>4)按鈕：普通按鈕、復位按鈕和提交按鈕<inputtype="button"value="你好"><inputtype="reset"value="復位"><inputtype="submit"value="確定">單擊提交按鈕會向Web服務器發(fā)出請求，同時攜帶表單中輸入的內(nèi)容

3.處理輸入表單的<form>標記中通過action屬性來指定單擊按鈕后請求的URLASP.NET程序每個ASPX頁面都有對應的程序（頁面類），瀏覽器請求的URL和表單內(nèi)容都會提交給ASPX頁面的后臺對應類publicpartialclass_Default:System.Web.UI.PageASP.NET內(nèi)置的Page類，絕大部分請求由Page類負責處理：將所有和請求有關(guān)的內(nèi)容封裝到一個對象中，便于開發(fā)人員使用。按規(guī)定的順序調(diào)用類中的各個方法，方法被調(diào)用的動作通常稱為觸發(fā)事件根據(jù)數(shù)據(jù)融合頁面代碼，生成最終的HTML頁面，作為結(jié)果返回給Web服務器。開發(fā)人員的處理代碼主要寫在兩個地方：Page_Load()方法中頁面控件觸發(fā)的各種服務器端事件處理方法中Page類根據(jù)輸入數(shù)據(jù)分析后來觸發(fā)的，安排在Page_Load()方法執(zhí)行之后發(fā)生在服務器上不是瀏覽器在事件發(fā)生時觸發(fā)的

在哪里編寫ASP.NET的程序代碼，從而在收到請求時能夠得到執(zhí)行？4.Request輸入Request對象：ASP.NET將所有請求信息封裝到Request對象中客戶端瀏覽器的名稱、版本，Cookie，URL，用戶在表單中的輸入ASP.NET頁面的一個屬性，在頁面類方法中可以直接訪問例如：stringkey=Request["tbKey"];URL查詢變量：http://localhost/Default.aspx?cat=soul訪問：Request[“cat”]

在代碼中如何獲取請求的數(shù)據(jù)?4.Request輸入POST方式和GET方式GET方式直接在瀏覽器的地址欄中輸入，在請求資源的同時就傳遞了變量和值POST方式只能在表單中輸入，用戶首先獲得一個帶有表單的頁面，然后在下次向服務器請求時攜帶表單中的數(shù)據(jù)IsPostBackASPX頁面，表單提交頁面和表單所在頁面是同一個首次加載頁面：用戶第一次請求頁面時沒有攜帶表單數(shù)據(jù)回發(fā)(PostBack)加載頁面：用戶提交表單時的請求頁面類的IsPostBack屬性，用于區(qū)分這兩種情況

在代碼中如何獲取請求的數(shù)據(jù)?5.Response輸出Response對象Page類的一個屬性，在頁面類方法中可以直接使用Response.Write()方法可以輸出HTML代碼沒有提供“橡皮”功能沒有提供定位功能只能按照順序?qū)懭雰?nèi)容Response.Redirect()方法根據(jù)音樂資料生成HTML代碼源代碼Response.End();

搜索結(jié)果頁面難以控制輸出位置！6.控件輸出將各種控件布置到頁面中，然后設置控件的內(nèi)容來精確控制生成的頁面Literal控件<tdcolspan="2"width="80%">

快速查找：<inputname="tbKey"type="text"/><inputname="btSubmit"type="submit"value