web前端畢業(yè)設計論文響應式企業(yè)網站設計與實現(xiàn)

摘要2015HTML5HTML5HTML減少開發(fā)成本。HTML5HTMLHTMLJavascriptjQuery種問題。HTML5關鍵詞：HTML5;CSS3;響應式;javascript;網站美化;交互設計abstractInthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasbeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofinthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,use Javascript or jQuery to achieve the appropriate effects andinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon.Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目 錄第一章 緒論 1本課題研究的背景和目的 1國內外HTML5響應式企業(yè)網站建設的狀況 1本章小結 2第二章前端開發(fā)及相關技術 3HTML5前端開發(fā)環(huán)境 3HTML5前端開發(fā)工具 3HTML5前端開發(fā)相關技術 3javascript簡介 3javascript基本特點 4css簡介 4jQuery 5本章小結 5第三章前端布局分析與設計 6前端總體開發(fā)流程與設計 6分層開發(fā) 6代碼編寫 6內部測試與后續(xù)優(yōu)化 6前端UI設計 7模塊分布 7顏色配置 7css元素 8交互設計與UI 9網站結構布局與設計 9網站首頁結構 9主題鮮明，富有特色 10網站前臺頁面設計 103.5.1 首頁 103.5.2 其余子頁面 103.7 本章小結 10第四章主要功能的實現(xiàn) 11界面設計 11具體設計文檔 11前臺新聞文摘顯示 11網站裝飾風格 11網站的鏈接結構 11可視化設計 11具體實現(xiàn)技術 12css在“寫意集團響應式企業(yè)官網”中的應用實例 12本章小結 13第五章 總結 73致謝 73參考文獻 75響應式企業(yè)網站設計與實現(xiàn)第一章 緒論本課題研究的背景和目的術的飛速生長，手機的上網率高于傳統(tǒng)PC，而在手機端上，傳統(tǒng)網站又難以做HTML5互去優(yōu)化與用戶溝通的過程。PC進行訪問，體驗空間層面上帶來的開放性。CSS3與傳統(tǒng)官網相比，響應式網站不外乎也是企業(yè)介紹，新聞發(fā)布，產品介紹一類等。為何還要花時間精力和人力去建立和維護網站呢？是正如上面所說：內容更加多姿多彩，板塊，內容更加豐富，而且能夠相應不同屏幕大小，在這個用手機多過PC的時代，能更好更快地將第一手信息送到用戶手上。這些都促成了各個企業(yè)組織新的信息化建設，構建專業(yè)，易于維護和管理的網站。3PScss3；javascriptjQuery。這些都是開發(fā)中最基本的技能。前端開發(fā)HTML，cssjavascript國內外HTML512015，80AppHTML5。這意味著大部分AppFacebookTwitter(數(shù)據來源：國際科技媒體ReadWriteWeb，2015)21000H542%17,358,480uv;27%是測試題，最高49,940,339uv;15%是社交互動游戲，最高2,892,047uv;551,195uvh5n391FlashAFlash1HTML5

