喬世帥綜合技能訓(xùn)練技術(shù)文檔模版_第1頁
喬世帥綜合技能訓(xùn)練技術(shù)文檔模版_第2頁
喬世帥綜合技能訓(xùn)練技術(shù)文檔模版_第3頁
喬世帥綜合技能訓(xùn)練技術(shù)文檔模版_第4頁
喬世帥綜合技能訓(xùn)練技術(shù)文檔模版_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

《綜合技能訓(xùn)練》技術(shù)文檔項目名稱：LIBERADEON網(wǎng)上手表專營店系/專業(yè)：計算機系軟件技術(shù)年級：2015級學(xué)生姓名：喬世帥指導(dǎo)教師：劉效春―2016年11月10日摘要本文就網(wǎng)站的設(shè)計與制作，對全過程進(jìn)行分析與研究，本文主要的工作集中在:.對自己設(shè)計的網(wǎng)站從設(shè)計理念到制作過程進(jìn)行詳細(xì)分析。.對使用到的Hbulider、Photoshop軟件的設(shè)計方式進(jìn)行解析。.就網(wǎng)站的設(shè)計與制作提出自己的觀點以及建議。關(guān)鍵詞：Hbulider,靜態(tài)網(wǎng)站建設(shè)，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技術(shù)綜述4項目背景與開發(fā)計劃4開發(fā)平臺5第2章需求分析5業(yè)務(wù)需求及功能列表5數(shù)據(jù)要求6第3章概要設(shè)計63.1涉及到的組件概要說明7第4章詳細(xì)設(shè)計8主頁的設(shè)計8分類展示頁面設(shè)計14登陸注冊頁面設(shè)計14訂單提交頁面設(shè)計15購物車頁面設(shè)計15商品詳情頁面設(shè)計16意見反饋頁面設(shè)計17所有頁面樣式CSS代碼17第5章代碼設(shè)計405.1關(guān)鍵技術(shù)1:頁面主導(dǎo)航的設(shè)計的代碼舉例40第6章測試42測試方案42性能測試42第7章結(jié)論43第8章參考文獻(xiàn)43第9章致謝43第1章概述技術(shù)綜述HTML5和CSS3不僅僅是兩項新的Web技術(shù)標(biāo)準(zhǔn)，更代表了下一代HTML和CSS技術(shù)。雖然HTML5的標(biāo)準(zhǔn)規(guī)范還沒有正式發(fā)布，但是未來的發(fā)展前景已經(jīng)可以預(yù)見，那就是HTML5必將被越來越多的Web開發(fā)人員所使用，各大主流瀏覽器廠家已經(jīng)積極更新自己的產(chǎn)品，以更好地支持HTML5。項目背景與開發(fā)計劃本項目是UBERAEDON品牌手表的一個網(wǎng)上手表專營店隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)購進(jìn)入了越來越多的人的生活，更多的人購物選擇網(wǎng)購來購買自己想買的商品。一直以來，手表都被人們看作一種時尚，越來越多的人選擇佩戴名牌手表來提升自己的品味。本項目提出了幾大需要解決的問題，分別為：1.圖片文字的插入；2.鏈接的插入與使用。大致可以分為3個階段解決問題。第一階段：尋找制作需要用到的圖片文字，并利用制圖軟件制作。第二階段：使用Hbulider插入圖片、文字、頁面布局。第三階段：使用Hbulider插入鏈接，并調(diào)試使用。開發(fā)平臺1、Interi5,DDR28001G內(nèi)存，硬盤160G串口。操作系統(tǒng)為XP,WIN7。2、必要的網(wǎng)絡(luò)平臺及需要的網(wǎng)絡(luò)協(xié)議3、開發(fā)用的程序設(shè)計語言為HTML5、CSS3。使用的軟件為Hbulider。4、打包發(fā)行用的工具為好壓（.rar）第2章需求分析業(yè)務(wù)需求及功能列表數(shù)據(jù)分析2016年消費擁有國產(chǎn)表、原裝進(jìn)口表的比重分別為43%和40.8%,中高端手表消費在增長，低端產(chǎn)品消費在淡出。與2015年相比，年消費在5000元以上的比重由5.3%增長到7.13%,而100元以下的消費比重由5.1%降到1.78%。中國手表產(chǎn)量已占全球市場的七成，但出口總值僅占一成。而瑞士年產(chǎn)手表僅占全球產(chǎn)量的三成，但出口額卻占四成。中國手表業(yè)今后要保持其發(fā)展，需從提高產(chǎn)量轉(zhuǎn)型為技術(shù)含量的提升，逐步開發(fā)高端市場。隨著人們收入水平的不斷提高，對手表的需求也將越來越大。第3章概要設(shè)計本應(yīng)用軟件的組成結(jié)構(gòu)HBuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE?？?，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。同時，它還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。從Frontpage、Dreamweaver、UE,到SublimeText和JetBrains的WebStorm,Web編程的IDE已經(jīng)更換了幾批。HBuilder是DCloud(數(shù)字天堂)推出一款支持HTML5的Web開發(fā)IDE。快，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML、js、css的開發(fā)效率。"問至ijHBuilder的優(yōu)勢時，DCloudCEO王安表示。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse,所以順其自然地兼容了Eclipse的插件。［3.1涉及到的軟件概要說明我們需要在Hbulider軟件實現(xiàn)。(1.)需要利用Hbulider插入網(wǎng)頁連接。(2.)需要利用Photoshop制作主頁和附頁的所有圖片。(3.)將制作的網(wǎng)站在相關(guān)的瀏覽器下測試，測試瀏覽器為：Chrome瀏覽器和火狐瀏覽器第4章詳細(xì)設(shè)計4.1主頁的設(shè)計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"/>冰球聯(lián)盟限量版</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"/>男士商務(wù)手表</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>聯(lián)系我們</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>新產(chǎn)品</li><br/><li>我們的商店</li><br/><li>聯(lián)系我們</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>交易許可協(xié)議</li></a><br/><li>版權(quán)信息</li><br/><li>幫助中心</li></ol></div></div></div><divclass="hd"><ahref="#top"><imgsrc="img/hd.png"></a></div></body></html>4.2分類展示頁面設(shè)計LIBERAEDOH4.3登陸注冊頁面設(shè)計￡P(guān)KFUIBEJ?AEDQN4.4訂單提交頁面設(shè)計LIBERAEDOIM■■4.5購物車頁面設(shè)計LIBERAED0N4.6商品詳情頁面設(shè)計LIBERAEDONEJi■="?*E*4*意見反饋頁面設(shè)計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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論