《HTML5應(yīng)用技術(shù)開發(fā)》實(shí)踐考核工程設(shè)計(jì)說明書

XXXXX工程設(shè)計(jì)說明書工程名稱： XXXX網(wǎng)站的的設(shè)計(jì)與制作專 業(yè)：XXXXXXXXXXXXXXXXXXXXXXXXXXXX學(xué) 號(hào)：姓 名：任課教師：XXX年XX日考核工程及要求1、考核工程：以小組〔2人〕xxx網(wǎng)站的設(shè)計(jì)與制作，網(wǎng)站主題自擬，教師審核。2、考核要求10張以上的頁面；HTML5的功能：Webstorage、storage大事監(jiān)聽、canvas、音頻視頻、GPS每一個(gè)頁面至少添加一個(gè)JavaScript特效；頁面布局合理，樣式設(shè)計(jì)簡(jiǎn)潔大方；按要求書寫設(shè)計(jì)說明書，要求內(nèi)容具體、格式標(biāo)準(zhǔn)。名目小米商城需求分析 1手機(jī)網(wǎng)站設(shè)計(jì)的緣由 1手機(jī)網(wǎng)站設(shè)計(jì)的目標(biāo) 1\l“_TOC_250003“小米商城的功能 1\l“_TOC_250002“主頁功能 1\l“_TOC_250001“副頁功能 2具體功能 3\l“_TOC_250000“布局與配色設(shè)計(jì) 6主頁的布局與配色 6副頁的布局與配色 6具體頁的布局與配色 7具體設(shè)計(jì) 7導(dǎo)航設(shè)計(jì) 7欄目設(shè)計(jì) 8超鏈接設(shè)計(jì) 9輪播圖效果設(shè)計(jì) 10倒計(jì)時(shí)效果設(shè)計(jì) 10地圖的設(shè)計(jì) 125．總結(jié) 136．附錄 14小米商城網(wǎng)站需求分析小米商城設(shè)計(jì)的緣由銷售已經(jīng)變成了現(xiàn)在較大的一個(gè)營(yíng)銷模式。的商品資料給使用者參考,網(wǎng)絡(luò)充裕的資訊便利了客戶通過信息進(jìn)展對(duì)商品的選小米商城設(shè)計(jì)的目標(biāo)會(huì)利益最大化。改造后的網(wǎng)站應(yīng)到達(dá)如下具體目標(biāo):網(wǎng)站架構(gòu)合理有用:在進(jìn)展方案設(shè)計(jì)時(shí)，考慮到技術(shù)變化、網(wǎng)速提高、用戶將實(shí)際應(yīng)用放在首位。系統(tǒng)架構(gòu)統(tǒng)一開放:我們將實(shí)行全局規(guī)劃、分塊遷移的方式，使系統(tǒng)架構(gòu)在定性及維護(hù)本錢。業(yè)務(wù)流程有用有效:良好的業(yè)務(wù)流程將有效提高系統(tǒng)的性能和人員的協(xié)調(diào)，通過對(duì)核心業(yè)務(wù)的分解和整合，建立完善的業(yè)務(wù)流程治理體系。數(shù)據(jù)存儲(chǔ)安全-提高數(shù)據(jù)的性能和利用率。小米商城的功能主頁功能網(wǎng)頁制作的工具:Hbuilder多媒體設(shè)計(jì)的制作工具:PhotoshopCS61應(yīng)用到的設(shè)計(jì)技術(shù):HTML5、CSS樣式、JavaScripthtml、JavaScript2.1-1所示：副頁功能

2.1-12.2-12.2-1商品列表2具體功能

2.2-2商品樣式Canvas倒計(jì)時(shí)，這些是網(wǎng)站必不行少的網(wǎng)頁模塊，頁面布局合理有序，整體美觀大方，簡(jiǎn)潔素雅，有用性很強(qiáng)，而且運(yùn)行穩(wěn)定，兼容性高。在掃瞄者充分了解我們的網(wǎng)站后可以選擇更多的了解。Canvas2.3-12.3-1時(shí)鐘+漸變背景3H52.3-2所示：2.3-2拖拽圖片2.3-3所示：2.3-3文件上傳此功能的實(shí)現(xiàn)是圖片的旋轉(zhuǎn)rotat〕和放大scal2.3-4所示：2.3-4工程介紹DIV設(shè)計(jì)和CSS42.3-52.3-5小米商城2.3-6所示：2.3-6百度地圖JS2.3-7所示：5布局與配色設(shè)計(jì)

2.3-7倒計(jì)時(shí)主頁的布局與配色div+css樣式來進(jìn)展整體布局，先制作了兩個(gè)大盒子來當(dāng)做3.1-1所示。列表內(nèi)容〔ul〕

