毕业论文设计用户登录界面.docx
《毕业论文设计用户登录界面.docx》由会员分享，可在线阅读，更多相关《毕业论文设计用户登录界面.docx（15页珍藏版）》请在冰豆网上搜索。
毕业论文设计用户登录界面
毕业论文设计用户注册页面
在之前的章节中，已经介绍了用户登录界面的设计，事实上在用户登录网站之前，往往还需要访问用户注册的页面，注册为网站的会员。
使用Dreamweaver的文本区域表单组件和菜单/列表表单组件，以及之前介绍的文本字段组件和按钮组件，可以方便地制作各种用户注册的页面，如图6-36所示。
图6-36用户注册页面
1设计思路
用户注册页面也是互联网中最常见的用户交互页面类型。
其与用户登录网站类似，都是提供一些表单供用户填写，通过网页获取用户填入的信息，再把用户信息写入到网站的数据库中。
用户注册往往是网站用户系统中与用户交互的第一步。
具有十分重要的作用。
1．用户注册页面分析
在设计用户注册页面时，首先需要设计具体的注册填写项目，包括各种必填项目、选填项目等。
设计项目时不能盲目的设计，而应参考以下一些规范。
●设计项目应目的明确
设计注册填写项目时，应该有明确的目的。
每一个需要用户填写的内容，都应该是网站经营者需要获得的信息，而不是无聊的玩笑。
一些小网站往往要求用户填写数页的注册信息内容，将其保存起来，却从来不对这些信息进行分析和总结，这样的注册没有任何意义，反而延长了用户在注册网站时花费的时间，给用户造成很坏的印象。
为什么需要用户注册？
通常互联网中各种经营性的网站获得用户信息有许多种，例如，获得用户的联系方式（电话号码，手机号码，电子邮件，通信地址等）、喜好和习惯（生活规律，业余爱好，擅长领域，工作习惯等）、个人信息（教育程度，社会阶层，职业年龄，性别经历等）、真实身份（身份证号，学生证号，工号帐号，其他身份等）。
获取的这些信息都应该与网站的经营目的有关，如图6-37所示。
图6-37网站注册项目的作用
在设计网站注册的填写项目时，应量体裁衣，根据网站用户的性质归化注册项目，尽量避免无意义的注册项目，防止这些既浪费用户时间，又占用数据库的空间的项目产生，降低网站系统的运营效率。
●设计项目应精简易填
网站的注册项目还应该通俗易懂。
网站所需要面对的并不只是局限于专业用户。
过于艰深的词汇可能造成用户误解，以致注册无法进行。
因此，能使用中文时尽量使用中文，能使用简单的词汇，尽量少使用术语。
例如，大多数网民都了解Email代表电子邮件，因此在要求用户填写电子邮件时，可使用Email，也可使用“电子邮件地址”等。
然而，对于一些英语不是很熟悉的用户而言，很少有人知道“Zipcode”的含义，因此应以“邮政编码”作为代替。
由于国内大多数用户使用的是汉字而非26个拉丁字母，因此在填写各种问题和答案时，需要比欧美人多开启一次输入法。
因此如果不是十分必要，在注册时尽量少使用直接的问题，而应提供尽量详细的选项供用户选择，使用户免于输入的麻烦。
在国内很多中年网民的打字速度很慢，甚至完全不会打字。
因此，大量需要用户输入的注册选项无疑会给这些用户造成很大的困难。
而网站界面设计中，应尽量避免这种情况的发生。
●注册项目应有详细注释
即使已经使用非常简单的语言编写了设计的项目，仍然应该为用户提供详细的注释内容，帮助用理解项目的含义，以及填写项目时所采用的格式等。
例如，在用户名的注册项目中，应清晰地描述用户名可使用的字符，包括是否允许使用中文，是否允许使用数字，是否允许使用标点符号，以及允许多少位字符等。
而在密码的设置中，也应注明密码允许的位数和字符。
同时，还应提供确认密码的选项，强制用户再次输入一次密码，防止用户在注册时使用了错误的密码，造成以后无法登录。
对于一些存在多种格式的信息，应提供一些示例范本。
防止用户输入错误的格式导致无法注册。
例如，在填入日期时，提供注释“1970/1/1”等。
对于一些比较隐私的信息，例如，婚姻状况、手机号码、家庭地址、工作单位、真实姓名等，应在注释中强调，网站不会将其泄漏，以打消用户的顾虑。
或提供“保密”的选项供用户选择，再或者将其设置为选填，允许用户不填。
对于一些需要输入大量文本内容的项目，应提供限制字数的提示信息，防止用户输入过多的文本而导致无法注册。
同时，还应该将必填文本和选填文本作出区分，并提供说明。
2．本实例分析
本实例设计了一个古典文化网站的用户注册界面。
在设计该网站时，运用了许多中国古典风格的图像（如各种写意风格的绘画元素以及中国古典特色的物品、修饰等），以突出中国古典特色。
在设计网站的Logo时，使用了金文作为Logo文字的字体，为字体添加了深褐色的颜色并设置金黄色的发光特效和灰色的投影特效，模拟金属雕刻的风格。
同时为Logo右侧的小标题添加了印章风格的背景，更增添古典意味，如图6-38所示。
图6-38中国古典风格的Logo
在设计网页的导航条时，为了使导航条更具有中国古典风格，为字体应用了竖排的排版方式，并为其应用了隶书字体，模仿古代竹简的书写方式。
（由于很多用户的计算机并未安装这一字体，因此在此使用了整幅的导航条图像，同时为图像添加了热区，以实现分块链接。
）如图6-39所示。
图6-39竖排隶书的导航条
为体现整个网页的中国古典风格，在导航条的右侧添加了一幅写意风格的国画，其内容为河水、小岛、渔船和飞鸟等，将导航条衬托得更加美观，如图6-40所示。
图6-40导航条右侧的国画
为使网页的Logo、导航条与网页的主题部分之间有一个清晰的分界，在设计用户注册网页时，为其添加了一行青铜色的中国风格砖瓦图像分界线，既将Logo/导航条与网页的主题部分分离开来，又可以与网页的整体风格保持一致，如图6-41所示。
图6-41青铜色砖瓦分界线
为体现出网页主题部分中的古典风格，在网页的主题部分背景中分别添加了瀑布、远处的小船以及右侧的山峰等写意画风格的图像，如图6-42所示。
图6-42主题部分背景
在主题部分背景上可以添加一个青色的双线边框，作为注册表单与普通主题背景的分界线。
在该边框中，可以添加一个半透明的白色背景，然后再插入注册表单，如图6-43所示。
图6-43插入的注册表单
在注册表单的边框右下方，可以添加一个芭蕉扇的图标，然后在图标上添加隶书书写的用户注册文本，作为主题部分的标题，如图6-44所示。
图6-44设计表单的标题
在设计网页的版尾部分时，可以使用回纹作为主题部分与版尾部分的分隔线，将这两部分隔开，然后，在版尾处添加墨迹的背景，以保持版尾与整个页面的一致性，如图6-45所示。
图6-45回纹分隔线和墨迹背景的版尾
2设计过程
设计用户注册页面时，不仅需要使用之前章节介绍的文本字段和按钮等表单组件，还需要使用到项目列表选项，供用户选择项目填写。
同时，还需要使用文本域的组件，获取用户输入的大量文本，用于用户的个人简介。
1．制作表单项目
（1）在Dreamweaver中打开素材网页，选中ID为container的div标签，然后执行【插入】|【表单】|【表单】命令，为其插入一个表单容器，如图6-46所示。
图6-46插入表单
（2）在【属性】面板中设置表单的【表单ID】为regist，设置【动作】为“javascript:
void（null）;”，将表单容器的动作设置为空，如图6-47所示。
图6-47设置表单容器动作
（3）将鼠标光标置于表单中，执行【插入】|【表单】|【文本域】命令，在弹出的【输入标签辅助功能属性】对话框中设置【ID】为userName，并单击确定，插入文本域，如图6-48所示。
图6-48插入用户名文本域
（4）选中用户名的文本域，执行【插入】|【HTML】|【文本对象】|【段落】命令，为文本域应用段落，如图6-49所示。
图6-49应用段落
（5）在文本域右侧按“Ctrl+Shift+空格”组合键，插入一个全角空格，然后按回车键，在新的行中再执行【插入】|【表单】|【文本域】命令，插入一个ID为userPass的文本域，并在【属性】面板中设置其【类型】为【密码】，如图6-50所示。
图6-50插入密码域
（6）用同样的方法，插入ID为“rePass”的重复输入密码域，并设置域的类型，如图6-51所示。
图6-51插入重复输入密码域
（7）在重复输入密码域的右侧插入全角空格，再按回车，插入ID为emailAddress的文本域，在【属性】面板中设置其初始值为“@”，如图6-52所示。
图6-52设置文本域初始值
（8）在电子邮件域右侧插入全角空格，再按回车，执行【插入】|【表单】|【列表/菜单】命令，插入【ID】为bornYear的列表菜单，如图6-53所示。
图6-53插入列表菜单
（9）选中列表菜单，在【属性】面板中单击【列表值】按钮，在弹出的【列表值】对话框中输入年份列表的值，如图6-54所示。
图6-54输入列表值
（10）在列表菜单右侧输入一个“年”字，然后用同样的方法插入一个ID为bornMonth的列表菜单，如图6-55所示。
图6-55插入月份的列表菜单
（11）在【属性】面板中单击【列表值】按钮，在弹出的【列表值】对话框中输入月份以及月份的值等菜单内容，如图6-56所示。
图6-56设置月份的列表
（12）在列表菜单右侧输入一个“月”字，完成列表菜单的制作，并按回车键，在新的行中插入ID为checkCode的验证码文本域，并在其右侧插入一个全角空格，如图6-57所示。
图6-57插入验证码文本域
（13）按回车键，在新的行中执行【插入】|【表单】|【文本区域】命令，设置文本区域的ID为introduction，然后设置字符宽度为0，行数为6，如图6-58所示。
图6-58设置文本区域属性
（14）在文本区域右侧按回车键，在新的行中执行【插入】|【表单】|【按钮】命令，插入ID为regBtn的按钮，并设置按钮的【值】为“注册”，如图6-59所示。
图6-59插入按钮并设置按钮值
（15）在注册按钮右侧插入两个全角空格，然后用同样的方式再插入一个ID为resetBtn的按钮，在【属性】面板中设置按钮的值为“重置”，【动作】为【重设表单】，即可完成表单项目的制作，如图6-60所示。
图6-60制作重置按钮
2．设置表单样式
（1）分别选中ID为userName、userPass、rePass、emailAddress和instruction的表单，在【属性】面板中设置其类为“widField”，将其宽度加大，如图6-61所示。
图6-61增加表单宽度
（2）分别选中bornYear、bornMonth以及checkCode等3个表单，在【属性】面板中设置其类为narrowField，将其宽度定义为80px，如图6-62所示。
图6-62设置表单宽度
（3）在验证码的表单右侧插入12个全角空格，然后插入验证码的图像，如图6-63所示。
图6-63插入验证码图像
（4）单击选择注册按钮，然后在【标签选择器】栏中单击按钮所在的段落（p）标签，将其选中，然后在【属性】面板中设置其ID为btnsParaph，应用预置的样式，即可完成注册页面的制作，如图6-64所示。
图6-64应用段落样式
3知识点总结
1．文本区域
在Dreamweaver中，即允许用户为网页插入普通的文本字段（文本域），又允许用户为网页插入更加复杂的文本区域，即多行的文本字段。
插入文本区域的方式与插入文本域类似，执行【插入】|【表单】|【文本区域】命令，或在【插入】面板中单击【文本区域】按钮
后，即可打开【输入标签辅助功能属性】对话框，在对话框中设置文本区域的ID和标签等属性后，即可为网页插入文本区域，如图6-65所示。
图6-65插入文本区域
选中文本域后，用户可以在【属性】面板中方便地设置文本区域的属性。
文本区域的【属性】面板如图6-66所示。
图6-66文本区域的属性
在【属性】面板中，文本区域比文本字段有3种属性不同，如下。
●文本域该项目主要用于定义文本区域的ID属性，供各种CSS样式和脚本调用。
●字符宽度定义文本域中同一行容许的最大字符数量。
●行数定义文本域中允许同时显示的行数。
文本区域与文本域可以相互转化。
在文本区域中设置【类型】为【单行】后，即可将文本区域转化为普通的文本域。
在文本域中设置【类型】为【多行】，同样也可以将文本域转换为文本区域。
2．列表/菜单
列表/菜单是一种选择性的表单。
其允许设置多项选项，并为每个选项设定一个值，供用户进行选择。
用户可以通过VBScript或JavaScript等脚本语言读取列表/菜单的值。
在建立列表/菜单类型的表单时，可以执行【插入】|【表单】|【列表/菜单】命令，也可以在【插入】面板中单击【列表/菜单】按钮
，与插入文本域类似，都会打开【输入标签辅助功能属性】的对话框。
用户在设置了列表菜单的【ID】与【标签】等属性后，即可单击【确定】按钮，插入列表/菜单的表单，如图6-67所示。
图6-67设置列表辅助功能属性
选中建立的列表/菜单表单后，即可在【属性】面板中设置其属性。
列表菜单的属性主要分为以下几大类，如图6-68所示。
图6-68设置列表菜单属性
●列表/菜单
设置列表/菜单的ID属性，为列表菜单定义一个在网页中唯一的命名，供各种样式和脚本调用。
●类型
列表/菜单事实上是两种表单。
一种是单行的下拉式菜单，另一种则是允许同时显示多行的项目列表。
设置【类型】属性后，可以将其在这两种类型表单中切换。
●高度
在设置列表/菜单类表单为列表后，即可设置其同时可显示的项目行数。
默认值为1。
●选定范围
在设置列表/菜单类表单为列表后，即可选择【选定范围】属性的【允许多选】复选框，设置其可为多项选择。
●列表值
【列表值】按钮的作用是为表单提供定义，帮助用户设置列表/菜单表单中的列表项目或菜单项目。
单击【列表值】按钮后，将打开【列表值】的对话框，如图6-69所示。
图6-69设置列表值
在【列表值】的对话框中，提供了对列表项目进行添加、删除和移动的按钮工具以及显示的列表内容等，如表6-5所示。
表6-5【列表值】对话框中的功能
名称
按钮
作用
名称
作用
增加项目
在当前位置增加一个列表项目
项目标签
列表项目在网页中显示的文本
删除项目
删除当前选中的列表项目
值
选中项目后输出的项目值
上移项目
将当前选中的列表项目向上移动一位
下移项目
将当前选中的列表项目向下移动一位
●初始化时选定
在为列表/菜单的表单添加项目后，用户即可在初始化时选定的列表框中查看当前已添加的列表/菜单项目。
用鼠标单击该列表框中的任意一个项目，即可将其设置为网页显示时默认选中的项目。
如果已勾选【允许多选】的复选框，则用户可以为列表/菜单的表单设置多个默认值。
升级会员 