作业问题说明 在php文件中，使用系统数组$_POST或者$_GET或者$_FILES时，作为数组下标的串内容是表单元素的name属性取值； 在js文件中，使用getElementById()方法获取表单元素时，()中的参数则是表单元素id属性的取值； 因此对于每个表单元素都要定义name和id属性值，而且一般采用同一个值 表单中复选框组务必采用类似于like[]方式命名 数据验证码j

163邮箱注册小案例 完成图示163邮箱注册小案例 name是emailaddr name是psd1 name是psd2 name是emailaddr name是phoneno name是useryzm name是yzmimg

功能要求 表单界面设计 表单数据验证 数据提交到服务器端 验证码的应用 数据存储到数据库中

任务1：表单界面设计-zhuce.html #divshang{965px*55px，居中，边框填充都是0，背景图wbg_shang.jpg} #divzhong{965px*auto，居中，边框为0，上填充为30px，其他填充都是0， 背景图wbg_zhong.jpg， 垂直平铺} 表单 表格600像素宽，7行2列，居中，边框间距填充都是0，行高60px #divxia{965px*15px，

任务2：表单数据验证 定义脚本文件zhuce.js，完成如下功能 要求邮件地址长度必须在6~18个字符之间 要求密码必须在6~16个字符之间 要求两次输入密码必须相同 手机号如果不为空，必须满足11个字符

上机问题说明 登录界面中，表格与表单的嵌套关系是<form><table>…</table></form> 文件要求：同属注册相关的文件—html文件、css文件、js文件、php文件，主文件名最好都一样，且都务必存放在163email文件夹中 同一个样式属性下的多个不同取值之间一定要使用空格间隔，例如background的几个取值

任务3：生成图片验证码 学习目标： 图片验证码是在用户登录或注册时使用最多的一种形式，下面我们主要围绕图片验证码的生成、显示和判断三个方面展开讲解

图片验证码的生成 要求随机产生的验证码中要有大写字母和数字，共四个字符组成 分如下几个步骤完成 第一步：随机产生四个字符，包括大写字母和数字 第二步：创建图像流并设置图像流中需要的各种颜色和字体 第三步：在图像流上设置用于干扰的100个黑点 第四步：在图像流上设置用于干扰的两条直线 第五步：在图像流中输出验证码字符 第六步：输出和销毁图像

图片验证码生成 第一步，随机产生四个字符，组成串string $number=range(0,9); $character=range(“Z”,“A”); //生成范围数组 $result=array_merge($number,$character);//合并数组 $string=“”;//用该变量存放验证码字符串 $len=count($result);//获取数组元

图片验证码 第二步，创建图像流及需要的各种颜色和字体 header(‘Content-type:image/png’); //生成一张png图像 $imgchk=imagecreatetruecolor(100,25); $white=imagecolorallocate($imgchk,255,255,255); $black=imagecolorallocate($imgch

