淘宝网网页实训报告.docx

1、淘宝网网页实训报告 湖北轻工职业技术学院网页设计与制作实训设计报告姓 名：张莉玲班 级：A09市场营销（3）班学 号：0903041342指 导 教 师：吴瑞设 计 时 间：2010.12.132010.12.18湖北轻工职业技术学院信息工程系一、实训目的1.进一步熟悉和掌握网站建设的基本流程和技术规范；2.巩固运用Dreamweaver网页制作软件制作网页的知识3.巩固综合运用Dreamweaver软件完成网站建设任务的方法，能独立设计一4.个内容完整、图文并茂、技术运用得当的网站；5.具备独立撰写实训报告等科技文件的基本能力；6.在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交

2、流的能力，7.培养创新能力和团队意识； 8.为今后从事网站开发、维护和管理奠定基础。 二、实训设计题目描述和要求 此次的实训题目是制作一个小型购物网站，模仿淘宝店铺选择一类商品制作一个销售网站。1站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。2.进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3.网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计。包括版面设计和图形设计、内容录入等。4.综合优化。在浏览器中对完成的网站逐页打开测试，包括链接正确

3、与否，页面打开时间，图片和动画是否丢失等。 此次实训要求是：1站点结构与命名。站点文件夹为班级学号姓名；站点文件夹中所包含文件夹：Images （存放图片文件），Templates（存放模版文件），pages（存放网页文件）； 站点文件夹中所包含文件： index （首页）。2网站题材选择。内容，题材不限，可以选择自己所感兴趣的商品，内容充实、健康。网站标题自拟。3网站技术要求。页面布局合理，色彩和谐，链接正确，图文并茂并茂。网站页面大小应该满足800*600分辨率的客户，兼顾1024*768分辨率。4.站点中网页总数不少于20页。主页所陈列的商品不得少于15个，商品分类不得少于5类，要有清晰

4、的网站结构。网站结构图：三.实训设计报告内容 3.1 设计方案 本网站应该算是一个淘宝购物的小型网站。本站站名是I 1ove me饰品店，关于本站站名的来源：自己爱自己。因为我觉得现在这个社会，是需要温暖，是需要爱的。特别是如今工作压力的大增，年轻男女开始不爱惜自己的身体，经常加班工作。所以我希望通过这个网站，让年轻男女不能在精神上给予自己爱，那么物质上就满足自己爱自己的理念。网站里面的所有东西都是银质饰品，好看但不贵。适合工作男女的消费水平。本来是想在这个网站上插一段温馨的背景音乐是，但由于时间关系，所以放弃了。个人淘宝主页，一般都会包括首页，导航，链接和一些产品介绍图片。我的个人主页也不例

5、外，包括次首页，导航（关于个人淘宝网站的活动、产品类别等），银质饰品（个人认为最好看的银质饰品），链接（所有饰品的有关链接）。3.2 设计过程刚开始我已经把所有的素材都整理好（图片，模版，相片），开始布局。此站大多数用的是层来制作的，而表格只用了两到三次。其中网站主页像三字型，因为最开头是一张带有导航条的图片，中间分为两块，2/3用于放产品图片，1/3用于放产品分类，像被分开的三个部分这种布局方式看起来比较整齐、简洁和美观。我的网站共有1个主页面，26个次页面，1个登陆页面，1个注册页面。产品介绍统一用的是模版来制作的网页，以保证网站统一的页面风格。我是用自己的姓名和学号命名网站名，用以方便存

6、储和转发。网站整体背景图片用的是白底雪花，用来突出冬天、圣诞即将来临的欢庆场面（如图一）。突出主题，颜色没有过多、过杂，用以避免给人一种杂乱的感觉。图一我的产品分类是用表格做的，大部分的产品图片是用层来定位的。因为层具有灵活移动性，所以很少用表格，大部分用的是层。文子的设计也是重要的一个部分，根据具体内容决定字体风格。素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“09营销(3)班张莉玲”（如图二），建立的各个页面都放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放统一类型的文件，我在制作时建立了“i

7、mage”文件夹用来存放图片，“Templates”文件夹用来存放模版文件，“pages”文件夹用来存放网页文件，这样可以做到有条不紊，我设计的网站首页如图三。以水平线为界，上面是欢迎用语、用户登录（如图四）和免费注册（如图五），用以给浏览者方便快捷的登陆与注册。左下方是淘宝主人的信息，右下方是产品的样式。图二图三 图四图五附录：鼠标跟随代码第一步：把下面代码添加到标签中。.spanstyle COLOR: red; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visiblevar

8、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.length-1;i+) xposi=-50var ypos=new Array()for (i=0;i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor

9、(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(makesnake(),30)第二步:把如下代码加入区域中!- Beginning of JavaScript -for (i=0;i=message.length-1;i+) document.write()doc

10、ument.write(messagei)document.write()if (document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;/ - End of JavaScript - -第三步:把改为3.3 设计结果在我看来，设计网页，应该先策划，策划很重要，加上创意，配色很重要，技术与鉴赏能力是最主要的。建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意。看着最后自己做出来的网页，使我自己非常有成就感。让我更加了解到，生活中有许多色彩，搭配颜色的时候，联想

11、到生活中的东西会做的更漂亮，给人一种亲切感，现在看到什么东西，我就会联想到做网页的时候，还有怎么布局。反正此次实训收获很多。最后，我想，如果此次实训老师是要我们分组来做的话，也许，我们可以做得更好，因为，一个想的毕竟不全面，而且，一个人的申美有限，我们可以分工合作，一个人做一个方面的东西，也可以根据他所善长的方面来分工，善长动画制作的人做动画，善长图片处理的人做图片，善长文字与布局的就来布局。但是，也许那样，有些同学会懒的动手，推着给别人做。四.结论与心得此次的网页实训让我尝到了亲自动手设计网页，实现网上家园的一种成就感。从中我将课堂上的知识在现实中得到了一次实践，加深了我对网络相关知识和网站

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