web 应用程序 的 界面 设计

WEB应用程序的界面设计

公司徽标

任务列表• 设计用户注册页面

设计用户注册页面• ASP.NET Web 服务器控件– HTML 服务器控件– Web 服务器控件– 验证控件– 用户控件

注册界面

HTML 服务器控件• HTML 服务器控件的属性• 添加 HTML 服务器控件• 设置 HTML 服务器控件属性

兼容原有 HTML 标签，使得服务器端能够访问 HTML 标签控件

Web 服务器控件• Web 服务器控件属性• 标准控件• 验证控件

具有状态信息，功能更强

验证控件• 验证控件是对用户输入控件（如：

TextBox ）中输入的内容进行验证

HTML 服务器控件• 命名空间：

– System.Web.UI.HtmlControls• 属性：

– Attribute– Style– Visible

• 输入 HTML 控件：– Name– Value– Type

• HTML 容器控件– InnerHtml– InnerText

Input Button

div

Click 事件 onservercick 事件

Web 服务器控件• 一个运行在服务器端，并将实际内容呈现

在客户端的类

• <asp:Button ID=“btnOK” runat=“server” Text=“ 注册 " onclick="btnOK_Click" />

标准控件 (1/3)

• 标签控件 (Label)– Text– Visible

• 文本框控件 (TextBox)• AutoPostBack• TextMode• Text• ReadOnly

标准控件 (2/3)

• 按钮控件 (Button 、 LinkButton 、 ImageButton)• OnClientClick

• 超链接控件 (HyperLink)• NavigateUrl —— 两种方式：属性对话框、代码• Text

• 单选按钮控件和单选按钮列表控件(RadioButton 、 RadioButtonList)• repeatColumns • repeatDirection• SelectdItem

标准控件 (3/3)

• 复选框控件和复选框列表控件(checkbox ， CheckBoxList)• Repeatdirection

• 列表控件 (DropDownList ， ListBox)• Items• Text• Value• selected

• 图片控件 (Image)• ImageUrl• ImageAlign• alterText

验证控件（ 1/5 ）• Web 用用系统中常需要检查用户输入的信息

是否有效，并在必要时提示用户错误信息

• 必需项• 与某值对照• 范围检查• 模式匹配• 用户自定义

• RequireFieldValidator• CompareValidator• RangeValidator• RegularExpressionValidator• CustomValidator

验证控件（ 2/5 ）• 必需项： RequireValidator– 验证谁？ ControlToValidate– 出错了提示什么？ Text 、 ErrorMessage– Display

验证控件 (3/5)

• 对照值验证 CompareValidator– ControlToValidate– ControlToCompare– Type– Operator

验证控件 (4/5)

• 取值范围控件 RangeValidator– ControlToValidator– Text– Type– MinimumValue– MaximumValue

验证控件 (5/5)

• 正则表达式验证控件 RegularExpression– ControlToValidator– ValidationExpression

用户自定义控件• 用户自定义控件与 aspx 网页文件类似。• 区别：– 扩展名： ascx– 没有 page 指令 只有 control 指令– 不能独立运行，需要添加 aspx 页面中使用

• 使用方法：– 拖拽 ascx 文件到 aspx 页面中

作业 2

• 设计实现用户注册页面– 要求截图，发表到世界大学城中。并将项目文

件打包作为附件添加到文章中。• 用笔和纸归纳本次课程所学的知识点，和

对知识点的理解。并拍照上传到前面的文章中。