響應式企業(yè)網站設計與實現(xiàn)420CPM40H5用微信提供的模板，也可以自行定制。H5內外的幾個社交平臺。目前支持H5分享的平臺：國內的微信、微博，國外有Facebook、Twitter、LinkedIn，當然每個平臺分享的形式略有差異。各大主流H5HTML5H5現(xiàn)，H5H5案。所以各大企業(yè)官網轉型做響應式也是勢在必得的過程。本章小結本章闡述了開發(fā)企業(yè)響應式官網的研究背景和意義。介紹了國內外HTML5要性。2響應式企業(yè)網站設計與實現(xiàn)第二章 前端開發(fā)及相關技術HTML5HTML5HTML，HTML5的第五次重大修APIWebStorm。HTML5WebStormWebStormjetbrainsJavaScript“WebHTML5IntelliJIDEAIntelliJIDEAIE8下排版不亂，IE9整個網站的詳細開發(fā)過程在后面將逐步具體介紹。PhotoshopAdobePhotoshop,簡稱“PS”,AdobeSystemsPhotoshopps視頻、出版等各方面都有涉及。IEtesterIETesterWebBrowserWindowsVistaXPIE5.5IE6IE7IE8IE9IE10IE11JavaScriptIE5.5IE6IE7IE8IE9IE覽器，用于觀察兼容性。HTML5javascriptJavascript是一種直譯式腳本語言。是一種動態(tài)類型、弱類型、基于原型的3響應式企業(yè)網站設計與實現(xiàn)語言，內置支持類型，具有自己獨特的垃圾回收等機制，他的解釋器被稱為JavascriptjavascriptV8C++Javascript的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，HTML它的出現(xiàn)，起初只是進行簡單的信息和用戶之間的一種實時的，動態(tài)的，可CGIHTMLjavascriptHTML5，javascriptHTML5webAPPjavascriptjavascript（1) 基于對象的語言javascript簡單性javascript沒做嚴格的聲明要求,而且javascriptJava使其設計簡單緊湊安全性javascript動態(tài)交互。從而有效地防止數(shù)據的丟失。而且動態(tài)性java scriptWeb對應的事件程序響應。css標準通用標記語言的一個應用準通用標記語言的一個子集飾的，可以有效地對各個標簽的樣式進行統(tǒng)一的修改。CSS的全名中，Cascading有“層疊”的意思，也就是說在同一個web頁面中可以同時存在多個樣式表，但這些樣式表中的樣式，會根據他們所在的位置擁有不同的優(yōu)先級優(yōu)先級越高的就會在最終顯示出來樣式表插入方法分為3種：(1) 內聯(lián)式樣式表；(2)嵌入式樣式表；(3)外部式樣式表；CSSHTML，HTML，HTML，它只是一種輔助修飾頁面的“工具”，除了可以擴展HTML4響應式企業(yè)網站設計與實現(xiàn)圖片的使用率，方便管理樣式表樣式，設置公用樣式，樣式分類設置調用。CSSHTML，CSSCSS人群，有較強的易讀性。jQueryJQueryprototypeJavascriptjs庫，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,OperaIE6/7/8jQueryHTML（標記語言下的一個應用events交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應用也jQueryhtmlhtmlhtmljsidjQueryjavascriptwriteless,domore(寫得更少,做得更多)。jQuery20061JohnResigbarcampJavaScriptDaveMethvin，jQueryjavascript1000055jQuery。jQueryMITjQueryDOMAjaxAPI本章小結時講述了相關的前端開發(fā)語言，比如：Javascript，css，Jquery后面的開發(fā)中對這些技術有深刻的理解5響應式企業(yè)網站設計與實現(xiàn)第三章前端布局分析與設計前端總體開發(fā)流程與設計WebJavascript，所以前端工程師不僅要掌握IEtext，googledebug，還要具有一定的溝通能力，協(xié)調美工設計與后臺開發(fā)人員，還要掌握對象的編程思想，等等。分層開發(fā)根據項目內容的不同，劃分出不同的功能模塊，分步完成，以便合理地安排開發(fā)時間，在有限的時間內，有條理地完成模塊和需要功能，減少時間的浪費，降低開發(fā)成本，提高開發(fā)效率。整個分層開發(fā)大致分為總體結構搭建，模塊制作，頁面設置制作，底層JS修復，代碼優(yōu)化。代碼編寫當總規(guī)劃和設計圖初稿完成后，就可以進入代碼編寫階段，進行前期的HTMLjavascript多的時間對產品進行修改，優(yōu)化和完善。確定了流程后，還需要對產品原型進行分析，研究，把復用性高的部分劃分出來，重點標記，在以后的代碼編寫過程中，封裝成一個復用組件，方便調用。并且根據二三級頁面的設計布局，搭建統(tǒng)一的大致框架。（分頁，字體樣式等）w3c能等各方面的修改。HTMLCSS內部測試與后續(xù)優(yōu)化前端內部測試，主要是觀察頁面與設計圖的差異，優(yōu)化頁面細節(jié)樣式，及時發(fā)現(xiàn)問題并且進行修改。并且利用IEtext查看頁面的兼容性，當所有細節(jié)與兼容問題修改完畢后，就要對制作文件進行代碼優(yōu)化，盡可能的壓縮文件大小和減少外部http的鏈接請求數(shù)，優(yōu)化訪問速度。該流程是參照公司開發(fā)流程制定出來的，以經過很長時間的磨合跟改進，6響應式企業(yè)網站設計與實現(xiàn)盡管雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)這個項目的需求，優(yōu)點也是很明顯的，能更好的應對高強度，高質量的開發(fā)需求，代碼更加容易控制和修改優(yōu)化，充分利用時間，提高了開發(fā)俠侶前端UI模塊分布UIUserInterface（用戶界面）的簡稱。UIUI定位和特點。所以UI設計師設計中最重要的一點，也可以發(fā)揮出更多創(chuàng)意的設計想法；其中體現(xiàn)出層次感設計的就是從屬關系，點構成線，線構成面，主次清晰明了。圖3-1為寫意集團響應式企業(yè)官網首頁：圖3-1 寫意集團響應式企業(yè)官網首屏著陸頁首頁的logo還設計了一個動畫，整個著陸頁使用了一張滿屏大圖。顏色配置產生豐富色彩的三原色是紅，綠，藍，也就是RGB，十六進制是000000redcolor:#FF0000color:#F00背景色大量六百，同時背景色要與文字的排列對比強烈一些。首頁的頂端使用，滿屏的圖片下面用大量六百這兩個部分過度的很自然。在文字部分用黑色文字當鼠標移動到相關文字上面時文字顏色變成紅色。不同的文字顏色會產生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。73-2

