響應式企業網站設計與實現畢業論文(編輯修改稿)

　

【文章內容簡介】 。margin 支持負值，在頁面布局中，應該大膽的用，可以解決很多問題。最常用的就是 div 居中:margin:0 auto。當然一定要固定寬度。div style=“width:200px。textalign:center?！眃iv style=“width:100px?！睙o標題文檔/div/div 這個屬性是無法居中的，如圖所示 33 所示：響應式企業網站設計與實現933 盒子模型 交互設計與 UI 交互設計是一種目標導向設計，所有的工作內容都是在圍繞著用戶行為去設計的。交互設計師通過設計用戶的行為，讓用戶更方便更有效率的去完成產品業務目標，獲得愉快的用戶體驗。如果是廣義的 UI 設計，應該包括原型設計、交互設計、視覺設計。狹義的UI 往往只是人們看到的最后一個環節 UI 視覺設計，交互是當用戶發生動作事件，所產生的反映。比如點擊彈出下拉菜單，瀏覽過鏈接的顏色變紫，這都是非常細微的交互，但卻處處體現著用戶體驗。交互設計更多是對用戶行為響應的設計,UI 視覺設計，更多是界面的外觀靜態設計。所以這種情況下，交互設計尤為重要，既不能失去 UI 設計的特性，又要確保 UI 設計師利用其專業知識在視覺結構內進行充分發揮，這是一種藝術 網站結構布局與設計 網站首頁結構實際內容占據網頁的大部分空間，為 50%～80%，導航部分不超過 20%。顏色的選擇以灰白色為主，沒有使用太多的顏色來修飾某個對象，此外，正，一般字色為默認的近黑色，并且用了不同的背景色條或大圖與留白區區分正文區與其他功能區。為了提高網頁的可讀性，標題區，標題行和正文區使用了不同大小的字體，正文使用的是靜止的文字，且字體足夠大，顏色各方面易于辨認，以便于閱讀。 寫意集團響應式企業官網網站主要用來進行公司信息發布，公司資源展示。作為一個網站，應該由一些相關及相對獨立的模塊整合而成。本網站系統主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內容，每個大的模塊下又細分為幾個的功能模塊。 制作前臺頁面模塊，包括主頁及各個子頁面，建立各個頁面之間的相關鏈接。整體網站遵循寫意集團響應式企業官網網站的設計思路，擁有完響應式企業網站設計與實現10善的功能，風格要求簡潔大方不單調。各個子頁面都可正常返回主頁以及正確連接到各個子頁面。功能要求使用簡單全面，容易操作。 主題鮮明，富有特色 在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色做出定位，規劃網站的組織結構。整個首頁大量運用動畫以及目前常用的簡單卻用戶體驗好的效果，要做到主題鮮明突出，力求簡潔，要點明確，以簡單動作與交互讓用戶更好的了解網站的主題內容，吸引對本站點有需求的人的視線，對無關的人員也能留下一定的印象。對于一些 LOGO 標志也都給充分利用起來，在首頁的logo 首次加載的時候做了一個 logo 動畫，以其來吸引用戶注意力。調動一切手段充分表現網站的個性和情趣，突出個性，這樣才能夠辦出網站的特色。 網站前臺頁面設計寫意集團響應式企業官網主要包括：首頁，關于寫意，企業文化，新聞中心，人才招聘，聯系我們等 9 個子頁面。制作過程如下： 首頁網站制作過程：首先利用 Photoshop 以寬度為 1920px，高度自動排列，制作了網站的首頁設計圖，之后使用 Webstorm 中用布局出整個首頁的大體布局格式，主要分為 6 部分，雖然設計圖寬為 1920，但當屏幕不適配 1920寬度的時候，對其進行自適應滿屏，并且因為要實現一個“滾一屏”效果，故每個板塊高度也要自適應高度。然后通過 CSS 樣式來調布局樣式以及圖片，文字的位子。主頁包括的內容主要有：網站的域名，導航條，LOGO，版權。導航條又包含首頁，關于寫意，企業文化，新聞中心，人才招聘，聯系我們等。 其余子頁面子頁面的設計風格基本一致，導航欄跟隨瀏覽器滾動，始終貼在瀏覽器窗口上方，下面是滿屏幕寬度的 banner 圖，下方便是各大模塊內容的顯示；制作過程中采用的制作方法和調用的模塊內容跟上一個差不多 本章小結本章主要介紹了寫意集團響應式企業官網的具體布局，具體結構。也說明了前端頁面從設計到代碼編寫的基本工作流程，講述了界面 UI 設計和交互設計中的一些理論和真是設計效果。響應式企業網站設計與實現11第四章 主要功能的實現 界面設計完善的網站內容。網站的整體顏色：灰白色為導航顏色；主體顏色：灰白色；字體：微軟雅黑；行距：150%。 網站統一頂部為導航條，首頁，關于寫意，企業文化，新聞中心，人才招聘，聯系我們。 首頁網站上中部：banner 圖片。 網站中部：網站信息；站點數據；圖文信息。 網站底部：網站/版面制作；版權信息。其中網站的導航條會一路跟隨屏幕滾動 具體設計文檔內容和功能設計這個企業網站主要實現企業信息展示，公告展示等功能。先明確各板塊提供的主要功能：首頁功能板塊：旗下品牌（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；服務項目（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；服務領域（響應式九宮格，當鼠標移上去，圖片會以中心點向外放大）；企業榮耀（靜態數據，顯示企業參與的項目）合作商家（眾多合作商家 logo 排列）版權（版權信息）子頁面功能如子頁面標題所示； 前臺新聞文摘顯示 網站裝飾風格采用了灰白色為主導航顏色，首頁中運用滾一屏效果，以及各種 css 動畫或者 javascript 效果，使整個網站看上去雖大部分為灰白色，但不失其靈動。 網站的鏈接結構校園網站的主要鏈接關系如下： 首頁，關于寫意，企業文化，新聞中心，人才招聘，聯系我們等其中關于寫意，企業文化，新聞中心，有一個 Javascript 效果，整合在一個按鈕上，用一個下拉方式展示 可視化設計網站可視化設計的主要目的是提供給用戶一個關于網站的信息展示方案，一個良好有效的網站可視化設計能給用戶留下深刻的印象，使得用戶能夠自然，友好的瀏覽 Web 站點所提供的信息，也是網站設計中重要的一環。 響應式企業網站設計與實現12可視化設計最重要的是確定網站的頁面布局。然后設計網頁的表現框架，建立頁面模型。 具體實現技術 css 在“寫意集團響應式企業官網”中的應用實例在該網站中使用了大量 css 動畫，使頁面有了特殊的顯示效果寫意集團響應式企業官網中 CSS 樣式表使用的部分代碼：.serviceArea_main ul li:hover a img{ transform: scale3d(,1)。 webkittransform: scale3d(,1)。 moztransform: scale3d(,1)。 otransform: scale3d(,1)。 mstransform: scale3d(,1)。 position: relative。}.serviceArea_main ul li:hover .s_Area_gai p{transformstyle: preserve3d。}.serviceArea_main ul li a img{ transition:1s。 top: 0。 left:0。 zindex:9。 width: 100%。 verticalalign: top。}以上樣式是用于設置首頁的服務領域一部分的 CSS 效果，當鼠標移上去的時候，首先圖片上方會有一個黑色的遮罩，然后圖片有一個逐漸放大的效果，但不撐開外面的 DIV，其中 transform: scale3d(,1)。為控制圖片縮放，其下方還有加了webkit，moz，o，ms前綴的樣式，目的是兼容別的瀏覽器廠商；transition:1s。改樣式用于設定動畫的過渡時間，如果缺少則無法上述的圖片縮放樣式將沒有動畫，而只是直接把圖片放大 倍； 應用 Javascript 設計網頁JavaScript 是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與 HTML 超文本標記語言，Java 腳本語言（Java 小程序）一起實現在一個 Web 頁面中鏈接多個對象，與Web 客戶交互作用，從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的 HTML 語言中實現的。它的出現彌補了 HTML 語言的缺陷[17]。 JavaScript 的出現使得信息和用戶之間不僅只是一種顯示和瀏覽的關系，而是實現了一種實時的，動態的，可交式的表達能力[18]。從而基于CGI 靜態的 HTML 頁面將被可提供動態實時信息，并對客戶操作進行反應的Web 頁面的取代。JavaScript 腳本正是滿足這種需求而產生的語言。它深響應式企業網站設計與實現13受廣泛用戶的喜愛。它是眾多腳本語言中較為優秀的一種，與 WWW 的結合有效地實現了網絡計算和網絡計算機的藍圖。在網站開發中使用了下面這么一段 Javascript 代碼，用來回到網頁頂部的var overTop=(39。top39。)。=function(){var oldScroll=getSt()。tweenFn(oldScroll)。}function getSt(){return ||。}//滾動效果function tweenFn(change,fn) {var start=getSt()。var change=change。var t=0。var endT=30。var timer=setInterval(function(){t++。if (tendT) {clearInterval(timer)。}else{var l=(t,start,change,endT)=l。=l。}},10)。}此代碼主要是實現導航欄里面的 top 按鈕，當用戶點擊的時候可以自動滾屏至頁面頂部，其中還利用了一個 的插件，來優化回到頂部的，故設計這一按鈕，讓用戶能返回頂部進行瀏覽和操作。 本章小結本章具體介紹了網站前端的實現，在動畫效果的實現中給出了具體的代碼。說明了在頁面設計過程的具體實現，說明了網站修飾風格，可視化的重要概念。也是整個網站集聚吸引力的地方。整個網站的響應式功能試驗不單單用了 CSS 的樣式，還利用 javascript 去配合實現，缺一不可。并且整個網站為了方便向下兼容，即向低版本瀏覽器兼容，多說動畫利用javascript 來實行，提高了兼容性，雖然一定程度上來說，影響了部分性能，但以基本實現 IE8 版面不亂，IE9 以上所有效果界面均正常顯示。響應式企業網站設計與實現14第五章部分項目源碼 首頁 HTML 代碼head lang=en meta charset=UTF8 title首頁/title meta name=viewport content=width=devicewidth,initialscale=1,minimumscale=1,maximumscale=1 link rel=stylesheet href=css// link rel=stylesheet href=css// link rel=stylesheet href=css// /headbody!容器層 ! banner 開始 div id=banner div class=logo img src=imgs/ alt=/ p class=banner_tit領先的數字展示方案提供商/p /div div id=tab_box img class=img src=imgs/ id=img / !用來撐開高度的 img div class=view id=view img src=imgs/ alt= style=opacity:1。 filter:alpha(opacity=100)/ img src=imgs/ alt= / img src=imgs/ alt= / img src=imgs/ alt= / /div ul class=tab_btn clear id=tab_btn li class=btn_selecet/li