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

1、案例2 设计网站主页面 授课课时：4课时（180分钟）22.1 案例描述 主页是一个网站的入口，用户通过浏览主页可以进行网站的各个页面。本作业主要是让读者练习几个基本Web控件的使用以及页面的布局设计方式，通过Dreamweaver CS3来设计基本页面，再在Visual Studio 2005编辑环境中添加相关Web控件 。 案例描述32.2 案例完成步骤2.2.1 创建项目和页面1创建Web项目2添加新页面 添加新页面就是添加新窗体，在现有的项目中添加Web窗体的步骤如下。（1）右击【解决方案资源管理器】中的项目名“ch02”，打开快捷菜单，然后选择【添加新项】选项 （2）在【模板】列表中

2、选择【Web窗体】，在【名称】文本框中输入页面名index.aspx，单击【添加】按钮就在项目中添加了一个Web窗体，再新增“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5个窗体。 42.2 案例完成步骤2.2.1 创建项目和页面52.2 案例完成步骤2.2.2 布局控件（1）启动Dreamweaver CS3并创建一个站点，站点文件存放的路径设置为Web项目的存放位置，如图所示 （2）打开要编辑的页面，双击“index.aspx”页面文件 ，进行设计，结果如图所示（3）返回到Visual

3、Studio 2005编辑环境，返回时会出现如图所示的提示框，单击“全是”按钮 62.2 案例完成步骤2.2.2 布局控件72.2 案例完成步骤2.2.2 布局控件主页设计效果82.2 案例完成步骤2.2.3 编码实现1页面初始化代码 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 知识链接2.3.1 认识Page对象1code-behind模式 代码分离(代码隐藏)技术 2Page类的事件与属性 （1）Page_

5、Init事件 ：在页面服务器控件被初始化时发生 （2）Page_Load事件 ：在服务器控件加载到Page对象中时发生 （3）Page_UnLoad事件 ：在服务器控件从内存中卸载时发生（4）IsPostBack属性 ：获取一个值，该值指示该页是否因响应客户端(postback)而加载，或者是被首次访问而加载 （5）IsValid属性 ：获取一个值，该值指示该页面验证是否成功 102.3 知识链接2.3.2 Label控件与Image控件1Label控件 Label控件用于在 Web 窗体页上显示静态文本，要显示的具体内容通过其Text属性来设置 2Image控件 Image控件用于在 Web

6、 窗体页上显示 Web 兼容图像。使用ImageURL参数来设置图片的路径。当图片不能正常显示时，AlternateText参数设定的内容会显示在图片的位置上。通过设置 ImageAlign 属性来指定图像相对于 Web 页上其他元素的对齐方式 112.3 知识链接2.3.3 HyperLink控件 HyperLink控件用于在页上创建一个可以切换到其他页或位置的链接。使用 NavigateUrl 属性指定要链接到的页或位置。链接既可显示为文本也可显示为图像。若要显示文本，请设置 Text 属性或只是将文本放置在 HyperLink 控件的开始和结束标记之间。若要显示图像，请设置 ImageU

7、rl 属性。注意 ：如果同时设置了 Text 和 ImageUrl 属性，则 ImageUrl 属性优先。如果图像不可用，则显示 Text 属性中的文本。在支持“工具提示”功能的浏览器上，在将鼠标指针放在 Hyperlink 控件上时将显示 Text 属性的值。 122.3 知识链接2.3.4 ImageButton控件与LinkButton控件 1ImageButton控件 就是图像命令按钮，用来设置响应鼠标单击的图像 ，通过设置 ImageUrl 属性指定在控件中显示的图像。单击 ImageButton 控件时，将同时引发 Click 和 Command 事件。使用 OnClick 事件处理程序，可以通过编程方式确定图像被单击的位置的坐标 2LinkButton控件 LinkButton控件用于在 Web 窗体页上创建超级链接样式按钮。 132.3 知识链接2.3.5 Panel控件Panel控件用于在页面内为其他控件提供一个容器。通过将多个控件放入一个Panel控件，可将其作为一个单元进行控制，如隐藏或显示他们。还可以使用Panel控件为一组控件创建独特的外观 142.4 拓展