WEB基础综合专业课程设计专业课程设计方案报告.doc

宁波大红鹰学院信息工程学院

课 程 设 计 报 告

课程名称：
电子商务网站
项目名称：

项目组长：
黄政杰
项目组员：
郑建楼(美工设计)吴威杰(交互设计)
班级名称：
10计科4（本）
专业名称：
计算机科学和技术
完成时间:
-11-20

信息工程学院制
一、项目需求和背景(一号标题，黑体四号, 段前段后0.5行，表和图要加题注)
（正文部分要求宋体，小四，固定行距20磅，首行缩进2个汉字）
介绍项目标开发背景，能够从市场、用户群、目标、定位等介绍，项目需求关键包含功效、技术、性能等需求。（最少400字）
二、网站计划设计说明
(网站计划设计说明，包含LOGO设计、结构设计、技术方案、内容计划等。)
1、网站计划(二号标题，黑体小四号,最少500字，包含主页和各内容页)
网站名称：AC商铺
网站专题：经过网站宣传，树立商铺形象，提升商铺著名度
输入法网站语言：简体汉字
网站风格：以暖色调为主，给人以家感觉，专题鲜明突出（用户之上，服务到家），关键点明确，以简单明确语言和画面表现站点专题，表现网站个性和情趣，办出网站特点。
建站内容及特征
“海外海宾馆”，作为一个宣传性企业网站关键是突出它中心标志性形象，利用现代流行理念和元素，表现出今日海外海网现代不失传统、庄重不失轻松、大众不失前卫特点。并做好各个栏目标导航，突出网站关键职能和关键内容，使得网站能够同今日高科技和服务行业完美结合，建成中国一流宣传型　商务网站。
（1）首页设计
页头：正确无误标识海外海集团站点和它企业标志。
页面：应是各大栏目导航，最新产品展示，最新供给、求购、代理、合作信息，最新加入会员企业，最新行业资讯，最新展会信息。
（2）导航设计
导航系统是有效连接网站各处工具，它有效分类网站内容并指向它所代表内容。是经过超文本链接或图片链接，使浏览者能够在网站上自由前进或后退，而不会让浏览者使用浏览器上前进或后退。
海外海网站导航项目：
☉集团概况
①企业介绍
②发展历程
1、海外海荣誉 2、海外海规模 3、董司长寄语 4、联络方法
☉新闻中心
关键写集团记事为一个大类进行企业展示，对感爱好人可是跟企业进行联络，发送信。
☉人力资源
关键公布企业现今人力规模和最新要招聘对象。
☉下属企业
关键是对海外海企业下属十一个企业进行介绍。
☉企业信息化
关键以集团今日公告、用户留言反馈、友谊链接这三个栏目组成。
2、结构设计（最少200字,二号标题，宋体小四号, 段前段后0.5行,内容宋小四，单倍行距）
Ø 网页布局图（关键给出不一样版式页面布局图）
(1)首页

图1 首页布局图
(2)注册页….

图2 注册页布局图

(3)登录页….

图3 登录页布局图
（4）结算页

图4 结算页布局图
（5）留言页

图5 留言页面布局
Ø 网站结构图

图4 网站结构图
3、CI形象设计
网站LOGO是AC（）大写AC和相对应英文解释，很轻易知道这是一个卖电脑配件网站。
4、网站色彩
(说明:包含网页主色调、链接色、导航色等，要求经过表格列出页面中需要颜色表)
(1)网站主色调
该网站主色彩是蓝色和浅蓝色，配以棕黄色和少许白色，文字为黑色和白色，以下图所表示：

图5 配色采集
绿色是一个很含有亲和力颜色，它代表是自然、生命、活力和健康，是使用比较广泛颜色之一。黄绿色和橙色使用，则使整个网站显示朝气蓬勃。
(2)网页链接色
表1 一般文字链接配色表

