HTML5+CSS3 Web前端設計基礎教程 第3版（第11章）

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

使用Swiper插件實現左右滑動效果圖11-4首頁圖11-5列表頁

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

“編輯大小”選項圖11-9

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