计算机应用训练报告.doc

计算机应用训练实习报告题目： 仿1号店官网 院系： 数理学院应用物理系 专业年级： 应用物理学专业2015级 学生姓名：姬 振 宇 学号： 201519162016年7月6日一、 网站设计的主体思想 首先该网站建设的需求呢，肯定是赢得客户的喜欢，迎合大多数卖家对网站的欣赏，使得他们在浏览的时候有一种愉快的心情，从而更有利于商品的销售，为公司得到更多的盈利。最终的目的就是吸引更多的顾客，从而创造更多的营业额设计风格: 1、整体页面设计侧重于展示企业形象和项目展示的网站结构，理顺各种信息资源，使网站频道内容丰富、分类合理、层次分明、结构紧凑，且使信息展示更为灵活方便。2、设计合理化的操作流程，导航清晰，颜色和结构符合企业VI视觉形象合理，突出企业文化的同时，加强视觉艺术感受。3、综合主流网站成功经验，将更新快的、重要的信息放置在网站首页，即“一步提优”，使用户可以查看网站的最优内容、最佳信息（如热销产品等）。4、追求用户使用便捷，考虑不同互联网接入条件，页面力求简洁，三次链接获得服务，另外还将提供多种用户辅助功能。5、采用图片、文字等多种展示形式，丰富多彩的展示企业服务的重要内容、重要信息。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作出超链接的样式。然后通过输入 代码来进行文字间距的控制，以此美化页面。并在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）、footer：图6 footer页面（一）“footer”主要是用来存放脚标及脚标各种文字链接的。首先是新建一个大div为“footer”作为大的框架，在css界面调整好参数。然后在“footer”下建立一个小div为“footeer_middle”用于存放内容。使用ul标签制作一个无序列表，同样的，在css界面调整好参数，并调整margin值将文字调整到合适位置。之后使用img标签引入图片，同样在css界面调整参数并移动到合适位置。这样脚标便完成了。之后使用script标签引入JS动态效果，使得网页更加有趣。至此，“footer”便完成了。2.“用户体验提升问卷”页面介绍（1）、header：图7 header页面（含JS）该网页的“header”页面主要以存放图片和少量文字为主。首先建立一个大div“header”为大框架，在其中建立一个“header_middle”的小div用于存放内容。用img标签引入图片，在css界面调整参数和margin值将图片移到合适位置。之后用a标签和pre标签制作文字，并在css界面中用hover制作成伪类并移动到合适位置。最后引入JS文件，制作动态效果，便完成了整个“header”的制作。（2）、article：图8 article页面（一）图9 articler页面（二）图9 articler页面（三）“article”是整个网页的主体，制作比较简单，只是其中包含了大量的文字。首先建立一个大div“article”作为大框架，在css界面调整好参数。之后在“article”里面加上若干个小div在每个div里面输入一个问题，文字由span标签和pre标签制作，同样在css界面调整好字号、字色等，并调整margin值将文字移动到合适位置。并在该小div下用input标签制作勾选框，并调整name做出单选框或者多选框。因为此“article”中含有大量的文字，所以我用了 来调整文字与文字之间的距离以及段落与段落之间的距离。然后用input标签制作输入框，并在一个小div下制作提交按钮。这样整个“article”就完成了。图10 footer页面(下方)该“footer”存放的内容各种脚标。制作过程也与前一个网页相同。也是先建立一个大div作为大范围，在该div下建立一个小div“footer_middle”用于存放文字和图片。然后在“footer_middle”下使ul标签制作无序列表，并在css界面调整字号、字色等参数，并调整margin值来调节文字的位置，将其放到合适的位置便OK了，至此，“footer”便完成了。四、体会与收获时间总是过得那么快，一转眼，大作业马上要结束了。在这几天中，我受益匪浅。大作业第一天，老师便开始向我们介绍HTML的用法和其他内容，那也是我第一次接触到HTML。从第一天开始，老师就在详细的为我们讲解HTML的做法，各种代码，各种嵌套。说实话，第一天听课真的很吃力，因为是第一次接触到HTML所以是0基础开始学习。不过，当到了第二天、第三天的时候，我发现我听课已经没有第一节课那样吃力了，已经能够运用简单的HTML代码编写网页了。当课听得多了之后，其实发现HTML也没想象中的那么难。后来我们又学习了JS动态效果，使我们的网页变得更加有趣。在网页制作过程中，刚开始遇到的问题是很大的，因为第一次接触，不熟悉代码，所以做的特别慢也出现了很多错误。比如在刚开始的时候，逻辑比价混乱，导致多处嵌套错误，是的网页不得不删掉重做。不过这个问题在熟悉结构逻辑后很快便解决了。在网页制作过程中，也会经常出现我想要移动的图片和我不想移动的图片一起动的情况，这个时候我会重新理一遍我的逻辑，找到错误的地方并改正它。此外，在制作过程中，偶尔也会出现乱码的问题，后来询问过老师后，也完美解决了这个问题。其实在整个制作过程中，出现的错误虽然不少，但是都不是什么大错误，只要仔细检查，便能改正这些错误。通过这几天的大作业网页设计学习，我发现了HTML的重要作用。网页是现代离