響應式企業(yè)網站設計與實現(xiàn)圖3-2網站首頁導航字體顏色變化cssCSS塊狀元素(block)：CSS塊狀元素非?！鞍缘馈?， 總是另起一行開始，可對其設置高度寬度，行高等等，常用的有：div p table h1 ul dl 等等。CSS內聯(lián)元素(inline):CSS內聯(lián)元素和其它內聯(lián)元素可以同時都在一行上；高度，行高以及頂?shù)? 邊 距 不 可 改 變 ； 常 用 的 有 ：a strong font img input span small label等等CSS行內塊狀元素（inline-block）:Display:inline-block，該樣式可將元素改為行內塊狀元素，將元素對象呈遞為內聯(lián)元素對象，但是元素對象的內容作為塊對象元素呈遞。旁邊的內聯(lián)對象元素會被呈遞在同一行內，允許空格，即可以讓元素同時擁有塊狀元素設置寬高行高等特性，同時也具有行內元素的同一行內顯示。但對于這個屬性不是所有瀏覽器都識別，兼容性較差，而且會留下默認的外邊距，而且不能通過margin：0樣式去掉，解決方法是利用浮動float來解決。CSS盒模型:網頁設計中常聽的屬性名：內容 (content)、填充(padding)、邊(border)、邊界(margin)，CSS盒子模式都具備這些屬性。（箱子日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSSCSS模型。內邊距paddingpadding:10px5px15px;上右左下padding:10px15px;上右下左<divstyle="width:100px;padding:020px;">無標題文檔</div>這個40pxmargin：圍繞在元素邊框的空白區(qū)域是margin題。最常用的就是div居中:margin:0auto;<divstyle=“width:200px;text-align:center;”><divstyle=“width:100px;”>無標題文檔</div></div>這個屬性是無法居中的，如圖所示3-3所示：8響應式企業(yè)網站設計與實現(xiàn)交互設計與UI

