在如今移動設備用戶的數(shù)量多于PC端的時代,傳統(tǒng)的企業(yè)網(wǎng)站在移動端展示時往往會出現(xiàn)各種問題,這會影響用戶的體驗和對企業(yè)的印象。在這種情況下更多企業(yè)愿意把其官網(wǎng)開發(fā)成響應式網(wǎng)站以讓官網(wǎng)在不同尺寸的設備上都有良好的展現(xiàn),從而滿足了企業(yè)對官網(wǎng)的跨平臺、多設備需求,響應式網(wǎng)站因此變得廣泛流行�，F(xiàn)在國內外有很多優(yōu)秀的響應式前端框架,本研究運用了開發(fā)人員容易上手的Bootstrap框架,因為用它能高效率、低成本地開發(fā)有特色的響應式網(wǎng)站。本文的主要工作有:運用Bootstrap框架、HTML5等相關技術開發(fā)響應式網(wǎng)站,運用預處理語言Sass（Syntactically Awesome Stylesheets）及其擴展庫Compass對網(wǎng)站的CSS部分進行高效開發(fā),總結開發(fā)過程中在性能方面可以優(yōu)化的點以及常見問題的解決方法。本文所研究的用預處理語言開發(fā)網(wǎng)站的CSS部分可以極大提高網(wǎng)站開發(fā)和維護的效率,所總結開發(fā)中遇到的問題和優(yōu)化的方法可作為開發(fā)者的參考。 

【文章頁數(shù)】：59 頁

【學位級別】：碩士

【文章目錄】：
摘要
Abstract
1 引言
    1.1 課題研究背景與意義
    1.2 國內外研究現(xiàn)狀
        1.2.1 國內現(xiàn)狀
        1.2.2 國外現(xiàn)狀
    1.3 本文的主要工作
    1.4 本文結構安排
2 相關技術及工具
    2.1HTML5
    2.2CSS3
    2.3 Bootstrap框架
    2.4 CSS預處理語言Sass
    2.5 Sass的擴展庫Compass
    2.6 JavaScript
    2.7 jQuery
    2.8 工具介紹
3 響應式網(wǎng)站的優(yōu)化設計與實現(xiàn)
    3.1 需求分析
    3.2 整體解決方案
        3.2.1 響應式網(wǎng)站實現(xiàn)方案
        3.2.2 彈性圖片實現(xiàn)方案
    3.3 網(wǎng)站UI和交互的設計原則
    3.4 前端頁面的具體實現(xiàn)
        3.4.1 網(wǎng)站整體結構
        3.4.2 響應式網(wǎng)站核心代碼
        3.4.3 首頁
        3.4.4 經典案例
        3.4.5 主要產品
        3.4.6 企業(yè)新聞
        3.4.7 關于我們
        3.4.8 聯(lián)系我們
        3.4.9 登錄注冊
4 網(wǎng)站的優(yōu)化和問題解決
    4.1 用預處理語言優(yōu)化開發(fā)
    4.2 設計和交互上的優(yōu)化
    4.3 性能優(yōu)化
    4.4 問題及解決辦法
5 網(wǎng)站測試
    5.1 功能測試
    5.2 性能測試
    5.3 兼容性測試
6 總結與展望
    6.1 總結
    6.2 展望
參考文獻
個人簡歷、在學期間發(fā)表的學術論文與研究成果
致謝


【參考文獻】：
期刊論文
[1]基于Bootstrap框架的響應式網(wǎng)頁設計與實現(xiàn)[J]. 舒后,熊一帆,葛雪嬌.  北京印刷學院學報. 2016(02)
[2]基于BootStrap的WEB開發(fā)設計研究[J]. 李金亮,李春青.  中小企業(yè)管理與科技(中旬刊). 2014(05)



本文編號：3684405