下载掌阅APP，畅读海量书库
立即打开
前面几节介绍了HTML的相关知识，本节通过制作一个用户注册页面，来介绍如何在实际开发中使用HTML的标签。目前，用户注册几乎是每个网站都必须有的功能。因此，用户注册页面是一个非常重要的部分。
在网络刚刚普及的时候，许多网站为了尽可能全地收集用户资料，经常为用户提供一个非常复杂的网页，网页里面的表单域多达几十个。用户注册一次，要花费大量的时间来填写表单。后来，开发人员逐渐意识到提供异常复杂的表单给访问者来填写是行不通的。因为访问者很少有耐心去认认真真地填写非常复杂的表单。正是由于意识到这个问题，设计人员对于用户注册页面逐步改进，现在很多网站注册一个账号只需几十秒钟就可以了。
本例要设计的注册页面效果如图2-22所示。
图2-22 用户注册页面效果图
鉴于目前绝大部分用户显示器的分辨率都在1024像素×768像素之上，所以本网页的宽度可以定为900px，高度不限，但最好不出现滚动条，或者只需稍微拖动一下。
在这样的尺寸下，网页内容的左右会各有一部分空白区域。如果用户显示器的分辨率低于1024像素×768像素，那么左右的空白区域会缩小，而网页内容仍然显示完整；如果用户显示器的分辨率超过了1024像素×768像素，则左右的空白区域会扩大，以适应用户的屏幕，此时，网页内容仍然是完整的，并且显示效果也比较美观。
为了增加网页内容的条理性，本网页内容根据功能分为4大部分。
（1）用户的用户名和密码，这是最重要的部分。
（2）安全信息。包括密码保护问题及其答案、性别、出生日期和手机号。这些信息也非常重要，在用户的密码丢失的情况下，要找回密码或者重置密码，可以通过这部分信息来验证用户的身份。
（3）验证码。验证码是防止某些用户恶意注册的。本网页上面的验证码是随机生成的，并且以图片的形式显示给注册者，注册者必须在表单域里面准确输入验证码图片中的内容才可以通过注册。
（4）服务条款。注册者必须同意相关服务条款才可以注册成功。
有了以上思路，就可以开始制作网页了。
目前，可视化的网页设计工具非常多，如Dreamwaver等。本章为了让读者深入理解HTML语言的使用方法，不采用这些所见即所得的工具，而是通过直接编辑HTML代码来完成，所使用的工具是文本编辑器EditPlus。
step 1 打开EditPlus，选择“File”→“HTML Page”命令，新建一个HTML文档。EditPlus会自动生成一些HTML代码，这些代码是每个HTML文档都包含的内容，如图2-23所示。
图2-23 EditPlus新建HTML文档
step 2 单击工具栏上面的保存按钮，把该文档以register.html文件名保存起来。
step 3 修改EditPlus自动生成的代码，把其中的title标签的内容修改为“欢迎注册”，meta标签里面的author修改为设计者的名称。增加一行meta标签，代码如下。
step 4 定义一个10行2列的table标签作为整个页面的框架，在<body>和</body>之间输入以下代码。
step 5 双击register.html文件，用浏览器打开刚才保存的HTML文档，显示效果如图2-24所示。由于表格中没有内容，所以整个表格的行都缩在一起。
step 6 修改第1个tr标签的内容，代码如下。
以上代码中的colspan="2"是把表格的第1行中的2个单元格合并成1个。align="center"设定单元格的内容水平居中。此时显示效果如图2-25所示。
图2-24 HTML表格
图2-25 增加网页内容的标题
step 7 修改第2个tr的内容如下。
此时，网页显示效果如图2-26所示。
step 8 在第3个tr标签中的第1个td标签里面输入以下内容，用来作为右边表单域的提示信息：
图2-26 增加第1部分内容的标题
在第2个td标签里面输入以下内容，定义一个输入用户账号的表单域。
step 9 依次输入如图2-22所示的项目，最终代码如下。
在浏览器中，显示效果如图2-27所示。
图2-27 注册页面
本节制作的注册页面非常简单，没有从视觉效果上做过多的修饰，所以看起来不太美观。在此只是介绍HTML标签的使用方法，如何美化网页中的元素，本书会在后面章节详细介绍。