使用汉字验证码 若要使用汉字验证码，前面代码中需要做如下一些修改： 将给定的字符串换成需要的汉字串$str 获取汉字串的长度，使用strlen($str)函数，获取其中的一个汉字使用substr($str,$index,2)，其中$index必须是偶数 将获取的做验证码字符的两个汉字分别使用如下方法进行编码转换，保证能够在图像流中输出 $word1= iconv("GB2312","U

任务4：创建zhuce.php文件 zhuce.php文件用于接收并显示注册界面提交的数据，显示格式如下： 尊敬的用户您好，您注册的信息如下： 邮箱地址是：xxx 密码是：xxx 手机号是：xxx 输入的验证码是：xxx

Zhuce.php文件的核心问题 判断用户输入的验证码是否正确（思考问题：这个判断过程是在浏览器端进行还是在服务器端进行？） 正确，则显示注册的相关信息（我们将在稍后把注册数据插入到数据库中） 若是错误，重新运行表单页面文件代码（使用代码include ‘zhuce.html’;实现），回填所有文本框数据，并在输入验证码的文本框useryzm中直接显示红色文本“验证码输入错误，请重新输入”

请大家思考问题 判断用户输入的验证码是否正确，需要将哪两个数据进行比较？分别怎样获取？ 从生成验证码的php文件中找到的验证码字符如何传递到zhuce.php文件中？

修改生成验证码的yzm.php文件 修改生成验证码的php文件： 在开始处增加代码：session_start(); 生成验证码字符串之后增加代码：$_SESSION['string']=$string;

修改zhuce.php文件 在文件开始处使用代码session_start();启动本页面对session机制的应用 获取用户输入的所有信息 用变量$useryzm获取zhuce.html页面中输入的验证码信息 用变量$yzmchar获取session数组中保存的原始验证码信息 将$useryzm内容使用strtoupper()函数转换为大写字符后（为何要转换？）与$yzmchar内容

验证码错误 若验证码输入错误，则使用如下代码实现数据的回填和错误提示信息的显示 在zhuce.html文件文本框元素useryzm中使用代码onfocus=“this.value=‘’;”完成光标进入时文本框清空

任务5：访问mysql数据库 在数据库中查询用户注册时输入的邮件地址， 如果已经存在则提示用户重新输入 否则将该用户信息插入数据库中保存

创建数据库及数据表 创建数据库163email，然后创建数据表usermsg（强调操作步骤），列名及类型如下： emailaddr: varchar(30),not null //思考问题：此处为什么使用varchar类型，而不使用普通的char类型？ psd: varchar(16),not null phoneno: varchar(11) zhucedate: date

查询（课本P190--8.3.2-3）及判断过程 //设置查询语句，使用变量$sql表示 //执行查询语句，将结果集保存在$result变量中 $result=mysql_query($sql,$conn); //使用函数mysql_num_rows获取结果集中的行数 $datanum=mysql_num_rows($result); if($datanum!=0) //行数不为0说明在

将新的用户信息插入数据表中 如果结果集中行数为0，说明所输入的用户名在数据库中还不存在，将其添加到数据库中 else { 设置插入语句，使用变量$sql表示，插入所有列的列值，除了数字型的列，其它类型的列在添加数据时都要带有引号定界。 $result=mysql_query($sql); } mysql_close($conn); 至此，一个新的用户注册成功！

作业问题 创建了数据库连接标识$conn后，任何位置使用它都不要带有引号定界 在zhuce.php文件中，显示用户注册信息的代码块要指定包含在用户注册成功，将用户信息插入数据库之后，保证只有在用户注册成功时才显示该信息。

163邮箱登陆界面 name是emailaddr name是psd

Tab选项卡特效 Tab是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区中每次只有一个层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。 web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 交互元素成为了一个越来越普遍的应用。

Tab选项卡结构 Tab选项卡结构包括上下两个大层 上层为tab选项卡区(重叠区域)，选项卡有选中和未选中两种状态，选中者通常为亮色显示（如图中红色部分）；鼠标移动到选项卡上时最好显示手状以提示用户 下层为内容区(重叠区域) ，内容根据选中的选项卡来变化 选项卡的文字标识必须能准确描述出它所对应的内容区的信息特征 选项卡与内容看上去是一个整体

各区设计 选项卡区设计 选项卡区中的多个选项卡使用没有符号的无序列表<ul>设计 重叠的<ul>的个数由选项卡的个数来决定，其中只有一个是显示的； 一个<ul>中列表项的个数也由选项卡的个数来决定，其中只有一个是亮色的（与显示的<ul>对应）；所有列表项都在一个行内显示 内容区设计 每个选项卡都对应自己独特的内容，因此重叠的内容区块个数由选项卡个数来决定

设计tab选项卡-内容区 内容层contdiv:宽350，高240，上下边距30，水平居中，填充0 内容层包含两个内容区块，#cont1和#cont2，二者结构相同:宽310，高200，边距0，填充0，水平居中，字号10pt； cont1初始状态显示 cont2 初始状态隐藏 区块内段落间距为前后都是10px 区块内包含四个表单元素：文本框emailaddr、密码框psd，两者宽度2

脚本设计 判断tab1若为隐藏，则显示tab1,cont1，隐藏tab2和cont2，否则相反

修改denglu.html文件 如果是需要注册的新用户，则点击“注册”按钮，在新窗口中运行zhuce.html文件（在生成按钮的input标记内部使用代码onclick=“window.open(‘zhuce.html’);”实现在新窗口中打开页面文件） 在“用户名”文本框上方增加隐藏的层errormsg，宽度300px，高度40px，居中，填充0，内容是红色12pt文本“账号或密码错误，请

设计denglu.php页面文件 获取denglu.html页面中提交的账号和密码信息 连接打开163email数据库，在usermsg表中查询是否存在相应的账号密码，如果不存在，重新运行denglu.html文件（使用include”denglu.html” 包含），使用echo语句输出脚本代码，显示错误提示信息层errormsg 如果存在相应的账号密码，则使用include包含文件em

email.php界面——账号说明 两处账号名称都是根据登录的账号名称自动显示的，如何实现？ <input type=text value="<?php echo $_SESSION['uname']; ?>"> 因为登录界面中输入的账号需要在email.php和writeemail.php文件当中使用，所以必须在denglu.php文件中启用session，保存用户输入的账号；又因为denglu

email.php界面——上面层设计 页面的边距都设置为0（body{margin:0;}； 层#wshdiv——宽度取浏览器窗口宽度，用margin:0 0;实现，高度50，上填充10，下填充0，左右填充10px，下边框6px，实线，颜色为#88f 思考：所有内容在同一水平位置，分别靠左和靠右，如何实现？ 实现方法：靠左者使用向左浮动(float:left)，靠右者使用向右浮动(float:ri

email.php界面——左侧层设计 左下部分是层#leftdiv(宽200,高600,边界0，填充0，向左浮动，右边框和下边框1px，实线，aaf，背景色为eef) 内部上层#leftdivtop( 200x40,边界0,填充0, 内容是图片writerecieve.jpg)，针对图片做图像映射，href先设为# 内部下面导航层#leftdaohang(200xauto,边界0,填充0)，层内使

email.php界面——右侧层设计 右下部分是层#maindiv(宽和高自动,边界0，填充0，向左浮动，背景色#eef) 层中使用浮动框架main，初始高度600(之后将根据点击的导航不同而变化)，宽度自动（之后将根据浏览器窗口宽度减去201，使用脚本函数获取），边框设置为0，滚动条为auto，初始加载的页面文件是writeemail.php

设置浮动框架宽度的函数定义及调用

浮动框架高度问题 浮动框架的高度若是一直保持为初始定义的高度，则在浮动框架中加载页面时存在如下两点问题： 若是页面内容高度低于浮动框架高度，则在页面内容下方会有大片空白区域 若是页面内容高度高于浮动框架高度，则在浮动框架内部就必须要显示滚动条，这样将导致整个窗口中出现双滚动，效果很差 浮动框架高度自适应则能有效解决上面问题，根据加载页面的高度设置浮动框架的高度，此时必须设置其scroll

浮动框架高度自适应 在浮动框架窗口中加载页面的时候调用函数<iframe onload=“”…>

写邮件功能实现 样式文件writeemail.css（整个页面边界是0） 写邮件的界面文件writeemail.php（文件中所有内容都属于表单），文件中必须启用session 脚本文件writeemail.js 思考：本页面中要解决的新问题有哪些？（通过反复运行页面文件引导大家思考） 表单元素的宽度怎样跟随页面宽度变化或者是右侧层的显示与隐藏而变化 右侧层如何实现显示和隐藏？ 文

写邮件界面 层#write,120x20,边距0,上填充10其余0背景writebg.jpg;字号10pt, 文字居中 层#butdivsh,宽自动, 高,28,边界0,上填充8，下填充0,左右填充10,背景#eee,下边框1像素#aaf, “发送”按钮为submit类型，id为send，”取消”按钮为reset类型,id为rst，其余为button类型，id为but1~but3 层#butdiv

写邮件界面层#divcont说明 设计各个元素样式，并在页面中添加相应元素 #divcont{width:auto;height:auto;margin:10px 0px;}，该层最后需要清除浮动 #wdiv(宽度高度自动，边界0，填充0，向左浮动) <img> #zhedie(宽10,高60,填充0,上边界175,其余0,向左浮动），内容是图片 Zhedieright.jpg #rdiv(

表单元素名称、id及样式 先设计4行2列的表格分别用于存放下面元素： 发件人：sender(边框为0，宽150px，边界填充0 ，字号10pt ，行高10pt，向左浮动) 收件人(receiver)、主题(subject)和内容(content )共同样式定义为：宽auto ，边界填充0，边框为1像素、实线、#66f（因为在不同浏览器中表单元素默认边框线效果不同，所以此处明确设置）， 字号

定义脚本文件writeemail.js 该文件中包含三个函数的定义： 函数divwidth()：用于获取写邮件界面左侧层宽和表单元素的宽度 函数showorhidediv()：用于设置右侧层的显示与隐藏，同时修改折叠图片 函数check()：用于设置文本域中滚动条的显示与隐藏