3-3盒子模型務目標，獲得愉快的用戶體驗。UIUI,UI視覺設計，更多是界面的外觀靜態(tài)設計。所以這種情況下，交互設計尤為重要，既不能失去UI設計的特性，又要確保UI設計師利用其專業(yè)知識在視覺結構內進行充分發(fā)揮，這是一種藝術網站結構布局與設計網站首頁結構50%～80%，20%。寫意集團響應式企業(yè)官網網站主要用來進行公司信息發(fā)布，公司資源展示。作為一個網站，應該由一些相關及相對獨立的模塊整合而成。本網站系統(tǒng)主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內容，每個大的模塊下又細分為幾個的功能模塊。制作前臺頁面模塊，包括主頁及各個子頁面，建立各個頁面之間的相關鏈接，。整體網站遵循寫意集團響應式企業(yè)官網網站的設計思路，擁有完善9響應式企業(yè)網站設計與實現(xiàn)的功能，風格要求簡潔大方不單調。各個子頁面都可正常返回主頁以及正確連接到各個子頁面。功能要求使用簡單全面，容易操作。主題鮮明，富有特色在目標明確的基礎上，完成網站的構思創(chuàng)意即總體設計方案。對網站的整體風格和特色做出定位，規(guī)劃網站的組織結構。整個首頁大量運用動畫以及目前常用的簡單卻用戶體驗好的效果，要做下一定的印象。對于一些LOGOlogologo網站前臺頁面設計寫意集團響應式企業(yè)官網主要包括：首頁，關于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等9個子頁面。制作過程如下：首頁Photoshop1920px，高度自動排列，Webstorm61920，1920寬度的時候，對其進行自適應滿屏，并且因為要實現(xiàn)一個“滾一屏”效果，CSS文字的位子。主頁包括的內容主要有：網站的域名，導航條，LOGO，版權。導航條又包含首頁，關于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等。其余子頁面子頁面的設計風格基本一致，導航欄跟隨瀏覽器滾動，始終貼在瀏覽器窗口上方，下面是滿屏幕寬度的banner圖，下方便是各大模塊內容的顯示；制作過程中采用的制作方法和調用的模塊內容跟上一個差不多3.7 本章小結UI10

響應式企業(yè)網站設計與實現(xiàn)界面設計字體：微軟雅黑；行距：150%。聯(lián)系我們。首頁網站上中部：banner圖片。網站底部：網站/版面制作；版權信息。其中網站的導航條會一路跟隨屏幕滾動具體設計文檔內容和功能設計這個企業(yè)網站主要實現(xiàn)企業(yè)信息展示，公告展示等功能。先明確各板塊提供的主要功能：首頁功能板塊：旗下品牌（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；服務項目（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；服務領域（響應式九宮格，當鼠標移上去，圖片會以中心點向外放大企業(yè)榮耀（靜態(tài)數(shù)據，顯示企業(yè)參與的項目）合作商家（logo版權（版權信息）子頁面功能如子頁面標題所示；前臺新聞文摘顯示網站裝飾風格cssjavascript靈動。網站的鏈接結構校園網站的主要鏈接關系如下：首頁，關于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等其中關于寫意，企業(yè)文化，新聞中心，有一個Javascript效果，整合在一個按鈕上，用一個下拉方式展示可視化設計網站可視化設計的主要目的是提供給用戶一個關于網站的信息展示方Web建立頁面模型。11響應式企業(yè)網站設計與實現(xiàn)具體實現(xiàn)技術csscssCSS.serviceArea_mainulli:hoveraimg{transform:scale3d(1.1,1.1,1);-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);-o-transform:scale3d(1.1,1.1,1);-ms-transform:scale3d(1.1,1.1,1);position:relative;}.serviceArea_mainulli:hover.s_Area_gaip{transform-style:preserve-3d;}.serviceArea_mainulliaimg{transition:1s;top:0;left:0;z-index:9;width:100%;vertical-align:top;}CSSDIV，transform:scale3d(1.1,1.1,1);為控制圖-webkit-，-moz-，-o-，-ms-前綴的樣式，目的是transition:1s;改樣式用于設定動畫的過渡時間，如1.1倍；JavascriptJavaScript是一種基于對象(Object)和事件驅動(EventDriven)并具HTML腳本語言（Java）WebWebHTMLHTML[17]。JavaScript的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關[18]HTMLJavaScript用戶的喜愛。它是眾多腳本語言中較為優(yōu)秀的一種，與WWW現(xiàn)了網絡計算和網絡計算機的藍圖。12響應式企業(yè)網站設計與實現(xiàn)Javascript的varoverTop=document.getElementById('top');overTop.onclick=function(){varoldScroll=getSt();tweenFn(-oldScroll);}functiongetSt(){returndocument.documentElement.scrollTop||document.body.scrollTop;}//滾動效果functiontweenFn(change,fn){varstart=getSt();varchange=change;vart=0;varendT=30;vartimer=setInterval(function(){t++;if(t>endT){clearInterval(timer);}else{varl=Tween.Cubic.easeIn(t,start,change,endT)document.documentElement.scrollTop=l;document.body.scrollTop=l;}},10);}toptween.js動畫過程.由于首頁內容偏長，故設計這一按鈕，讓用戶能返回頂部進行瀏覽和操作。本章小結本章具體介紹了網站前端的實現(xiàn)，在動畫效果的實現(xiàn)中給出了具體的代CSSjavascriptjavascriptIE8，IE913響應式企業(yè)網站設計與實現(xiàn)第五章部分項目源碼首頁HTML<headlang="en"><metacharset="UTF-8"><title>首頁</title><metaname="viewport"content="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">領先的數(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>14響應式企業(yè)網站設計與實現(xiàn)</div><aclass="to_bottom"id="to_bottom"><imgsrc="imgs/to_bottom.jpg"alt=""/></a></div><!--banner結束--><!--首頁導航--><divclass="nav_mainclear"id="nav_main"><divclass="zy_navclear"><ulclass="nav_left"><li><ahref="index.html"class="nav_select">首頁</a></li>id="menu_btn"/>

