web前端畢業(yè)設(shè)計(jì)論文_第1頁
web前端畢業(yè)設(shè)計(jì)論文_第2頁
web前端畢業(yè)設(shè)計(jì)論文_第3頁
web前端畢業(yè)設(shè)計(jì)論文_第4頁
web前端畢業(yè)設(shè)計(jì)論文_第5頁
已閱讀5頁，還剩150頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

20152015版畢業(yè)論文題目：響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)學(xué)生姓名：羅智剛學(xué)號(hào)：1202012132專業(yè)班級(jí)：B12計(jì)算機(jī)科學(xué)與技術(shù)2班指導(dǎo)教師：李莉企業(yè)導(dǎo)師：林志宏二級(jí)學(xué)院：電氣與信息工程學(xué)院摘要在信息高速發(fā)展的這個(gè)時(shí)代，網(wǎng)絡(luò)作為現(xiàn)今最為方便快捷的媒介也越來越被人們接受，并且融入我們的生活。在2015年時(shí)，隨著HTML5在國內(nèi)的興起，也在不斷的推進(jìn)著信息時(shí)代的發(fā)展，網(wǎng)站也逐漸脫離了傳統(tǒng)的枯燥頁面風(fēng)格，如今的HTML5比起以前的HTML來說，更容易維護(hù)和管理，而且還能實(shí)現(xiàn)跨平臺(tái)開發(fā)，減少開發(fā)成本。本論文主要圍繞寫意集團(tuán)的HTML5響應(yīng)式網(wǎng)站為開發(fā)主題，用到的也是最必備的三個(gè)技能元素，在布局頁面時(shí)，用HTML將元素進(jìn)行定義，布局基礎(chǔ)布局；css對(duì)展示的HTML元素布局進(jìn)行定位渲染，然后利用Javascript或者jQuery實(shí)現(xiàn)相應(yīng)的效果和交互。雖然這么看起來很簡單，但這里需要認(rèn)真了解的東西很多。在開發(fā)前，需要對(duì)這些概念弄清楚，在開發(fā)過程中還要考慮兼容，性能等各種問題。分析并解決實(shí)現(xiàn)中的若干技術(shù)問題：介紹企業(yè)官網(wǎng)個(gè)性化頁面的背景及HTML5響應(yīng)式布局的一般原理；闡述整個(gè)企業(yè)官網(wǎng)的結(jié)構(gòu)及工作原理；分析實(shí)現(xiàn)中的難點(diǎn)和重點(diǎn)；關(guān)鍵詞：HTML5;CSS3;響應(yīng)式;javascript;網(wǎng)站美化;交互設(shè)計(jì)

abstract Inthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts. ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon. Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目錄TOC\o"1-4"\h\z\uHYPERLINKcontent="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">

<linkrel="stylesheet"href="css/reset.css"/>

<linkrel="stylesheet"href="css/style.css"/>

<linkrel="stylesheet"href="css/media.css"/>

<scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script>

<scripttype="text/javascript"src="js/tween.js"></script>

<scriptsrc="js/scrollTopJQ.js"></script>

</head>

<body>

<!--容器層-->

<!--banner開始-->

<divid="banner">

<divclass="logo">

<imgsrc="imgs/logo-02.png"alt=""/>

<pclass="banner_tit">領(lǐng)先的數(shù)字展示方案提供商</p>

</div>

<divid="tab_box">

<imgclass="img"src="imgs/index_banner.jpg"id="img"/><!--用來撐開高度的img-->

<divclass="view"id="view">

<imgsrc="imgs/index_banner.jpg"alt=""style="opacity:1;filter:alpha(opacity=100)"/>

<imgsrc="imgs/index_banner2.jpg"alt=""/>

<imgsrc="imgs/index_banner.jpg"alt=""/>

<imgsrc="imgs/index_banner.jpg"alt=""/>

</div>

<ulclass="tab_btnclear"id="tab_btn">

<liclass="btn_selecet"></li>

<li></li>

<li></li>

<liclass="last"></li>

</ul>

</div>

<aclass="to_bottom"id="to_bottom">

<imgsrc="imgs/to_bottom.jpg"alt=""/>

</a>

</div>

<!--banner結(jié)束-->

<!--首頁導(dǎo)航-->

<divclass="nav_mainclear"id="nav_main">

<divclass="zy_navclear">

<ulclass="nav_left">

<li><ahref="index.html"class="nav_select">首頁</a></li>

<liid="menu_li">

<ahref="about.html">關(guān)于寫意</a>

<imgsrc="imgs/nav_bg.png"alt=""id="menu_btn"/>

<divclass="list_dragdown"style="display:none"id="menu">

