计算机应用训练报告.doc

《计算机应用训练报告.doc》由会员分享，可在线阅读，更多相关《计算机应用训练报告.doc（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、. .?计算机应用训练?实习报告题目：仿1号店官网 院系： 数理学院应用物理系 专业年级： 应用物理学专业2021 级 学生XX：姬 振 宇学号：2021 19162021年7月6日一、 设计的主体思想首先该建立的需求呢，肯定是赢得客户的喜欢，迎合大多数卖家对的欣赏，使得他们在浏览的时候有一种愉快的心情，从而更有利于商品的销售，为公司得到更多的盈利。最终的目的就是吸引更多的顾客，从而创造更多的营业额设计风格:1、整体页面设计侧重于展示企业形象和工程展示的构造，理顺各种信息资源，使频道内容丰富、分类合理、层次清楚、构造紧凑，且使信息展示更为灵活方便。2、设计合理化的操作流程，导航清晰，颜色和构造

2、符合企业VI视觉形象合理，突出企业文化的同时，加强视觉艺术感受。3、综合主流成功经历，将更新快的、重要的信息放置在首页，即“一步提优，使用户可以查看的最优内容、最正确信息如热销产品等。4、追求用户使用便捷，考虑不同互联网接入条件，页面力求简洁，三次获得效劳，另外还将提供多种用户辅助功能。5、采用图片、文字等多种展示形式，丰富多彩的展示企业效劳的重要内容、重要信息。6在架构方面，我们从的性质、功能和扩展性出发，合理安排构造，层次清晰，使用方便，整体感强。充分考虑页面构造的扩展性，使的增加和删减不影响页面的风格。的各频道板块布置有X有弛，延续并贯穿了的风格，形成协调、统一的系统。二、 主要内容介绍

3、图1 内容构造图我们的网页分为十个局部，它们分别是：官方首页、联系客服页面、购物车页面、注册页面、登录页面、会员专享页面 。有我们小组十位成员分工完成。我负责的是购物车页面和用户体验提升问卷页面。“购物车是每一个网络购物所必需的页面，客户可以将自己心仪但却尚未决定购置的商品放入购物车里，这样客户就可以有充分的时间考虑是否购置该商品且可以快速找到该商品，而且购物车还具有一键支付功能。该网页主要内容为：标题局部返回、导航、登录、注册、我的订单等11个购物车常用，帮助客户快速返回或浏览与购物车相关联的网页。支付步骤显示，帮助顾客了解支付所需要的所有步骤。猜你喜欢商品介绍页面，为顾客推荐正在进展活动的

4、减价商品。脚标，为顾客提供快捷的以及各种证书。“用户体验提升问卷页面是为了优化用户购物体验而开设的页面，对于官网的优化有着极大的促进作用。主要内容为：问卷说明，让用户了解用户体验提升问卷的目的，以及奖励、承诺和联系方式。正文问卷局部，罗列出需要用户答复的一系列问题。脚标，为顾客提供快捷的以及各种证书。三、 页面介绍1.“购物车页面介绍“购物车页面主要分为header，article，footer三大局部，每一个大的局部都定义了一个div。每个div里面都含有假设干个小div。并通过css界面的调整来实现网页效果和版面的制作。由于页面大小受限的原因，我分为假设干个小配图介绍。1、header：图

5、2 header图上方页面含JS效果图3 header图上方页面含JS效果该网页的“header适用于存放各种标题的，因此因存放文字和为主。其中的几个大标题为：返回易购首页、导航、商家入驻、登录、注册、我的订单、我的易购、手机苏宁、易付宝、政企采购、客户效劳共11段文字。为了到达排版美观的要求和鼠标放上去后改变颜色的效果，我放置了一个总div“header，在css界面里调整好大小和背景作为整个的X围。在“headerdiv内部放置一个div“header_middle，同样在css界面内调整好大小和背景。在“header_middle里面输入我所需要的各个标题。为了完美的放置文字，我用了无序

6、列表来做这几段文字。先建立一个无序列表，定义class为list，在css界面中调整好列表中文字的字体，字号、字色等细节，这样一个大的无序列表框架就完成了。然后，在无序列表这个div中建立li，并用a标签和href作出超的样式。然后通过输入 代码来进展文字间距的控制，以此美化页面。并在css界面中对整个无序列表用hover作出伪类效果，到此为止，header的大体就完成了。由于在局部大标题下有一些小标题，所以我运用用了JS来制作出下拉框的动态样式及进度条样式。在HTML中定义一个class为down，并在css界面中调整好细节，同样用hover做成伪类。这样，当鼠标停留在大标题上时，就

