ASP-NET应用开发教程案例2-设计网站主页面.ppt

1、ASP.NETASP.NET应用开发教程应用开发教程案例2 设计网站主页面 授课课时：授课课时：4 4课时（课时（180180分钟）分钟）22.1 案例描述 主页是一个网站的入口，用户通过浏览主页可以进行网站的各个页主页是一个网站的入口，用户通过浏览主页可以进行网站的各个页面。本作业主要是让读者练习几个基本面。本作业主要是让读者练习几个基本Web控件的使用以及页面的布局控件的使用以及页面的布局设计方式，通过设计方式，通过Dreamweaver CS3来设计基本页面，再在来设计基本页面，再在Visual Studio 2005编辑环境中添加相关编辑环境中添加相关Web控件控件。案例描述案例描述3

2、2.2 案例完成步骤2.2.1 2.2.1 创建项目和页面创建项目和页面1创建创建Web项目项目2添加新页面添加新页面 添加新页面就是添加新窗体，在现有的项目中添加Web窗体的步骤如下。（1）右击【解决方案资源管理器】中的项目名“ch02”，打开快捷菜单，然后选择【添加新项】选项（2）在【模板】列表中选择【Web窗体】，在【名称】文本框中输入页面名index.aspx，单击【添加】按钮就在项目中添加了一个Web窗体，再新增“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5个窗体。42.2 案例

3、完成步骤2.2.1 2.2.1 创建项目和页面创建项目和页面52.2 案例完成步骤2.2.2 2.2.2 布局控件布局控件（1 1）启动）启动Dreamweaver CS3Dreamweaver CS3并创建一个站点，站点文件存放的路径并创建一个站点，站点文件存放的路径设置为设置为WebWeb项目的存放位置，如图所示项目的存放位置，如图所示 （2 2）打开要编辑的页面，双击）打开要编辑的页面，双击“index.aspx”index.aspx”页面文件页面文件 ，进行设，进行设计，结果如图所示计，结果如图所示（3 3）返回到）返回到Visual Studio 2005Visual Studio

4、2005编辑环境，返回时会出现如图所编辑环境，返回时会出现如图所示的提示框，单击示的提示框，单击“全是全是”按钮按钮 62.2 案例完成步骤2.2.2 2.2.2 布局控件布局控件72.2 案例完成步骤2.2.2 2.2.2 布局控件布局控件主页设计效果主页设计效果82.2 案例完成步骤2.2.3 2.2.3 编码实现编码实现1页面初始化代码页面初始化代码 2LinkButton单击事件代码单击事件代码 3ImageButton单击事件代码单击事件代码 protected void Page_Load(object sender,EventArgs e)if(!IsPostBack)this.

5、Panel1.Visible=true;protected void LBtn_CS_Click(object 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 知识链接2.3.1 2.3.1 认识认识PagePa

6、ge对象对象1code-behind模式模式 代码分离代码分离(代码隐藏代码隐藏)技术技术 2Page类的事件与属性类的事件与属性（1）Page_Init事件：在页面服务器控件被初始化时发生（2）Page_Load事件：在服务器控件加载到Page对象中时发生（3）Page_UnLoad事件：在服务器控件从内存中卸载时发生（4）IsPostBack属性：获取一个值，该值指示该页是否因响应客户端(postback)而加载，或者是被首次访问而加载（5）IsValid属性：获取一个值，该值指示该页面验证是否成功 102.3 知识链接2.3.2 Label2.3.2 Label控件与控件与ImageIm

7、age控件控件1Label控件控件 Label控件用于在控件用于在 Web 窗体页上显示静态文本，要显示的具体窗体页上显示静态文本，要显示的具体内容通过其内容通过其Text属性来设置属性来设置 2Image控件控件 Image控件用于在控件用于在 Web 窗体页上显示窗体页上显示 Web 兼容图像。使用兼容图像。使用ImageURL参数来设置图片的路径。当图片不能正常显示时，参数来设置图片的路径。当图片不能正常显示时，AlternateText参数设定的内容会显示在图片的位置上。通过设置参数设定的内容会显示在图片的位置上。通过设置 ImageAlign 属性来指定图像相对于属性来指定图像相对于

8、 Web 页上其他元素的对齐方页上其他元素的对齐方式式 112.3 知识链接2.3.3 HyperLink2.3.3 HyperLink控件控件 HyperLink控件用于在页上创建一个可以切换到其他页或位置的链控件用于在页上创建一个可以切换到其他页或位置的链接。接。使用使用 NavigateUrl 属性指定要链接到的页或位置。链接既可显示属性指定要链接到的页或位置。链接既可显示为文本也可显示为图像。为文本也可显示为图像。若要显示文本，请设置若要显示文本，请设置 Text 属性或只是将文本放置在属性或只是将文本放置在 HyperLink 控件的开始和结束标记之间。若要显示图像，请设置控件的开始

9、和结束标记之间。若要显示图像，请设置 ImageUrl 属属性。性。注意注意：如果同时设置了：如果同时设置了 Text 和和 ImageUrl 属性，则属性，则 ImageUrl 属属性优先。如果图像不可用，则显示性优先。如果图像不可用，则显示 Text 属性中的文本。在支持属性中的文本。在支持“工具提示工具提示”功能的浏览器上，在将鼠标指针放在功能的浏览器上，在将鼠标指针放在 Hyperlink 控控件上时将显示件上时将显示 Text 属性的值。属性的值。122.3 知识链接2.3.4 ImageButton2.3.4 ImageButton控件与控件与LinkButtonLinkButto

10、n控件控件 1ImageButton控件控件 就是图像命令按钮，用来设置响应鼠标单击的图像就是图像命令按钮，用来设置响应鼠标单击的图像，通过设置，通过设置 ImageUrl 属性指定在控件中显示的图像。单击属性指定在控件中显示的图像。单击 ImageButton 控控件时，将同时引发件时，将同时引发 Click 和和 Command 事件。使用事件。使用 OnClick 事件事件处理程序，可以通过编程方式确定图像被单击的位置的坐标处理程序，可以通过编程方式确定图像被单击的位置的坐标 2LinkButton控件控件 LinkButton控件用于在控件用于在 Web 窗体页上创建超级链接样式按钮。

11、窗体页上创建超级链接样式按钮。132.3 知识链接2.3.5 Panel2.3.5 Panel控件控件Panel控件用于在页面内为其他控件提供一个容器。通过将多个控控件用于在页面内为其他控件提供一个容器。通过将多个控件放入一个件放入一个Panel控件，可将其作为一个单元进行控制，如隐藏或控件，可将其作为一个单元进行控制，如隐藏或显示他们。还可以使用显示他们。还可以使用Panel控件为一组控件创建独特的外观控件为一组控件创建独特的外观 142.4 拓展提高操作题操作题 1操作要求操作要求（1）使用已学过的控件设计个人网站的主页。）使用已学过的控件设计个人网站的主页。（2）使用）使用Panel控件控制整个页面内容的显示与隐藏。控件控制整个页面内容的显示与隐藏。2操作说明操作说明（1）在）在Dreamweaver中设计页面的基本布局。中设计页面的基本布局。（2）将其他控件放在）将其他控件放在Panel控件中就可以控制其显示与隐藏。控件中就可以控制其显示与隐藏。、