实站之一：使用表格布局登录窗口

　　　　　　　　　　　　　　　　实站之一、使用表格布局登录窗口

【要点】

　　１、了解表格布局。
　　２、了解表单。

　　通过《第二篇、Dreamweaver》和《第三篇、HTML》两篇的学习，我们已经支零破碎地掌握了一些基础知识，我们今天一起进入实战演习，利用前面所学开始设计登录窗口。今天我们采用的是表格布局，之所以还要讲一下表格布局，着重在于强调：学以致用，假设你只会表格布局，难道就不开发程序了吗?（当然当然，我还是希望你能够学会用DIV+CSS布局的，毕竟那是潮流，也是趋势）

　　采用DIV+CSS布局制作登录窗口将在第四篇中学习：使用DIV+CSS布局设计登录窗口。

　　
　　　　　　　　　　　　　（登录界面之缩微图）

　　1、新建一个站点。

　　站点名称：阡陌纵横CRM
　　本地根文件夹：D:/qianmozongheng

　　2、新建login.html页面。

　　（1）第一步，插入五行一列表格（宽度1004px）。

　　

　　

　　选中整个表格，然后从属性栏中选择“对齐：距中对齐”方式。

　　如果我仔细观察可以看到整个表格与上部边界有一定的距离，我们通过层叠样式表CSS来解决。

　　（2）第二步，建立样式表crm.css。

　　A.新建样式，重新定义body，在“新建CSS规则”窗口中如下。

　　

　　B.样式表命名为crm.css，然后保存至站点内的image文件夹内。

　　

　　C.在“body的CSS规则定义……”窗口中，分类选择“方框”，在右部“Margin”区域选择“全部相同和0”。

　　

　　好了，我们再看一下，表格已经与顶部没有空隙了。

　　（3）开始布局登录窗口。

　A.下载登录窗口素材。

　　　下载地址:http://www.woshicainiao.net/no2/download/login.rar

　　B.把login.rar解压，相关图片插入到表格。

　　login.rar解压后，包含5个文件，分别为：login_01.gif、login_02.gif、login_03.gif、login_04.gif、login_05.gif。我们将这5个文件插入到表格的5行，如下图：

　　

　　C.预览login.html。

　　我们可以通过IE浏览器或者其它浏览器预览，看起来已经很像一个登录窗口了。

　　如果你已经做好了，看看和我的是不是一样：http://www.woshicainiao.net/no2/qianmozongheng/login.html

　　如果你做的和我一样，这个时候我们看起来不算太丑，但是一点也不实用。用户名、密码、验证码一个都不能输，点“登录”按钮没有任何反应。我们现在看到的只是一个图片，我们继续让它工作起来。

　　（4）修改第二行、第四行和第五行。

　　A.修改第二行。

　　把图片login_02.gif替换为背景图片login_02_bg.gif：首先删除login_02.gif图片，然后设第二行高度为34像素，再设单元格背景为login_02.gif。即：　　

<td height="34" background="image/login_02_bg.gif"></td>

 

　　B.修改第四行。

　　第四行是纯白色，我们直接删除login_04.gif，然后设置该行高度为24px。即：　　

<td height="24"></td>

 

　　C.修改第五行。

　　第五行为纯灰色，我们直接删除login_05.gif，然后设置该行高度为59px，并设置该单元格背景颜色为：#dcdcdc。即：　　

<td height="59" bgcolor="#dcdcdc">　　　　　　 　　　　版权所有：北京阡陌纵横商务咨询有限公司</td>

 

　　到现在为止，我们已经为整个登录窗口减负不少，把第二行login_02.gif替换为只有一个像素宽度的login_02_bg.gif；第四行login_04.gif直接删除掉了；第五行login_05.gif删除掉，替换为背景颜色。我们一起来看一下目前的成果：http://www.woshicainiao.net/no2/qianmozongheng/login1.html。

　　我们发现：版权部分字体有些偏大，显得有些呆傻，我们修改层叠样式表crm.css。添加“标签td”样式表属性。

　　（5）修改第三行的右半部分。

　　A.把login1.html另存为login2.html，删除login_03.gif，并设置第三行单元格的高为：355px、宽为：1004px。即：

<td width="1004" height="355"></td>

　　B.插入1行3列表格：宽为1004px，高为355px,左部单元格宽度为501px，中间单元格宽度为1px，右部单元格宽度为502px。并设中间单元格背景颜色为#CCCCCC，即：

<table width="1004" height="355" border="0" cellspacing="0" cellpadding="0">
　　 <tr>
　　　　 <td width="501"></td>
　　　　 <td width="1" bgcolor="#CCCCCC"></td>
　　　　 <td width="502"></td>
　　 </tr>
</table>

　我们一起来看一下目前的成果：http://www.woshicainiao.net/no2/qianmozongheng/login2.html。这时间“登录”部分中间有了一条垂直分隔线。

