为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。
所以,我以蓝白色搭配为主色调其它颜色相辅,给人以宁静深远的回味,导航栏用七色箭头点缀,彩色图片和动态元素的使用使页面朴素、大方、庄重。
5.2网站设计构思
首先在制作一个网页之前,应该先进行构思。新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去,建议用一张白纸和一支铅笔将初步的设想画在纸上,当然用作图软件photoshop等也可以,免得在做了一半时发现页面不和谐而重做。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张,最后选定一个满意的作为继续创作的脚本。
第一步先明确页面主题,考虑是否有合适的图片来衬托主题,如果有现成的图片就可以了,没有的话,就根据情况来决定是否自己做一幅,这里我用PHOTOSHOP软件设计了一张简单的网站标题"新世纪手机商城"字体颜色选用浅蓝,以便协调网站的基色。但不管怎样,标题的主色调应先定下来,这对后面几步的版面影响很大。
第二步明确页面上要链接的目录,要将他们放在较显眼的位置,根据页面风格的不同可以放在顶部、左边、右边、中部等较明显的位置,主链接可以做成小图标的形式,但注意图片不能太大、也不能过分抢眼(一般情况下不比标题或主图的色彩重)。
第三步是指定主图,所谓主图,就是放一幅较能反映页面主题思想的图片,他的大小可适当超过页面上的其它图片,颜色不加限制,而且位置应尽量突出在前面抢眼处。这里要特别指出的是,网标,它是一个网站的标志和灵魂,在他的设计上一定要突出自己的风格和特点,能反映站点主题,体现企业文化,可以结合使用企业的标志。
以上三步确定下来后,页面的基本风格就出现了,我们在根据情况进行调整,或者看是否加上背景,主要考虑主图是否需要背景。
5.3网站的风格版面设计
在版面设计上我认为可以说是既继承了传统设计的优点,又作了个性化创新作为传统设计无非是用以下几种架构如图5-1所示:
a、b、c、d、
图5-1网站架构a型、b型、c型、d型
多数网站的设计都采用了c型,上边为站标及广告栏,左边作为导航栏,底边为版权信息及设计制作小组,中间作为内容区。我的设计基本延用了c型但做了一些改进。延用了上下边框和左边框的设计网页显得简洁。但没有使用共享边框,而是单独的设计制作了上边框的内容top.Asp,下边框的内容copy.asp,和作边框的内容left.asp。使用语句完成对上述部分的调用,实现页面共享使每层网页具有相同的上下及左边框统一了风格,这样的调用方法效地解决了导航栏及超链接在深层网页的相对路径偏差问题,实现链接路径完全统一化。
网站页面结构布局如下图5-2所示:
网站购物功能链接区(top.asp)
手机厂商等(left.asp)
(商品显示区)
图5-2网站页面结构布局
5.4商城主页设计
主页是一个商城的门户,顾客一般都是首先看到此页(也有个别从链接进来者),因此大多数商家都希望在主页上能够显示尽可能多的信息,而且希望将自己最希望让别人了解的信息放在最吸引目光的位置。
本系统的主页是default.asp文件,图5-3是在线手机销售系统的主页面。
图5-3在线手机销售系统主页面
5.5客户端界面结构设计
在客户端界面中,出于美观考虑,没有采用框架。客户端界面结构是由头(head.asp)、左恻快捷菜单(left.asp)、体和尾(foot.asp)四部分组成。由于没有使用框架,各个模块的页面需要在此的基础上,在页面结构的"体"处加入实现功能特点的页面代码。
5.5.1界面头、尾设计
为了提高代码的重用性,与管理端界面类似,把客户端界面部分相同的头和尾做成两个文件分别命名为head.asp和foot.asp。在head.asp中除了功能菜单以外,还集成了一个会员登陆功能,在head.asp文件中调用showmemberlogin()过程就是为了实现此功能的,其作用是根据会员是否登陆来显示欢迎信息或登陆表单。
5.5.2界面左恻快捷菜单设计
左恻快捷菜单包含三部分,分别是手机厂商、热门商品和最优惠商品。Left.asp文件的实现,它所包含的每一部分都是由一个表格(table)构成,由于需要页面美化,其中每个表格都包含了一些HTML修饰代码。
5.6管理端界面结构设计
进行ASP应用程序开发的重要异步是设计一个一般的界面结构,在这个结构确定了之后,就可以将不同的内容添加到这个框架中,这样即便于整个网站统一风格,也减少了界面设计的工作量。
在本系统中的界面结构是由头(head.asp),体(iframe)和尾(foot.asp)三部分组成。由于使用了框架(iframe),于是只要将各个模块的页面装入iframe即可,并且在这些页面中无需包含头和尾信息。
为了提高代码的重用性,我把管理界面部分相同的头和尾做成两个文件分别命名为head.asp和foot.asp。他们基本是纯HTML代码。
第6章系统详细设计
6.1管理端界面设计
客户端界面的大部分功能都是以管理端为前提的,因为客户端所显示的数据大部分需要通过管理端来添加。因此,先从管理端进行开发与设计。管理端相对客户端要复杂一些,因为在这里需要对所有信息进行维护,包括浏览,增加,修改和删除等操作。为了便于系统维护,页面的命名采用"模块名+功能名"的方式。
6.1.1商品(手机)维护模块
商品(手机)维护模块的主要功能:显示商品列表(productlist.asp),添加商品页面(proadd.asp),保存添加的商品信息(proaddasve.asp),删除商品(prodel.asp),修改商品界面(promodify.asp),保存商品修改结果(promodifysave.asp),上传图片界面(proaddpic.asp),保存上传图片(proaddpicsave.asp),推荐或取消推荐商品(prorecommend.asp)。
商品维护模块可以说是在所有管理模块中最复杂的一个,也是整个系统的核心,商品维护与厂商管理相比,难点在于不仅涉及数据较多,而且还涉及商品图片上传,推荐或取消推荐商品等。
1.显示商品列表
商品列表主要用到productlist.asp这个文件,图6-1为管理端商品列表的运行结果,在这里可以看到它与厂商维护界面非常相似,这样便于网站管理人员使用。
图6-1管理端商品列表运行结果
此页的原理是每次访问此页时,都会从Request对象的QuerString集合和Form集合中寻找以下三个参数:
Page:当前页号,位于QuerString集合中,如果找不到,默认为"1"。
Mykeyword:过滤产品的关键字,位于Form集合中,如果找不到,默认为空。
Producttype:产品类型编号,位于Form集合中,如果找不到,默认为"0"。
然后根据mykeyword和producttype的只值来组织SQL语句从product表中检索数据。另外,由于本页需要在下拉列表中显示所有的厂商名称,并且在商品列表中也有相应的列需要显示厂商名称,所以需要在检索product表之前先从producttype表中检索出所有的厂商编号和名称。
2.添加商品
添加商品用到proadd.asp和proaddsave.asp两个文件,图6-2为在商品列表页面中单击[添加]按钮后所看到的添加商品页面。从图中可以看到,在添加商品时仍需要
上一篇:
ASP在线手机销售系统(论文和程序)
下一篇:
试析影响公路路面平整度的因素及应采取的施工措施