乔世帅《综合技能训练》技术文档模版.docx
综合技能训练技术文档项目名称：LIBER ADEON网上手表专营店系/专业:计算机系软件技术年级： 2015级学生姓名：乔世帅指导教师：_刘效#_2016年11月10日摘要本文就网站的设计与制作，对全过程进行分析与研究，本文主要的工作集中在:1. 对自己设计的网站从设计理念到制作过程进行详细分析。2. 对使用到的Hbulider、Photoshop软件的设计方式进行解析。3. 就网站的设计与制作提出自己的观点以及建议。关键词：Hbulider，静态网站建设，HTML5、CSS3。ABSTRACTSIn this paper, website design and production, the whole process of analysis and research, this paper mainly focused on the:1.To design their own websites from design concept to production process carried out a detailed analysis.2.On the use of the Dreamweaver,Photoshop, and software design method of analysis.3.Web site design and production put forward their views and suggestions.KEYWORS： Hbulider, static website construction,HTML5,CSS3.目录第1章概述41.1 技术综述41.2 项目背景与开发计划41.3 开发平台5第2章需求分析52.1 业务需求及功能列表52.2 数据要求6第3章概要设计63.1 涉及到的组件概要说明7第4章详细设计84.1 主页的设计84.2 分类展示页面设计144.3登陆注册页面设计144.4订单提交页面设计154.5购物车页面设计154.6商品详情页面设计164.6意见反馈页面设计174.7所有页面样式CSS代码17第5章代码设计405.1 关键技术1：页面主导航的设计的代码举例40第6章测试426.1 测试方案426.2 性能测试42第7章结论43第8章参考文献43第9章致谢43概述第1章1.1技术综述HTML5和CSS3不仅仅是两项新的Web技术标准，更代表了下一代HTML和CSS技 术。虽然HTML5的标准规范还没有正式发布，但是未来的发展前景已经可以预见，那就是 HTML5必将被越来越多的Web开发人员所使用，各大主流浏览器厂家已经积极更新自己的 产品，以更好地支持HTML5。1.2项目背景与开发计划本项目是LIBER AEDON品牌手表的一个网上手表专营店随着互联网的飞速发展，网购进入了越来越多的人的生活，更多的人购物选择网购来购买自 己想买的商品。一直以来，手表都被人们看作一种时尚，越来越多的人选择佩戴名牌手表来 提升自己的品味。本项目提出了几大需要解决的问题，分别为：1.图片文字的插入；2.链接的插入与使用。大 致可以分为3个阶段解决问题。第一阶段：寻找制作需要用到的图片文字，并利用制图软件 制作。第二阶段：使用Hbulider插入图片、文字、页面布局。第三阶段：使用Hbulider 插入链接，并调试使用。1.3开发平台1、Inter i5, DDR2 800 1G 内存，硬盘 160G 串口。操作系统为 XP, WIN7。2、必要的网络平台及需要的网络协议3、开发用的程序设计语言为HTML5、CSS3。使用的软件为Hbulider。4、打包发行用的工具为好压（.rar）第2章需求分析2.1业务需求及功能列表2.2数据分析2016年消费拥有国产表、原装进口表的比重分别为43%和40.8%,中高端手表消费在增 长，低端产品消费在淡出。与2015年相比，年消费在5000元以上的比重由5.3%增长到7.13%， 而100元以下的消费比重由5.1%降至U 1.78%。中国手表产量已占全球市场的七成，但出口 总值仅占一成。而瑞士年产手表仅占全球产量的三成，但出口额却占四成。中国手表业今后 要保持其发展，需从提高产量转型为技术含量的提升，逐步开发高端市场。随着人们收入水 平的不断提高，对手表的需求也将越来越大。第3章概要设计本应用软件的组成结构HBuilder是DCloud推出的一款支持HTML5的 Web开发IDE。快，是HBuilder的最大优势， 通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同 时，它还包括最全面的语法库和浏览器兼容性数据。从Frontpage、Dreamweaver、UE，到 SublimeText 和 JetBrains 的 WebStorm, Web 编程的 IDE 已经更换了 几批 oHBuilder 是 DCloud (数字天堂)推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过 完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css 的开发效率。”问到HBuilder的优势时，DCloud CEO王安表示。HBuilder的编写用到了 Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基 于Eclipse，所以顺其自然地兼容了 Eclipse的插件。3.1涉及到的软件概要说明我们需要在Hbulider软件实现。(1.)需要利用Hbulider插入网页连接。(2.)需要利用Photoshop制作主页和附页的所有图片。(3.)将制作的网站在相关的浏览器下测试，测试浏览器为：Chrome浏览器和火狐浏览器第4章详细设计4.1主页的设计<!DOCTYPE html><html><head><meta charset="utf-8” /><title >主页 </title><link rel="stylesheet" href="css/style.css” /></head> <body><a name="123”></a><div class="header"><a href="index.html"><img src="img/LOGO.jpg" class="logo” /></a><input type="text" class="search" /><select class="language"><option value="English">English</option><option value="Chine"> 中文</option></select><a href="Login.html" class="lab1”>登陆/注册 </a><img src="img/cart-3.png" class="cart3” /><a href= "shopcart.html" class="lab2”>我的 购物车</a></div><h1 >LIBER AEDON</h1 ><hr /><div class="ul"><ul><li><a href="index.html"> 主页 </a></li><li><a href="show1.html"> 男士手表</a></li><li><a href="woman.html”> 女士手表 </a></li><li><a href="kid.html”> 儿童手表</a></li><li><a href="contact.html” > 意见反馈</a></li><li><a href="Login.html"> 登陆/注册</a></li></ul></div><div id="plugin"><div id="movie"><img src="img/bnr-1.jpg” /></div></div><div class="down”><div class="img-show"><div class="images"><a href="part1.html"><img src="img/abt-1.jpg” /></a></div><div class="images"><a href="part1.html"><img src="img/abt-2.jpg” /></a></div><div class="images"><a href="part1.html"><img src="img/abt-3.jpg” /></a></div></div><div class="picture-show1”><div class="picture"><a href="part1.html" class="a1”><img src="img/p-1.png" class="p1” /> 冰球 联盟限量版</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$1599.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-2.png" class="p1” /> 多功 能石英表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$599.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-3.png" class="p1” /> 男士 尊贵石英表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$399.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-4.png" class="p1” /> 男士商务手表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$399.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-5.png" class="p1” /> 与冈带水鬼手表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$888.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-6.png" class="p1” />可金时尚罗马刻度</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价:$999.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-7.png" class="p1” /> 全自动机械表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$590.00</p></div><div class="picture"><a href="part1.html" class="a1”><img src="img/p-8.png" class="p1” /> 防水大表盘男士表</a><a href="shopcart.html"><img src="img/cart-2.png" class="cart2” /></a><p class="price">单价：$299.00</p></div></div><div class="footer"><div class="footer-box"><h3>联系我们</h3><ol class="ol"><li>FaceBook</li><br /><li>Twitter</li><br /><li>Google+</li></ol></div><div class="footer-box"><h3> 信息</h3><ol class="ol"><li> 特价 </li><br /><li> 新产品 </li><br /><li>我们的商店</li><br /><li> 联系我们</li><br /><li>畅销书</li></ol></div><div class="footer-box"><h3>我的反馈</h3><ol class="ol"><a href="contact.html"><li>我的反馈</li></a><br /><li>我的信用 </li><br /><li> 我的退货</li><br><li>我的邮箱</li></ol></div><div class="footer-box"><h3 >商店信息</h3><ol class="ol"><li> 公司名称</li><br/><a href="agree.html"><li>交易许可协议</li></a><br /><li> 版权信息 </li><br /><li>帮助中心</li></ol></div></div></div><div class="hd"><a href="#top"><img src="img/hd.png"></a></div></body></html>4.2分类展示页面设计4.3登陆注册页面设计4.4订单提交页面设计4.5购物车页面设计4.6商品详情页面设计4.6意见反馈页面设计4.7所有页面样式CSS代码/*-所有页面一样的样式*/body margin:0;padding : 0 ;font normal normal 15px/2em ”华文幼圆”；background:url(./img/crossword.png);.hdwidth: 30px;height: 50px;position: fixed;right: 30px;bottom: 30px;.hd a color: red;text-decoration: none;font-size: 20px;.hd a:hoverfont-weight: 300;color: blue;.hd a imgwidth: 30px;height: auto;.headerheight: 80px;width: 100%;background-color: black;.logowidth: 100px;height: 70px;margin-left: 50px;.search width: 180px;height: 20px; margin-left: 10px; position: relative; bottom: 23px;background-image: url(./img/search.png);background-repeat: no-repeat; background-position: 180px 5px; padding: 3px 10px 3px 10px; border: none;border-radius: 5px;.language width: 100px; position: relative; left: 25px;bottom: 23px;padding: 3px 10px 3px 10px; border: none;border-radius: 5px;.cart3 position: absolute; top:30px;right:120px;.lab1 text-decoration: none; color:white;font-size: 17px;font-weight: 300;s font-family:"隶书”； position: absolute;top:20px;right:150px;.lab1:hover,.lab2:hover color: blue;.lab2text-decoration: none; color:white;font-size: 17px;font-weight: 300;s font-family:"隶书”； position: absolute;top:20px;right:20px;h1text-align:center;font-size:50px;hr color:gray;.ulwidth: 100%;text-align: center;ulwidth: 980px;margin:0 auto;liborder:1px solid none;list-style:none;float:left;/*background-color:yellow;*/ li adisplay:block;text-decoration:none;color:black;font-size:20px;width:150px;line-height:50px;text-align:center;li a:hovercolor:red;background-color:#FCF7F9;.divmargin-left:0;#plugin #movie img width:100%;height:400px;/大首页大/.img-showwidth: 100%;height: 300px;.imageswidth: 260px;height: auto;float: left;margin-top: 50px;margin-left: 80px;.images imgwidth: 260px;height: auto;.picture-showwidth: 100%;height: 600px;margin-top: 100px;.picture-show1width: 100%;height: 600px;margin-top: 30px;.a1font-size: 15px;font-family:"楷体”；color: black;font-weight: 100;text-decoration: none;.a1:hover color: blue;.picturewidth: 150px;height: 330px;float: left;margin-top: 0px;margin-left: 100px;.picture .p1width: 150px;height: auto;.p1 float: left;margin: 0 auto;.cart2border: none; position: relative; top: 3px;right: 0px; .price color: red;.contextbackground: url(./img/banner.jpg);width: 100%; height: 400px; position: relative; top: 60px;padding-top:80px ; .downwidth: 1100px; margin: auto; /大注册页面大/.context-enrollbackground:url(./img/banner.jpg);width: 100%;height: 450px;position: relative;top: 60px;padding-top:80px ;.form-logintext-align: center;width: 400px;height: 320px;background-color: #2B2B36;margin: 0 auto;border-radius: 20px;.avtarwidth: 80px;margin: 0 auto;position: relative;top: 20px;.textbox1width: 220px;margin: 0 auto;.textbox2width: 220px;margin: 0 auto;.form-login type="text" width: 70%;padding: 1em 2em 1em 3em;color: #9199aa;font-size: 15px;outline: none;background: url(./img/adm.png) no-repeat 10px 15px;border: none;font-weight: 100;border-bottom: 1px solid#484856;margin-top: 2em;.form-login type="password" width: 70%; padding: 1em 2em 1em 3em;color: #9199aa;font-size: 12px;outline: none;background: url(./img/key.png) no-repeat 10px 15px;border: none;font-weight: 100;border-bottom: 1px solid#484856;margin-top: 2em;.submit1,.submit2height: 20px;border-radius: 20px;padding: 5px 20px 5px 20px;border: none;margin-top: 35px;background: #3ea751;font-size: 12px;height: 30px;width: 101px; color: white; .submit1:hover,.submit2:hoverbackground-color: #ff2775; color: black;.submit1 border-left: none; margin-right: 15px;.submit2 border-right: none; margin-left: 15px;.form-login a text-decoration: none;.form-enroll text-align: center; background-color: #2B2B36; color: white;width: 380px;height: 350px;margin: 0 auto;border-radius: 20px; padding-top: 20px; .form-enroll pfont-size: 28px;font-family:"幼圆”；font-weight: bold; .form-enroll inputtype="text”,.form-enroll inputtype="button",.form-enroll inputtype="password" height: 20px;border-radius: 20px; padding: 5px 20px 5px 20px; border: none;.form-enroll .texbox1,.form-enroll inputtype="password"width: 210px; .form-enroll .texbox2 width: 110px; .form-enroll inputtype="button" font-size: 12px;height: 30px; width: 101px; color: white; background:#3ea751 ; letter-spacing: 0.2em; .form-enroll inputtype="button":hoverbackground: #ff2775;.but1margin-right: 22px;.form-enroll form a text-decoration: none;.but2margin-left: 24px;/footer*/.footerwidth: 100%;height: 300px;margin-top: 80px;.footer-boxwidth:150px;height: 240px;float: left;margin: 80px 60px 30px 50px;text-align: center;h3font-size: 20px;font-family:"华文彩云”；letter-spacing: 0.5em;.ol font-size: 15px;font-family:"幼圆”；color: gray;.ol a text-decoration: none; color: gray;.ol li:hover color:aqua ;/*part1*/.watch-msg width: 1000px; height: 450px; margin: 0 auto;position: relative; top: 50px;padding-top:80px ;.titlemargin-left: 100px; font-size: 35px; position: relative; top: -50px;.watch-img width: 800px;height: 380px;margin-left: 100px; position: relative; top: -50px;.watch-img img width: 250px; height: 320px;position: relative; top:10px;left: 10px;.presentwidth: 480px; height: auto; float: right;margin-right: 10px; margin-top: 5px;.present ul line-height: 40px;.spancolor: red;.sub1float: left;margin-left: 100px; margin-top: 20px;.subl inputtype="submit" width: 100px;height: 40px; font-size: 15px;font-family:"楷体”；font-weight: 300; letter-spacing: 0.2em; color: white;background-color: #3ea751; border: none;.sub1 a text-decoration: none;.shopcart background:url(./img/banner.jpg);width: 100%; height: 680px; position: relative; top: 60px;padding-top:80px ;.shopcart ul .li1,.shopcart ul .li3 width: 210px;.ul1,.ul2,.ul3,.ul5 width: 81.4%;margin-bottom: 20px;color: white;.ul1width: 1000px;font-size: 30px;text-align: center;color: white;height: 80px;font-family:"幼圆”；font-weight: bold;letter-spacing: 0.5em;.ul1 liwidth: 100%;.ul2width: 1000px;font-size: 20px;font-family:"隶书”；height: 50px;border: 2px solid gray;border-radius: 8px;.ul2 limargin-top: 12px;text-indent: 1em;.ul3width: 1000px; color:gray;height: 117px; background: url(./img/crossword.png);border-radius: 10px; .ul3 .li3font-size: 18px;font-family:"隶书”； margin-top: 50px; text-indent: 1em; .ul3 .li4 .close width: 15px; height: 15px; margin-top:5px ; position: relative; left: 140px; .ul3 .li3 a text-decoration: none; .li4 width: 15px; .ul5 text-align: right; width: 80%;font-size: 20px;font-family:"隶书”；height: 80px;.jsbwidth: 150px;float: right;.ul5 inputtype="button" font-size: 12px;height: 30px;width: 101px;color: white;background:#3ea751 ;letter-spacing: 0.2em;border: none;border-radius: 20px;.ul5 inputtype="button":hover background-color: #ff2775;.ul5 a text-decoration: none;/大反馈页大/.contactheight: 200px;padding-top: 80px;.form-contact width: 30%; height: 280px; margin: 0 auto;.name,.tel,.mail width: 150px; height: 15px;.textareawidth: 280px; height: 120px;.name,.tel,.mail,.textarea padding: 3px 8px 3px 8px; font-size: 10px;color: gray;.btn margin-left: 90px; margin-top:26px ; width: 100px;height: 25px; font-size: 15px;font-family:"楷体”；font-weight: 300; letter-spacing: 0.2em;color: white