(3)导航链接色
(画表格说明)
5、技术方案(说明：用到了哪些技术及软件，最少250字)
表2 技术方案表
序号
网站组成
使用技术
效果说明
1
1、网站全部文字页面
2、静态图片
3、表格
HTML
1、 出版在线文档，其中包含了标题、文本、表格、等内容。
2、 经过超链接检索在线信息。
3、 为获取远程服务而设计表单，用于检索信息、定购产品等。
2
1、网站动态菜单
2、动态图标
JavaScript
1、 实现在一个Web页面中链接多个对象
2、 和Web用户交互作用，而能够开发用户端应用程序等。
3
1、轻常更新网页
2、动态数据
如商品展示，用户信息
ASP
1、 是一个在WEB服务器端运行脚本语言，程序代码安全保密
2、 此能够使用ActiveX控件继续扩充其功效
3、 能够轻松存取多种数据库 适用和多种浏览器
4
网站内动态按钮
CSS
使用CSS技术，网页便会给人一个赏心悦目、工工整整感觉，同时字体色彩改变也使主页变得愈加生动活泼。
5
1、 用户资料
2、 产品资料
3、 产品查询
4、 留言信息
数据库
1、 完善用户数据资料处理
2、 快速资料查询能力
3、未来电子商务基础

三、HTML页面结构图(包含主页、内容页等，不一样风格版面全部要给出结构图)

图6 HTML页面结构图
四、页面DIV结构代码(包含主页和各内容页，注意三和四是一一对应关系)
<div id="main">
<div id="logo"></div>
<div id="box">
<div id="text"></div>
<div id="ver"></div>
</div>
</div>
五、代码及注释
(要求: 包含主页和不一样风格内容页CSS代码及JS代码,字体: Times New Roman,字号:五号,行距:1.25倍，)
* {//通配符设置,确保页面效果一致
margin: 0;
padding: 0;
border: 0;
font-family: "宋体", sans-serif;
font-size: 12px;
color: #000;
}
body {//设置整个页面背景色及文本位置
background: #CCC;
padding-top: 20px;
text-align: center;
}
#main {//设置最大DIV背景图像、背景颜色及宽高
background: #060 url(site/img/home_main_bg.gif) repeat-x;
border: 1px solid #060;
margin: 0 auto;
height: 500px;
width: 770px;
}
……
六、网站测试结果
(要求：页面在FF及IE(7.0以上一个版本)下测试结果，贴图完成，要求测试主页和各内容页，贴图要有各浏览器标识)
1、IE7.0下测试结果

图7 IE7.0测试结果
2、IE8.0下测试结果
。。。。。。
图8 IE8.0测试结果
3、FF下测试结果

图9 FF测试结果
七、项目计划及分工
1、项目计划表
电子商务网站设计 项目计划表
项目组长: 班级: 日期:
进程
第1次课
(11.11.)
第2次课
(11.13.)
第3次课
(11.19.)
第4次课
(11.19.)
第5次课
(11.19.)
第6次课
(11.19.)
责任人
项目计划

总体方案

效果图

设计汇报

系统测试

答辩

2、分工完成情况(标注具体工作或书写工作创新地方)
X1：
X2：
X3：
八、总结
(要求：必需要有内容，能够是学习总结，能够是体会，能够是技术知识总结，也能够是经验总结等,不能少于600字)

附页（源代码附加注释）
（包含xhtml代码、JS代码等关键代码，只需要附录在电子稿中，不需要打印，注意排版，Times New Roman ，五号，单倍行距)
<div id="menu">
<ul>
<li><a href="cn_s1.html" title="了解相关“翻译服务”相关内容">翻译服务</a></li>
<li><a href="cn_s2.html" title="“网站建设服务”相关内容">网站建设</a></li>
<li><a href="cn_s3.html" title="了解取得我们服务方法和步骤">服务步骤</a></li>
<li><a href="cn_s4.html" title="了解怎样支付费用">付费</a></li>
</ul>
</div>