服装网站的设计与实现

基于ASP技术的服装网站的设计与实现
【摘要】本系统是运用ASP技术开发，实现了网站的动态管理，使得对信息的管理更加及时、高效，提高了工作效率，具有一般网站系统的功能，主要包括前台管理和后台管理，可为服装网站提供新闻发布与管理的服务。

前台管理给浏览者更多的视觉冲击和空间想象力，内容和版式、颜色、系统有自己的风格；后台管理具有简单易用、功能强大，性价比高、扩展性好，安全性高、稳定性好的系统。

【关键词】ASP、网页设计、Dreamweaver
一、引言
伴随着计算机技术在各行各业日益广泛和深入的应用，网络的概念早已深入人心。

由于web页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便，客户信息反馈方便了企业与客户之间信息交流，因此服装企业纷纷建设具有自己独特风格的网站，以增强企业知名度企业建立网站。

因此，对于一家服装商店来说，拥有一个属于自己的网站是至关重要的。

二、本课题的国内外研究背景
目前国内商业网站自身的确存在不少问题，主要表现在：第一，规模小、联系不紧密，处于各自为政的分散状态；第二，国内网站在首页页面上通常会放置太多内容，也存在很多广告，使整体版面过于杂乱；第三，安全性低。

国内只有交易、银行等网站才会注意到安全连接的问题。

相比而言，国外许多网站的设计都很时尚和有自身的特点，行业明确，功能全面，安全性高等。

举例说明：欧美用户不习惯艳丽、花哨的色彩和设计风格，他们比较钟情于简洁、平淡而严谨的风格；国外传统网站比较讲究网站的实用性和便利性，他们会花很多时间去制作很多周到实用的细节，功能虽然大多平实但很有效。

而韩国网站设计在世界也是相当有影响力的。

韩国的商业站点在框架结构、内容排版、色彩搭配、图片运用上达到了非常和谐的统一，设计师拥有较大的设计空间。

三、技术综述
（一）技术概论
网站实现方式有两种：一种是静态HTML页面，更新信息时需要重新制作页面然后上传页面并修改相应链接；另一种是基于ASP和脚本语言，将动态网页和数据库结合，通过应用程序来处理页面。

前台开发工具应用ASP、Dreamweaver、flash动画等，建立富有动态效果的网站。

后台应用Access建立数据库，进行数据管理，保持数据的完整性。

1.Dreamweaver网页编辑
站点的设计和页面创建；网页布局模式：对称形、T形、口字形、海报形；界面的组成：对象工具栏、属性面板、发射器；版面设计工具：表格、框架、模板；效果设计：层、时间轴、行为的运用。

2.Flash网页动画设计
（1）网页动画与时尚动画（渐变动画、逐帧动画）；
（2）Flash界面构成模式（工具及控制面板的使用）；
（3）网页交互按钮的设计：变幻按钮、隐形按钮；
（4）效果实例：引导层（滚动广告栏）遮盖层（水波飘浮文本）行为的运用（鼠标跟随、运动背景的设定）；
（5）Flash文件的导出模式：HTML、影片、Auto if。

3.Photoshop网页图像处理
（1） Photoshop基础：功能、界面组成及应用；
（2）Logo（标志）、banner（广告条）、导航栏、按钮、艺术文本的制作；
（3）图片输出处理：切片、优化；
（4）Photoshop文件导出模式：PSD、GIF、JPEG、Auto if。

（二）系统功能概述
在前台管理部分可以分为五个信息浏览功能窗口，分别是“首页”、“品牌故事”、“品牌风格”、“服装展示”、“新闻资讯”、“客户服务” 和“登录注册”这六大功能。

关于首页中主要介绍了关于品牌的基本信息；品牌故事主要介绍企业的创立过程；品牌风格主要介绍服装风格定位、年龄定位、顾客层次定位；服装展示向浏览者介绍公司开展的主要服装范围和品牌类型；新闻资讯主要是用于浏览公司发布的最新新闻和与企业相关的重要新闻；客户服务主要是收集关于客户需要的服务要求和建议的提交信息；登录注册主要是用于会员注册。

管理员操作部分：本网站的主要信息都可以通过后台管理来进行管理。

后台管理主要包括新闻管理、产品管理、基本信息、管理员管理、用户注册这五个部分。

新闻管理是网站的新闻发布管理系统；产品管理是根据商品的分类来对商品进行添加、修改和删除管理；基本信息用来对网站的客户提交意见信息进行处理；管理员管理是用来对后台管理员进行权限分配管理和添加后台管理员的操作；用户管理是用来对前台用户所注册的资料进行修改与删除操作；用户注册包括注销登陆和修改密码两个部分。

（三）系统框架图
1.前台系统框架图，如图3-1
图3-1 前台系统框架图
2.后台系统框架图，如图3-2
图3-2 后台系统框架图
（四）页面风格设计
本网站为了拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，网站风格可以从以下几个方面说明，而每一项都是有关联性的：
1.色系：网页的底色、文字字型、图片的色系、颜色等等。