7、会出现一个下拉框，里面包含着小标题。最后通过img标签引入两X图片便完成了。2、article：图4 article页面一图5 article页面二该网页的“article主要是整个网页的主体，里面包含的是整个网页的主要内容。首先建立一个div为“article_top，在该div下使用img标签，将事先预存的图片导入到网页中，并在css界面调整好参数，通过调整margin的值来将图片调整到适宜的位置。之后新建一个div并用font标签做好文字，同样在css界面调整好字体、字色等参数，并调整margin的值将文字移动到适宜位置。之后再建一个新的大div“article作为框架。在其下建立一个新

8、div“article_middle用于存放内容。并在该div下建立假设干小div用于存放文字和图片，并在css界面中调整参数并用border制作一个边框，以及使用hover制作伪类，将图片与文字放到适宜的位置，“article便完成了。3、footer：图6 footer页面一“footer主要是用来存放脚标及脚标各种文字的。首先是新建一个大div为“footer作为大的框架，在css界面调整好参数。然后在“footer下建立一个小div为“footeer_middle用于存放内容。使用ul标签制作一个无序列表，同样的，在css界面调整好参数，并调整margin值将文字调整到适宜位置。之后使

9、用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文件，

10、制作动态效果，便完成了整个“header的制作。2、article：图8 article页面一图9 articler页面二图9 articler页面三“article是整个网页的主体，制作比拟简单，只是其中包含了大量的文字。首先建立一个大div“article作为大框架，在css界面调整好参数。之后在“article里面加上假设干个小div在每个div里面输入一个问题，文字由span标签和pre标签制作，同样在css界面调整好字号、字色等，并调整margin值将文字移动到适宜位置。并在该小div下用input标签制作勾选框，并调整name做出单项选择框或者多项选择框。因为此“article中含

11、有大量的文字，所以我用了 来调整文字与文字之间的距离以及段落与段落之间的距离。然后用input标签制作输入框，并在一个小div下制作提交按钮。这样整个“article就完成了。图10 footer页面(下方)该“footer存放的内容各种脚标。制作过程也与前一个网页一样。也是先建立一个大div作为大X围，在该div下建立一个小div“footer_middle用于存放文字和图片。然后在“footer_middle下使ul标签制作无序列表，并在css界面调整字号、字色等参数，并调整margin值来调节文字的位置，将其放到适宜的位置便OK了，至此，“footer便完成了。四、体会与收获时间

12、总是过得那么快，一转眼，大作业马上要完毕了。在这几天中，我受益匪浅。大作业第一天，教师便开场向我们介绍HTML的用法和其他内容，那也是我第一次接触到HTML。从第一天开场，教师就在详细的为我们讲解HTML的做法，各种代码，各种嵌套。说实话，第一天听课真的很吃力，因为是第一次接触到HTML所以是0根底开场学习。不过，当到了第二天、第三天的时候，我发现我听课已经没有第一节课那样吃力了，已经能够运用简单的HTML代码编写网页了。当课听得多了之后，其实发现HTML也没想象中的那么难。后来我们又学习了JS动态效果，使我们的网页变得更加有趣。在网页制作过程中，刚开场遇到的问题是很大的，因为第一次接触，不熟

13、悉代码，所以做的特别慢也出现了很多错误。比方在刚开场的时候，逻辑比价混乱，导致多处嵌套错误，是的网页不得不删掉重做。不过这个问题在熟悉构造逻辑后很快便解决了。在网页制作过程中，也会经常出现我想要移动的图片和我不想移动的图片一起动的情况，这个时候我会重新理一遍我的逻辑，找到错误的地方并改正它。此外，在制作过程中，偶尔也会出现乱码的问题，后来询问过教师后，也完美解决了这个问题。其实在整个制作过程中，出现的错误虽然不少，但是都不是什么大错误，只要仔细检查，便能改正这些错误。通过这几天的大作业网页设计学习，我发现了HTML的重要作用。网页是现代离不开的一个东西，所以网页设计的学习，对于日后的开展是特别重要的。而经过这些天的学习，我也发现了HTML的有趣，当自己通过代码做出一个又一个效果是，心里充满了成就感。HTML网页设计是很重要的一门课程，俗话说技多不压身，学会了HTML网页设计这门技能也许对日后的求职和人生规划都具有极其积极的作用。在今后的学习中，我不会放弃这门课程，我相信在日后的学习中我会学到更多东西。大作业虽然完毕了，但是我的学习生涯还在继续。. .word.