淘宝网网页实训报告.docx
- 文档编号:24163007
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:10
- 大小:631.36KB
淘宝网网页实训报告.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}
varx,y
varstep=18
varflag=0
//Yoursnappymessage.Important:
thespaceattheendofthesentence!
!
!
varmessage="欢迎光临I1oveme饰品店!
"
message=message.split("")
varxpos=newArray()
for(i=0;i<=message.length-1;i++){
xpos[i]=-50}
varypos=newArray()
for(i=0;i<=message.length-1;i++){
ypos[i]=-200}
functionhandlerMM(e){
x=(document.layers)?
e.pageX:
document.body.scrollLeft+event.clientX
y=(document.layers)?
e.pageY:
document.body.scrollTop+event.clientY
flag=1}
functionmakesnake(){
if(flag==1&&document.all){
for(i=message.length-1;i>=1;i--){
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]}
xpos[0]=x+step
ypos[0]=y
for(i=0;i varthisspan=eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i]}} elseif(flag==1&&document.layers){ for(i=message.length-1;i>=1;i--){ xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for(i=0;i varthisspan=eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i]}} vartimer=setTimeout("makesnake()",30)} 第二步: 把如下代码加入 --BeginningofJavaScript- for(i=0;i<=message.length-1;i++){ document.write(" document.write(message[i]) document.write("")} if(document.layers){ document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=handlerMM; //-EndofJavaScript---> 第三步: 把
3.3设计结果
在我看来,设计网页,应该先策划,策划很重要,加上创意,配色很重要,技术与鉴赏能力是最主要的。
建立站点的时候,各个文件夹取名的时候,最好用相应的英语,见名知意。
看着最后自己做出来的网页,使我自己非常有成就感。
让我更加了解到,生活中有许多色彩,搭配颜色的时候,联想到生活中的东西会做的更漂亮,给人一种亲切感,现在看到什么东西,我就会联想到做网页的时候,还有怎么布局。
反正此次实训收获很多。
最后,我想,如果此次实训老师是要我们分组来做的话,也许,我们可以做得更好,因为,一个想的毕竟不全面,而且,一个人的申美有限,我们可以分工合作,一个人做一个方面的东西,也可以根据他所善长的方面来分工,善长动画制作的人做动画,善长图片处理的人做图片,善长文字与布局的就来布局。
但是,也许那样,有些同学会懒的动手,推着给别人做。
四.结论与心得
此次的网页实训让我尝到了亲自动手设计网页,实现网上家园的一种成就感。
从中我将课堂上的知识在现实中得到了一次实践,加深了我对网络相关知识和网站相关知识的理解,熟悉了网络的基础知识,网站的基础知识,尤其是网站的基本原理,和网站设计的基本过程和方法,以及用于设计网页的基本工具。
对于这次的网页设计,我对自己的作品还是感觉很有成就感,很不错的。
但是,在放置背景图片中,我没有做好,背景图片在网页浏览中始终显现不出来。
并且,在开始设计网页的过程中,事先没有做好模块,没有弄好方案,使得自己只有重做,浪费了很多时间,最后由于时间的紧迫,而没有时间插入音乐和Flash文件。
对于网页也没有更好的修改。
这次的实训,让我懂得了以后不管做什么事,都要事先整理好思路,理清方案,安排好过程。
让自己的思路更加严谨、清晰。
做事更加有效率。
不能像无头苍蝇一样乱做,使事情得不到更快的完善。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 淘宝 网页 报告