HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第11章）

第11章本章將從職業(yè)發(fā)展前景出發(fā)，立足職位需求，向讀者介紹有關(guān)Web前端所涉及的入門(mén)知識(shí)。WebApp類頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)11.1WebApp開(kāi)發(fā)基礎(chǔ)知識(shí)11.1.1開(kāi)發(fā)模式概述目前，移動(dòng)應(yīng)用前端開(kāi)發(fā)模式有NativeApp（原生APP）、WebApp，以及由前兩種開(kāi)發(fā)模式融合后的HybridApp（混合模式）。1．NativeApp簡(jiǎn)述2．WebApp簡(jiǎn)述3．HybridApp簡(jiǎn)述1．屏幕分辨率像素是構(gòu)成數(shù)碼影像的基本單元，而屏幕分辨率指的是在橫縱方向上的像素點(diǎn)數(shù)。2．像素密度PPI像素密度指的是屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，單位是ppi，即“pixelsperinch”的縮寫(xiě)，像素密度越高，代表屏幕顯示效果越精細(xì)。3．網(wǎng)點(diǎn)密度DPI網(wǎng)點(diǎn)密度（DotPerInch）來(lái)描述印刷品的打印精度，就是打印機(jī)可以在一英寸內(nèi)打多少個(gè)點(diǎn)。11.1WebApp開(kāi)發(fā)基礎(chǔ)知識(shí)11.1.2手機(jī)屏幕基本知識(shí)11.1WebApp開(kāi)發(fā)基礎(chǔ)知識(shí)物理分辨率是硬件所支持的分辨率，邏輯分辨率是軟件可以達(dá)到的分辨率。邏輯分辨率乘以一個(gè)倍率得到物理分辨率，這個(gè)倍率叫做像素倍率。表11-1常見(jiàn)的iOS設(shè)備屏幕參數(shù)4．邏輯分辨率與像素倍率iPhone14ProiPhone13miniiPhone11iPhoneX像素分辨率1179px×2556px1125px×2436px828px×1792px1125px×2436px像素倍率@3×@3×@2×@3×邏輯分辨率393pt×852pt375pt×812pt414pt×896pt375pt×812pt物理尺寸6.1英寸5.4英寸6.1英寸5.8英寸像素密度460ppi476ppi326ppi458ppi11.1WebApp開(kāi)發(fā)基礎(chǔ)知識(shí)表11-2常見(jiàn)Android設(shè)備屏幕參數(shù)ldpimdpihdpixhdpixxhdpixxxhdpi網(wǎng)點(diǎn)密度范圍<120dpi120～160dpi160～240dpi240～320dpi320～480dpi480～640dpi像素分辨率已經(jīng)絕跡320px×480px480px×800px720px×1280px1080px×1920px1440px×2560px像素倍率0.751倍1.5倍2倍3倍4倍11.2Swiper插件1．如何獲取Swiper插件是一款免費(fèi)且開(kāi)源的JS插件，主要用在移動(dòng)端的開(kāi)發(fā)，能很好地支持觸摸設(shè)備上的滑動(dòng)操作、支持水平和垂直的幻燈展示等諸多操作。2．如何使用由于此類插件都是已經(jīng)調(diào)試成功的，所以在使用時(shí)只需要加載插件、按照結(jié)構(gòu)修改內(nèi)容，最后初始化Swiper的流程即可使用。圖11-1

使用Swiper插件實(shí)現(xiàn)左右滑動(dòng)效果圖11-4首頁(yè)圖11-5列表頁(yè)

圖11-6詳細(xì)內(nèi)容頁(yè)11.3.1頁(yè)面分析11.3WebApp頁(yè)面分析與環(huán)境準(zhǔn)備固定的頭部區(qū)域可以上下滾動(dòng)的內(nèi)容區(qū)域固定的底部區(qū)域擬使用navbar-fixed-top類解決固定在屏幕頂部問(wèn)題擬使用Swiper插件實(shí)現(xiàn)左右滑動(dòng)效果擬使用柵格系統(tǒng)解決多列布局問(wèn)題擬使用navbar-fixed-bottom類解決固定在屏幕底部問(wèn)題圖11-6頁(yè)面結(jié)構(gòu)分析11.3“宇澤鮮風(fēng)商城”WebApp頁(yè)面分析與環(huán)境準(zhǔn)備1．在Dreamweaver中設(shè)置適合移動(dòng)端預(yù)覽的視圖2．在Google瀏覽器中設(shè)置適合移動(dòng)端預(yù)覽的窗口11.3“宇澤鮮風(fēng)商城”WebApp頁(yè)面分析與環(huán)境準(zhǔn)備11.3.2環(huán)境準(zhǔn)備圖11-6

“編輯大小”選項(xiàng)圖11-9

設(shè)置新添加設(shè)備的參數(shù)1．創(chuàng)建站點(diǎn)并引入各類文件2．搭建主體框架3．Fixedtoper區(qū)域的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程11.4.1首頁(yè)的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-10Google瀏覽器iPhone6虛擬界面預(yù)覽效果11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-11正在左右滑動(dòng)的廣告4．banner區(qū)域的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-12使用柵格系統(tǒng)實(shí)現(xiàn)2行4列排版圖11-13content區(qū)域最終效果5．content區(qū)域的實(shí)現(xiàn)1．List頁(yè)面頂部區(qū)域的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-15list頁(yè)面頂部區(qū)域預(yù)覽效果11.4.2列表頁(yè)的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-17list頁(yè)面內(nèi)容區(qū)域預(yù)覽效果2．列表內(nèi)容的實(shí)現(xiàn)圖11-18list頁(yè)面最終預(yù)覽效果1．商品價(jià)格區(qū)域的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程圖11-20商品價(jià)格區(qū)域預(yù)覽效果11.4.3詳細(xì)內(nèi)容頁(yè)的實(shí)現(xiàn)11.4頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程2．