案例2設(shè)計網(wǎng)站主頁面授課課時：4課時（180分鐘）案例2設(shè)計網(wǎng)站主頁面授課課時：4課時（180分鐘）22.1案例描述主頁是一個網(wǎng)站的入口，用戶通過瀏覽主頁可以進行網(wǎng)站的各個頁面。本作業(yè)主要是讓讀者練習幾個基本W(wǎng)eb控件的使用以及頁面的布局設(shè)計方式，通過DreamweaverCS3來設(shè)計基本頁面，再在VisualStudio2005編輯環(huán)境中添加相關(guān)Web控件。

案例描述22.1案例描述主頁是一個網(wǎng)站的入口，用戶通32.2案例完成步驟2.2.1創(chuàng)建項目和頁面1．創(chuàng)建Web項目2．添加新頁面

添加新頁面就是添加新窗體，在現(xiàn)有的項目中添加Web窗體的步驟如下。（1）右擊【解決方案資源管理器】中的項目名“ch02”，打開快捷菜單，然后選擇【添加新項】選項（2）在【模板】列表中選擇【W(wǎng)eb窗體】，在【名稱】文本框中輸入頁面名index.aspx，單擊【添加】按鈕就在項目中添加了一個Web窗體，再新增“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5個窗體。32.2案例完成步驟2.2.1創(chuàng)建項目和頁面1．創(chuàng)建W42.2案例完成步驟2.2.1創(chuàng)建項目和頁面42.2案例完成步驟2.2.1創(chuàng)建項目和頁面52.2案例完成步驟2.2.2布局控件（1）啟動DreamweaverCS3并創(chuàng)建一個站點，站點文件存放的路徑設(shè)置為Web項目的存放位置，如圖所示（2）打開要編輯的頁面，雙擊“index.aspx”頁面文件，進行設(shè)計，結(jié)果如圖所示（3）返回到VisualStudio2005編輯環(huán)境，返回時會出現(xiàn)如圖所示的提示框，單擊“全是”按鈕

52.2案例完成步驟2.2.2布局控件（1）啟動Dre62.2案例完成步驟2.2.2布局控件62.2案例完成步驟2.2.2布局控件72.2案例完成步驟2.2.2布局控件主頁設(shè)計效果72.2案例完成步驟2.2.2布局控件主頁設(shè)計效果82.2案例完成步驟2.2.3編碼實現(xiàn)1．頁面初始化代碼

2．LinkButton單擊事件代碼3．ImageButton單擊事件代碼

1234567protected

voidPage_Load(objectsender,EventArgse){

if(!IsPostBack){

this.Panel1.Visible=true;}}1234protected

voidLBtn_CS_Click(objectsender,EventArgse){Response.Redirect("changsha.aspx");}1234567891011protected

voidIBtn_A_Click(objectsender,ImageClickEventArgse){

if(this.Panel1.Visible==true){

this.Panel1.Visible=false;}

else{

this.Panel1.Visible=true;}}82.2案例完成步驟2.2.3編碼實現(xiàn)1．頁面初始化代92.3知識鏈接2.3.1認識Page對象1．code-behind模式代碼分離(代碼隱藏)技術(shù)

2．Page類的事件與屬性

（1）Page_Init事件：在頁面服務(wù)器控件被初始化時發(fā)生（2）Page_Load事件：在服務(wù)器控件加載到Page對象中時發(fā)生（3）Page_UnLoad事件：在服務(wù)器控件從內(nèi)存中卸載時發(fā)生（4）IsPostBack屬性：獲取一個值，該值指示該頁是否因響應(yīng)客戶端(postback)而加載，或者是被首次訪問而加載（5）IsValid屬性：獲取一個值，該值指示該頁面驗證是否成功92.3知識鏈接2.3.1認識Page對象1．code102.3知識鏈接2.3.2Label控件與Image控件1．Label控件

Label控件用于在Web窗體頁上顯示靜態(tài)文本，要顯示的具體內(nèi)容通過其Text屬性來設(shè)置