<liid="menu_li"><ahref="about.html">關于寫意</a><imgsrc="imgs/nav_bg.png"alt=""<divclass="list_dragdown"style="display:none"id="menu"></a></li>

<divclass="listtop"></div><ulclass="clear"><li><ahref="fuli.html">企業(yè)文化<liclass="bordernone"><ahref="new.html">新聞中心</a></li></ul><divclass="listbottom"></div></div></li><li><ahref="http://6./">寫意數(shù)字</a></li><li><ahref="http://3./">意凡設計</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 class="last"><ahref="contact.html">聯(lián)系我們</a></li></ul>15<!--隱藏的導航欄-->

響應式企業(yè)網站設計與實現(xiàn)<divid="nav_btn"><imgsrc="imgs/nav.png"/><ulid="yc_nav"><li><ahref="index.html">首頁</a></li><li><ahref="about.html">關于寫意</a></li><li><a寫意數(shù)字</a></li><li><a意凡設計</a></li><li><ahref="http://4./"><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><!--首頁導航結束--><!--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="imglogoimg1src="imgs/table-logo.png"alt=""/><imgclass="imglogosrc="imgs/table-logo2.png"alt=""/><h5>寫意數(shù)字</h5>16服務</p>

響應式企業(yè)網站設計與實現(xiàn)<p>為設計領域提供效果圖、動畫多媒體及三維互動業(yè)務<imgstyle="vertical-align:top"src="imgs/g_brands1.jpg"alt=""/></div><divclass="gbranditemgbranlast"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg2src="imgs/table-evon.png"alt=""/><imgclass="imglogosrc="imgs/table-evon2.png"alt=""/><h5>意凡設計</h5><p>室內創(chuàng)意設計及后期施工，為品牌解決全套室內裝修</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>建筑信息模型在建筑領域的操作應用及推廣</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>提供策劃、設計及施工三環(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>影視制作、廣告拍攝、影視項目策劃</p><imgstyle="vertical-align:top"17響應式企業(yè)網站設計與實現(xiàn)src="imgs/g_brands5.jpg"alt=""/></div><divclass="gbranditemclearMarginR"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>寫意傳播</h5><p>企業(yè)品牌定位與策劃、VI設計、整合營銷服務</p><imgstyle="vertical-align:top"src="imgs/g_brands6.jpg"alt=""/></div></div></div><!--旗下品牌結束--><!--服務項目--><divclass="serviceitem"id="serviceitem1"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服務項目</H6><p>SERVICEITEMS</p><divclass="hrright"></div></div></div><ulclass="sitem_mainclear"id="serviceitem"><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item1.jpg"alt=""/><imgsrc="imgs/s_item11.jpg"class="img1"alt=""/>

