基于Dreamweaver的购物网站的设计与实现
如图4-2所示：
主页 用户 管理员
图4-2 系统模块分析图
管理员功能：
商店管理人员功能的信息量大，数据安全性和保密性要求最高。本功能实现对商店信息、购买者信息管理和统计查看及维护。商店管理员可以浏览、查询、添加、删除、修改、统计商品的基本信息。如图4-3所示：
管理人员 用 户 注 册 用 户 登录 用 户 注销 购物车 商品更新 用 户 管理
图4-3 管理人员的管理模块
用户功能：
用户的需求是查询商店所存的商品、个人购买情况及个人信息的修改。
用户可以在系统中实现注册、浏览商品、搜索查询商品、下定单、处理定单等功能。用户的管理功能划分。
20
基于Dreamweaver的购物网站的设计与实现
如图4-4所示：
用户功能 个人资料 收货资料 修改密码 购物资料 订单资料 积分查询 统计信息
图4-4 用户功能
4.3 主界面设计
HTML 是用来描述网页的一种语言，是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。
4.3.1 主界面
做界面的一些经验的介绍：
（1）所有的table，td的width要写成百分数，而不能写成绝对的像素值，因为客户端的机器的分辨率我们是不知道的，不能按照1024*768的假设去写HTML页面。
（2）Portal界面中每个部分都是一个矩形框，矩形框的上部是一个三个td的tr，每个td都有一个独特的background图片，组成了一个带弧形的条 带外观。这里要注意的是，在使用background图片的时候，如果不指定td的width和height，IE/Firefox会根据他们的逻辑来扩大/缩小TD的宽度，这样就会导致背景图片被拉伸或缩小。所以，一定要定死td的width。这里我是这样做的：
（3）两个两端的td，background是带左右弧形的图片，这两个td的width定成绝对的像素值（根据图片的width来定）。
21
基于Dreamweaver的购物网站的设计与实现
（4）中间的td由于width事先不知道（用百分数定的整个表格的宽度），所以width写成100% 。
（5）如果只做了上面两步，就会发现两端的td被中间的td 挤 没了，因为中间td的width是100%，所以这里NOWRAP闪亮登场。这个HTML关键字表示不要截断td中的内容。于是，给这三个td都套上 NOWRAP这个关键字，三个td就显示正常了，而且中间的td会自动撑大到最大！
4.3.2 用户登录
用户登录系统是一般网站都有的子系统，其作用是限制该网站某些资源的使用，只有通过身份确认后的用户才可以访问系统为其设置的使用功能，从而为用户提供了安全的访问和数据操作，防止非法用户进入系统。有了登录自然要有注册，其实应该是相反的，先有注册才有登录。只不过注册通常是在登录模块的“登录”窗体下面加一个注册链接。
用户登录系统的基本功能如下：
(1) 用户登录。普通用户输入正确的用户名和密码后进入系统，并可以浏览到所有注册用户列表，但不可以进行修改和删除的操作。
(2) 用户注册。用户填写所需要的信息并提交，系统提示注册成功与否。 (3) 当管理员登录后，将进入用户管理页。在这里通过单击不同的链接，将可以修改和删除用户的信息。
一般管理信息系统使用时都需要用户登录，用户通过登录界面选择操作员代码，并输入操作密码。如果操作员代码及操作密码与数据库的密码表内事先保存的某条记录相匹配，则登录成功，这时用户可以对系统进行相应的操作；否则登录失败，退出系统。
用户登录核心代码如下：
22
基于Dreamweaver的购物网站的设计与实现
.login_top{
background-image:url(login_top.gif); background-repeat: no-repeat; height:8px; width:280px;
overflow: hidden;}
login_middle{border-left:1px solid; width:279px; height:279px;
border-right:1px solid; border-color:#666666; overflow:hidden;} .login_bottom{
background-image:url(login_bottom.gif); background-repeat: no-repeat; height: 8px; width: 280px;
overflow: hidden;}
您还不是用户？
>