2．Image控件

Image控件用于在Web窗體頁上顯示W(wǎng)eb兼容圖像。使用ImageURL參數(shù)來設(shè)置圖片的路徑。當圖片不能正常顯示時，AlternateText參數(shù)設(shè)定的內(nèi)容會顯示在圖片的位置上。通過設(shè)置ImageAlign屬性來指定圖像相對于Web頁上其他元素的對齊方式

102.3知識鏈接2.3.2Label控件與Image112.3知識鏈接2.3.3HyperLink控件

HyperLink控件用于在頁上創(chuàng)建一個可以切換到其他頁或位置的鏈接。使用NavigateUrl屬性指定要鏈接到的頁或位置。鏈接既可顯示為文本也可顯示為圖像。若要顯示文本，請設(shè)置Text屬性或只是將文本放置在HyperLink控件的開始和結(jié)束標記之間。若要顯示圖像，請設(shè)置ImageUrl屬性。注意：如果同時設(shè)置了Text和ImageUrl屬性，則ImageUrl屬性優(yōu)先。如果圖像不可用，則顯示Text屬性中的文本。在支持“工具提示”功能的瀏覽器上，在將鼠標指針放在Hyperlink控件上時將顯示Text屬性的值。

112.3知識鏈接2.3.3HyperLink控件H122.3知識鏈接2.3.4ImageButton控件與LinkButton控件

1．ImageButton控件

就是圖像命令按鈕，用來設(shè)置響應(yīng)鼠標單擊的圖像，通過設(shè)置ImageUrl屬性指定在控件中顯示的圖像。單擊ImageButton控件時，將同時引發(fā)Click和Command事件。使用OnClick事件處理程序，可以通過編程方式確定圖像被單擊的位置的坐標2．LinkButton控件LinkButton控件用于在Web窗體頁上創(chuàng)建超級鏈接樣式按鈕。

122.3知識鏈接2.3.4ImageButton控件132.3知識鏈接2.3.5Panel控件Panel控件用于在頁面內(nèi)為其他控件提供一個容器。通過將多個控件放入一個Panel控件，可將其作為一個單元進行控制，如隱藏或顯示他們。還可以使用Panel控件為一組控件創(chuàng)建獨特的外觀132.3知識鏈接2.3.5Panel控件Panel控142.4拓展提高操作題

1．操作要求（1）使用已學過的控件設(shè)計個人網(wǎng)站的主頁。（2）使用Panel控件控制整個頁面內(nèi)容的顯示與隱藏。2．操作說明（1）在Dreamweaver中設(shè)計頁面的基本布局。（2）將其他控件放在Panel控件中就可以控制其顯示與隱藏。、142.4拓展提高操作題1．操作要求、案例2設(shè)計網(wǎng)站主頁面授課課時：4課時（180分鐘）案例2設(shè)計網(wǎng)站主頁面授課課時：4課時（180分鐘）162.1案例描述主頁是一個網(wǎng)站的入口，用戶通過瀏覽主頁可以進行網(wǎng)站的各個頁面。本作業(yè)主要是讓讀者練習幾個基本W(wǎng)eb控件的使用以及頁面的布局設(shè)計方式，通過DreamweaverCS3來設(shè)計基本頁面，再在VisualStudio2005編輯環(huán)境中添加相關(guān)Web控件。

案例描述22.1案例描述主頁是一個網(wǎng)站的入口，用戶通172.2案例完成步驟2.2.1創(chuàng)建項目和頁面1．創(chuàng)建Web項目2．添加新頁面