　C.把login2.html另存为login3.html,然后在“系统介绍”插入一行一列表格，宽度为90%。

　　所插入的表格默认“垂直距中”。

　　选取表格，然后从属性栏中选择“对齐：居中对齐”。

　　

　　D.输入“系统介绍及相关文字”。　

　　由于我们在前面为td标签定义了样式表，所以样式为12px字体。下面我们在crm.css中分别为“系统介绍”、“内容”分别定义样式.logintitle和.logincont。相信到目前为止，你对CSS应该有一定的认识了，在此我直接写出代码，即：

/* .logintitle声明字体大小为18px，行间距为27px　*/

.logintitle {
font-size: 18px;
line-height: 27px;
}

/* .logincont声明字体大小为12px，行间距为18px,颜色为#8d8d8d,浅灰色。

.logincont {
font-size: 12px;
line-height: 18px;
color: #8d8d8d;
}

　　然后把.logintitle和.logincont分别应用于“系统内容”标题和“具体内容”。

　　现在应该是这个样子：http://www.woshicainiao.net/no2/qianmozongheng/login3.html

（6）重点与难点：修改第三行的左半部分，添加“用户登录”。

　　最复杂也最有成就感的当属这一部分，一鼓作气，把它完成！！！

　　A.把login3.html另存为login4.html，在左部分插入两行一列表格（宽度355px和高度211px），单元格间距为１,整个表格背景颜色为#372525。即：

<table width="355" height="211" bgcolor="#372525" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
　　 <td height="33"></td>
</tr>
<tr>
　　 <td></td>
</tr>
</table>

　　现在应该是这个样子：http://www.woshicainiao.net/no2/qianmozongheng/login4.html　　

　　B.把login4.html另存为login5.html，在表格的第一行（第一列）插入图片login_03_top.gif，表格的第二行（第一列）改变背景图像为login_03_bottom_bg.gif。即：

<table width="355" height="211" bgcolor="#372525" border="0" align="center" cellpadding="0" cellspacing="1">
　<tr>
　　<td height="33"> <img src="image/login_03_top.gif" /></td>
　</tr>
　<tr>
　　<td background="image/login_03_bottom_bg.gif"></td>
　</tr>
</table>

　　现在应该是这个样子：http://www.woshicainiao.net/no2/qianmozongheng/login5.html　　

　　C.把login5.html另存为login6.html，再插入一个四行两列的表格，然后输入用户名、密码、验证码和相关表单。即：

<table width="88%" border="0" align="center" cellpadding="0" cellspacing="10">
　　 <tr>
　　　　 <td>用户名：</td>
　　　　 <td><input type="text" /></td>
　　 </tr>
　　 <tr>
　　　　 <td>密　码：</td>
　　　　 <td><input type="text" /></td>
　　 </tr>
　　 <tr>
　　　　 <td>验证码：</td>
　　　　 <td><input type="text" size="8" />　BIRD 刷新验证码</td>
　　 </tr>
　　 <tr>
　　　　 <td></td>
　　　　 <td>
　　　　　　<input type="submit" name="button" id="button" value="登录" />　
　　 　　　 <input type="button" name="button2" id="button2" value="注册" />　忘记密码?
　　　　</td>
　　</tr>
</table>

　　到现在为止，看起来已经是那么回事了，但是对比原始图，我们需要进一步通过CSS来美化它。
　　预览：http://www.woshicainiao.net/no2/qianmozongheng/login6.html

　　D.把login6.html另存为login7.html，修改crm.css。

/* 用户名和密码样式　*/

.line-1 {
background-color: #F5F5F5;
height: 22px;
width: 183px;
border: 1px solid #CCC;
}

/* 验证码样式　*/

.line-2 {
background-color: #F5F5F5;
height: 22px;
width: 62px;
border: 1px solid #CCC;
}

/* 登录、注册按钮样式　*/

.logbutt {
font-size: 12px;
background-image: url(login_03_butt.gif);
border: 1px solid #5C5C5C;
color: #5C5C5C;
height: 22px;
width: 50px;
}

/* 刷新验证码样式　*/

.logrefresh {
font-size: 12px;
color: #681f30;
text-decoration: none;
}

/* 忘记密码样式　*/

a.lostpass:link {
font-size: 12px;
color: #681f30;
text-decoration: none;
}
a.lostpass:visited {
font-size: 12px;
color: #681f30;
text-decoration: none;
}
a.lostpass:hover {
font-size: 12px;
color: #F60;
text-decoration: none;
}

　　好了，到此为止，基本上该拉下帷幕了。预览：http://www.woshicainiao.net/no2/qianmozongheng/login7.html

　　

【任务】

　　任务编号：task-001

　　根据本节所述，保存为task-001.html。使用cuteftp工具上传至www.woshicainiao.net，并且能够通过http://www.woshicainiao.net/renwu/yourname/task-001.html访问。