淘宝网网页实训报告.docVIP

湖北轻工职业技术学院 《网页设计与制作》实训设计报告 姓名班级学号指 导 教 师—2010.12.18 湖北轻工职业技术学院信息工程系 目 录 一.实训设计目的 2 二.实训设计题目描述和要求 3 三.实训设计报告内容 3 3.1 设计方案 3 3.2 设计过程 4 3.3 设计结果 4 四.结论与心得 4 一、实训目的 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 设计方案 本站应该算是一个的小型网站。关于本站站名的来源：因为我觉得这个网站里面的所有都是，网站背景音乐 个人主页，一般都会包括首页，，链接一些图片我的个人主页也不例外，包括次首页，，链接（的有关链接）把所有的素材都整理好（图片，，相片），开始布局。此站大多数用的是，三字型，因为最开头是一张带有导航条的图片，中间放，，像被分开的三个部分这种布局方式看起来比较整齐简洁美观。Templates”文件夹用来存放模版文件，“pages”文件夹用来存放网页文件，这样可以做到有条不紊，我设计的网站首页如图三。 以水平线为界，上面是欢迎用语、用户登录（如图四）和免费注册（如图五），用以给浏览者方便快捷的登陆与注册。左下方是淘宝主人的信息，右下方是产品的样式。 图二 图三 图四 图五 附录：style type=text/css .spanstyle { COLOR: red; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible} /style script var x,y var step=18 var 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++) { xpos[i]=-50} var ypos=new Array() for (i=0;i=message.length-1;i++) { ypos[i]=-200} function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1} function makesnake() { if (flag==