添加新頁面就是添加新窗體，在現(xiàn)有的項目中添加Web窗體的步驟如下。（1）右擊【解決方案資源管理器】中的項目名“ch02”，打開快捷菜單，然后選擇【添加新項】選項（2）在【模板】列表中選擇【W(wǎng)eb窗體】，在【名稱】文本框中輸入頁面名index.aspx，單擊【添加】按鈕就在項目中添加了一個Web窗體，再新增“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5個窗體。32.2案例完成步驟2.2.1創(chuàng)建項目和頁面1．創(chuàng)建W182.2案例完成步驟2.2.1創(chuàng)建項目和頁面42.2案例完成步驟2.2.1創(chuàng)建項目和頁面192.2案例完成步驟2.2.2布局控件（1）啟動DreamweaverCS3并創(chuàng)建一個站點，站點文件存放的路徑設(shè)置為Web項目的存放位置，如圖所示（2）打開要編輯的頁面，雙擊“index.aspx”頁面文件，進行設(shè)計，結(jié)果如圖所示（3）返回到VisualStudio2005編輯環(huán)境，返回時會出現(xiàn)如圖所示的提示框，單擊“全是”按鈕

52.2案例完成步驟2.2.2布局控件（1）啟動Dre202.2案例完成步驟2.2.2布局控件62.2案例完成步驟2.2.2布局控件212.2案例完成步驟2.2.2布局控件主頁設(shè)計效果72.2案例完成步驟2.2.2布局控件主頁設(shè)計效果222.2案例完成步驟2.2.3編碼實現(xiàn)1．頁面初始化代碼

2．LinkButton單擊事件代碼3．ImageButton單擊事件代碼

1234567protected

voidPage_Load(objectsender,EventArgse){

if(!IsPostBack){

this.Panel1.Visible=true;}}1234protected

voidLBtn_CS_Click(objectsender,EventArgse){Response.Redirect("changsha.aspx");}1234567891011protected

voidIBtn_A_Click(objectsender,ImageClickEventArgse){

if(this.Panel1.Visible==true){

this.Panel1.Visible=false;}

else{

this.Panel1.Visible=true;}}82.2案例完成步驟2.2.3編碼實現(xiàn)1．頁面初始化代232.3知識鏈接2.3.1認識Page對象1．code-behind模式代碼分離(代碼隱藏)技術(shù)

2．Page類的事件與屬性

（1）Page_Init事件：在頁面服務(wù)器控件被初始化時發(fā)生（2）Page_Load事件：在服務(wù)器控件加載到Page對象中時發(fā)生（3）Page_UnLoad事件：在服務(wù)器控件從內(nèi)存中卸載時發(fā)生（4）IsPostBack屬性：獲取一個值，該值指示該頁是否因響應(yīng)客戶端(postback)而加載，或者是被首次訪問而加載（5）IsValid屬性：獲取一個值，該值指示該頁面驗證是否成功92.3知識鏈接2.3.1認識Page對象1．code242.3知識鏈接2.3.2Label控件與Image控件1．Label控件

Label控件用于在Web窗體頁上顯示靜態(tài)文本，要顯示的具體內(nèi)容通過其Text屬性來設(shè)置

2．Image控件

Image控件用于在Web窗體頁上顯示W(wǎng)eb兼容圖像。使用ImageURL參數(shù)來設(shè)置圖片的路徑。當圖片不能正常顯示時，AlternateText參數(shù)設(shè)定的內(nèi)容會顯示在圖片的位置上。通過設(shè)置ImageAlign屬性來指定圖像相對于Web頁上其他元素的對齊方式

102.3知識鏈接2.3.2Label控件與Image252.3知識鏈接2.3.3HyperLink控件

HyperLink控件用于在頁上創(chuàng)建一個可以切換到其他頁或位置的鏈接。使用NavigateUrl屬性指定要鏈接到的頁或位置。鏈接既可顯示為文本也可顯示為圖像。若要顯示文本，請設(shè)置Text屬性或只是將文本放置在HyperLink控件的開始和結(jié)束標記之間。若要顯示圖像，請設(shè)置ImageUrl屬性。注意：如果同時設(shè)置了Text和ImageUrl屬性，則ImageUrl屬性優(yōu)先。如果圖像不可用，則顯示Text屬性中的文本。在支持“工具提示”功能的瀏覽器上，在將鼠標指針放在Hyperlink控件上時將顯示T