乔世帅综合技能训练技术文档模版_第1页
乔世帅综合技能训练技术文档模版_第2页
乔世帅综合技能训练技术文档模版_第3页
乔世帅综合技能训练技术文档模版_第4页
乔世帅综合技能训练技术文档模版_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《综合技能训练》技术文档项目名称：LIBERADEON网上手表专营店系/专业：计算机系软件技术年级：2015级学生姓名：乔世帅指导教师：刘效春―2016年11月10日摘要本文就网站的设计与制作，对全过程进行分析与研究，本文主要的工作集中在:.对自己设计的网站从设计理念到制作过程进行详细分析。.对使用到的Hbulider、Photoshop软件的设计方式进行解析。.就网站的设计与制作提出自己的观点以及建议。关键词：Hbulider,静态网站建设，HTML5、CSS3。ABSTRACTSInthispaper,websitedesignandproduction,thewholeprocessofanalysisandresearch,thispapermainlyfocusedonthe:1.Todesigntheirownwebsitesfromdesignconcepttoproductionprocesscarriedoutadetailedanalysis.2.OntheuseoftheDreamweaver,Photoshop,andsoftwaredesignmethodofanalysis.3.Websitedesignandproductionputforwardtheirviewsandsuggestions.KEYWORS:Hbulider,staticwebsiteconstruction,HTML5,CSS3.目录TOC\o"1-5"\h\z第1章概述4技术综述4项目背景与开发计划4开发平台5第2章需求分析5业务需求及功能列表5数据要求6第3章概要设计63.1涉及到的组件概要说明7第4章详细设计8主页的设计8分类展示页面设计14登陆注册页面设计14订单提交页面设计15购物车页面设计15商品详情页面设计16意见反馈页面设计17所有页面样式CSS代码17第5章代码设计405.1关键技术1:页面主导航的设计的代码举例40第6章测试42测试方案42性能测试42第7章结论43第8章参考文献43第9章致谢43第1章概述技术综述HTML5和CSS3不仅仅是两项新的Web技术标准，更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布，但是未来的发展前景已经可以预见，那就是HTML5必将被越来越多的Web开发人员所使用，各大主流浏览器厂家已经积极更新自己的产品，以更好地支持HTML5。项目背景与开发计划本项目是UBERAEDON品牌手表的一个网上手表专营店随着互联网的飞速发展，网购进入了越来越多的人的生活，更多的人购物选择网购来购买自己想买的商品。一直以来，手表都被人们看作一种时尚，越来越多的人选择佩戴名牌手表来提升自己的品味。本项目提出了几大需要解决的问题，分别为：1.图片文字的插入；2.链接的插入与使用。大致可以分为3个阶段解决问题。第一阶段：寻找制作需要用到的图片文字，并利用制图软件制作。第二阶段：使用Hbulider插入图片、文字、页面布局。第三阶段：使用Hbulider插入链接，并调试使用。开发平台1、Interi5,DDR28001G内存，硬盘160G串口。操作系统为XP,WIN7。2、必要的网络平台及需要的网络协议3、开发用的程序设计语言为HTML5、CSS3。使用的软件为Hbulider。4、打包发行用的工具为好压（.rar）第2章需求分析业务需求及功能列表数据分析2016年消费拥有国产表、原装进口表的比重分别为43%和40.8%,中高端手表消费在增长，低端产品消费在淡出。与2015年相比，年消费在5000元以上的比重由5.3%增长到7.13%,而100元以下的消费比重由5.1%降到1.78%。中国手表产量已占全球市场的七成，但出口总值仅占一成。而瑞士年产手表仅占全球产量的三成，但出口额却占四成。中国手表业今后要保持其发展，需从提高产量转型为技术含量的提升，逐步开发高端市场。随着人们收入水平的不断提高，对手表的需求也将越来越大。第3章概要设计本应用软件的组成结构HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。从Frontpage、Dreamweaver、UE,到SublimeText和JetBrains的WebStorm,Web编程的IDE已经更换了几批。HBuilder是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。"问至ijHBuilder的优势时，DCloudCEO王安表示。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。［3.1涉及到的软件概要说明我们需要在Hbulider软件实现。(1.)需要利用Hbulider插入网页连接。(2.)需要利用Photoshop制作主页和附页的所有图片。(3.)将制作的网站在相关的浏览器下测试，测试浏览器为：Chrome浏览器和火狐浏览器第4章详细设计4.1主页的设计LIBERAEDONi-t-uwazETHpin«<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>主页</title><linkrel="stylesheet"href="css/style.css"/></head><body><aname="123"></a><divclass="header"><ahref="index.html"><imgsrc="img/LOGO.jpg"class="logo"/></a><inputtype="text"class="search"/><selectclass="language"><optionvalue="English">English</option><optionvalue="Chine">中文</option></select><ahref="Login.html"class="lab1">登陆/注册  </a><imgsrc="img/cart-3.png"class="cart3"/><ahref="shopcart.html"class="lab2">我的购物车</a></div><h1>LIBER  AEDON</h1><hr/><divclass="ul"><ul><li><ahref="index.html">主页</a></li><li><ahref="show1.html”>男士手表</a></li><li><ahref="woman.html">女士手表</a></li><li><ahref="kid.html">儿童手表</a></li><li><ahref="contact.html”>意见反馈</a></li><li><ahref="Login.html">登陆/注册</a></li></ul></div><divid="plugin"><divid="movie"><imgsrc="img/bnr-1.jpg"/></div></div><divclass="down"><divclass="img-show"><divclass="images">ahref="part1.html"><imgsrc="img/abt-1.jpg"/></a></div><divclass="images">ahref="part1.html"><imgsrc="img/abt-2.jpg"/></a></div><divclass="images">ahref="part1.html"><imgsrc="img/abt-3.jpg"/></a></div></div><divclass="picture-show1"><divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-1.png"class="p1"/>冰球联盟限量版</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$1599.00</p></div>］一<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-2.png"class="p1"/>多功能石英表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$599.00</p></div>j<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-3.png"class="p1"/>男士尊贵石英表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价:$399.00</p></div>|<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-4.png"class="p1"/>男士商务手表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价:$399.00</p></div>|<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-5.png"class="p1"/>钢带水鬼手表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$888.00</p></div>]<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-6.png"class="p1"/>间金时尚罗马刻度</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$999.00</p></div>|_<divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-7.png"class="p1"/>全自动机械表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$590.00</p>第11页/共44页</div><divclass="picture">ahref="part1.html"class="a1"><imgsrc="img/p-8.png"class="p1"/>防水大表盘男士表</a>ahref="shopcart.html"><imgsrc="img/cart-2.png"class="cart2"/></a>pclass="price">单价：$299.00</p></div>|</div><divclass="footer"><divclass="footer-box">h3>联系我们</h3><olclass="ol"><li>FaceBook</li><br/><li>Twitter</li><br/><li>Google+</li></ol></div><divclass="footer-box">h3>信息</h3><olclass="ol"><li>特价</li><br/><li>新产品</li><br/><li>我们的商店</li><br/><li>联系我们</li><br/><li>畅销书</li></ol></div>]<divclass="footer-box">h3>我的反馈</h3>第12页/共44页<olclass="ol"><ahref="contact.html"><li>我的反馈</li></a><br/><li>我的信用</li><br/><li>我的退货</li><br><li>我的邮箱</li></ol></div><divclass="footer-box">h3>商店彳t息</h3><olclass="ol"><li>公司名称</li><br/><ahref="agree.html">|_<li>交易许可协议</li></a><br/><li>版权信息</li><br/><li>帮助中心</li></ol></div></div></div><divclass="hd"><ahref="#top"><imgsrc="img/hd.png"></a></div></body></html>4.2分类展示页面设计LIBERAEDOH4.3登陆注册页面设计£PKFUIBEJ?AEDQN4.4订单提交页面设计LIBERAEDOIM■■4.5购物车页面设计LIBERAED0N4.6商品详情页面设计LIBERAEDONEJi■="«*E*4*意见反馈页面设计U困ERAEPOhl■■■■所有页面样式CSS代码/*--所有页面一样的样式*/body{margin:0;padding:0;font:normalnormal15Px/2em”华文幼圆”;backgroundurl(../img/crossword.png);}.hd{width:30px;height:50px;position:fixednone;none;black;right:30px;bottom:30px;).hda{color:red;text-decoration:font-size:20px;).hda:hover{font-weight:300;color:blue;).hdaimg{width:30px;height:auto;).header{height:80px;width:100%background-color:).logo{width:100px;height:70px;margin-left:50px).search{width:180px;height:20px;第18页/共44页margin-left:10px;position:relativebottom:23px;background-image:url(../img/search.png);background-repeat:no-repeat;background-position:180px5px;padding:3px10px3px10px;border:none;border-radius:5px;}.language{width:100px;position:relative;left:25px;bottom:23px;padding:3px10px3px10px;border:none;border-radius:5px;}.cart3{position:absolute;top:30px;right:120px;}.lab1{text-decoration:none;color:white;font-size:17px;font-weight:300;sfont-family:"隶书"；position:absolute;top:20px;right:150px;}.lab1:hover,.lab2:hover{color:blue;}.lab2{text-decoration:none;color:white;font-size:17px;font-weight:300;sfont-family:"隶书"；position:absolute;top:20px;right:20px;}h1{text-align:center;font-size:50px;}hr{color:gray;}.ul{width:100%第20页/共44页text-align:center;)ul{width:980px;margin:0auto;)li{border:1pxsolidnone;list-style:none;float:left;/*background-color:yellow;*/)lia{display:block;text-decoration:none;color:black;font-size:20px;width:150px;line-height:50px;text-align:center;)lia:hover{color:red;background-color:#FCF7F9;).div{margin-left:0;)#plugin#movieimg{width:100%;height:400px;)/*首页*/.img-show{width:100%;height:300px;).images{width:260px;height:auto;float:left;margin-top:50px;margin-left:80px;).imagesimg{width:260px;height:auto;).picture-show{width:100%;height:600px;margin-top:100px;).picture-show1{width:100%;height:600px;第22页/共44页margin-top:30px;).a1{font-size:15px;font-family:"楷体";color:black;font-weight:100;text-decoration:none;).a1:hover{color:blue;).picture{width:150px;height:330px;float:left;margin-top:0px;margin-left:100px;).picture.p1{width:150px;height:auto;).p1{float:left;margin:0auto;).cart2{第23页/共44页border:none;position:relative;top:3px;right:0px;).price{color:red;).context{background:url(../img/banner.jpg);width:100%;height:400px;position:relative;top:60px;padding-top:80px;).down{width:1100px;margin:auto;}l/*注册页面*/.context-enroll{