2.排版：表格、框架的应用、文字缩排、段落等等。

3.窗口：窗口效果，例如：全屏幕窗口、特效窗口等。

4.程序：网页互动程序，例如：ASP、PHP 、XML 、CGI等等。

5.特效：让网页看起来生动活泼的各种应用，如：Flash、JavaScript、Java Applets、DHTML
等等。

6.架构：目录规划、层次浅显易懂、选单应用等等。

7.内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。

8.走向：对于网站的未来规划、网站整体内容走向等。

以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。

图3-3为W-GIRL服装网站的首页，图3-4为W-GIRL服装网站的后台登录界面，图3-5为服装网站的后台界面。

图3-3 W-GIRL服装网站首页
图3-4 服装网站后台登录界面
图3-5 服装网站后台界面
四、系统调试与测试
（一）程序调试
很多人在编写网页程序的时候用的是Dreamweaver或EditPlus，直接用记事本也大有人在，没有专门的开发环境就给程序的调试增加了难度，不像许多高级语言那样直接就可以在开发环境中运行、调试，但是我们可以拿浏览器来充当网页程序的调试工具，或者使用ASP专业调试工具。

（二）程序的测试方法
1.链接测试：所有链接是否按指示的那样确实链接到了该链接的页面，所链接的页面是否存在；
测试工具：HTML Link Validator
2.表单测试：确保提交按钮能正常工作；
3.Cookies测试：检查Cookies是否起作用；如果使用Cookies来统计次数，验证次数累计正确；
4.数据库测试：一致性错误和输出错误。

一致性错误主要是由于用户提交的表单信息不正确而
造成的，而输出错误主要是网络速度或程序设计等问题等引起的；
5.导航测试：是否易于导航；导航是否直观；主要部分是否通过主页存取；
6.图形测试：图片尺寸要尽量地小；验证所有页面字体的风格是否一致，要确保图形有明确的
用途。

（三）Dreamweaver测试站点和用IIS测试本地站点
Dreamweaver MX提供了全面检测站点的功能，它比检测链接更全面。

全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检测站点功能如下：
1.选择菜单中【站点】的【报告】命令，打开一个窗口；
2.选择检测范围，在【报告】选项中有四个内容供选择：Current Document、Entire Local Site、
Select Files、Folder；
3.对工作流方面的信息进行检测；对HTML文件的信息作出检查；
4.把制作好的网站文件复制到D:\我的文档\网站设计文件夹中，可以打开浏览器，在地址栏
中输入http://localhost/我的文档/ 网站设计/index.asp,就会看到网站了。

五、本系统的功能特色
(一)利用session变量来跟踪和校验合法用户
本网站后台管理员登录以及管理员进入管理页面时用到了session变量。

当用户在WEB站点的网页之间来回移动的时候，可以使用session变量来跟踪用户。

session变量与cookie有密切的关系。

实际上，session变量依赖于cook变量。

在本网站管理员登录进入后台管理时，
需要用到session变量。

便于管理员在不同的管理网页之间移动表明身份。

在用户登录提交表单后通过admin.asp文件中的admchk（）函数校验管理员身份后获得该变量。

管理员登录时输入的用户名和密码传递到admchk（）中和数据库中管理员用户名和密码对比。

正确的用户名和密码就赋值一个session变量。

具体语句如下：
if adminpass=password then
session(“login”)= “true”
response.redirect“index.asp”
else
errinfo=“<li>密码错误！”
call error()
end if
在后台的管理页面中首先判断session(“login”)是否为true，如果变量值为true的话表明是管理员。

（二）分页功能
在显示留言条数时，一个页面不能完全显示时需要分页。

在留言板中，有多个满足条件的条数，首页不能完全显示，这样就需要采用分页技术。

记录集对象的一下三个属性允许我们将从数据库查询的结果分成多个页面：
AbsolutePage—设置或返回当前网页的记录。

PageCount—返回一个记录集的网页的数目。

PageSize—设置或返回包含在单个网页中的记录数目（默认值为20）。

在后台管理中，首先利用查询语句得到一个记录集rs，然后设置记录集的属性来设置单个页面的记录数目，语句如下：
Sql=”select*from topic where checked=1 order by top desc, uesetime desc”
set rs =server.createobject(“adodb.recordset”)
rs.open sql,conn, 1,1
rs.pagesize=perpage
rs.absolutepage=currentpage
page_count=0
totalrec=rs.recordcount
本网名设置显示的记录数目是根据字段perpage来确定的。

六、总结
这次服装网站开发制作过程，综合使用了目前因特网上比较流行的各种静态制作方法及交互式动态网站的制作设计手段，并对初步理由后台程序完成了网站的动态响应与生成网页的技术。

同时也从中学习了对静态网页的处理风格，色彩搭配，页面导航方面有了一定经验。

在交互式网页设计学会了如何使用Access简历数据库，以及对数据库浏览，修改，添加，查询。

如何用ASP编写程序来方便用户在网上查看网站各方面的信息和交流。

由于设计网站的经验不足，在网站的整体设计及各模块功能可能设计的不够完全，有待于进一步的完善和改进。

