《电子商务网页制作》课程大作业封面.docx
- 文档编号:7186818
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:11
- 大小:480.92KB
《电子商务网页制作》课程大作业封面.docx
《《电子商务网页制作》课程大作业封面.docx》由会员分享,可在线阅读,更多相关《《电子商务网页制作》课程大作业封面.docx(11页珍藏版)》请在冰豆网上搜索。
《电子商务网页制作》课程大作业封面
学号
20510808102
《电子商务网页制作》
课程大作业
2010~2011学年第一学期
教学单位:
经济管理系电商教研室
主讲教师:
代四广
专业班级:
电商(本)1081
学生姓名:
马杰
评定成绩:
2010年12月10日
男士服装网站设计
一、企业网站概述
网站是企业在互联网上的形象,网站的效果直接关系到企业的网上经营业绩。
企业拥有一个自己的网站的是竞争的必要。
对用户而言,随着网络的普及不论是个人或者是企业用户更习惯于通过互联网查找自己所需的产品、服务、合作伙伴以及其他资料。
对企业而言,网站作为企业在互联网上的门户,起着名片的作用,可以很好的建立企业的形象,及时的发布企业的产品信息和服务信息,及时通过网站留言系统掌握客户反馈的信息,企业产品和服务销售策略的调整能及时通过网站传达给客户。
可以想像没有网站的企业肯定不是客户的首选。
二、构建网站的目的
1、树立企业新象,将企业文化、产品、服务最直接的通过互联网传达给广大客户。
2、建立完善的网上销售和服务系统,打造出企业与客户有效的电子商务平台。
3、为现有客户提供更有效的服务,吸引更多的潜在客户,保持市场的领先地位。
4、开拓新的商业机会,通过互联网多渠道了解和吸纳人才、加盟者、合作伙伴。
5、建产完善的网上服务系统、跟踪系统,提高企业运营和管理效率。
三、网站的设计分析
1、确定网站的框架结构及布局,包括上边框架、左边框架、右边框架;其中上边框架包括导航栏、导航条;左边框架包括用户登录、产品分类目录、企业宗旨、及广告;右边框架就是导航条内的内容。
2、确定网站的结构导航条,包括公司首页、公司简介、产品展示、在线订单、留言系统、联系我们。
3、网站提供会员注册、登入、详细的商品信息、产品搜索查询、下订单、订单确认、个人信息保密措施、留言板等。
4、确定网站内容的实现方式,网页大多以布局表格单元格布局、导航栏采用图片与透明flash相结合、用户登入使用数据库查询、用户注册使用数据库的插入、密码修改采用数据库的更新、产品展示使用动态网站数据库设计、留言板采用表单设计、图片采用photoshop设计、数据库采用access数据库的表的创建及表之间的关系设计。
5、文字排版考虑到可读性,很多栏目的文字编排都比较简单,字体适中,利于阅读。
6、网站结构设计简单,使用的图片flash文件都不大,并且网页结构不是采用那种很多表格嵌套,而是以每行一表格形式布局,使得当客户浏览网页时,网页可以很快的完全显示。
7、网站风格及色彩搭配一致,其中flash为灰色,因此背景也采用灰色,个人感觉灰色比较中庸,大大的改变色彩的韵味,而正文文字大都采用黑色,使对比更强烈。
四、网站设计步骤
1、新建站点
(1)在桌面新建一个文件夹,并命名为qywz,在文件夹qywz中建立两个,其中一文件夹命名为image,存放网页中要用到的图片;另一文件夹命名为flash,存放网页中要用到的flash,将绿色版IIS.exe放入qywz文件夹中,并双击启动。
(2)启动Dreamweaver,在菜单栏中选择【站点】|【新建站点】命令,建立一个以ASPVBScript为服务器的站点,同时指定好站点的根文件夹为桌面上的qywz文件夹。
2、企业网站的布局
在站点下新建一个asp文档文件并命名为index.asp,在插入栏中,单击【布局】选项卡,然后单击【布局】模式按钮;单击【布局表格】按钮,在文档上画一表格,再单击“布局单元格”在表格内画16个单元格
3、制作企业网站首页
(1)将光标放在标注1的位置,在属性栏中将此处设置背景文件为image/biaotilan.png;然后仍然在标注1中插入flash文件flash/23.swf,并单击属性面板中的【参数】,设置flash文件的参数为wmode,值为transparent。
(2)在标注2中插入标题栏,插入“公司首页公司简介 产品展示 在线订单 留言系统 联系我们”字段,并设置字体大小为16,设置单元格背景颜色为“#666666”;在标注3中插入“用户登陆”并设置字体大小为16,设置单元格背景颜色为“#999999”;在标注4中插入“用户名:
”,并在“用户名”右边插入一个文本框,设置文本框的字符宽度为15;在标注5中插入“密码:
”,并在“密码”右边插入一个文本框,设置文本框的字符宽度为15;在标题6中插入两个按钮,并居中显示,其中一个按钮设置为值为“登录”并设置动作为提交表单,另一个按钮设置值为“清除”并设置动作为重设表单,在按钮下方插入字段“新用户请注册”,并设置字体大小为12,居中显示;在标注7中插入“产品分类”并设置字体大小为16,设置单元格背景颜色为“#999999”;分别在标注8、9、10、11、12中插入“羽绒服”、“夹克”、“牛仔裤”、“长袖T恤”、“运动套装”,并设置在单元格中居中显示,设置字体大小为12;在标注13插入“我们的目标”并设置字体大小为16,设置单元格背景颜色为“#999999”;在标注14中插入“科技创新质量为本持续改进不断推新诚信服务满足顾客”并每行8个字居中显示,在字体下面插入一张图片文件image/guanggao.png;
(3)将标注15拆分为4个单元格,第一行单元格中插入一张图片文件image/news.png,在第二行单元格中插入一段关于企业服装产品最新消息的文字;
(4)在标注15第三行单元格中插入一张图片文件“image/news.png”,在第四行单元格中插入一个4行7列的表格,在第一行1、3、5、7列中分别插入图片名为“image/yifu1.png”、“image/yifu2.png”、“image/yifu3.png”、“image/yifu4.png”;在第二、三、四行1、3、5、7列中分别插入商品编号、商品名称、商品价格;在标注16中插入“Copyright®2009-2010杰西男装服装有限公司Inc.Allrightsreserved.”地址:
中国武汉市武昌区东湖新技术产业开发区邮编:
430047,设置文字颜色为黑色,大小为12。
其中版权符号插入方式为单击菜单栏中的【插入】|【html】|【特殊符号】|【版权】。
主页网站完成如图:
4、制作公司简介页面
(1)将公司网站中的首页复制一份,并改名为gsjj.asp,将gsjj.asp文件保存在和公司首页同一站点目录下;
(2)用Dreamweaver打开文档gsjj.asp,将标注15处的内容全清空,还原成最开始什么内容都没有的状态;
(3)在标注15中插入一个3行1列的表格,设置表格的大小和标注15处的宽度一样,在第一行中输入“公司简介”,设置字体大小为36,并将其字体设置为黑体,在“公司简介”右边插入一张图片文件“image/gsjj.png”,并在图片右边输入英文单词“About”,设置其字体大小为24;在第二行中插入一个水平线,设置水平线的宽度为350,并设置对齐方式为左对齐,在第三行中输入一段关于公司简介的文字,设置字体大小为16;然后,单击【文件】|【保存】,这样公司简介页面就做完了。
5、制作产品展示页面
(1)将公司网站中的首页复制一份,并改名为cpzs.asp,将cpzs.asp文件保存在和公司首页同一站点目录下;
(2)用Dreamweaver打开文档cpzs.asp,将标注15处的内容全清空,还原成最开始什么内容都没有的状态;
(3)在标注15中插入一个2行1列的表格,设置表格的大小和标注15处的宽度一样,在第一行中输入“产品展示”,设置字体大小为36,并将其字体设置为黑体,在“展品展示”右边插入一张图片文件“image/gsjj.png”,并在图片右边输入英文单词“ProductCenter”,设置其字体大小为24;在第二行中插入一个水平线,设置水平线的宽度为350,并设置对齐方式为左对齐;
(4)在站点下新建一个Access文件名为chanpin.mdb,在文件中插入一商品表,如图;
(5)在Deamweaver中打开应用程序面板添加数据库,单击
添加数据库,出现数据源对话框,单击【定义】按钮,在系统DSN中添加chanpin.mdb数据库,在【应用程序】|【绑定面板】中添加记录集如图;
(6)在网页cpzs.asp标注15下面插入一个5行3列的表格,将第一列合并成一个单元格,在此处插入图片占位符,打开图像占位符的属性框,选取文件名自数据源,在数据源中选择image2,让其可以进入记录集;在第二列分别插入商品属性字段;将各商品属性记录分别集拖到第三列,选择【服务器行为】,单击
,选择【重复区域】让其显示2条记录,再次单击
,选择【记录分页】-【移至最后一页】,同样方法添加【移至第一页】、【移至前一页】、【移至下一页】;在编辑区选择“第一页”再次单击服务器行为中
,选择【显示区域】-【如果不是第一条记录则显示区域】,用同样方法为“前一页”、“下一页”、“最后一页”添加显示区域,最后将“前一页”、“第一页”、“下一页”、“最后一页”字体设为黑色,如图;
至此产品展示页面做完了如图
6、制作留言板页面
(1)将公司网站中的首页复制一份,并改名为lyxt.asp,将lyxt.asp文件保存在和公司首页同一站点目录下;
(2)用Dreamweaver打开文档lyxt.asp,将标注15处的内容全清空,还原成最开始什么内容都没有的状态;
(3)在标注15处插入一个表单,在表单里插入一个4行1列的表格,在第一行插入“客户留言”等图片字段,在第二行插入“标题”和一个单行文本框;在第三行插入“内容”和多行文本框,并设置文本框的大小,在第四行插入两个按钮,其中一个是提交按钮,另一个是重置按钮。
7、制作联系方式页面
(1)用同样的方法将标注15处清空;
(2)在标注15处插入一个2行1列的表格,在第一行插入“联系我们”等图片字段,在第二行插入联系方式。
8、制作注册页面
(1)清除标注2-15,并合并这些单元格;
(2)在此单元格中插入一表单,在表单内插入“新用户注册”,换行后插入6行2列的表格,在第1行1列中输入“用户名:
”,第二列中插入一单行文本框,同样方式插入“密码”、“出生年月”、“邮箱”、“生份证号码”,将第六行单元格合并,插入两个按钮,一个提交,一个重置按钮。
9、制作在线订单页面及实现在线订单功能
(1)清除标注2-15,并合并这些单元格,在第一行中输入“产品展示”,设置字体大小为36,并将其字体设置为黑体,在“展品展示”右边插入一张图片文件“image/gsjj.png”,并在图片右边输入英文单词“ChooseProduct”;
(2)在下面插入一表单,在表单内插入“请选择想购买的商品编号:
”,并插入一行文本框,接着插入“请输入您要购买的数量:
”并插入一行文本框;
(3)实现在线订单功能,在数据库文件chanpin.mdb中新建一销售表;打开打开【应用程序】|【服务器行为】,单击【+】|【用户身份验证】|【限制对页的访问】,如果用户未登入将无法访问此页,让其跳转到主页中;然后在表单中添加隐藏区域,隐藏区域的名字为“hidUsername”,值为“<%=Session("MM_Username")%>”;打开【应用程序】|【服务器行为】,单击【+】|【插入记录】,在弹出对话框中输入如图记录,单击确定;
10、实现新用户注册、用户登入、密码修改的功能
(1)在数据库文件chanpin.mdb中新建一个用户表,插入几条记录如图;
(2)实现用户注册功能,在注册页面中打开【应用程序】面板的【服务器行为】,单击【+】|【插入记录】,在弹出对话框中输入如图记录;单击【确定】;
(3)实现用户登入功能,在登入页面打开【应用程序】|【绑定】面板,单击【+】|【记录集】,将用户表用户名和密码添加到数据集中,然后再打开【应用程序】|【服务器行为】面板,单击【+】|【用户身份验证】|【登录用户】在弹出对话框中输入如图记录;单击【确定】;
(4)实现用户密码修改的功能,在修改页面打开【应用程序】|【绑定】面板,单击【+】|【记录集】,将用户表用户名和密码添加到数据集中,然后再打开【应用程序】|【服务器行为】面板,单击【+】|【更新记录】,在弹出对话框中输入如图记录;单击【确定】。
11、给所有登入后的网页添加Session对象
将网页导航栏中涉及的几个网页全部copy一次,将其用户登入那个地方合并单元格,并输入“亲爱的{Session.MM_Username}!
欢迎您的光临”,其中{Session.MM_Username}是【应用程序】面板中单击【+】添加的阶段变量,阶段变量的名称为MM_Username,然后将其拖到相应地方;
12、制作商品搜索页面并实现搜索功能
(1)清除标注14-15处,并合并单元格,在此单元格中添加一个表单,在表单内插入检索条件,换行输入“商品名称中包含:
”,在右边添加一个单行文本框;在下面插入两个按钮,一个提交按钮,一个重置按钮;
(2)首先在【应用程序】面板的【绑定】选项卡中定义一个请求变量名称为txtName,在此页面创建一记录集,如图;单击确定;
(3)新建一asp文件命名为searchResult.jsp,将主页拷贝到此页面,清除标注14-15处,并合并单元格后插入与产品展示相同的表格并用与产品展示相同的方式创建【重复区域】【记录集分页】,然后选中重复区域,给其添加一个【显示区域】类的服务器行为,单击【应用程序】|【服务器行为】|【+】,选择【显示区域】|【如果记录集为空则显示区域】;
(4)在符合要求的商品下面插入“抱歉,没有符合条件的产品”,并单击【应用程序】|【服务器行为】|【+】,选择【显示区域】|【如果记录集为空则显示区域】;
13、给所有网页添加超级链接
将所有网页要设置的超级链接处选中,在属性框链接处单击
,拖动鼠标到指定的文件中。
14、给未访问权页面添加行为
选中每个未登入的页面中的导航栏的“在线订单”,打开“行为”面板框单击行为的
,选择下拉菜单中的“弹出信息”,在消息中输入“登入后才能下订单”,设置行为方式为“onClick”,当预览网页时,在未登录网页中,单击“在线订单”时将出现如图所示的对话框;
五、网站的测试
1、兼容性测试:
换不同版本的浏览器访问,在不同的操作系统上访问均无报错;
2、链接测试:
点所有的链接,没有报错;
3、登陆测试:
正确的用户名,错误的密码,无法登入也无报错;错误的用户名,错误的密码,无法登入也无报错;全不输入无法登入也无报错,正确的用户名,正确的密码可以登陆;
4、注册测试:
自动判定重复用户名,合乎网站注册用户通用规则;
5、session测试:
服务器正确记录了我在网站的行为动作。
根据我的设置,登陆后操作一段时间直接关闭网页,重新再打开不用再登陆;
6、查找产品测试:
当输入一个产品名称的字段后点击查找后,可以正确定位到那个产品,输入的字段不在产品名称内,结果显示没有符合的产品;
7、界面测试:
文字显示大小合适,颜色搭配合适,各控件按钮均放在合理位置;
8、后台测试:
根据我在前台用户的情况(注册,各种操作等),后台统计数据均正确。
六、该网站的优缺点
优点:
网站页面内容简约,但可以明显的反映出企业销售的产品,以及热销产品,主题明确、重点突出,网站的操作简单,页面设计风格体现了男士的优雅,留言板便于企业与客户的交流;
缺点:
数据库设计的还不够完善,所以购物车功能不够全面,暂时只能下订单,而且只能在数据库中反映出来,数据库中还无法体现出客户是否付款了。
七、小结
此次制作的是一个综合动态的企业网站,其中包括网页的表格布局、超级链接、插入图片、插入flash、使用时间轴加入行为、创建表单、以及添加数据库;在布局方面花了不少功夫,只有网页布局好了,看起来猜美观,通过表格的嵌套以及使用表格单元格布局方式最后才将网页布局好;在插入图片、flash、创建表单、添加行为、超链接等这方面熟练些,花的功夫较少;其中最难完成的就是添加数据库,不仅要创建数据库,还有将数据库按数据集增加到网页的相应位置中,在利用记录集分页与重复区域服务器行为进行分页时,感觉操作复杂、繁琐,但经过按照书上的操作之后很轻松的完成了实验任务。
通过此次综合实验的制作,基本上熟练的静态网页各种制作方法,也发现了制作网站之前最好先规划好布局,最好用笔画下网页的框架,等制作的时候可以很快的知道哪里放几个单元格,哪里放图片等;在添加数据库到网站中方便的知识稍微薄弱些,不过也算是了解了网站中后台操作是必须要数据库的;总之,此次大作业制作受益很多。
同时在设计的过程中发现了自己的许多不足之处,对所学过的知识理解得不够深刻,技能掌握得不够牢固,通过这次大作业,使我对于网站设计的基本技能有了更娴熟的运用,在制作过程中不断地去积累,不断地去完善。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务网页制作 电子商务 网页 制作 课程 作业 封面