计算机应用训练报告

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

2、航清晰 ,颜色与结构符合企业 i 视觉形象合理 ,突出企业文化得同时 ,加强视觉艺术感受。3、综合主流网站成功经验，将更新快得、重要得信息放置在网站首页，即“一步提优,使用户可以查瞧网站得最优内容、最佳信息 (如热销产品等） .4、追求用户使用便捷 ,考虑不同互联网接入条件，页面力求简洁 ,三次链接获得服务，另外还将提供多种用户辅助功能 .、采用图片、文字等多种展示形式，丰富多彩得展示企业服务得重要内容、重要信息。6 在网站架构方面 ,我们从网站得性质、 功能与扩展性出发， 合理安排结构， 层次清晰 , 使用方便 ,整体感强。充分考虑网站页面结构得扩展性，使网站得增加与删减不影响页面得风格。网

3、站得各频道板块布置有张有弛,延续并贯穿了网站得风格,形成协调、统一得网站系统。.二、 网站主要内容介绍图 1网站内容结构图我们得网页分为十个部分,它们分别就是：官方首页、联系客服页面、购物车页面、注册页面、登录页面、会员专享页面 。有我们小组十位成员分工完成。我负责得就是购物车页面与用户体验提升问卷页面 .“购物车” 就是每一个网络购物网站所必需得页面，客户可以将自己心仪但却尚未决定购买得商品放入购物车里,这样客户就可以有充分得时间考虑就是否购买该商品且可以快速找到该商品,而且购物车还具有一键支付功能.该网页主要内容为:标题部分（返回、导航、登录、注册、我得订单等 1个购物车常用链接 ),帮助

4、客户快速返回或浏览与购物车相关联得网页。 支付步骤显示， 帮助顾客了解支付所需要得所有步骤。猜您喜欢 -商品介绍页面 ,为顾客推荐正在进行活动得减价商品 .脚标 ,为顾客提供快捷得网站链接以及各种证书。“用户体验提升问卷页面 就是为了优化用户购物体验而开设得页面，对于官网得优化有着极大得促进作用。主要内容为 :问卷说明 ,让用户了解用户体验提升问卷得目得，以及奖励、承诺与联系方式。正文（问卷）部分 ,罗列出需要用户回答得一系列问题。脚标，为顾客提供快捷得网站链接以及各种证书。三、 页面介绍1、“购物车”页面介绍“购物车 页面主要分为 header，rtcle，f o er 三大部分，每一个大得