参考文献：
[1] 魏应彬,周星.网页设计与Web数据库发布技术[M].清华:大学出版社,2002(5):21-29.
[2] 许曰斌,程亮.ASP网络编程实例[M].北京：人民邮电出版社，2001(4):62-67.
[3] 任学文，范严.ASP动态网站之旅[M].北京：中国科学技术出版社，2006，20-25.
[4]高怡新.ASP动态网页设计[M].北京：人民邮电出版社，2009(10):6-11.
[5] 武创,王惠.网页设计探索之旅[M].北京：电子工业出版社，2006(9):69-70.
[6] 小志.ASP入门与实例演练薄[M].北京：中国青年出版社， 2001(4):40-42.
[7] 庄王健.网页设计三剑客白金教程[M].北京：电子工业出版社，2006(1):82-83.
[8] 赵大良,荆树蓉,葛赵青. 网页设计与HTML语言[J].《编辑科技》，2001(13):34-37.
[9] 王绍卜.利用ASP访问Web数据库[J].《黄冈职业技术学院学报》，2002(1):113-116.
[10]孙大春,徐锐英.网页制作技巧[J].《白城师范学院学报》，2003(4):33-41.
ASP-based website design and implementation of apparel College of Applied Science and Technology, Quanzhou Normal University
Major: Computer Science and Technology Ya-Fen Zhuang, 080603043
Supervisor: Mei-Hong Huang postgraduate
Abstract:This system is to use ASP technology development to realize the dynamic management of the site, making the management of information more timely, efficient, improve work efficiency and function of the system with general web site, mainly including front and back office administration management, can clothing website press release and management services. Future management to the viewer more visual impact and spatial imagination, content and layout, color, the system has its own style; Back with a simple to use, powerful, cost-effective, good scalability, high security, stability a good system.
Key words:ASP、Web Design、Dreamweaver
附录：
显示各月份的日
function dateShow(obj,year,month)
{
var myDate=new Date(year,month-1,1);
var today=new Date();
var day=myDate.getDay();
var
selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-'); var length;
switch(month)
{ case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
length=31;
break;
case 4:
case 6:
case 9:
case 11:
length=30;
break;
case 2:
if((year%4==0)&&(year%100!=0)||(year%400==0))
length=29;
else
length=28;
}
for(i=0;i<obj.cells.length;i++)
{
obj.cells[i].innerHTML='';
obj.cells[i].style.color='';
obj.cells[i].className='';
}
for(i=0;i<length;i++)
{ obj.cells[i+day].innerHTML=(i+1);
if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
obj.cells[i+day].style.color='red';
if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2])) obj.cells[i+day].className='ds_border2';
}
}
把选择的日期传给输入框
function getValue(obj,inputObj)
{
var
myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNo des;
if(obj.innerHTML)
inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
inputObj.nextSibling.nextSibling.style.display='none';
for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)
obj.parentNode.parentNode.parentNode.cells[i].className='';
obj.className='ds_border2'
}
用户登录
function checkpro()
{
if(checkspace(1.value))
{
1.focus();
alert("请输入用户名！");
return false;
}
if(checkspace(document.myform.p1.value))
{
document.myform.p1.focus();
alert("请输入密码！");
return false; }
if(document.myform.p1.value != document.myform.p2.value)
{
alert("两次密码不一致！");myform.p2.focus();return false}
}
}
数据库链接
Dim DBPath,Conn,Rs,Sql
DBPath="../yazi/#db444153170.mdb"'相对于站点根目录的数据库路径dim ServerPath
ServerPath=""
Sub OpenDB
If IsObject(Conn) = True Then Exit Sub
Dim StrConn
Set Conn = Server.CreateObject("ADODB.Connection")
StrConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
StrConn=StrConn & Server.MapPath(ServerPath&DBPath)
On Error Resume Next
Conn.Open StrConn
if err then
Response.Write("数据库连接出错！！")
Err.Clear()
response.end()
end if
End Sub
Sub CloseDB
On Error Resume Next
Conn.Close
Set Conn = Nothing
End Sub
function ConnExecute(sSql)
'on Error Resume Next
Set Rs=Conn.Execute(sSql)
If Not Rs.Eof Then
ConnExecute=Rs.GetRows
End If
Rs.close
Set Rs=Nothing
SearchDB=SearchDB+1
'if Err>0 then Response.Write(sSql)
end function
function RsAddNew(sSql)
Set Rs=Server.CreateObject("ADODB.RecordSet") Rs.Open sSql,Conn,1,3
Rs.AddNew
Rs("")=Form("")
Rs.Update
Rs.Close
Set Rs=Nothing
SearchDB=SearchDB+1
end function
function RsUpdate(sSql)
Set Rs=Server.CreateObject("ADODB.RecordSet") Rs.Open sSql,Conn,1,3
If Not Rs.Eof Then
Rs("")=Form("")
Rs.Update
End If
Rs.Close
Set Rs=Nothing
SearchDB=SearchDB+1
end function。