一,目标
设计一个学生信息注册界面,界面图如下。

想要完成的界面
1.实现功能
- 用户能够添加各种信息
- 对用户输入信息进行验证(非空验证,范围验证,邮箱格式验证)
- 实现学院,专业,班级三级联动
- 能够上传符合图片格式的文件
- 验证照片的格式,获得上传照片的大小,格式,名称,其照片保存在当天路径Data文件中,若文件夹不存在,用代码创建Data。
- 按保存按钮,点击保存按钮跳转到Index.aspx页面中,并将录入值传给Index.aspx,并在其显示。
2.设计要求
| 录入项 | 说明 |
|---|---|
| 姓名 | 必填项,最大长度为10字符 |
| 学号 | 必填项,位数固定 |
| 性别 | 必选项 |
| CET4成绩 | 0-710分 |
| 上传照片 | 要求上床照片的格式为jpg,png |
二,界面设计
1.添加对应控件

选择控件
ctrl+Alt+x快捷键打开工具栏,拖拽右边栏工具。
2.利用table与css布局界面

布局界面
css代码:
<style type="text/css">
body{
background:rgb(144, 221, 231);//背景颜色
}
.Right{
text-align:right;
font-weight: bold;
}//边栏名称右对齐
.Submit{
text-align:center;
}
</style>
`
三,功能设计
1.为各组件添加特定ID
| 录入项 | ID |
|---|---|
| 姓名 | TextBox_Name |
| 学号 | TextBox_Number |
| 性别 | RadioButton_Boy && RadioButton_Girl (均在Sex group中) |
| 学院 | DropDownList_Deptment |
| 专业 | DropDownList_Major |
| 班级 | DropDownList_Class |
| CET4成绩 | TextBox_CET4 |
| 邮箱 | TextBox_Mail |
| 上传照片 | FileUpload_Photo |
| 确认 | ButtonS_save |
| 取消 | Button_Cancel |