主 界 面〔Canvas〕3.1-1主頁框架副頁的布局與配色div+css，顏色搭配整體呈現(xiàn)亮銀色，令人感到美觀大方而又暗隱光華。如圖3.2-1所示：6Div1〔img〕Div2〔img〕Div3〔img〕Div4〔img〕Div5〔img〕Div6Div7Div8Div9Div10〔img〕〔img〕〔img〕〔img〕〔img〕〔table〔table〕列圖片輪播表〔ul〕〔div〕ulVideoImgVideo具體頁的布局與配色td(colspan=“4”)tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕td(colspan=“4”)tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕tr〔width=25%〕(span)(img)3.3-1圖片拖拽框架具體設(shè)計(jì)導(dǎo)航設(shè)計(jì)<ulclass=“nav_ul“><li><ahref=“#“target=“_blank“>科技創(chuàng)</a></li><li><ahref=“#“target=“_blank“>軟件測(cè)試</a></li><li><ahref=“#“target=“_blank“>小米商品</a></li>7<li><ahref<li><ahref=“#“target=“_blank“>黑科技</a><li><ahref=“#“target=“_blank“></a></li><li><ahref=“#“target=“_blank“>自助效勞</a></li><li><ahref=“#“target=“_blank“>官網(wǎng)微信</a></li><li> href=“#“target=“_blank“>科技水平</a></li><li><ahref=“#“target=“_blank“>先行賠付<i></i></a>欄目設(shè)計(jì)<liid=“xiaomiphone“><divclass=“menu_content“><imgsrc=“img/mi4!160x110.jpg“><pclass=“menu_content_tit“4</p><pclass=“menu_content_price“>1499</p></div><spanclass=“menu_content_line“></span><divclass=“menu_content“><imgsrc=“img/minote!160x110.jpg“><pclass=“menu_content_tit“NOTE</p><pclass=“menu_content_price“>1999</p></div><spanclass=“menu_content_line“></span><divclass=“menu_content“><imgsrc=“img/minotepro!160x110.jpg“><pclass=“menu_content_tit“NOTE</p><pclass=“menu_content_price“>2999</p></div></li>8超鏈接設(shè)計(jì)<divclass=“nav-links“><ahref=“index.html“class=“l(fā)ink“>主頁</a><ahref=“時(shí)鐘.html“class=“l(fā)ink“>時(shí)鐘</a><ahref=“Move.html“class=“l(fā)ink“>拖拽</a><ahref=“Rotate-self.html“class=“l(fā)ink“>工程介紹</a><ahref=“Upload.html“class=“l(fā)ink“>上傳</a><ahref=“Shopping.html“class=“l(fā)ink“>商店</a><ahref=“地圖.html“class=“l(fā)ink“>地圖</a><ahref=“About.html“class=“l(fā)ink“>最動(dòng)態(tài)</a></div>9輪播圖效果設(shè)計(jì)<divid=“big_banner_pic_wrap“><ulid=“big_banner_pic“><li><imgsrc=“img/T1hiDvBvVv1RXrhCrK.jpg“></li><li><imgsrc=“img/T1jrxjB_VT1RXrhCrK.jpg“></li><li><imgsrc=“img/T1oTJjBKKT1RXrhCrK.jpg“></li><li><imgsrc=“img/T1RICjB7DT1RXrhCrK.jpg“></li><li><imgsrc=“img/T1vWdTBKDv1RXrhCrK.jpg“></li></ul></div>functionautomatic{i+=1; if(i>=allimg){ i=0;}img_change;}change_self_time=setInterval(automatic,3000);$(“#big_banner_change_wrap“).hover(function{clearInterval(change_self_time);$(“#big_banner_change_wrap“).children.show;},function{change_self_time=setInterval(automatic,3000);$(“#big_banner_change_wrap“).children.hide;})$(“#big_banner_change_prev“).click(function{ i+=1;if(i>=allimg){ i=0;}img_change;})$(“#big_banner_change_next“).click(function{i-=1;if(i<=0){i=allimg-1;}img_change; })})10倒計(jì)時(shí)效果設(shè)計(jì)<divclass=“header“><h1>努力研發(fā)中……</h1></div><divclass=“content“><divclass=“content1“> <imgsrc=“img/work.png“alt=“under-construction“> </div><divclass=“content2“><div估量完成時(shí)間：</h1></div><divclass=“timer_wrap“><divid=“counter“></div></div></div><div<p>訂閱我們的官網(wǎng)，關(guān)注最動(dòng)態(tài)</p> <ul<inputtype=“text“class=“email“placeholder=“輸入您的電子郵件地址“required=““><inputtype=“submit“value=“提交“><divclass=“clear“></div></form></li></ul> </div></div>1地圖的設(shè)計(jì)<scripttype=“text/javascript“>//varmap=newBMap.Map(“allmap“,{});

