ASP-NET應(yīng)用開(kāi)發(fā)教程案例2-設(shè)計(jì)網(wǎng)站主頁(yè)面

1、案例2 設(shè)計(jì)網(wǎng)站主頁(yè)面 授課課時(shí)：4課時(shí)（180分鐘）22.1 案例描述 主頁(yè)是一個(gè)網(wǎng)站的入口，用戶通過(guò)瀏覽主頁(yè)可以進(jìn)行網(wǎng)站的各個(gè)頁(yè)面。本作業(yè)主要是讓讀者練習(xí)幾個(gè)基本W(wǎng)eb控件的使用以及頁(yè)面的布局設(shè)計(jì)方式，通過(guò)Dreamweaver CS3來(lái)設(shè)計(jì)基本頁(yè)面，再在Visual Studio 2005編輯環(huán)境中添加相關(guān)Web控件 。 案例描述32.2 案例完成步驟2.2.1 創(chuàng)建項(xiàng)目和頁(yè)面1創(chuàng)建Web項(xiàng)目2添加新頁(yè)面 添加新頁(yè)面就是添加新窗體，在現(xiàn)有的項(xiàng)目中添加Web窗體的步驟如下。（1）右擊【解決方案資源管理器】中的項(xiàng)目名“ch02”，打開(kāi)快捷菜單，然后選擇【添加新項(xiàng)】選項(xiàng) （2）在【模板】列表中

2、選擇【W(wǎng)eb窗體】，在【名稱】文本框中輸入頁(yè)面名index.aspx，單擊【添加】按鈕就在項(xiàng)目中添加了一個(gè)Web窗體，再新增“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5個(gè)窗體。 42.2 案例完成步驟2.2.1 創(chuàng)建項(xiàng)目和頁(yè)面52.2 案例完成步驟2.2.2 布局控件（1）啟動(dòng)Dreamweaver CS3并創(chuàng)建一個(gè)站點(diǎn)，站點(diǎn)文件存放的路徑設(shè)置為Web項(xiàng)目的存放位置，如圖所示 （2）打開(kāi)要編輯的頁(yè)面，雙擊“index.aspx”頁(yè)面文件 ，進(jìn)行設(shè)計(jì)，結(jié)果如圖所示（3）返回到Visual

3、Studio 2005編輯環(huán)境，返回時(shí)會(huì)出現(xiàn)如圖所示的提示框，單擊“全是”按鈕 62.2 案例完成步驟2.2.2 布局控件72.2 案例完成步驟2.2.2 布局控件主頁(yè)設(shè)計(jì)效果82.2 案例完成步驟2.2.3 編碼實(shí)現(xiàn)1頁(yè)面初始化代碼 2LinkButton單擊事件代碼 3ImageButton單擊事件代碼 1234567protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) this.Panel1.Visible = true; 1234protected void LBtn_CS_Click(object

4、sender, EventArgs e) Response.Redirect(changsha.aspx); 1234567891011protected void IBtn_A_Click(object sender, ImageClickEventArgs e) if (this.Panel1.Visible = true) this.Panel1.Visible = false; else this.Panel1.Visible = true; 92.3 知識(shí)鏈接2.3.1 認(rèn)識(shí)Page對(duì)象1code-behind模式 代碼分離(代碼隱藏)技術(shù) 2Page類的事件與屬性 （1）Page_

5、Init事件 ：在頁(yè)面服務(wù)器控件被初始化時(shí)發(fā)生 （2）Page_Load事件 ：在服務(wù)器控件加載到Page對(duì)象中時(shí)發(fā)生 （3）Page_UnLoad事件 ：在服務(wù)器控件從內(nèi)存中卸載時(shí)發(fā)生（4）IsPostBack屬性 ：獲取一個(gè)值，該值指示該頁(yè)是否因響應(yīng)客戶端(postback)而加載，或者是被首次訪問(wèn)而加載 （5）IsValid屬性 ：獲取一個(gè)值，該值指示該頁(yè)面驗(yàn)證是否成功 102.3 知識(shí)鏈接2.3.2 Label控件與Image控件1Label控件 Label控件用于在 Web 窗體頁(yè)上顯示靜態(tài)文本，要顯示的具體內(nèi)容通過(guò)其Text屬性來(lái)設(shè)置 2Image控件 Image控件用于在 Web

6、 窗體頁(yè)上顯示 Web 兼容圖像。使用ImageURL參數(shù)來(lái)設(shè)置圖片的路徑。當(dāng)圖片不能正常顯示時(shí)，AlternateText參數(shù)設(shè)定的內(nèi)容會(huì)顯示在圖片的位置上。通過(guò)設(shè)置 ImageAlign 屬性來(lái)指定圖像相對(duì)于 Web 頁(yè)上其他元素的對(duì)齊方式 112.3 知識(shí)鏈接2.3.3 HyperLink控件 HyperLink控件用于在頁(yè)上創(chuàng)建一個(gè)可以切換到其他頁(yè)或位置的鏈接。使用 NavigateUrl 屬性指定要鏈接到的頁(yè)或位置。鏈接既可顯示為文本也可顯示為圖像。若要顯示文本，請(qǐng)?jiān)O(shè)置 Text 屬性或只是將文本放置在 HyperLink 控件的開(kāi)始和結(jié)束標(biāo)記之間。若要顯示圖像，請(qǐng)?jiān)O(shè)置 ImageU

7、rl 屬性。注意 ：如果同時(shí)設(shè)置了 Text 和 ImageUrl 屬性，則 ImageUrl 屬性優(yōu)先。如果圖像不可用，則顯示 Text 屬性中的文本。在支持“工具提示”功能的瀏覽器上，在將鼠標(biāo)指針?lè)旁?Hyperlink 控件上時(shí)將顯示 Text 屬性的值。 122.3 知識(shí)鏈接2.3.4 ImageButton控件與LinkButton控件 1ImageButton控件 就是圖像命令按鈕，用來(lái)設(shè)置響應(yīng)鼠標(biāo)單擊的圖像 ，通過(guò)設(shè)置 ImageUrl 屬性指定在控件中顯示的圖像。單擊 ImageButton 控件時(shí)，將同時(shí)引發(fā) Click 和 Command 事件。使用 OnClick 事件處理程序，可以通過(guò)編程方式確定圖像被單擊的位置的坐標(biāo) 2LinkButton控件 LinkButton控件用于在 Web 窗體頁(yè)上創(chuàng)建超級(jí)鏈接樣式按鈕。 132.3 知識(shí)鏈接2.3.5 Panel控件Panel控件用于在頁(yè)面內(nèi)為其他控件提供一個(gè)容器。通過(guò)將多個(gè)控件放入一個(gè)Panel控件，可將其作為一個(gè)單元進(jìn)行控制，如隱藏或顯示他們。還可以使用Panel控件為一組控件創(chuàng)建獨(dú)特的外觀 142.4 拓展