PHP网站开发项目式教程（微课版）（第2版）任务6 实现163邮箱登录功能.pptx

;任务6实现163邮箱登录功能;本任务提供了两种登录界面的设计方案：第一种是只能以用户名和密码登录的普通登录界面；第二种是能够选择以用户名登录或手机号登录的Tab选项卡式登录界面。

;6.1.1设计普通登录界面;图6-1??普通登录界面图6-2登录失败之后的界面;1．界面布局及样式要求

登录界面中需要使用的盒子及盒子的排列关系如图6-3所示。

各个盒子的内容及样式要求如下。

（1）类选择符.divw的样式要求。

宽度为370px，高度为200px，上填充为50px，其余填充为0，上下边距为0，左右边距为auto（设置盒子在浏览器窗口中居中），边框为1px、蓝色实线。

;图6-3?登录界面中使用的盒子的布局关系;元素divclass=divw中包含上下两个div，上面div的内容是设置了账号或者密码输入错误时要显示的错误提示信息，使用ID选择符#errormsg定义；下面的div用于存放表单元素，使用ID选择符#cont定义。

（2）ID选择符#errormsg的样式要求。

宽度为200px，高度为40px，填充为0，上下边距为0，左右边距为auto（设置div在父元素divclass=divw中水平居中对齐），div的初始状态为隐藏，div中的文本字号为10pt，文本行高为40px，文本颜色为红色。;（3）ID选择符#cont的样式要求。

宽度为300px，高度为160px，填充为0，上下边距为0，左右边距为auto，div中的文本字体为Calibri（使用该字体是为了保证在各种不同的浏览器中，4个空格占用的宽度都能等同于一个汉字占用的宽度），字号为10pt。

在元素divid=cont内部使用段落标签控制表单元素的布局（也可以使用表格单元格控制布局），采用包含选择符#contp定义段落标签的样式为：上下边距为25px，左右边距为0。;2．表单元素要求

页面中需要定义的表单元素有4个，4个元素使用3对段落标签来控制，各个表单元素的name、id及样式要求如下。

“用户名”文本框的name和id都定义为emailaddr，样式要求为：宽度为180px，高度为16px，上下填充为2px，左右填充为0，边框为1px、#aaf颜色的实线。

;“密码”输入框的name和id都定义为psd，样式要求为：宽度为180px，高度为16px，上下填充为2px，左右填充为0，???框为1px、#aaf颜色的实线。

“登录”按钮的类型是submit，单击“登录”按钮提交数据之后，将执行文件denglu.php来获取并处理登录信息。

;“注册”按钮的类型是button，是普通按钮，“注册”按钮被单击之后，将打开zhuce.html页面进行用户注册。需

要在生成按钮的input标签内部使用代码onclick=window.open(zhuce.html);实现。

代码window.open(zhuce.html)的作用是使用window.open()函数在新窗口中打开并运行页面文件zhuce.html。

所有表单元素边框都是圆角边框，圆角半径为5px。

3．样式代码

4．页面代码

;6.1.2设计Tab选项卡式登录界面;图6-4??Tab选项卡式用户名登录界面图6-5Tab选项卡式手机号登录界面;在图6-5所示界面中单击“用户名登录”选项卡，回到图6-4所示的界面。

在图6-4所示界面中，若输入的账号或者密码错误，则弹出图6-6所示的界面。;图6-6??账号或者密码错误提示信息显示界面;1．关于Tab选项卡

Tab是一个常见的交互元素，用户通过鼠标单击或将鼠标指针指向内容区对应的标签，来请求显示该内容区。

Web界面的设计趋势是缩短页面长度，降低信息的显示密度，但又不能“牺牲”可视的信息量。在这种趋势下，应用Tab交互元素成了越来越普遍的应用方法。;Tab选项卡结构包括上下两层：上层为选项卡区，选项卡有选中和未选中两种状态，选中状态通常以亮色显示，当鼠标指针被移动到选项卡上时最好显示手状指针以提示用户；下层为内容区（是重叠区域），内容区中的内容根据选中的选项卡而变化。

选项卡的文字标识必须能准确描述出它对应的内容区的信息特征；选项卡与其对应的内容看上去是一个整体。

;选项卡区设计：选项卡区中的多个选项卡使用超链接元素进行设计，超链接元素需要定义为浮动块元素，超链接元素的个数由选项卡的个数来决定，多个超链接元素中只有一个是亮色的。

内容区设计：每个选项卡都对应自己独特的内容，