minZoom:5,maxZoom:19//初始化地圖，設(shè)置中心點(diǎn)和顯示級(jí)別map.centerAndZoom(newBMap.Point(120.3836.0719);map.enableScrollWheelZoom(true);//將控件〔平移縮放控件〕添加到地圖上map.addControl(newBMap.NavigationControl);//inputmap.addEventListener(“click“function(edocument.getElementById(”lat”).value=e.point.lat;document.getElementById(”lng”).value=e.point.lng;});//創(chuàng)立位置檢索、周邊檢索和范圍檢索varlocal=newBMap.LocalSearch(map,{renderOptions:{map:map}});//發(fā)起檢索functiontheLocationvarcity=document.getElementById(“cityName“).value;if(city!=““){local.search(city);}};//彈出經(jīng)緯度functionsubmit{varlat=document.getElementById(”lat”);12varlngdocument.getElementById(”lng”alert(“經(jīng)度：“+lng.value+“\n“+“緯度：“+lat.value);};</script>總結(jié)有很多不是很理解的難題，但相比以前我已經(jīng)懂得了很多，有了很大的改進(jìn)。PhotoShopCS6、Hbuilder等工具。信任即使以后走向社會(huì)，參與工作，這項(xiàng)技能也會(huì)永久webaspjava言類似，都是運(yùn)行在效勞器上的程序，用來動(dòng)態(tài)地為用戶供給網(wǎng)頁效勞。h5編程才能變得更加?jì)故?，期望以后可以在您的指引下，連續(xù)勇往直前，登臨頂峰。13附錄*{Div-sizing:border-Div;}html,body{height:100vh;width:100%;}body{margin:0;padding:0;background-image:radial-gradient(circle248pxatcenter,#16d9e30%,#30c7ec47%,#46aef7100%);}nav{overflow:hidden;position:relative;transform:translateX(-300px);height:100%;width:400px;transition:all800mscubic-bezier(.8,0,.33,1);border-radius:0%0%100%50%;}nav.nav-open{transform:translateX(0px);border-radius:0%0%0%0%;background:rgba(255,255,255,0.6);}nav.menu-btn{position:absolute;top:10%;right:5%;padding:0;width:30px;cursor:pointer;z-index:2;14}nav.menu-btn.line{padding:0;width:30px;background:#fff;height:2px;margin:5px0;transition:all700mscubic-bezier(.9,0,.33,}nav.menu-btn.line.line--1{width:30px;transform:rotate(0)translateY(0);}nav.menu-btn.line.line--1.line-cross{width:30px;transform:rotate(45deg)translateY(10px);background:rgba(0,0,0,0.6);}nav.menu-btn.line.line--2{width:28px;transform:translateX(0);}nav.menu-btn.line.line--2.line-fade-out{width:28px;transform:translate(30px);opacity:0;}nav.menu-btn.line.line--3{width:20px;transform:rotate(0)translateY(0);}nav.menu-btn.line.line--3.line-cross{width:30px;transform:rotate(-45deg)translateY(-10px);background:rgba(0,0,0,0.6);}nav.nav-links{ position:absolute;left:0;15

1);top:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateX(-100px);opacity:0;transition:all900mscubic-bezier(.9,0,.33,1);}nav.nav-links.fade-in{ opacity:1;transform:translateX(0px);}nav.nav-links.link{margin:20px0;text-decoration:none;font-family:sans-serif;color:rgba(0,0,0,0.9);font-weight:700;text-transform:uppercase;font-size:1.2rem;transition:all300mscubic-bezier(.9,0,.33,1);}nav.nav-links.link:hover{ color:rgba(0,0,0,.5);}.inform{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,0.8);font-size:2rem;font-family:sans-serif;16text-transform:uppercase;letter-spacing:5px;text-shadow:0020pxrgba(0,0,0,0.6);}a{margin:020px;color:#fff;font-size:2rem;transition:all400msease;}a:hover{color:#222;}*{margin:0;padding:0;Div-sizing:border-Div;}.card{width:100%;height:100vh;background:#63c0e1;background:linear-gradient(-150deg,#4ad8c3,#83a2f1);display:flex;justify-content:center;align-items:center;}.text{color:#fff;text-align:center;text-shadow:1px1px5pxrgba(0,0,0,0.20);width:410px;position:relative;}h1{font-family:sans-serif;font-size:120px;text-transform:uppercase;letter-spacing:5px;17}span{font-size:20px;letter-spacing:0.4px;}.bg-transparent{width:35%;height:280px;background-color:rgba(255,255,255,0.12);position:absolute;}.left{bottom:-140px;left:15px;}.center{top:-50px;left:0;r