1.4 阶段案例：传智书城页面设计
【任务1-1】传智书城首页设计
【任务目标】
根据本章中所学的网页知识，实现传智书城首页的展示。传智书城首页面展示如图1-23所示。
图1-23 传智书城首页面
传智书城首页主要展示图书的类别信息、广告页轮播图、公告板、本周热卖等内容。
【实现步骤】
1．创建资源文件夹
在chapter01文件夹下创建一个名称为client的文件夹，该文件夹用于存放传智书城项目的实现页面、页面的图片、样式以及js文件。在client文件夹中创建存放相应资源的文件夹，创建后的client文件目录如图1-24所示。
图1-24 client文件夹目录结构
其中，ad 文件夹用于存放首页轮播的广告图片， bookcover 文件夹用于存放本周热卖中的图书图片，css文件夹用于存放样式表文件，images 文件夹用于存放页面图片，js文件夹用于存放js文件。
2．创建index.html首页面
在client文件夹中创建index.html页面，该页面作为传智书城的首页面，编辑后的代码如文件1-15所示。
文件1-15 index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
2 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>首页</title>
7 <!-- 导入main.css、首页轮播图css和js脚本 -->
8 <link rel="stylesheet" href="css/main.css" type="text/css" />
9 <link type="text/css" href="css/autoplay.css" rel="stylesheet" />
10 <script type="text/javascript" src="js/autoplay.js"></script>
11 </head>
12 <body class="main">
13 <!-- 1．传智书城顶部 start -->
14 <div>
15 <table cellspacing="0" class="headtable">
16 <tr>
17 <td>
18 <a href="#">
19 <img src="images/logo.png" width="200" height="60" border="0" />
20 </a>
21 </td>
22 <td style="text-align:right">
23 <img src="images/cart.gif" width="26" height="23"
24 style="margin-bottom:-4px" /> <a href="#">购物车</a>
25 | <a href="#">帮助中心</a>
26 | <a href="#">我的帐户</a>
27 | <a href="register.html">新用户注册</a>
28 </td>
29 </tr>
30 </table>
31 </div>
32 <!-- 传智书城顶部 end -->
33 <!--2. 传智书城菜单列表 start -->
34 <div>
35 <a href="#">文学</a>
36 <a href="#">生活</a>
37 <a href="#">计算机</a>
38 <a href="#">外语</a>
39 <a href="#">经管</a>
40 <a href="#">励志</a>
41 <a href="#">社科</a>
42 <a href="#">学术</a>
43 <a href="#">少儿</a>
44 <a href="#">艺术</a>
45 <a href="#">原版</a>
46 <a href="#">科技</a>
47 <a href="#">考试</a>
48 <a href="#">生活百科</a>
49 <a href="#" style="color:#FFFF00">全部商品目录</a>
50 </div>
51 <div>
52 <form action="#">
53 <table width="100%" border="0" cellspacing="0">
54 <tr>
55 <td style="text-align:right; padding-right:220px">
56 Search
57 <input type="text" name="textfield" class="inputtable"
58 id="textfield" value="请输入书名"
59 onmouseover="this.focus();"
60 onclick="my_click(this, 'textfield');"
61 onBlur="my_blur(this, 'textfield');"/>
62 <a href="#">
63 <img src="images/serchbutton.gif"
64 border="0" style="margin-bottom:-4px" onclick="search()"/>
65 </a>
66 </td>
67 </tr>
68 </table>
69 </form>
70 </div>
71 <!-- 传智书城菜单列表 end -->
72 <!-- 3．传智书城首页轮播图 start -->
73 <div>
74 <div class="list">
75 <ul>
76 <li><img src="ad/index_ad1.jpg" width="900" height="335" /></li>
77 <li><img src="ad/index_ad2.jpg" width="900" height="335" /></li>
78 <li><img src="ad/index_ad3.jpg" width="900" height="335" /></li>
79 <li><img src="ad/index_ad4.jpg" width="900" height="335" /></li>
80 <li><img src="ad/index_ad5.jpg" width="900" height="335" /></li>
81 </ul>
82 </div>
83 </div>
84 <!-- 传智书城首页轮播图 end -->
85 <!--4. 公告板和本周热卖 start -->
86 <div >
87 <table width="900px" border="0" cellspacing="0">
88 <tr>
89 <td width="497">
90 <img src="images/billboard.gif" width="497" height="38" />
91 <table cellspacing="0" class="ctl">
92 <tr>
93 <td width="485" height="29">
94 尊敬的传智书城用户，<br />
95 为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！
96 <br />
97 具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br />
98 3月23日<br />
99 传智播客 传智书城系统管理部<br />
100 </td>
101 </tr>
102 </table>
103 </td>
104 <td style="padding:5px 15px 10px 40px">
105 <table width="100%" border="0" cellspacing="0">
106 <tr>
107 <td>
108 <img src="images/hottitle.gif" width="126" height="29" />
109 </td>
110 </tr>
111 </table>
112 <table width="100%" border="0" cellspacing="0">
113 <tr>
114 <td style="width:80; text-align:center">
115 <a href="#">
116 <img src="bookcover/105.jpg" width="102" height="130" border="0" />
117 </a>
118 <br />
119 </td>
120 <td style="width:80; text-align:center">
121 <a href="#">
122 <img src="bookcover/106.jpg" width="102" height="130" border="0" />
123 </a>
124 <br />
125 </td>
126 </tr>
127 </table>
128 </td>
129 </tr>
130 </table>
131 </div>
132 <!-- 公告板和本周热卖 end -->
133 <!--5. 传智书城底部 start -->
134 <div>
135 <table width="100%" border="0" cellspacing="0" >
136 <tr>
137 <td rowspan="2" style="width:10%">
138 <img src="images/logo.png" width="195" height="50"
139 style="margin-left:175px" />
140 </td>
141 <td style="padding-top:5px; padding-left:50px">
142 <a href="#">
143 <font color="#747556"><b>CONTACT US</b></font>
144 </a>
145 </td>
146 </tr>
147 <tr>
148 <td style="padding-left:50px">
149 <font color="#CCCCCC">
150 <b>COPYRIGHT 2015 © BookStore All Rights RESERVED.</b>
151 </font>
152 </td>
153 </tr>
154 </table>
155 </div>
156 <!-- 传智书城底部 end -->
157 </body>
158 </html>
在文件1-15中，首先在<head>标记之间分别导入了main.css、autoplay.css和autoplay.js分别用作控制主页的CSS样式、控制轮播图中的样式和动作。主体body部分由5个大的<div>标签将页面分为了5个部分。第1部分用于描述传智书城顶部内容，当用户单击 “新用户注册”时，页面将跳转至新用户注册页面；第2部分用于描述传智书城菜单列表，其内部由两个<div>组成，第一个<div>通过<a>标签展示各个菜单列表，第2个<div>完成的是菜单列表下的搜索框功能；第3部分代码通过无序列表<ul>展示传智书城首页轮播图内容；第4部分代码用于展示公告板和本周热卖内容；第5部分代码用于显示传智书城下方显示栏内容。
3．创建CSS文件
在CSS文件夹中创建main.css文件，该文件主要用于控制页面中的样式。其部分代码如文件1-16所示。
文件1-16 main.css
/* CSS Document */
/*页面的主要样式展示*/
.main {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
color: #000000; /*#666666*/
text-align: center;
vertical-align: top;
}
…
.headtable {
width: 100%;
}
…
#divmenu {
width: 100%;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #82B211;
background-color: #1C3F09;
text-align: center;
padding: 10px 0px 10px 0px;
font-size: 14px;
}
#divmenu a {
font-size: 14px;
color: #FFFFFF; /*#1E33F7*/
font-weight: bold;
padding: 10px 10px 10px 10px;
}
#divmenu a:link {
text-decoration: none;
font-weight: bold;
}
…
a {
font-size: 12px;
color: #0066FF; /*#1E33F7*/
}
a:link {
text-decoration: none;
}
…
在文件1-16中，展示了页面的部分 CSS 样式，此文件中的内容读者能够依照所学知识看懂即可，不要求读者自己写出。
至此，传智书城首页展示的功能已经实现。需要注意的是，在实际项目开发过程中，网页中大部分的 CSS 文件和 JS 文件都是由网页设计人员依照需求已经创建好的，文件1-15中autoplay.css和autoplay.js实际开发时就是网页人员编写好的，通常这些定义好的样式和JS不需要软件开发人员再去改动，开发者只需将后台的相应数据展示在页面中即可。只有定义好的样式，不能满足需求时，才会做相应变动，但是页面中某些JS代码还是需要开发人员来编写的（如单击按钮触发事件、表单校验等）。由于篇幅有限，这里就不过多描述，望读者见谅。有兴趣的读者可以深入学习CSS和JavaScript的相关知识。
【任务1-2】传智书城注册页面设计
【任务目标】
通过本章中所学的网页知识，实现传智书城注册页面。注册页面预览如图1-25所示。
图1-25 传智书城注册页面
从图1-25中可以看出，新用户注册需要填写用户邮箱、会员名、密码、性别、联系电话、个人介绍等信息。其中，输入的邮箱地址应该是合法的，且需要是本人拥有的邮箱。密码和重复密码表单输入的内容必须一致。
【实现步骤】
1．创建register.html注册页面
在client文件夹中创建注册页面register.html，由于注册页面的页面顶部、菜单列表以及下方显示栏与首页面相同，这里就不再重复展示。其中，注册页面引用的CSS样式文件和JS脚本文件代码如下所示。
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/form.js"></script>
实现注册功能的主要代码，如文件1-17所示。
文件1-17 register.html
1 <!-- 3．传智书城用户注册 start -->
2 <div align="center">
3 <!-- 提交页面 -->
4 <form action="registersuccess.html" method="post"
5 onsubmit="return checkForm();">
6 <table width="850px" border="0" cellspacing="0">
7 <tr>
8 <td style="padding: 30px"><h1>新会员注册</h1>
9 <table width="70%" border="0" cellspacing="2" class="upline">
10 <tr>
11 <td style="text-align: right; width: 20%">会员邮箱：</td>
12 <td style="width: 40%">
13 <input type="text" class="textinput"
14 id="email" name="email" onkeyup="checkEmail();"/>
15 </td>
16 <td colspan="2"><span></span>
17 <font color="#999999">请输入有效的邮箱地址</font>
18 </td>
19 </tr>
20 <tr>
21 <td style="text-align: right">会员名：</td>
22 <td>
23 <input type="text" class="textinput"
24 name="username" onkeyup="checkUsername();"/>
25 </td>
26 <td colspan="2"><span></span>
27 <font color="#999999">字母数字下划线1到10位， 不能是数字开头</font>
28 </td>
29 </tr>
30 <tr>
31 <td style="text-align: right">密码：</td>
32 <td>
33 <input type="password" class="textinput"
34 id="password" name="password" onkeyup="checkPassword();"/>
35 </td>
36 <td><span></span>
37 <font color="#999999">密码请设置6-16位字符</font>
38 </td>
39 </tr>
40 <tr>
41 <td style="text-align: right">重复密码：</td>
42 <td>
43 <input type="password" class="textinput" id="repassword"
44 name="repassword" onkeyup="checkConfirm();"/>
45 </td>
46 <td><span></span> </td>
47 </tr>
48 <tr>
49 <td style="text-align: right">性别：</td>
50 <td colspan="2">
51 <input type="radio" name="gender" value="男"
52 checked="checked" /> 男
53
54 <input type="radio" name="gender" value="女" /> 女
55 </td>
56 <td> </td>
57 </tr>
58 <tr>
59 <td style="text-align: right">联系电话：</td>
60 <td colspan="2">
61 <input type="text" class="textinput"
62 style="width: 350px" name="telephone" />
63 </td>
64 <td> </td>
65 </tr>
66 <tr>
67 <td style="text-align: right">个人介绍：</td>
68 <td colspan="2">
69 <textarea class="textarea" name="introduce"></textarea>
70 </td>
71 <td> </td>
72 </tr>
73 </table>
74 <table width="70%" border="0" cellspacing="0">
75 <tr>
76 <td style="padding-top: 20px; text-align: center">
77 <input type="image" src="images/signup.gif"
78 name="submit" border="0"/>
79 </td>
80 </tr>
81 </table>
82 </td>
83 </tr>
84 </table>
85 </form>
86 </div>
从文件1-17中可以看出，注册页面的核心代码是一个form表单，当单击“同意并提交”按钮时，会触发form元素中onsubmit属性中定义的checkForm()方法，对整个表单中的数据进行校验。除了提交表单时的校验外，代码中还对单个输入项进行了校验。以会员邮箱输入框为例，由于在<input>标记中定义了onkeyup="checkEmail()"，所以用户会在会员邮箱输入框输入数据后键盘按键被松开时触发 checkEmail()事件，事件的返回结果会在代码<span>标签中进行展示。页面中的会员名、密码以及重复密码的验证方式均是这种方式，这里不再过多解释。事件具体的实现过程会在form.js文件中进行介绍。
当页面信息全部填写完成并通过校验后，单击“同意并提交”按钮后，会提交到<form>标签中action属性指定的registersuccess.html页面，该页面用于表示用户注册成功。其页面主要代码如下所示。
1 <body>
2 <center>
3 <font color="green" size="7">注册成功</font>
4 </center>
5 </body>
2．创建form.js文件，实现表单校验功能
在js文件夹中创建一个名称为form.js的文件，使用该文件来对注册页面中的表单进行校验，其代码如文件1-18所示。
文件1-18 form.js
1 //1．声明变量
2 var emailObj;
3 var usernameObj;
4 var passwordObj;
5 var confirmObj;
6 var emailMsg;
7 var usernameMsg;
8 var passwordMsg;
9 var confirmMsg;
10 //2．页面加载之后， 获取页面中的对象
11 window.onload = function() {
12 emailObj = document.getElementById("email");
13 usernameObj = document.getElementById("username");
14 passwordObj = document.getElementById("password");
15 confirmObj = document.getElementById("repassword");
16 emailMsg = document.getElementById("emailMsg");
17 usernameMsg = document.getElementById("usernameMsg");
18 passwordMsg = document.getElementById("passwordMsg");
19 confirmMsg = document.getElementById("confirmMsg");
20 };
21 //3．校验整个表单
22 function checkForm() {
23 var bEmail = checkEmail();
24 var bUsername = checkUsername();
25 var bPassword = checkPassword();
26 var bConfirm = checkConfirm();
27 // return false后， 事件将被取消
28 return bUsername && bPassword && bConfirm && bEmail ;
29 }
30 //4．验证邮箱
31 function checkEmail() {
32 var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
33 var value =emailObj.value;
34 var msg = "";
35 if (!value)
36 msg = "邮箱必须填写：";
37 else if (!regex.test(value))
38 msg = "邮箱格式不合法：";
39 emailMsg.innerHTML = msg;
40 emailObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
41 return msg == "";
42 }
43 //5. 验证用户名
44 function checkUsername() {
45 var regex = /^[a-zA-Z_]\w{0,9}$/; // 字母数字下划线1到10位， 不能是数字开头
46 var value = usernameObj.value; // 获取usernameObj中的文本
47 var msg = ""; // 最后的提示消息， 默认为空
48 // 如果用户名是null或者"",!value的值为false，如果不为空！value值为true
49 if (!value)
50 msg = "用户名必须填写：";
51 else if (!regex.test(value)) // 如果用户名不能匹配正则表达式规则
52 msg = "用户名不合法：";
53 usernameMsg.innerHTML = msg; // 将提示消息放入SPAN
54 // 根据消息结果改变tr的颜色
55 usernameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
56 return msg == ""; // 如果提示消息为空则代表没出错， 返回true
57 }
58 //6. 验证密码
59 function checkPassword() {
60 var regex = /^.{6,16}$/; // 任意字符， 6到16位
61 var value = passwordObj.value;
62 var msg = "";
63 if (!value)
64 msg = "密码必须填写：";
65 else if (!regex.test(value))
66 msg = "密码不合法：";
67 passwordMsg.innerHTML = msg;
68 passwordObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
69 return msg == "";
70 }
71 //7. 验证确认密码
72 function checkConfirm() {
73 var passwordValue = passwordObj.value;
74 var confirmValue = confirmObj.value;
75 var msg = "";
76 if(!confirmValue){
77 msg = "确认密码必须填写";
78 }
79 else if (passwordValue != confirmValue){
80 msg = "密码必须保持一致";
81 }
82 confirmMsg.innerHTML = msg;
83 confirmObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
84 return msg == "";
85 }
在文件1-18中，首先声明了变量，然后通过window.onload方法在注册页面加载时会获取页面中的对象，接下来定义了验证整个表单的checkForm()方法，最后，分别定义了用于验证邮箱、用户名、密码和确认密码的方法。
至此，传智书城的注册页面功能已经完成。需要注意的是，本章中的内容是结合本书中传智书城的项目内容进行讲解的，读者在练习时如果没有相应的图片或者静态页面时，可以在不使用图片页面的情况下学习，如本节中的表单校验功能，可以自己编写表单来进行练习。在校验时使用了正则表达式，此内容这里没有做详细讲解，有兴趣的读者可以查找资料深入学习正则表达式。