淘宝网网页实训报告.docx

淘宝网网页实训报告.docx

《淘宝网网页实训报告.docx》由会员分享，可在线阅读，更多相关《淘宝网网页实训报告.docx（10页珍藏版）》请在冰豆网上搜索。

淘宝网网页实训报告

湖北轻工职业技术学院

《网页设计与制作》实训设计报告

姓名：

张莉玲

班级：

A09市场营销（3）班

学号：

0903041342

指导教师：

吴瑞

设计时间：

2010.12.13—2010.12.18

湖北轻工职业技术学院信息工程系

一、实训目的

1.进一步熟悉和掌握网站建设的基本流程和技术规范；

2.巩固运用Dreamweaver网页制作软件制作网页的知识

3.巩固综合运用Dreamweaver软件完成网站建设任务的方法，能独立设计一4.个内容完整、图文并茂、技术运用得当的网站；

5.具备独立撰写实训报告等科技文件的基本能力；

6.在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，7.培养创新能力和团队意识；

8.为今后从事网站开发、维护和管理奠定基础。

二、实训设计题目描述和要求

此次的实训题目是制作一个小型购物网站，模仿淘宝店铺选择一类商品制作一个销售网站。

1．站点规划，搜集资料。

确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。

2.进行主页设计。

构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。

3.网页设计。

除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计。

包括版面设计和图形设计、内容录入等。

4.综合优化。

在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。

此次实训要求是：

1．站点结构与命名。

站点文件夹为班级学号姓名；站点文件夹中所包含文件夹：

Images（存放图片文件），Templates（存放模版文件），

pages（存放网页文件）；站点文件夹中所包含文件：

index（首页）。

2．网站题材选择。

内容，题材不限，可以选择自己所感兴趣的商品，内容充实、健康。

网站标题自拟。

3．网站技术要求。

页面布局合理，色彩和谐，链接正确，图文并茂并茂。

网站页面大小应该满足800*600分辨率的客户，兼顾1024*768分辨率。

4.站点中网页总数不少于20页。

主页所陈列的商品不得少于15个，商品分类不得少于5类，要有清晰的网站结构。

网站结构图：

三.实训设计报告内容

3.1设计方案

本网站应该算是一个淘宝购物的小型网站。

本站站名是I1oveme饰品店，关于本站站名的来源：

自己爱自己。

因为我觉得现在这个社会，是需要温暖，是需要爱的。

特别是如今工作压力的大增，年轻男女开始不爱惜自己的身体，经常加班工作。

所以我希望通过这个网站，让年轻男女不能在精神上给予自己爱，那么物质上就满足自己爱自己的理念。

网站里面的所有东西都是银质饰品，好看但不贵。

适合工作男女的消费水平。

本来是想在这个网站上插一段温馨的背景音乐是，但由于时间关系，所以放弃了。

个人淘宝主页，一般都会包括首页，导航，链接和一些产品介绍图片。

我的个人主页也不例外，包括次首页，导航（关于个人淘宝网站的活动、产品类别等），银质饰品（个人认为最好看的银质饰品），链接（所有饰品的有关链接）。

3.2设计过程

刚开始我已经把所有的素材都整理好（图片，模版，相片），开始布局。

此站大多数用的是层来制作的，而表格只用了两到三次。

其中网站主页像三字型，因为最开头是一张带有导航条的图片，中间分为两块，2/3用于放产品图片，1/3用于放产品分类，像被分开的三个部分这种布局方式看起来比较整齐、简洁和美观。

我的网站共有1个主页面，26个次页面，1个登陆页面，1个注册页面。

产品介绍统一用的是模版来制作的网页，以保证网站统一的页面风格。

我是用自己的姓名和学号命名网站名，用以方便存储和转发。

网站整体背景图片用的是白底雪花，用来突出冬天、圣诞即将来临的欢庆场面（如图一）。

突出主题，颜色没有过多、过杂，用以避免给人一种杂乱的感觉。

图一

我的产品分类是用表格做的，大部分的产品图片是用层来定位的。

因为层具有灵活移动性，所以很少用表格，大部分用的是层。

文子的设计也是重要的一个部分，根据具体内容决定字体风格。

素材、风格、模版都设计好以后，下一步就是具体的制作网页。

制作网站时，首先要做的就是站点的规划，建立一个本地站点“09营销（3）班张莉玲”（如图二），建立的各个页面都放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放统一类型的文件，我在制作时建立了“image”文件夹用来存放图片，“Templates”文件夹用来存放模版文件，“pages”文件夹用来存放网页文件，这样可以做到有条不紊，我设计的网站首页如图三。

以水平线为界，上面是欢迎用语、用户登录（如图四）和免费注册（如图五），用以给浏览者方便快捷的登陆与注册。

左下方是淘宝主人的信息，右下方是产品的样式。

图二

图三

图四

图五

附录：

鼠标跟随代码

第一步：

把下面代码添加到标签中。

.spanstyle{

COLOR:

red;FONT-FAMILY:

宋体;FONT-SIZE:

10pt;POSITION:

absolute;TOP:

-50px;VISIBILITY:

visible}

第二步:

把如下代码加入区域中

第三步:

把改为

3.3设计结果

在我看来，设计网页，应该先策划，策划很重要，加上创意，配色很重要，技术与鉴赏能力是最主要的。

建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意。

看着最后自己做出来的网页，使我自己非常有成就感。

让我更加了解到，生活中有许多色彩，搭配颜色的时候，联想到生活中的东西会做的更漂亮，给人一种亲切感，现在看到什么东西，我就会联想到做网页的时候，还有怎么布局。

反正此次实训收获很多。

最后，我想，如果此次实训老师是要我们分组来做的话，也许，我们可以做得更好，因为，一个想的毕竟不全面，而且，一个人的申美有限，我们可以分工合作，一个人做一个方面的东西，也可以根据他所善长的方面来分工，善长动画制作的人做动画，善长图片处理的人做图片，善长文字与布局的就来布局。

但是，也许那样，有些同学会懒的动手，推着给别人做。

四.结论与心得

此次的网页实训让我尝到了亲自动手设计网页，实现网上家园的一种成就感。

从中我将课堂上的知识在现实中得到了一次实践，加深了我对网络相关知识和网站相关知识的理解，熟悉了网络的基础知识，网站的基础知识，尤其是网站的基本原理，和网站设计的基本过程和方法，以及用于设计网页的基本工具。

对于这次的网页设计，我对自己的作品还是感觉很有成就感，很不错的。

但是，在放置背景图片中，我没有做好，背景图片在网页浏览中始终显现不出来。

并且，在开始设计网页的过程中，事先没有做好模块，没有弄好方案，使得自己只有重做，浪费了很多时间，最后由于时间的紧迫，而没有时间插入音乐和Flash文件。

对于网页也没有更好的修改。

这次的实训，让我懂得了以后不管做什么事，都要事先整理好思路，理清方案，安排好过程。

让自己的思路更加严谨、清晰。

做事更加有效率。

不能像无头苍蝇一样乱做，使事情得不到更快的完善。