<h4>效果圖</h4><p>規(guī)劃設計、公共建筑、商業(yè)建筑、居住建筑、景觀設計、室內設計、燈光改造、手繪表現(xiàn)</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left">18響應式企業(yè)網站設計與實現(xiàn)<divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item2.jpg"alt=""/><imgsrc="imgs/s_item22.jpg"class="img1"alt=""/>案動畫、設計方案演示</p>

<h4>多媒體動畫</h4><p>企業(yè)宣傳片、商業(yè)地產宣傳片、設計方</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item3.jpg"alt=""/><imgsrc="imgs/s_item33.jpg"class="img1"alt=""/>

<h4>三維互動</h4>19家居三維互動系統(tǒng)</p>

響應式企業(yè)網站設計與實現(xiàn)<p>房產三維互動系統(tǒng)、工業(yè)三維互動系統(tǒng)、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item4.jpg"alt=""/><imgsrc="imgs/s_item44.jpg"class="img1"alt=""/>家居動畫、醫(yī)療動畫

<h4>產品動畫說明書</h4><p>CG攝影、電子產品動畫、工業(yè)機械動畫、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div>20<divclass="sitem_con"><span>

響應式企業(yè)網站設計與實現(xiàn)class="img1"alt=""/>物館、主題展館

<imgsrc="imgs/s_item5.jpg"alt=""/><imgsrc="imgs/s_item55.jpg"<h4>展覽展示</h4><p>線上展館<br/>實體展館：企業(yè)展館、科技館、文化館、博</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item6.jpg"alt=""/><imgsrc="imgs/s_item66.jpg"class="img1"alt="">項目</div>

<h4>意凡設計</h4><p>商業(yè)空間、酒店/會所、辦公空間、地產</p></span><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div>21響應式企業(yè)網站設計與實現(xiàn)</a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item7.jpg"alt=""/><imgsrc="imgs/s_item77.jpg"class="img1"alt=""/>

<h4>BIM</h4><p>BIM項目制作：信息化模型構建、碰撞檢測&凈高控制、管線綜合、機電設備族庫制作<br/>BIMBIMBIM</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item8.jpg"alt=""/><imgsrc="imgs/s_item88.jpg"class="img1"alt="">

<h4>影視廣告</h4><p>企業(yè)專題片、紀錄片、地產影視片微電影拍攝影視廣告、TVC22制作</p></span></div>

響應式企業(yè)網站設計與實現(xiàn)電視劇/網劇制作、劇本創(chuàng)作評估拍攝藝人導演聯(lián)絡、影視發(fā)行<divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li></ul></div><!--服務項目結束--><!--服務領域--><divclass="serviceitem"id="serviceitem2"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服務領域</H6><p>SERVICEAREA</p><divclass="hrright"></div></div></div><divclass="serviceArea_main"id="s_item"><ulclass="row"><li><ahref="###"><divclass="s_Area_gai"><p>建筑設計領域</p></div><imgsrc="imgs/s_area1.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>城市地產領域</p></div><imgsrc="imgs/s_area2.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>影視廣告領域</p></div><imgsrc="imgs/s_area3.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>醫(yī)療通信領域</p></div><imgsrc="imgs/s_area4.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>23響應式企業(yè)網站設計與實現(xiàn)物流港口領域</p></div><imgsrc="imgs/s_area5.jpg"alt=""/></a></li><liclass="lastlastt"><ahref="###"><divclass="s_Area_gai"><p>軍事能源領域</p></div><imgsrc="imgs/s_area6.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>政府企業(yè)領域</p></div><imgsrc="imgs/s_area7.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>工業(yè)產品領域</p></div><imgsrc="imgs/s_area8.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>旅游開發(fā)領域</p></div><imgsrc="imgs/s_area9.jpg"alt=""/></a></li></ul></div></div><!--服務領域結束--><divid="serviceitem3"><!--企業(yè)榮譽--><divclass="serviceitem"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>企業(yè)榮譽</H6><p>ENTERPRISEHONOR</p><divclass="hrright"></div></div></div><divclass="honour_mainclear"><imgclass="h_img1"src="imgs/hlogo1.jpg"alt=""/>alt=""/>alt=""/>alt=""/>alt=""/>