5、部分都定义了一个 iv.每个 iv 里面都含有若干个小 div。并通过 cs 界面得调整来实现网页效果与版面得制作。由于网站页面大小受限得原因，我分为若干个小配图介绍。(1 ）、 eader ：图 2 header(图上方）页面（含j效果）图 3 ader(图上方）页面（含js 效果 )该网页得“ eaer”适用于存放各种标题链接得 ,因此因存放文字与链接为主 . 其中得几个大标题为： 返回易购首页、 网站导航、商家入驻、登录、注册、我得订单、我得易购、手机苏宁、易付宝、政企采购、客户服务共 11 段文字。为了达到排版美观得要求与鼠标放上去后改变颜色得效果， 我放置了一个总 div -“hea

6、de”，在 css 界面里调整好大小与背景作为整个得范围。 在“hader”div 内部放置一个 dv “ eade_midd” ,同样在 cs 界面内调整好大小与背景。在“ header_iddle”里面输入我所需要得各个标题。 为了完美得放置文字， 我用了无序列表来做这几段文字 .先建立一个无序列表，定义 class 为 list ，在 ss 界面中调整好列表中文字得字体，字号、字色等细节 ,这样一个大得无序列表框架就完成了。然后 ,在无序列表这个 di中建立 li, 并用 a 标签与 href 作出超链接得样式。然后通过输入   代码来进行文字间距得控制， 以此美化页面。 并在

7、c界面中对整个无序列表用 hove作出伪类效果,到此为止， header 得大体就完成了。由于在部分大标题下有一些小标题，所以我运用用了 js 来制作出下拉框得动态样式及进度条样式。在 tml 中定义一个 cass为 dwn,并在 css 界面中调整好细节，同样用hoer 做成伪类 .这样，当鼠标停留在大标题上时 ,就会出现一个下拉框 ,里面包含着小标题 .最后通过 ig 标签引入两张图片便完成了 .（2）、 rticle：图at cle 页面 ( 一）图 5 artic e 页面（二）该网页得“ rticle ”主要就是整个网页得主体 ,里面包含得就是整个网页得主要内容。首先建立一个 div

8、 为“article_top，在该 div 下使用 mg 标签 ,将事先预存得图片导入到网页中，并在 ss 界面调整好参数 ,通过调整 rgin 得值来将图片调整到合适得位置。之后新建一个 i并用 f标签做好文字，同样在 s 界面调整好字体、字色等参数，并调整 margin 得值将文字移动到合适位置 .之后再建一个新得大 dv“ rticl 作为框架 .在其下建立一个新 di“ ticle_mi dle”用于存放内容。并在该 v 下建立若干小 div 用于存放文字与图片 ,并在 s界面中调整参数并用 border 制作一个边框 ,以及使用 hover 制作伪类，将图片与文字放到合适得位置，“a

9、rtile”便完成了。（ ) 、foote :图 6 foot 页面 (一）“ foo r”主要就是用来存放脚标及脚标各种文字链接得。首先就是新建一个大 div 为“ f oter”作为大得框架 ,在 css 界面调整好参数。然后在“ fote下建立一个小 di为“ f otee_middle”用于存放内容。使用标签制作一个无序列表，同样得，在 css 界面调整好参数，并调整 m gi值将文字调整到合适位置。之后使用 img 标签引入图片，同样在 css 界面调整参数并移动到合适位置。这样脚标便完成了。之后使用 cr pt 标签引入 js 动态效果 ,使得网页更加有趣。至此， “footer”

10、 便完成了 .、“用户体验提升问卷”页面介绍（ 1) 、 h a e：图 7 he er 页面（含 js）该网页得“ header”页面主要以存放图片与少量文字为主 .首先建立一个大 div“h ader为大框架 ,在其中建立一个“ hadermi dle”得小 iv 用于存放内容。用 i g 标签引入图片 ,在 css界面调整参数与 margn 值将图片移到合适位置 .之后用标签与 p e标签制作文字，并在 s 界面中用 o e制作成伪类并移动到合适位置 . 最后引入 js 文件 ,制作动态效果，便完成了整个“ hade”得制作 .（2) 、 rt cle ：图 8 artic e 页面 (

11、一）图 9 rti le页面 (二）图article 页面（三）“ a t le”就是整个网页得主体，制作比较简单 ,只就是其中包含了大量得文字 .首先建立一个大 div“ arice”作为大框架， 在 css 界面调整好参数。 之后在“artcle”里面加上若干个小 dv 在每个 div 里面输入一个问题 ,文字由 span标签与 re 标签制作，同样在 c界面调整好字号、字色等，并调整 marg n 值将文字移动到合适位置。并在该小 div 下用 input 标签制作勾选框，并调整 am做出单选框或者多选框。因为此“ articl 中含有大量得文字，所以我用了 nbsp 来调整文字与文字之

12、间得距离以及段落与段落之间得距离。然后用 input 标签制作输入框，并在一个小d v 下制作提交按钮。这样整个“ rti le”就完成了。图 10 oo e页面（下方）该“ fotr”存放得内容各种脚标 .制作过程也与前一个网页相同。也就是先建立一个大 iv 作为大范围，在该 dv 下建立一个小 iv“ foe_middle”用于存放文字与图片。然后在“ footer_midd 下使 ul 标签制作无序列表 ,并在 css界面调整字号、字色等参数 ,并调整 margin 值来调节文字得位置， 将其放到合适得位置便 ok了,至此，“f ter”便完成了。四、体会与收获时间总就是过得那么快，一转

13、眼，大作业马上要结束了。在这几天中，我受益匪浅。大作业第一天，老师便开始向我们介绍 html 得用法与其她内容，那也就是我第一次接触到 tml 。从第一天开始 ,老师就在详细得为我们讲解 h ml 得做法 ,各种代码 ,各种嵌套。说实话，第一天听课真得很吃力，因为就是第一次接触到 ht l所以就是 0 基础开始学习。不过，当到了第二天、第三天得时候，我发现我听课已经没有第一节课那样吃力了，已经能够运用简单得 html 代码编写网页了。当课听得多了之后 ,其实发现 html 也没想象中得那么难。 后来我们又学习了 js 动态效果，使我们得网页变得更加有趣 .在网页制作过程中 ,刚开始遇到得问题就

14、是很大得,因为第一次接触， 不熟悉代码 ,所以做得特别慢也出现了很多错误。比如在刚开始得时候，逻辑比价混乱 ,导致多处嵌套错误 ,就是得网页不得不删掉重做。不过这个问题在熟悉结构逻辑后很快便解决了。在网页制作过程中， 也会经常出现我想要移动得图片与我不想移动得图片一起动得情况 ,这个时候我会重新理一遍我得逻辑，找到错误得地方并改正它。此外,在制作过程中，偶尔也会出现乱码得问题，后来询问过老师后,也完美解决了这个问题。其实在整个制作过程中，出现得错误虽然不少，但就是都不就是什么大错误 ,只要仔细检查 ,便能改正这些错误 .通过这几天得大作业网页设计学习，我发现了html 得重要作用 .网页就是现代