计算机应用训练报告.docVIP

《计算机应用训练》 实习报告 题　　目：　 仿1号店官网 　　　　院　　系：　　 数理学院应用物理系　 　 专业年级：　 应用物理学专业2015级 　 学生姓名：　姬 振 宇　 学号： 2016年7月6日 网站设计的主体思想 首先 图1 网站内容结构图 我们的网页分为十个部分，它们分别是：官方首页、联系客服页面、购物车页面、注册页面、登录页面、会员专享页面 。有我们小组十位成员分工完成。我负责的是购物车页面和用户体验提升问卷页面。 “购物车”是每一个网络购物网站所必需的页面，客户可以将自己心仪但却尚未决定购买的商品放入购物车里，这样客户就可以有充分的时间考虑是否购买该商品且可以快速找到该商品，而且购物车还具有一键支付功能。该网页主要内容为：标题部分（返回、导航、登录、注册、我的订单等11个购物车常用链接），帮助客户快速返回或浏览与购物车相关联的网页。支付步骤显示，帮助顾客了解支付所需要的所有步骤。猜你喜欢——商品介绍页面，为顾客推荐正在进行活动的减价商品。脚标，为顾客提供快捷的网站链接以及各种证书。 “用户体验提升问卷页面”是为了优化用户购物体验而开设的页面，对于官网的优化有着极大的促进作用。主要内容为：问卷说明，让用户了解用户体验提升问卷的目的，以及奖励、承诺和联系方式。正文（问卷）部分，罗列出需要用户回答的一系列问题。脚标，为顾客提供快捷的网站链接以及各种证书。 三、 页面介绍 1.“购物车”页面介绍 “购物车”页面主要分为header，article，footer三大部分，每一个大的部分都定义了一个div。每个div里面都含有若干个小div。并通过css界面的调整来实现网页效果和版面的制作。由于网站页面大小受限的原因，我分为若干个小配图介绍。 （1）、header： 图2 header（图上方）页面（含JS效果） 图3 header（图上方）页面（含JS效果） 该网页的“header”适用于存放各种标题链接的，因此因存放文字和链接为主。其中的几个大标题为：返回易购首页、网站导航、商家入驻、登录、注册、我的订单、我的易购、手机苏宁、易付宝、政企采购、客户服务共11段文字。为了达到排版美观的要求和鼠标放上去后改变颜色的效果，我放置了一个总div——“header”，在css界面里调整好大小和背景作为整个的范围。在“header”div内部放置一个div——“header_middle”，同样在css界面内调整好大小和背景。在“header_middle”里面输入我所需要的各个标题。为了完美的放置文字，我用了无序列表来做这几段文字。先建立一个无序列表，定义class为list，在css界面中调整好列表中文字的字体，字号、字色等细节，这样一个大的无序列表框架就完成了。然后，在无序列表这个div中建立li，并用a标签和href作出超链接的样式。然后通过输入nbsp代码来进行文字间距的控制，以此美化页面。并在css界面中对整个无序列表用hover作出伪类效果，到此为止，header的大体就完成了。由于在部分大标题下有一些小标题，所以我运用用了JS来制作出下拉框的动态样式及进度条样式。在HTML中定义一个class为down，并在css界面中调整好细节，同样用hover做成伪类。这样，当鼠标停留在大标题上时，就会出现一个下拉框，里面包含着小标题。最后通过img标签引入两张图片便完成了。 （2）、article： 图4 article页面（一） 图5 article页面（二） 该网页的“article”主要是整个网页的主体，里面包含的是整个网页的主要内容。首先建立一个div为“article_top”，在该div下使用img标签，将事先预存的图片导入到网页中，并在css界面调整好参数，通过调整margin的值来将图片调整到合适的位置。之后新建一个div并用font标签做好文字，同样在css界面调整好字体、字色等参数，并调整margin的值将文字移动到合适位置。之后再建一个新的大div“article”作为框架。在其下建立一个新div“article_middle”用于存放内容。并在该div下建立若干小div用于存放文字和图片，并在css界面中调整参数并用border制作一个边框，以及使用hover制作伪类，将图片与文字放到合适的位置，“article”便完成了。 （3）、foote