HTML5+CSS3 Web前端設(shè)計基礎(chǔ)教程 第3版 課件 第11章 Web App類頁面的設(shè)計與實現(xiàn)

第11章本章將從職業(yè)發(fā)展前景出發(fā)，立足職位需求，向讀者介紹有關(guān)Web前端所涉及的入門知識。WebApp類頁面的設(shè)計與實現(xiàn)11.1WebApp開發(fā)基礎(chǔ)知識11.1.1開發(fā)模式概述目前，移動應(yīng)用前端開發(fā)模式有NativeApp（原生APP）、WebApp，以及由前兩種開發(fā)模式融合后的HybridApp（混合模式）。1．NativeApp簡述2．WebApp簡述3．HybridApp簡述1．屏幕分辨率像素是構(gòu)成數(shù)碼影像的基本單元，而屏幕分辨率指的是在橫縱方向上的像素點數(shù)。2．像素密度PPI像素密度指的是屏幕上每英寸可以顯示的像素點的數(shù)量，單位是ppi，即“pixelsperinch”的縮寫，像素密度越高，代表屏幕顯示效果越精細。3．網(wǎng)點密度DPI網(wǎng)點密度（DotPerInch）來描述印刷品的打印精度，就是打印機可以在一英寸內(nèi)打多少個點。11.1WebApp開發(fā)基礎(chǔ)知識11.1.2手機屏幕基本知識11.1WebApp開發(fā)基礎(chǔ)知識物理分辨率是硬件所支持的分辨率，邏輯分辨率是軟件可以達到的分辨率。邏輯分辨率乘以一個倍率得到物理分辨率，這個倍率叫做像素倍率。

iPhoneXiPhone6PlusiPhone6iPhone5S像素分辨率1125px×2436px1242px×2208px750px×1334px640px×1136px像素倍率@3×@3×@2×@2×邏輯分辨率375pt×812pt414pt×736pt375pt×667pt320pt×568pt物理尺寸5.8英寸5.5英寸4.7英寸4.0英寸屏幕密度458ppi401ppi326ppi326ppi表11-1常見的iOS設(shè)備屏幕參數(shù)4．邏輯分辨率與像素倍率11.1WebApp開發(fā)基礎(chǔ)知識

ldpimdpihdpixhdpixxhdpixxxhdpi密度范圍<120dpi120dpi～160dpi160dpi～240dpi240dpi～320dpi320dpi～480dpi480dpi～640dpi常見屏幕分辨率已經(jīng)絕跡320×480480×800720×12801080×19201440×2560倍率0.751倍1.5倍2倍3倍4倍表11-2常見Android設(shè)備屏幕參數(shù)11.2Bootstrap框架和Swiper插件1．Bootstrap環(huán)境配置2．柵格系統(tǒng)柵格系統(tǒng)是一系列行（row）和列（column）構(gòu)建出來的一種頁面布局，他能夠隨著設(shè)備屏幕的大小，自動劃分為最多展示12列的內(nèi)容。

超小屏幕手機(<768px)小屏幕平板(≥768px)中等屏幕桌面顯示器(≥992px)大屏幕大桌面顯示器(≥1200px)類前綴.col-xs-.col-sm-.col-md-.col-lg-列（column）數(shù)12121212柵格系統(tǒng)行為總是水平排列開始是堆疊在一起的，當(dāng)大于這些閾值時將變?yōu)樗脚帕斜?1-3Bootstrap柵格系統(tǒng)部分參數(shù)11.2.1Bootstrap框架11.2Bootstrap框架和Swiper插件1．如何獲取Swiper插件是一款免費且開源的JS插件，主要用在移動端的開發(fā)，能很好地支持觸摸設(shè)備上的滑動操作、支持水平和垂直的幻燈展示等諸多操作。2．如何使用由于此類插件都是已經(jīng)調(diào)試成功的，所以在使用時只需要加載插件、按照結(jié)構(gòu)修改內(nèi)容，最后初始化Swiper的流程即可使用。11.2.2Swiper插件圖11-3

使用Swiper插件實現(xiàn)左右滑動效果11.2Bootstrap框架和Swiper插件圖11-4首頁圖11-5列表頁

圖11-6詳細內(nèi)容頁11.3.1頁面分析11.3“宇澤鮮風(fēng)商城”WebApp頁面分析與環(huán)境準備固定的頭部區(qū)域可以上下滾動的內(nèi)容區(qū)域固定的底部區(qū)域擬使用navbar-fixed-top類解決固定在屏幕頂部問題擬使用Swiper插件實現(xiàn)左右滑動效果擬使用柵格系統(tǒng)解決多列布局問題擬使用navbar-fixed-bottom類解決固定在屏幕底部問題圖11-6頁面結(jié)構(gòu)分析11.3“宇澤鮮風(fēng)商城”WebApp頁面分析與環(huán)境準備1．安裝node2．安裝fekit3．安裝git4．如何使用11.3“宇澤鮮風(fēng)商城”WebApp頁面分析與環(huán)境準備11.3.2環(huán)境準備1．創(chuàng)建站點并引入各類文件2．搭建主體框架3．Fixedtoper區(qū)域的實現(xiàn)11.4頁面實現(xiàn)的詳細過程11.4.1首頁的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-10Google瀏覽器iPhone6虛擬界面預(yù)覽效果11.4頁面實現(xiàn)的詳細過程圖11-11正在左右滑動的廣告4．banner區(qū)域的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-12使用柵格系統(tǒng)實現(xiàn)2行4列排版圖11-13content區(qū)域最終效果5．content區(qū)域的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-14“首頁”最終預(yù)覽效果6．fixedfooter區(qū)域的實現(xiàn)1．List頁面頂部區(qū)域的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-15list頁面頂部區(qū)域預(yù)覽效果11.4.2列表頁的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-17list頁面內(nèi)容區(qū)域預(yù)覽效果2．列表內(nèi)容的實現(xiàn)圖11-18list頁面最終預(yù)覽效果1．商品價格區(qū)域的實現(xiàn)11.4頁面實現(xiàn)的詳細過程圖11-20商品價格區(qū)域預(yù)覽效果11.4.3詳細內(nèi)容頁的