6.1网站布局和格式
首先要规划好网站的结构，对网站的网页大体布局有一个具体的轮廓。并且为网站的主页及二级页面确定一个共同的格式，包括整个页面的颜色，宽度，阴影，背景，字体的大小颜色这就需要我们制作一个超文本样式表.css文件，以供每个网页调用。本站具体的.css代码如下：
body {
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #666666;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background-image:url(../images/bg.gif); background-position:center
}
BODY {
FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "arial"
}
TABLE {
FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "arial"
}
TR {
FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "arial"
}
TD {
FONT-SIZE: 12px; WORD-BREAK: break-all; FONT-FAMILY: "Verdana", "arial"
}
INPUT {
BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #0066cc 1px solid; BORDER-LEFT: #0066cc 1px solid; BORDER-RIGHT: #0066cc 1px solid; BORDER-TOP: #0066cc 1px solid; COLOR: #0066cc; FONT-SIZE: 9pt; HEIGHT: 16px
}
TEXTAREA {
BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-LEFT-COLOR: #cccccc; BACKGROUND: #fefefe; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc
}
在每个网页的程序中加人如下的程序段:
<link href="css/class.css" type=text/css rel=stylesheet>。来实现调用已经编制好的超文本样式表文件class .css，这样就为网站中的每个网页设定一个共同的样式，如整个网页文字的大小、字体，还有活动超联接和已访问超联接的颜色以及菜单的一些属性等等。
为网站设计一个主页面使用DreameWeaver MX来制作。还要用到HTML语言、VBScript、JavaScript等。将前面说到的功能和内容以菜单的形式列出在主页上，级联菜单上是一些具体的功能和内容。当然，这个菜单是用JavaScript编制出来的一个函数，然后，在每一个菜单文件的代码中再调用这个函数，其它的菜单也可以用同样的代码来实现。同样，对于二级页面的设计以及其它页面的设计也是与主页相同。如果这些页面的主要部分与先前设计的主页主体部分风格和布局以及菜单都相同，那么我们就可以先建立一个空的含菜单的文件作为模板，以后每建立一个类似的页面，就可以调用此模板文件，在此基础上再进行修改、补充[8]。
6.2注册和登录模块设计
注册登录模块是系统的门户,在整个系统中占有重要的地位。它的主要功能是根据用户的录入信息进行身份识别,排除非法用户对本系统的使用,对合法用户则按照不同的级别分类处理，从而保证系统的运行安全，用户进入主页面后,要想法使用其他菜单的功能必须先进行注册,在将表单提交后,调用相应的程序进行处理。处理程序首先与数据库连接,查看是否存在同名和同密码的用户,若存在则显示提示信息,并重新返回注册表单,用户输入新的信息进行重新注册;若不存在同名且同密码的用户,则将注册信息写入数据库。在注册界面填写注册信息的时候，用下面的程序判断输入的信息是否正确：
function checkform()
{if (adduser.username.value.length==0) {
alert("用户名不得为空！");
document.adduser.username.focus();
return false;
}
if (document.adduser.passwd.value.length == 0) {
alert("请输入您的密码！");
document.adduser.passwd.focus();
return false;
}
if (document.adduser.repasswd.value.length == 0) {
alert("请确认您的密码！");
document.adduser.repasswd.focus();
return false;
}
if (document.adduser.passwd.value != document.adduser.repasswd.value) {
alert("您两次输入的密码不一致！请重新输入。");
document.adduser.passwd.focus();
return false;
}
if (document.adduser.email.value.length == 0 && !document.adduser.email.value.match( /^.+@.+$/ ) ) {
alert("Email 错误！请重新输入");
document.adduser.email.focus();
return false;
}
if (document.adduser.realname.value.length==0){
alert("请输入您的真实姓名！")
document.adduser.realname.focus();
return false}
return true
}
如若用户已经注册,则可输入名称和密码进入,在此过程中验证名称和密码是否相符以及在登录过程中用户的请求是否被允许从而显示不同的提示页面。用户登录的流程图如图4所示[10]。
