淘宝网网页实训报告.doc

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

1、 湖北轻工职业技术学院网页设计与制作实训设计报告姓 名：张莉玲班 级：A09市场营销（3）班学 号：指 导 教 师：吴瑞设 计 时 间：2010.12.132010.12.18湖北轻工职业技术学院信息工程系目 录一.实训设计目的2二.实训设计题目描述和要求3三.实训设计报告内容33.1 设计方案33.2 设计过程43.3 设计结果4四.结论与心得4一、实训目的1.进一步熟悉和掌握网站建设的基本流程和技术规范；2.巩固运用Dreamweaver网页制作软件制作网页的知识3.巩固综合运用Dreamweaver软件完成网站建设任务的方法，能独立设计一4.个内容完整、图文并茂、技术运用得当的网站；5.

2、具备独立撰写实训报告等科技文件的基本能力；6.在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，7.培养创新能力和团队意识； 8.为今后从事网站开发、维护和管理奠定基础。 二、实训设计题目描述和要求 此次的实训题目是制作一个小型购物网站，模仿淘宝店铺选择一类商品制作一个销售网站。1站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。2.进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3.网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单

3、独设计。包括版面设计和图形设计、内容录入等。4.综合优化。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。 此次实训要求是：1站点结构与命名。站点文件夹为班级学号姓名；站点文件夹中所包含文件夹：Images （存放图片文件），Templates（存放模版文件），pages（存放网页文件）； 站点文件夹中所包含文件： index （首页）。2网站题材选择。内容，题材不限，可以选择自己所感兴趣的商品，内容充实、健康。网站标题自拟。3网站技术要求。页面布局合理，色彩和谐，链接正确，图文并茂并茂。网站页面大小应该满足800*600分辨率的客户，兼顾1024*7

4、68分辨率。4.站点中网页总数不少于20页。主页所陈列的商品不得少于15个，商品分类不得少于5类，要有清晰的网站结构。网站结构图：主 页导 航 品 种好 评品 牌保 养礼 品首 页贵宾新品到达恋爱纪念爱意表白生日祝福婚礼庆祝十五种产品产品介绍三.实训设计报告内容 3.1 设计方案 本网站应该算是一个淘宝购物的小型网站。本站站名是I 1ove me饰品店，关于本站站名的来源：自己爱自己。因为我觉得现在这个社会，是需要温暖，是需要爱的。特别是如今工作压力的大增，年轻男女开始不爱惜自己的身体，经常加班工作。所以我希望通过这个网站，让年轻男女不能在精神上给予自己爱，那么物质上就满足自己爱自己的理念。网

5、站里面的所有东西都是银质饰品，好看但不贵。适合工作男女的消费水平。本来是想在这个网站上插一段温馨的背景音乐是，但由于时间关系，所以放弃了。个人淘宝主页，一般都会包括首页，导航，链接和一些产品介绍图片。我的个人主页也不例外，包括次首页，导航（关于个人淘宝网站的活动、产品类别等），银质饰品（个人认为最好看的银质饰品），链接（所有饰品的有关链接）。3.2 设计过程刚开始我已经把所有的素材都整理好（图片，模版，相片），开始布局。此站大多数用的是层来制作的，而表格只用了两到三次。其中网站主页像三字型，因为最开头是一张带有导航条的图片，中间分为两块，2/3用于放产品图片，1/3用于放产品分类，像被分开的三

6、个部分这种布局方式看起来比较整齐、简洁和美观。我的网站共有1个主页面，26个次页面，1个登陆页面，1个注册页面。产品介绍统一用的是模版来制作的网页，以保证网站统一的页面风格。我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站整体背景图片用的是白底雪花，用来突出冬天、圣诞即将来临的欢庆场面（如图一）。突出主题，颜色没有过多、过杂，用以避免给人一种杂乱的感觉。图一我的产品分类是用表格做的，大部分的产品图片是用层来定位的。因为层具有灵活移动性，所以很少用表格，大部分用的是层。文子的设计也是重要的一个部分，根据具体内容决定字体风格。素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网

7、站时，首先要做的就是站点的规划，建立一个本地站点“09营销(3)班张莉玲”（如图二），建立的各个页面都放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放统一类型的文件，我在制作时建立了“image”文件夹用来存放图片，“Templates”文件夹用来存放模版文件，“pages”文件夹用来存放网页文件，这样可以做到有条不紊，我设计的网站首页如图三。以水平线为界，上面是欢迎用语、用户登录（如图四）和免费注册（如图五），用以给浏览者方便快捷的登陆与注册。左下方是淘宝主人的信息，右下方是产品的样式。图二图三 图四图五附录：鼠标跟随代码第一步：把下面代码添加到标签中。.sp

8、anstyle COLOR: red; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visiblevar x,yvar step=18var flag=0/ Your snappy message. Important: the space at the end of the sentence!var message=欢迎光临I 1ove me饰品店!message=message.split()var xpos=new Array()for (i=0;i=message.lengt

9、h-1;i+) xposi=-50var ypos=new Array()for (i=0;i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; imessage.length-1; i+) var thisspan = eval(document.span+i)thisspan.left=xposithisspan.top=yposivar timer=setTimeout

10、(makesnake(),30)第二步:把如下代码加入区域中!- Beginning of JavaScript -for (i=0;i=message.length-1;i+) document.write()document.write(messagei)document.write()if (document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;/ - End of JavaScript - -第三步:把改为3.3 设计结果在我看来，设计网页，应该先策划，策划很重要

11、，加上创意，配色很重要，技术与鉴赏能力是最主要的。建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意。看着最后自己做出来的网页，使我自己非常有成就感。让我更加了解到，生活中有许多色彩，搭配颜色的时候，联想到生活中的东西会做的更漂亮，给人一种亲切感，现在看到什么东西，我就会联想到做网页的时候，还有怎么布局。反正此次实训收获很多。最后，我想，如果此次实训老师是要我们分组来做的话，也许，我们可以做得更好，因为，一个想的毕竟不全面，而且，一个人的申美有限，我们可以分工合作，一个人做一个方面的东西，也可以根据他所善长的方面来分工，善长动画制作的人做动画，善长图片处理的人做图片，善长文字与布

12、局的就来布局。但是，也许那样，有些同学会懒的动手，推着给别人做。四.结论与心得此次的网页实训让我尝到了亲自动手设计网页，实现网上家园的一种成就感。从中我将课堂上的知识在现实中得到了一次实践，加深了我对网络相关知识和网站相关知识的理解，熟悉了网络的基础知识，网站的基础知识，尤其是网站的基本原理，和网站设计的基本过程和方法，以及用于设计网页的基本工具。对于这次的网页设计，我对自己的作品还是感觉很有成就感，很不错的。但是，在放置背景图片中，我没有做好，背景图片在网页浏览中始终显现不出来。并且，在开始设计网页的过程中，事先没有做好模块，没有弄好方案，使得自己只有重做，浪费了很多时间，最后由于时间的紧迫，而没有时间插入音乐和Flash文件。对于网页也没有更好的修改。这次的实训，让我懂得了以后不管做什么事，都要事先整理好思路，理清方案，安排好过程。让自己的思路更加严谨、清晰。做事更加有效率。不能像无头苍蝇一样乱做，使事情得不到更快的完善。