內容簡介
本書采取“HTML5網頁設計→CSS3美化網頁→網頁版式布局→綜合案例實戰”的講解模式，深入淺出地為讀者講解了網頁設計和排版布局的各項技術及實戰技能。
本書第1篇“HTML5網頁設計”主要講解HTML5快速入門、HTML5網頁文檔結構、HTML5網頁中的文本和圖像、用HTML5建立超鏈接、用HTML5創建表格和表單、HTML5中的多媒體、使用HTML5繪制圖形、獲取地理位置、Web通信新技術、構建離線的Web應用等；第2篇“CSS3美化網頁”主要講解CSS3概述與基本語法、使用CSS3美化網頁字體與段落、使用CSS3美化網頁圖片、使用CSS3美化網頁背景與邊框、使用CSS3美化表格和表單樣式、使用CSS3美化超鏈接和鼠標、使用CSS3控制網頁導航菜單的樣式等；第3篇“網頁版式布局”主要講解CSS定位與DIV布局核心技術、CSS+DIV盒子的浮動與定位、網頁布局實戰案例剖析等；第4篇“綜合案例實戰”主要講解制作在線購物類網頁、制作移動設備類網頁和制作娛樂休閑類網頁實戰。本書適合任何沒有網頁設計基礎的人員，也適用于有一定的HTML5和CSS3基礎，想更精通網頁設計的人員，同時也可作為大專院校及培訓學校教師和學生用書。
前言
“實戰從入門到精通（視頻教學版）”系列圖書是專門為網頁設計和網站開發初學者量身定制的一套學習用書，由劉玉紅策劃，千谷網絡科技實訓中心的高級講師編著，整套書涵蓋網頁設計、網站開發、數據庫設計等方面的知識，具有以下突出特點。前沿科技無論是網頁設計、數據庫設計，還是HTML5、CSS3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。權威的作者團隊組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。學習型案例設計以技術的實際應用過程為主線，全程采用圖解和同步多媒體相結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度，提升學習效率。為什么要寫這樣一本書由于原生應用程序APP的開發費用比較高，而且耗時較長，所以jQuery Mobile函數庫應運而生，很好地解決了這一問題，通過HTML5新技術和jQuery Mobile搭配使用，開發出的網站和普通APP沒有區別，受到廣大用戶的歡迎。目前學習和關注的人越來越多，而很多APP移動網站開發的初學者都苦于找不到一本通俗易懂、快速入門和案例實用的參考書。而通過本書的案例實訓,大學生可以很快地上手流行工具，提高職業化能力，從而幫助解決公司與學生的雙重需求問題。本書特色零基礎、入門級的講解無論您是否從事計算機相關行業，無論您是否接觸過網頁設計，都能從本書中找到最佳起點。超多、實用、專業的范例和項目本書在編排上緊密結合深入學習網頁設計技術的先后過程，從HTML5基本概念開始，引領讀者逐步深入地學習各種應用技巧，側重實戰技能，使用簡單易懂的案例進行分析和操作指導，讓讀者學起來簡明輕松，操作起來有章可循。隨時檢測自己的學習成果每章首頁均設置了內容提要，并提供了學習目標，以指導讀者重點學習。大部分章最后的“跟我練練手”板塊，均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。細致入微、貼心提示本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學習過程中更清楚地了解相關操作、理解相關概念，并輕松掌握各種操作技巧。專業創作團隊和技術支持本書由千谷網絡科技實訓中心編著和提供技術支持。您在學習過程中遇到任何問題，可加入QQ群：221376441進行提問，專家人員會及時答疑解惑。“網頁設計”學習最佳途徑本書以學習“網頁設計”的最佳制作流程來分配章節，從最初的HTML5基本概念開始，然后講解了CSS3美化網頁、網頁版式布局等。同時在最后的項目實戰環節特意補充了3個綜合網頁的設計過程，以便更進一步提高讀者的實戰技能。超值光盤全程同步教學錄像涵蓋本書所有知識點，詳細講解每個實例及項目的過程和技術關鍵點。比閱讀圖書更能輕松地掌握網頁設計知識，而且擴展的講解部分使您得到比書中更多的收獲。超多容量王牌資源大放送贈送大量王牌資源，包括書中案例源代碼、教學幻燈片、本書精品教學視頻、HTML5標簽速查手冊、CSS屬性速查表、88類網頁實用模板、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析和Web前端工程師常見面試題。讀者對象沒有任何網頁設計基礎的初學者。有一定的HTML5和CSS3基礎，想精通網頁設計的人員。有一定的HTML5和CSS3基礎，沒有項目經驗的人員。正在進行畢業設計的學生。大專院校及培訓學校的老師和學生。創作團隊本書由劉玉紅和蒲娟編著，參加編寫的人員還有劉玉萍、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、梁云梁和周浩浩。在編寫過程中，我們盡所能地將最好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。若您在學習中遇到困難或疑問，或有何建議，可寫信至信箱357975357@qq.com。編 者目錄
第1篇 HTML5網頁設計第1章 HTML5快速入門1.1 HTML5概述 41.1.1 HTML5簡介 41.1.2 HTML5文件的基本結構 51.2 HTML5文件的編寫方法 51.2.1 案例1——手工編寫HTML5 51.2.2 案例2——使用HTML編輯器編寫HTML 61.3 使用瀏覽器查看HTML5文件 101.3.1 各大瀏覽器與HTML5的兼容 101.3.2 案例3——查看頁面效果 111.3.3 案例4——查看源文件 111.4 高手甜點 121.5 跟我練練手 12第2章 HTML5網頁文檔結構2.1 Web標準 142.1.1 Web標準概述 142.1.2 Web標準規定的內容 152.2 HTML5文檔的基本結構 162.2.1 HTML5結構 162.2.2 文檔類型說明 172.2.3 HTML5標記<html> 172.2.4 頭標記<head> 172.2.5 網頁的主體標記<body> 202.2.6 頁面注釋標記<!-- --> 212.3 綜合案例——符合W3C標準的HTML5網頁 222.4 高手甜點 232.5 跟我練練手 24第3章 HTML5網頁中的文本和圖像3.1 在網頁中添加文本 263.1.1 案例1——普通文本的添加 263.1.2 案例2——特殊字符文本的添加 263.1.3 案例3——添加特殊文本 283.2 文本排版 303.2.1 案例4——換行標記<br> 303.2.2 案例5——段落標記<p> 313.2.3 案例6——標題標記<h1>～<h6> 323.3 文字列表 333.3.1 案例7——建立無序列表<ul> 333.3.2 案例8——建立有序列表<ol> 343.3.3 案例9——建立不同類型的無序列表 353.3.4 案例10——建立不同類型的有序列表 363.3.5 案例11——建立嵌套列表 373.3.6 案例12——自定義列表<dl> 383.4 網頁中的圖像 393.4.1 案例13——插入圖像<img> 393.4.2 案例14——設置圖像的寬度和高度width、height 413.4.3 案例15——設置圖片的提示文字alt 423.4.4 案例16——將圖片設置為網頁背景background 433.4.5 案例17——排列圖像align 443.5 綜合案例1——圖文并茂房屋裝飾裝修網頁 443.6 綜合案例2——在線購物網站產品展示效果 463.7 高手甜點 473.8 跟我練練手 48第4章 用HTML5建立超鏈接4.1 網頁超鏈接概述 504.1.1 超鏈接的概念 504.1.2 超鏈接中的URL 504.1.3 超鏈接的URL類型 514.2 建立網頁超鏈接href 514.2.1 案例1——創建超文本鏈接 514.2.2 案例2——創建圖片鏈接 534.2.3 案例3——創建下載鏈接 544.2.4 案例4——使用相對路徑和絕對路徑 554.2.5 案例5——設置以新窗口顯示超鏈接頁面 564.2.6 案例6——設置電子郵件鏈接 584.3 案例7——浮動框架iframe 594.4 案例8——精確定位熱點區域map、area 614.5 綜合案例——使用錨鏈接制作電子書閱讀網頁 644.6 高手甜點 674.7 跟我練練手 68第5 章 用HTML5創建表格和表單5.1 表格的基本結構 705.2 使用HTML5創建表格 725.2.1 案例1——創建普通表格<table><tr><td> 725.2.2 案例2——創建一個帶有標題的表格<caption> 735.2.3 案例3——定義表格的邊框類型border 745.2.4 案例4——定義表格的表頭<th> 755.2.5 案例5——設置表格背景bgcolor、background 765.2.6 案例6——設置單元格背景bgcolor 785.2.7 案例7——合并單元格colspan、rowspan 795.2.8 案例8——排列單元格中的內容align 835.2.9 案例9——設置單元格的行高與列寬cellpadding 845.3 案例10——創建完整的表格 855.4 案例11——認識表單<form> 875.5 表單基本元素的使用 885.5.1 案例12——單行文本輸入框text 885.5.2 案例13——多行文本輸入框textarea 895.5.3 案例14——密碼域password 895.5.4 案例15——單選按鈕radio 905.5.5 案例16——復選框checkbox 915.5.6 案例17——下拉列表框select 925.5.7 案例18——普通按鈕button 935.5.8 案例19——提交按鈕submit 945.5.9 案例20——重置按鈕reset 955.6 表單高級元素的使用 965.6.1 案例21——url屬性的應用 965.6.2 案例22——email屬性的應用 975.6.3 案例23——date和time的應用 985.6.4 案例24——number屬性的應用 995.6.5 案例25——range屬性的應用 1005.6.6 案例26——required屬性的應用 1015.7 綜合案例1——創建用戶反饋單 1025.8 綜合案例2——制作商品報價單 1035.9 高手甜點 1055.10 跟我練練手 106第6章 HTML5中的多媒體6.1 網頁音頻標記audio 1086.1.1 audio標記概述 1086.1.2 audio標記的屬性 1086.1.3 音頻解碼器 1096.1.4 audio標記瀏覽器的支持情況 1096.2 網頁視頻標記video 1096.2.1 video標記概述 1096.2.2 video標記的屬性 1106.2.3 視頻解碼器 1106.2.4 video標記瀏覽器的支持情況 1106.3 添加網頁音頻文件 1116.3.1 案例1——設置背景音樂 1116.3.2 案例2——設置音樂循環播放loop 1126.4 添加網頁視頻文件 1126.4.1 案例3——為網頁添加視頻文件video 1126.4.2 案例4——設置自動運行autoplay 1136.4.3 案例5——設置視頻文件的循環播放loop 1146.4.4 案例6——設置視頻窗口的高度與寬度height、width 1156.5 添加網頁滾動文字 1156.5.1 案例7——滾動文字標記marquee 1166.5.2 案例8——滾動方向屬性direction 1166.5.3 案例9——滾動方式屬性behavior 1176.5.4 案例10——滾動速度屬性scrollamount 1186.5.5 案例11——滾動延遲屬性scrolldelay 1196.5.6 案例12——滾動循環屬性loop 1206.5.7 案例13——滾動范圍屬性height、width 1216.5.8 案例14——滾動背景顏色屬性bgcolor 1226.5.9 案例15——滾動空間屬性hspace、vspace 1236.6 高手甜點 1246.7 跟我練練手 124第7章 使用HTML5繪制圖形7.1 什么是canvas 1267.2 繪制基本形狀 1277.2.1 案例1——繪制矩形 1277.2.2 案例2——繪制圓形 1287.2.3 案例3——使用moveTo與lineTo繪制直線 1297.2.4 案例4——使用bezierCurveTo繪制貝濟埃曲線 1317.3 繪制漸變圖形 1337.3.1 案例5——繪制線性漸變 1337.3.2 案例6——繪制徑向漸變 1357.4 繪制變形圖形 1367.4.1 案例7——變換原點坐標 1367.4.2 案例8——圖形縮放 1377.4.3 案例9——旋轉圖形 1387.5 繪制其他樣式的圖形 1397.5.1 案例10——圖形組合 1407.5.2 案例11——繪制帶陰影的圖形 1427.5.3 案例12——繪制文字 1437.6 使用圖像 1457.6.1 案例13——繪制圖像 1457.6.2 案例14——圖像平鋪 1467.6.3 案例15——圖像裁剪 1487.6.4 案例16——像素處理 1497.7 圖形的保存與恢復 1517.7.1 案例17——保存與恢復狀態 1527.7.2 案例18——保存文件 1537.8 綜合案例1——繪制火柴棒人物 1547.9 綜合案例2——繪制商標 1577.10 高手甜點 1597.11 跟我練練手 160第8章 獲取地理位置8.1 Geolocation API獲取地理位置 1628.1.1 地理定位的原理 1628.1.2 獲取定位信息的方法 1628.1.3 常用地理定位方法 1628.1.4 案例1——判斷瀏覽器是否支持HTML5獲取地理位置信息 1638.1.5 案例2——指定緯度和經度坐標 1648.1.6 案例3——獲取當前位置的經度與緯度 1658.2 目前瀏覽器對地理定位的支持情況 1678.3 綜合案例——在網頁中調用Google地圖 1688.4 高手甜點 1718.5 跟我練練手 172第9章 Web通信新技術9.1 跨文檔消息傳輸 1749.1.1 跨文檔消息傳輸的基本知識 1749.1.2 案例1——跨文檔通信應用測試 1749.2 Web Sockets API 1779.2.1 WebSocket API的概念 1779.2.2 Web Sockets通信基礎 1779.2.3 案例2——服務器端使用WebSockets API 1799.2.4 案例3——客戶端使用WebSockets API 1839.3 綜合案例——編寫簡單的Web Socket服務器 1839.4 高手甜點 1889.5 跟我練練手 188第10章 構建離線的Web10.1 HTML5離線Web應用概述 19010.2 使用HTML5離線Web應用API 19010.2.1 案例1——檢查瀏覽器的支持情況 19010.2.2 案例2——搭建簡單的離線應用程序 19110.2.3 案例3——支持離線行為 19110.2.4 案例4——manifest文件 19210.2.5 案例5——Application Cache API 19310.3 實例2——使用HTML5離線Web應用構建應用 19510.3.1 案例6——創建記錄資源的manifest文件 19510.3.2 案例7——創建構成界面的HTML和CSS 19510.3.3 案例8——創建離線的JavaScript 19610.3.4 案例9——檢查applicationCache的支持情況 19810.3.5 案例10——為Update按鈕添加處理函數 19810.3.6 案例11——添加Storage功能代碼 19910.3.7 案例12——添加離線事件處理程序 19910.4 高手甜點 20010.5 跟我練練手 201第2篇 CSS3美化網頁第11章 CSS3概述與基本11.1 CSS3概述 20611.1.1 CSS3功能 20611.1.2 瀏覽器與CSS3 20611.1.3 CSS3基礎語法 20711.1.4 CSS3常用單位 20711.2 編輯和瀏覽CSS3 21211.2.1 案例1——手工編寫CSS3 21211.2.2 案例2——Dreamweaver編寫CSS 21311.3 在HTML5中使用CSS3的方法 21511.3.1 案例3——行內樣式 21511.3.2 案例4——內嵌樣式 21611.3.3 案例5——鏈接樣式 21711.3.4 案例6——導入樣式 21911.3.5 案例7——優先級問題 22011.4 CSS3的常用選擇器 22211.4.1 案例8——標簽選擇器 22311.4.2 案例9——類選擇器 22311.4.3 案例10——ID選擇器 22411.4.4 案例11——全局選擇器 22511.4.5 案例12——組合選擇器 22611.4.6 案例13——繼承選擇器 22711.4.7 案例14——偽類選擇器 22811.5 選擇器聲明 23011.5.1 案例15——集體聲明 23011.5.2 案例16——多重嵌套聲明 23111.6 綜合實例1——制作炫彩網站Logo 23111.7 綜合案例2——制作學生信息統計表 23411.8 高手甜點 23611.9 跟我練練手 237第12章 使用CSS3美化網頁字體與段落12.1 美化網頁文字 24012.1.1 案例1——設置文字的字體 24012.1.2 案例2——設置文字的字號 24112.1.3 案例3——設置字體風格 24212.1.4 案例4——設置加粗字體 24312.1.5 案例5——將小寫字母轉換為大寫字母 24412.1.6 案例6——設置字體的復合屬性 24512.1.7 案例7——設置字體顏色 24612.2 設置文本的高級樣式 24712.2.1 案例8——設置文本陰影效果 24812.2.2 案例9——設置文本溢出效果 24912.2.3 案例10——設置文本的控制換行 25012.2.4 案例11——保持字體尺寸不變 25112.3 美化網頁中的段落 25212.3.1 案例12——設置單詞之間的間隔 25212.3.2 案例13——設置字符之間的間隔 25312.3.3 案例14——設置文字的修飾效果 25412.3.4 案例15——設置垂直對齊方式 25512.3.5 案例16——轉換文本的大小寫 25712.3.6 案例17——設置文本的水平對齊方式 25812.3.7 案例18——設置文本的縮進效果 26012.3.8 案例19——設置文本的行高 26112.3.9 案例20——文本的空白處理 26212.3.10 案例21——文本的反排 26312.4 綜合案例1——設置網頁標題 26412.5 綜合案例2——制作新聞頁面 26612.6 高手甜點 26712.7 跟我練練手 268第13章 使用CSS3美化網頁圖片13.1 圖片縮放 27013.1.1 案例1——通過描述標記width和height縮放圖片 27013.1.2 案例2——使用CSS3中的max-width和max-height縮放圖片 27013.1.3 案例3——使用CSS3中的width和height縮放圖片 27213.2 設置圖片的對齊方式 27213.2.1 案例4——設置圖片橫向對齊 27313.2.2 案例5——設置圖片縱向對齊 27313.3 圖文混排 27513.3.1 案例6——設置文字環繞效果 27513.3.2 案例7——設置圖片與文字的間距 27713.4 綜合案例1——制作學校宣傳單 27813.5 綜合案例2——制作簡單圖文混排網頁 28113.6 高手甜點 28213.7 跟我練練手 283第14章 使用CSS3美化網頁背景與邊框14.1 使用CSS3美化背景 28614.1.1 案例1——設置背景顏色background-color 28614.1.2 案例2——設置背景圖片background-image 28714.1.3 案例3——背景圖片重復background-repeat 28814.1.4 案例4——背景圖片顯示background-attachment 29014.1.5 案例5——背景圖片位置background-position 29114.1.6 案例6——背景圖片大小background-size 29314.1.7 案例7——背景顯示區域background-origin 29414.1.8 案例8——背景圖像裁剪區域background-clip 29614.1.9 案例9——背景復合屬性 29714.2 使用CSS3美化邊框 29914.2.1 案例10——設置邊框樣式border-style 29914.2.2 案例11——設置邊框顏色border-color 30014.2.3 案例12——設置邊框線寬border-width 30214.2.4 案例13——設置邊框復合屬性 30314.3 設置邊框圓角效果border-radius 30414.3.1 案例14——設置圓角邊框 30414.3.2 案例15——指定兩個圓角半徑 30514.3.3 案例16——繪制四個不同圓角邊框 30614.3.4 案例17——繪制不同種類的邊框 30814.4 綜合案例1——制作簡單公司主頁 31014.5 綜合案例2——制作簡單生活資訊主頁 31414.6 高手甜點 31614.7 跟我練練手 317第15章 使用CSS3美化表格和表單樣式15.1 美化表格樣式 32015.1.1 案例1——設置表格邊框樣式border-collapse 32015.1.2 案例2——設置表格邊框寬度border-width 32215.1.3 案例3——設置表格邊框顏色background-color 32315.2 美化表單樣式 32515.2.1 案例4——美化表單中的元素font 32515.2.2 案例5——美化提交按鈕transparent 32715.2.3 案例6——美化下拉列表font 32815.3 綜合案例1——制作用戶登錄頁面 33015.4 綜合案例2——制作用戶注冊頁面 33215.5 高手甜點 33415.6 跟我練練手 335第16章 使用CSS3美化超鏈接和鼠標16.1 使用CSS3美化超鏈接 33816.1.1 案例1——改變超鏈接基本樣式 33816.1.2 案例2——設置帶有提示信息的超鏈接 33916.1.3 案例3——設置超鏈接的背景圖 34016.1.4 案例4——設置超鏈接的按鈕效果 34116.2 使用CSS3美化鼠標特效 34316.2.1 案例5——使用CSS3控制鼠標箭頭 34316.2.2 案例6——設置鼠標變幻式超鏈接 34416.2.3 案例7——設置網頁頁面滾動條 34516.3 綜合案例1——圖片版本超鏈接 34816.4 綜合案例2——關于鼠標特效實例 35016.5 綜合案例3——制作一個簡單的導航欄 35216.6 高手甜點 35416.7 跟我練練手 355第17章 使用CSS3控制網頁導航菜單的樣式17.1 使用CSS3美化項目列表 35817.1.1 案例1——美化無序列表 35817.1.2 案例2——美化有序列表 36017.1.3 案例3——美化自定義列表 36217.1.4 案例4——制作圖片列表 36317.1.5 案例5——縮進圖片列表 36417.1.6 案例6——列表復合屬性 36517.2 使用CSS3制作網頁菜單 36717.2.1 案例7——制作無序表格的菜單 36717.2.2 案例8——制作水平菜單 36917.3 綜合案例1——模擬soso導航欄 37117.4 綜合案例2——將段落轉變成列表 37517.5 高手甜點 37717.6 跟我練練手 377第3篇 網頁版式布局第18章 CSS定位與DIV布局核心技術18.1 了解塊級元素和行內級元素 38218.1.1 案例1——塊級元素和行內級元素的應用 38218.1.2 案例2——div元素和span元素的區別 38418.2 盒子模型 38518.2.1 盒子模型的概念 38518.2.2 案例3——定義網頁border區域 38618.2.3 案例4——定義網頁padding區域 38718.2.4 案例5——定義網頁margin區域 38818.3 CSS3新增彈性盒模型 39218.3.1 案例6——定義盒子布局取向（box-orient） 39218.3.2 案例7——定義盒子布局順序（box-direction） 39418.3.3 案例8——定義盒子布局位置（box-ordinal-group） 39518.3.4 案例9——定義盒子彈性空間（box-flex） 39718.3.5 案例10——管理盒子空間（box-pack和box-align） 39918.3.6 案例11——盒子空間的溢出管理（box-lines） 40118.4 綜合案例1——圖文排版效果 40218.5 綜合案例2——淘寶導購菜單 40418.6 高手甜點 40718.7 跟我練練手 408第19 章 CSS+DIV盒子的浮動與定位19.1 定義DIV 41019.1.1 什么是DIV 41019.1.2 案例1——創建DIV 41019.2 盒子的定位 41119.2.1 案例2——靜態定位static 41219.2.2 案例3——相對定位relative 41219.2.3 案例4——絕對定位absolute 41319.2.4 案例5——固定定位fixed 41419.2.5 案例6——盒子的浮動float 41619.3 其他CSS布局定位方式 41819.3.1 案例7——溢出（overflow）定位 41819.3.2 案例8——隱藏（visibility）定位 41919.3.3 案例9——z-index空間定位 42119.4 新增CSS3多列布局 42319.4.1 案例10——設置列寬度column-width 42319.4.2 案例11——設置列數column-count 42419.4.3 案例12——設置列間距column-gap 42619.4.4 案例13——設置列邊框樣式column-rule 42719.5 綜合案例1——定位網頁布局樣式 42919.6 綜合案例2——制作陰影文字效果 43219.7 高手甜點 43319.8 跟我練練手 434第20 章 網頁布局實戰案例剖析20.1 固定寬度網頁剖析與布局 43620.1.1 案例1——網頁單列布局模式 43620.1.2 案例2——網頁1-2-1型布局模式 44020.1.3 案例3——網頁1-3-1型布局模式 44320.2 自動縮放網頁1-2-1型布局模式 44720.2.1 案例4——“1-2-1”等比例變寬布局 44720.2.2 案例5——“1-2-1”單列變寬布局 44820.3 自動縮放網頁1-3-1型布局模式 44920.3.1 “1-3-1”三列寬度等比例布局 44920.3.2 案例6——“1-3-1”單側列寬度固定的變寬布局 45020.3.3 案例7——“1-3-1”中間列寬度固定的變寬布局 45420.3.4 案例8——“1-3-1”雙側列寬度固定的變寬布局 45820.3.5 案例9——“1-3-1”中列和左側列寬度固定的變寬布局 46220.4 綜合案例1——單列寬度變化布局 46520.5 綜合案例2——多列等比例寬度變化布局 46720.6 高手甜點 47020.7 跟我練練手 471第4篇 綜合案例實戰第21章 制作在線購物類網頁21.1 整體布局 47621.1.1 設計分析 47621.1.2 排版架構 47721.2 主要模塊設計 47721.2.1 Logo與導航區 47721.2.2 Banner與資訊區 47921.2.3 產品類別區域 48021.2.4 頁腳區域 481第22章 制作移動設備類網頁22.1 網站設計分析 48422.2 網站結構分析 48422.3 網站主頁面的制作 48522.4 網站成品預覽 487第23 章 制作娛樂休閑類網頁23.1 整體設計 49423.1.1 應用設計分析 49423.1.2 架構布局分析 49523.2 主要模塊設計 49623.2.1 網頁整體樣式插入 49623.2.2 頂部模塊代碼分析 49823.2.3 視頻模塊代碼分析 49923.2.4 評論模塊代碼分析 50023.2.5 熱門推薦模塊代碼分析 50123.2.6 底部模塊分析 50423.3 網頁調整 50423.3.1 部分內容調整 50423.3.2 調整后預覽測試 506