<imgclass="h_img2"src="imgs/hlogo2.jpg"<imgclass="h_img3"src="imgs/hlogo3.jpg"<imgclass="h_img4"src="imgs/hlogo4.jpg"<imgclass="h_img5"src="imgs/hlogo5.jpg"<imgclass="h_img6clearMarginR"src="imgs/hlogo6.jpg"alt=""/></div>24響應式企業(yè)網站設計與實現(xiàn)</div><!--企業(yè)榮耀結束-->banner--><divclass="foot_banner"><imgsrc="imgs/banner2.jpg"alt=""/></div><!--第二張banner結束--></div><!--合作商家--><divclass="cooperation" id="serviceitem4"><divclass="cooperation_title"><H6><spanclass="c_left">-</span>合作商家<spanclass="c_right">-</span></H6></div><divclass="cooperation_main"><imgsrc="imgs/logo_pic.jpg"alt=""/></div></div><!--合作商家結束--></div><!--腳部信息--><divclass="footer_mainclear"><divclass="wrap"><divclass="footer_topclear"><divclass="footer_leftlf"><dl><dt>寫意集團</dt><dd><ahref="###">關于寫意</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">聯(lián)系我們</a></dd></dl><dl><dt>寫意數(shù)字</dt><dd><ahref="###">效果圖</a></dd><dd><ahref="###">動畫多媒體</a></dd><dd><ahref="###">三維互動</a></dd><dd><ahref="###">產品動畫說明書</a></dd><dd><ahref="###">行業(yè)方案</a></dd><dd><ahref="###">關于我們</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">聯(lián)系我們</a></dd>25</dl><dl><dt>意凡設計</dt>

響應式企業(yè)網站設計與實現(xiàn)費alt=""/>

<dd><ahref="###">關于我們</a></dd><dd><ahref="###">設計團隊</a></dd><dd><ahref="###">項目案例</a></dd><dd><ahref="###">聯(lián)系我們</a></dd></dl><dl><dt>寫意BIM</dt><dd><ahref="###">概述</a></dd><dd><ahref="###">團隊介紹</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">案例介紹</a></dd></dl><dl><dt>意展展示</dt><dd><ahref="###">關于意展</a></dd><dd><ahref="###">展館工程</a></dd><dd><ahref="###">線上展館體驗</a></dd><dd><ahref="###">技術與創(chuàng)意</a></dd><dd><ahref="###">服務流程</a></dd><dd><ahref="###">人才招聘</a></dd></dl></div><divclass="footer_rightrf"><ahref="###"><imgsrc="imgs/info.jpg"alt=""/></a><imgclass="tel"src="imgs/tel.jpg"alt=""/><divclass="clear"></div><divclass="times">周一至周日9:00-18:00(僅收市話<div><imgclass="er"src="imgs/er.jpg"alt=""/><imgclass="weibo"src="imgs/weibo.jpg"</div></div></div><divclass="footer_bottom"><p>Copyright?1998-2015寫意集團版權所有</p></div></div></div>26響應式企業(yè)網站設計與實現(xiàn)<!--腳部信息結束--></body><scripttype="text/javascript"src="js/main.js"></script><script>$.fn.extend({mousewheel:function(Fn){if(window.navigator.userAgent.indexOf("Firefox")>-1){$(this).get(0).addEventListener("DOMMouseScroll",wheel,false)}else{$(this).get(0).onmousewheel=wheel;}functionwheel(e){vardown=false;if(e.detail){down=e.detail>0;}else{down=e.wheelDelta<0;}//Fn(down,e)Fn.call($(this).get(0),down,e)//Fn.apply(obj,[down])if($(window).width()>1280)if(e.preventDefault){e.preventDefault();};returnfalse;}}}})$(window).on("load",function(){varindex=0;varmovebol=false;arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];$("#to_bottom").on("click",function ()if(movebol){return};27movebol=true;