<divclass="listtop"></div>

<ulclass="clear">

<li><ahref="fuli.html">企業(yè)文化</a></li>

<liclass="bordernone"><ahref="new.html">新聞中心</a></li>

</ul>

<divclass="listbottom"></div>

</div>

</li>

<li><ahref="http://6./">寫意數(shù)字</a></li>

<li><ahref="http://3./">意凡設(shè)計(jì)</a></li>

<li><ahref="http://4./">寫意BIM</a></li>

<li><ahref="###">寫意展示</a></li>

<li><ahref="###">銀河魔方</a></li>

<li><ahref="###">寫意傳播</a></li>

<li><ahref="recruitment.html">人才招聘</a></li>

<liclass="last"><ahref="contact.html">聯(lián)系我們</a></li>

</ul>

<!--隱藏的導(dǎo)航欄-->

<divid="nav_btn"><imgsrc="imgs/nav.png"/>

<ulid="yc_nav">

<li><ahref="index.html">首頁</a></li>

<li><ahref="about.html">關(guān)于寫意</a></li>

<li><ahref="http://6./">寫意數(shù)字</a></li>

<li><ahref="http://3./">意凡設(shè)計(jì)</a></li>

<li><ahref="http://4./">寫意BIM</a></li>

<li><ahref="">寫意展示</a></li>

<li><ahref="">銀河魔方</a></li>

<li><ahref="">寫意傳播</a></li>

<li><ahref="recruitment.html">人才招聘</a></li>

<li><ahref="contact.html">聯(lián)系我們</a></li>

</ul>

</div>

<divclass="toprf"><imgsrc="imgs/goTop.png"alt=""id="top"/></div>

</div>

</div>

<!--首頁導(dǎo)航結(jié)束-->

<!--b_detail品牌-->

<divclass="wrap"id="nav_bu">

<divclass="gbrands"id="thegbrands">

<divclass="gbrandTopclear">

<divclass="title">

<divclass="hrleft"></div>

<H6>旗下品牌</H6>

<p>GROUP'SBRANDS</p>

<divclass="hrright"></div>

</div>

</div>

<divclass="gbrands_mainclear"id="gbrands">

<divclass="gbranditem">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<imgclass="imglogoimg1colors"src="imgs/table-logo.png"alt=""/>

<imgclass="imglogoimg1"src="imgs/table-logo2.png"alt=""/>

<h5>寫意數(shù)字</h5>

<p>為設(shè)計(jì)領(lǐng)域提供效果圖、動(dòng)畫多媒體及三維互動(dòng)業(yè)務(wù)服務(wù)</p>

<imgstyle="vertical-align:top"src="imgs/g_brands1.jpg"alt=""/>

</div>

<divclass="gbranditemgbranlast">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<imgclass="imglogoimg2colors"src="imgs/table-evon.png"alt=""/>

<imgclass="imglogoimg2"src="imgs/table-evon2.png"alt=""/>

<h5>意凡設(shè)計(jì)</h5>

<p>室內(nèi)創(chuàng)意設(shè)計(jì)及后期施工，為品牌解決全套室內(nèi)裝修</p>

<imgstyle="vertical-align:top"src="imgs/g_brands2.jpg"alt=""/>

</div>

<divclass="gbranditemclearMargin">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<imgclass="imglogoimg3colors"src="imgs/table-bim.png"alt=""/>

<imgclass="imglogoimg3"src="imgs/table-bim2.png"alt=""/>

<h5>寫意BIM</h5>

<p>建筑信息模型在建筑領(lǐng)域的操作應(yīng)用及推廣</p>

<imgstyle="vertical-align:top"src="imgs/g_brands3.jpg"alt=""/>

</div>

<divclass="gbranditemgbranlast">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<h5>意展展示</h5>

<p>提供策劃、設(shè)計(jì)及施工三環(huán)一體化解決方案</p>

<imgstyle="vertical-align:top"src="imgs/g_brands4.jpg"alt=""/>

</div>

<divclass="gbranditem">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<h5>銀河魔方</h5>

<p>影視制作、廣告拍攝、影視項(xiàng)目策劃</p>

<imgstyle="vertical-align:top"src="imgs/g_brands5.jpg"alt=""/>

</div>

<divclass="gbranditemclearMarginR">

<imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/>

<h5>寫意傳播</h5>

<p>企業(yè)品牌定位與策劃、VI設(shè)計(jì)、整合營銷服務(wù)</p>

<imgstyle="vertical-align:top"src="imgs/g_brands6.jpg"alt=""/>

</div>

</div>

</div>

<!--旗下品牌結(jié)束-->

<!--服務(wù)項(xiàng)目-->

<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論