background:url(../img/banner.jpg);width:100%;height:450px;position:relative;第24页/共44页top:60px;padding-top:80px;).form-login{text-align:center;width:400px;height:320px;background-color:#2B2B36;margin:0auto;border-radius:20px;).avtar{width:80px;margin:0auto;position:relative;top:20px;).textbox1{width:220px;margin:0auto;).textbox2{width:220px;margin:0auto;).form-login[type="text”]{width:70%;padding:1em2em1em3em;color:#9199aa;第25页/共44页font-size:15px;outline:none;background:url(../img/adm.png)no-repeat10px15px;border:none;font-weight:100;border-bottom:1pxsolid#484856;margin-top:2em;}.form-login[type="password"]{width:70%;padding:1em2em1em3em;color:#9199aa;font-size:12px;outline:none;background:url(../img/key.png)no-repeat10px15px;border:none;font-weight:100;border-bottom:1pxsolid#484856;margin-top:2em;}.submit1,.submit2{height:20px;border-radius:20px;padding:5px20px5px20px;border:none;margin-top:35px;background:#3ea751;font-size:12px;第26页/共44页height:30px;width:101px;color:white;).submit1:hover,.submit2:hover{background-color:#ff2775;color:black;).submit1{border-left:none;margin-right:15px;).submit2{border-right:none;margin-left:15px;).form-logina{text-decoration:none;).form-enroll{text-align:center;background-color:#2B2B36;color:white;width:380px;height:350px;margin:0auto;border-radius:20px;padding-top:20px;).form-enrollp{第27页/共44页font-size:28px;font-family:"幼圆"；font-weight:bold;).form-enrollinput[type="text"],.form-enrollinput[type="button"],.form-enrollinput[type="password"]{height:20px;border-radius:20px;padding:5px20px5px20px;border:none;).form-enroll.texbox1,.form-enrollinput[type="password"]{width:210px;).form-enroll.texbox2{width:110px;).form-enrollinput[type="button"]{font-size:12px;height:30px;width:101px;color:white;background:#3ea751;letter-spacing:0.2em;).form-enrollinput[type="button"]:hover{第28页/共44页background:#ff2775;).but1{margin-right:22px;).form-enrollforma{text-decoration:none;).but2{margin-left:24px;)/*footer*/.footer{width:100%;height:300px;margin-top:80px;).footer-box{width:150px;height:240px;float:left;margin:80px60px30px50px;text-align:center;)h3{font-size:20px;font-family:"华文彩云"letter-spacing:0.5em;).ol{font-size:15px;font-family:"幼圆";color:gray;}.ola{text-decoration:none;color:gray;}.olli:hover{color:aqua;}/*part1*/.watch-msg{width:1000px;height:450px;margin:0auto;position:relative;top:50px;padding-top:80Px;}.title{margin-left:100px;font-size:35px;position:relative;top:-50px;}.watch-img{width:800px;第30页/共44页height:380px;margin-left:100px;position:relative;top:-50px;}.watch-imgimg{width:250px;height:320px;position:relative;top:10px;left:10px;}.present{width:480px;height:auto;float:right;margin-right:10px;margin-top:5px;}.presentul{line-height:40px;}.span{color:red;}.sub1{float:left;margin-left:100px;margin-top:20px;}.sublinput[type="submit"]{width:100px;height:40px;font-size:15px;font-family:"楷体"；font-weight:300;letter-spacing:0.2em;color:white;background-color:#3ea751;border:none;}.sub1a{text-decoration:none;}.shopcart{background:url(../img/banner.jpg);width:100%;height:680px;position:relative;top:60px;padding-top:80px;H.shopcartul.li1,.shopcartul.li3{width:210px;}.ul1,.ul2,.ul3,.ul5{width:81.4%;margin-bottom:20px;第32页/共44页color:white;).ul1{width:1000px;font-size:30px;text-align:center;color:white;height:80px;font-family:"幼圆";font-weight:bold;letter-spacing:0.5em;).ul1li{width:100%;).ul2{width:1000px;font-size:20px;font-family:"隶书";height:50px;border:2pxsolidgray;border-radius:8px;).ul2li{margin-top:12px;text-indent:1em;).ul3{第33页/共44页width:1000px;color:gray;height:117px;background:url(../img/crossword.png);border-radius:10px;}.ul3.li3{font-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.li3a{text-decoration:none;}.li4{width:15px;}.ul5{text-align:right;width:80%;第34页/共44页font-size:20px;font-family:"隶书"；height:80px;).jsb{width:150px;float:right;).ul5input[type="button"]{font-size:12px;height:30px;width:101px;color:white;background:#3ea751;letter-spacing:0.2em;border:none;border-radius:20px;).ul5input[type="button"]:hover{background-color:#ff2775;).ul5a{text-decoration:none;)/*反馈页*/.contact{height:200px;padding-top:80px;第35页/共44页).form-contact{width:30%;height:280px;margin:0auto;).name,.tel,.mail{width:150px;height:15px;).textarea{width:280px;height:120px;).name,.tel,.mail,.textarea{padding:3px8px3px8px;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;第36页/共44页color:white;background-color:#3ea751;border:none;border-radius:12px;}.btn:hover{background:#ff2775;}.agreemes{text-align:center;}.agreemestextarea{width:700px;height:500px;margin-top:50px;padding:20px20px20px20px;position:relative;bottom:-50px;}/*pay*/.pay{width:100%;height:380px;background:url(../img/banner.jpg);position:relative;top:100px;padding:20px025px0;}.pay-box{第37页/共44页width:300px;height:360px;margin:0auto;background:white;border-radius:20px;padding-left:50px;font-size:15px;line-height:15px;}.pay-boxp{font-size:10px;}.pay-boxselect{font-size:10px;height:20px;padding:2px0px2px5px;}.pay-boxinput[type="number"]{font-size:10px;width:30px;height:12px;padding:2px0px2px12px;}.pay-boxinput[type="text"]{font-size:10px;width:100px;height:12px;padding:2px5px2px5px;}.pay-boxinput[type="radio"]{第38页/共44页border:1pxsolid#369;color:red;padding:5;).pay-boxinput[type="submit"]{font-size:12px;height:25px;width:101px;color:white;background:#3ea751;letter-spacing:0.2em;border-radius:10px;border:none;margin-left:80px;margin-top:1

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论