響應式企業(yè)網站設計與實現(xiàn)$(window).sTopFn(arr[2],function ()index=2;movebol=false;});})setTimeout(function ()movebol=true;$(window).sTopFn(0,function ()movebol=false;})},30)$(window).mousewheel(function (down){if($(window).width()<1280)if(movebol){return};arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];movebol=true;if(down){index++;if(index>7){index=7;}}else{index--;if(index<0){index=0;};}$(window).sTopFn(arr[index],function ()movebol=false;//alert(movebol);})var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})28響應式企業(yè)網站設計與實現(xiàn)$("#nav_bu").css({"padding-top":"0"})}})window.onscroll=function (){var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})$("#nav_bu").css({"padding-top":"0"})}varoTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;varscrollTop=oTop;for(vari=0;i<arr.length;i++){if(scrollTop>=parseInt(arr[i])){index=i;};};//console.log(scrollTop);}})functionbanner(obj,dra){varview=document.getElementById(obj);varimg=view.getElementsByTagName('img');vartabBtn=document.getElementById(dra);varli=tabBtn.getElementsByTagName('li');varindex=0;varbol=false;for(vari=0;i<li.length;i++){vartemp=img[0];varold=li[0];li[i].index=i;li[i].onclick=function(){if(bol){return;}old.className="";29響應式企業(yè)網站設計與實現(xiàn)index=this.index;this.className="btn_selecet";if(temp==img[index]){return};opacityFn(0.02,2,img[index],temp);old=li[index];temp=img[index];}};//漸隱漸現(xiàn)functionopacityFn(num,numIe,obj,dra){bol=true;varo=0;varvarotemp=1;varotempIe=100;vartimer=setInterval(function(){o+=num;oIe+=numIe;otemp-=num;otempIe-=numIe;if(o>1||otemp<0){o=1;otemp=0;clearInterval(timer);bol=false;}obj.style.opacity=o;obj.style.filter="alpha(opacity="+oIe+")";dra.style.opacity=otemp;dra.style.filter="alpha(opacity="+otempIe+")";},30)}}banner('view','tab_btn');$sitem=$("#s_item").find("li");$sitem.mouseenter(function(){})30響應式企業(yè)網站設計與實現(xiàn)$(".gbranditem").hover(function (){$(this).find(".img1:eq(1)").fadeOut(100)$(this).find(".colors").fadeIn();},function (){$(this).find(".colors").fadeOut(100);$(this).find(".img1:eq(1)").fadeIn()})var$menu=$("#menu");$("#menu_li").hover(function (){$menu.show();},function (){$menu.hide();})</script>首頁CSS.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}#wrap{width:1366px;margin:0auto;overflow:hidden;}.nav_main{width:82.72%;margin:0auto;}.nav_left{width:87.34%;31響應式企業(yè)網站設計與實現(xiàn)}.nav_lefta{color:#626262;float:left;font-size:14px;padding:39px45px39px0;}.nav_left.nav_select{color:#d6000f;}.top{padding-top:27px;width:7.25%;vertical-align:middle;}.topimg{cursor:pointer;width:100%;}.nav_dragdown{position:relative;background:url("../imgs/nav_bg.jpg")no-repeat60pxcenter;}.list_dragdown{top:70px;left:26px;text-align:center;position:absolute;border:1pxsolidborder-width:1px1px01px;}.listtop{margin-top:-6px;width:76px;height:6px;background:url("../imgs/list_top.jpg")no-repeat;}.listbottom{background:url("../imgs/list_bottom.png")no-repeat;position:absolute;width:76px;height:2px;bottom:-2px;}32響應式企業(yè)網站設計與實現(xiàn).list_dragdownli{color:#626262;padding:10px0;margin:012px;border-bottom:1pxsolid#e5e5e5;}.list_dragdownborder:none;}@charset"utf-8";/*CSSDocument*//*@font-face{font-family:'FZLTCXHJW';src:url('../font/FZLTCXHJW.TTF');font-weight:normal;font-style:normal;}*/img{border:none;}body{font-size:12px;}/*首頁*/.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}.wrap{33響應式企業(yè)網站