❖ 设计指导：输入ID字段名后，选择数据类型为int，在 列属性中，设置标识规范为是，这样该字段就能够自动 编号（即第一条记录ID值为1，每增加一条记录，ID 值自动加1），从而能够可以作为记录的识别编号。单 击工具栏中的设置为主键按钮 ，将该字段作为主键， 这样能够提高数据检索的速度，后面表的设计中同样参 考这种思路。
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 网页登录的界面中一般提供用户名和密码的输入框、登录和注册 按钮等选项，如图所示是作者主持设计并开发主持的一个网络办 公自动化系统的界面。
C机om械p工an业y出L版og社o
14.1.1 美工的界面设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
C机om械p工an业y出L版og社o
14.2 数据库的设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 根据需求进行数据库的设计，新建数据库UserDB，在 数据库中新建表格users用来存放用户信息，其中用户 名（username）和密码（password）是必备的字段。 选择表分支，单击鼠标右键，新建表。
❖ using System.Data.SqlClient; //调用数据库命名空间 ❖ 然后在按钮的Button1_Click事件中编写注册代码，主要是进行
数据库连接，获取用户信息，定义SQL语句， 执行SQL命令，显 示提示信息，程序代码如下：
C机om械p工an业y出L版og社o
14.3.2 用户信息的提交
14.3.2 用户信息的提交
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 在用户注册中，我们先实现注册的基本功能，即把用户信息插入 到数据库中。这里先实现插入记录操作，而不做信息合法性验证， 验证部分在后面的程序设计中逐步完善。双击注册按钮，进入程 序代码视图中，首先在引用部分添加对数据库命名空间的引用：
C机om械p工an业y出L版og社o
14.1 用户界面的设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 用户注册登录功能是任何功能性网站应用程序的必要组 成部分，因此用户注册登录界面也必然是网页美工设计 课题。
C机om械p工an业y出L版og社o
14.1.1 美工的界面设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ protected void utton1_Click(object sender, EventArgs e)
❖{
❖
//定义连接字符串
❖
String constr = "server=(local);database=UserDB;User
C机om械p工an业y出L版og社o
14.1.2 技术如何实现
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 对于注册界面，技术实现主要是采用在表格布局的基础 上安排控件，然后用CSS样式控制界面的美工，对于 满版的登录界面，可以采用背景图片的方式，再用表格 安排登录控件，也可以采用切片的方式，进行布局。其 中按钮的设计可以用ImageButton控件实现，也可以 通过CSS样式修改普通按钮进行更改。
Nvarchar 50
性别 Sex
Nvarchar 2
电子邮 Email 件
Nvarchar 50
C机om械p工an业y出L版og社o
14.3 用户注册设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 用户注册功能的设计主要包括注册界面的设计、用户信 息的合法性检查、重名的检测和用户数据的插入数据库 操作。
C机om械p工an业y出L版og社o
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
第14章 用户注册登录模块设计 ——数据连接的建立
1 14.1 用户界面的设计 2 14.2 数据库的设计 3 14.3 用户注册设计 4 14.4 用户登录设计 5 14.5 用户界面的美化
C机om械p工an业y出L版og社o
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
14.2 数据库的设计
字段含 义
编号
用户名
字段名 称
ID
UserNam e
数据类型
int Nvarchar
50
备注 标识规范为是，主键
密码
Password Nvarchar 50
姓名 Name
Company
LOGO
动态网页设计教程——美工与技术
第14章 用户注册登录模块设计 ——数据连接的建立
徐延章 编著
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
第14章 用户注册登录模块设计 ——数据连接的建立
❖ 用户登录及管理是任何功能网站应用程序中必备的功能， 是系统安全的重要组成部分，本章介绍用户注册登录模 块的设计。
❖ 网易邮箱登录的界面提供了简洁的造型，将用户名、密码、登录 等清晰地展示出来。从美工设计而言，可以采用满版式的登录页 面，也可以加入到网页中，形成登录版块。除了整体的界面效果 外，文本框与按钮的设计往往成为设计的焦点。
C机om械p工an业y出L版og社o
14.1.1 美工的界面设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
C机om械p工an业y出L版og社o
14.3.1 用户注册界面设计
动态w网w页w设.t计he教m程eg—al—le美ry工.co与m技术
❖ 首先在D盘新建网站myaspnet-6。打开Default.aspx网页，切 换到设计视图，输入响应的文字，拖动相应的控件到界面中，设 计效果。
C机om械p工an业y出L版og社o
❖ 注册界面中一般包含用户名、 密码之类的一些信息输入项 与性别之类的选择项，用于 获取用户的信息。其中，用 户名和密码是必备的内容， 在设计时可根据情况进行分 类，如基本信息、其他信息 等，并将必填的信息加以标 识，通常用红色*表示，网易 邮箱注册的界面。在设计注 册界面时，往往需要注意的 是界面的清晰美观、层次清 楚，而切忌用大量的图片和 动画效果。