內(nèi) 容 簡 介本書根據(jù)作者在長期教學中積累的豐富的網(wǎng)頁設計教學經(jīng)驗,完整、詳盡地介紹HTML + CSS 3網(wǎng)頁樣式與布局的技術(shù)。本書分為22章,內(nèi)容包括HTML與CSS 3網(wǎng)頁設計概述、網(wǎng)頁文檔的結(jié)構(gòu)、網(wǎng)頁文本的設計、網(wǎng)頁色彩和圖像的設計、網(wǎng)頁超鏈接的設計、網(wǎng)頁表單的設計、網(wǎng)頁表格的設計、網(wǎng)頁音頻和視頻的設計、網(wǎng)頁圖形的繪制、CSS 3網(wǎng)頁樣式核心基礎、控制網(wǎng)頁字體和段落樣式、控制網(wǎng)頁圖片的顯示樣式、控制網(wǎng)頁背景和邊框樣式、控制表格與表單樣式、控制網(wǎng)頁超鏈接和鼠標樣式、控制網(wǎng)頁導航菜單樣式、CSS 3的高級特性、CSS定位與DIV布局核心技術(shù)、CSS + DIV盒子的浮動與定位、網(wǎng)頁布局剖析與制作,最后以兩個綜合性網(wǎng)站的設計為例進行講解。通過每章的實戰(zhàn)案例,讓讀者進一步鞏固所學的知識,提高綜合實戰(zhàn)能力。本書內(nèi)容豐富、全面,圖文并茂,步驟清晰,通俗易懂,專業(yè)性強,使讀者能理解HTML + CSS 3網(wǎng)頁樣式與布局的技術(shù),并能解決工作中的實際問題,真正做到“知其然,更知其所以然”。本書涉及面廣泛,幾乎涵蓋了HTML + CSS 3網(wǎng)頁樣式與布局的所有重要知識,適合所有的網(wǎng)頁設計初學者快速入門,同時也適合想全面了解HTML + CSS 3網(wǎng)頁樣式與布局的設計人員閱讀。前 言
隨著用戶對頁面體驗要求的提高,頁面前端技術(shù)日趨重要。HTML技術(shù)成熟,在前端技術(shù)中突顯優(yōu)勢,HTML技術(shù)在各大瀏覽器廠商的支持下,將會更加盛行,因此本書致力于幫助讀者完全掌握HTML + CSS 3技術(shù)。本書可以讓讀者掌握目前流行的最新前端技術(shù),使前端從外觀上變得更炫、技術(shù)上更簡易。本書知識點從易到難,講解詳細且透徹,結(jié)構(gòu)順暢,非常適合沒有基礎的讀者學習。
1. 本書特色
(1)知識全面:知識點由淺入深,涵蓋HTML + CSS 3的所有知識點,幫助讀者由淺入深地掌握HTML + CSS 3知識,以及網(wǎng)頁設計方面的技能。
(2)圖文并茂:注重操作,圖文并茂,在介紹案例的過程中,每一個操作均有對應的插圖。這種圖文結(jié)合的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程以及效果,便于更快地理解和掌握。
(3)易學易用:顛覆傳統(tǒng)“看”書的觀念,變成一本能“操作”的圖書。
(4)案例豐富:把知識點融會于系統(tǒng)的案例實訓中,并且結(jié)合經(jīng)典案例進行講解和拓展,進而達到“知其然,并知其所以然”的效果。
(5)貼心周到:本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行了說明,以免讀者在學習的過程中走彎路。
(6)超值贈送:除了本書的素材和結(jié)果外,本書還將贈送封面所述的大量的資源,讀者可以全面掌握網(wǎng)頁設計的方方面面的知識。
2. 讀者對象
本書不僅適合網(wǎng)頁設計初級讀者入門學習,也可作為中、高級用戶的參考手冊。書中大量的示例模擬了真實的網(wǎng)頁設計案例,對讀者的工作有現(xiàn)實的借鑒作用。
3. 作者團隊
本書作者劉玉紅長期從事網(wǎng)站設計與開發(fā)工作;另外還有胡同夫、梁云亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海松等人參與了編寫工作。
本書雖然傾注了編者的不懈努力,但由于水平有限,書中難免有錯漏之處,讀者如果遇到問題或有意見和建議,可以與我們聯(lián)系,我們將全力提供幫助。
編 者目 錄
第1章 HTML與CSS 3網(wǎng)頁設計概述 1
1.1 網(wǎng)頁與網(wǎng)站 2
1.1.1 什么是網(wǎng)頁和網(wǎng)站 2
1.1.2 網(wǎng)頁的基本構(gòu)成元素 2
1.2 HTML的基本概念 3
1.2.1 什么是HTML 4
1.2.2 HTML的發(fā)展歷程 4
1.2.3 HTML文件的基本結(jié)構(gòu) 4
1.3 CSS的基本概念 5
1.3.1 什么是CSS 5
1.3.2 HTML與CSS的優(yōu)缺點 5
1.3.3 瀏覽器對CSS 3的支持 6
1.4 HTML與CSS網(wǎng)頁的開發(fā)環(huán)境 6
1.4.1 記事本開發(fā)環(huán)境 6
1.4.2 Dreamweaver CS6開發(fā)環(huán)境 7
1.5 專家答疑 7
第2章 網(wǎng)頁文檔的結(jié)構(gòu) 9
2.1 HTML文檔的基本結(jié)構(gòu) 10
2.1.1 HTML頁面的整體結(jié)構(gòu) 10
2.1.2 HTML 5新增的結(jié)構(gòu)標記 10
2.2 HTML 5的基本標記詳解 11
2.2.1 文檔類型說明 11
2.2.2 HTML標記 11
2.2.3 頭標記head 11
2.2.4 網(wǎng)頁的主體標記body 14
2.2.5 頁面注釋標記<!-- --> 15
2.3 HTML 5語法的變化 15
2.3.1 標簽不再區(qū)分大小寫 15
2.3.2 允許屬性值不使用引號 16
2.3.3 允許部分屬性值的屬性省略 17
2.4 HTML 5文件的編寫方法 17
2.4.1 示例1——使用記事本手工編寫HTML 5 17
2.4.2 示例2——使用Dreamweaver CS6編寫HTML文件 18
2.5 使用瀏覽器查看HTML 5文件 20
2.5.1 示例3——查看頁面效果 20
2.5.2 示例4——查看源文件 21
2.6 綜合示例——符合W3C標準的HTML 5網(wǎng)頁 21
2.7 上機練習——簡單的HTML 5網(wǎng)頁 22
2.8 專家答疑 23
第3章 網(wǎng)頁文本的設計 25
3.1 在網(wǎng)頁中添加文本 26
3.1.1 普通文本的添加 26
3.1.2 特殊字符文本的添加 26
3.2 使用HTML 5標記添加特殊文本 28
3.2.1 添加重要文本 28
3.2.2 添加傾斜文本 29
3.2.3 添加上標和下標文本 29
3.2.4 設置文本旁注的文字大小 30
3.2.5 設置已刪除文本 30
3.2.6 定義文本的方向 31
3.3 使用HTML 5標記排版網(wǎng)頁文本 31
3.3.1 網(wǎng)頁段落文本換行 32
3.3.2 分段顯示網(wǎng)頁段落文本 32
3.3.3 設定網(wǎng)頁中的標題文本 33
3.3.4 為網(wǎng)頁添加水平線 34
3.4 文字列表 35
3.4.1 建立無序列表<ul> 35
3.4.2 建立有序列表<ol> 36
3.4.3 建立不同類型的無序列表 37
3.4.4 建立不同類型的有序列表 38
3.4.5 建立嵌套列表 39
3.4.6 自定義列表 39
3.5 綜合示例——制作簡單的純文本網(wǎng)頁 40
3.6 上機練習——制作旅游網(wǎng)網(wǎng)頁 41
3.7 專家答疑 42
第4章 網(wǎng)頁色彩和圖像的設計 43
4.1 網(wǎng)頁色彩的應用 44
4.1.1 認識色彩 44
4.1.2 網(wǎng)頁中色彩的搭配 45
4.1.3 網(wǎng)頁元素的色彩搭配 46
4.1.4 網(wǎng)頁顏色的使用風格 47
4.1.5 精彩配色賞析 48
4.2 網(wǎng)頁中的圖像<img> 49
4.2.1 在網(wǎng)頁中插入圖像 49
4.2.2 設置圖像的寬度和高度 51
4.2.3 設置圖像的提示文字 51
4.2.4 將圖片設置為網(wǎng)頁背景 52
4.2.5 排列圖像 53
4.3 綜合示例——圖文并茂的房屋裝飾裝修網(wǎng)頁 54
4.4 上機練習——在線購物網(wǎng)站的產(chǎn)品展示 55
4.5 專家答疑 56
第5章 網(wǎng)頁超鏈接的設計 57
5.1 鏈接和路徑 58
5.1.1 超鏈接的概念 58
5.1.2 鏈接路徑URL 58
5.1.3 創(chuàng)建HTTP路徑 60
5.1.4 創(chuàng)建FTP路徑 61
5.1.5 創(chuàng)建電子郵件路徑 61
5.2 創(chuàng)建網(wǎng)頁文本鏈接 62
5.2.1 使用鏈接元素<a>創(chuàng)建文本超鏈接(1) 62
5.2.2 使用鏈接元素<a>創(chuàng)建文本超鏈接(2) 63
5.2.3 設置以新窗口顯示超鏈接頁面 64
5.2.4 鏈接到同一頁面的不同位置 65
5.3 創(chuàng)建網(wǎng)頁圖像鏈接 66
5.3.1 創(chuàng)建圖像超鏈接 67
5.3.2 創(chuàng)建圖像局部鏈接 67
5.4 創(chuàng)建浮動框架 68
5.5 綜合示例——用Dreamweaver
精確定位熱點區(qū)域 69
5.6 上機練習——創(chuàng)建熱點區(qū)域 71
5.7 專家答疑 72
第6章 網(wǎng)頁表單的設計 75
6.1 表單概述 76
6.2 在網(wǎng)頁中添加基本的表單元素 76
6.2.1 添加單行文本輸入框 77
6.2.2 添加多行文本輸入框 77
6.2.3 添加密碼輸入框 78
6.2.4 添加單選按鈕 79
6.2.5 添加復選框 80
6.2.6 添加下拉選擇框 80
6.2.7 添加普通按鈕 81
6.2.8 添加提交按鈕 82
6.2.9 添加重置按鈕 83
6.3 在網(wǎng)頁中添加高級表單元素 84
6.3.1 添加不能為空的網(wǎng)站網(wǎng)址輸入框 84
6.3.2 添加郵箱輸入框 85
6.3.3 添加時間類型表單 86
6.3.4 添加數(shù)值輸入框 87
6.3.5 添加滾動控件 87
6.3.6 添加不能為空的表單元素 88
6.4 綜合示例——創(chuàng)建用戶反饋表單 89
6.5 上機練習——制作用戶注冊表單 90
6.6 專家答疑 91
第7章 網(wǎng)頁表格的設計 93
7.1 表格的基本結(jié)構(gòu) 94
7.2 創(chuàng)建表格 95
7.2.1 創(chuàng)建普通表格 95
7.2.2 創(chuàng)建一個帶有標題的表格 96
7.3 編輯表格 97
7.3.1 定義表格的邊框類型 97
7.3.2 定義表格的表頭 98
7.3.3 設置表格的背景 99
7.3.4 設置單元格的背景 101
7.3.5 合并單元格 102
7.3.6 排列單元格中的內(nèi)容 106
7.3.7 設置單元格的行高與列寬 107
7.4 完整的表格標記 108
7.5 綜合示例——制作計算機報價表 109
7.6 上機練習——制作學生成績表 111
7.7 專家答疑 114
第8章 網(wǎng)頁音頻和視頻的設計 117
8.1 audio標簽 118
8.1.1 audio標簽概述 118
8.1.2 audio標簽的屬性 119
8.1.3 audio標簽瀏覽器的支持情況 119
8.2 在網(wǎng)頁中添加音頻文件 120
8.2.1 添加自動播放音頻文件 120
8.2.2 添加帶有控件的音頻文件 120
8.2.3 添加循環(huán)播放的音頻文件 121
8.2.4 添加預播放的音頻文件 121
8.3 video標簽 122
8.3.1 video標簽概述 122
8.3.2 video標簽的屬性 123
8.3.3 video標簽瀏覽器的支持情況 124
8.4 在網(wǎng)頁中添加視頻文件 124
8.4.1 添加自動播放的視頻文件 124
8.4.2 添加帶有控件的視頻文件 125
8.4.3 添加循環(huán)播放的視頻文件 125
8.4.4 添加預播放的視頻文件 126
8.4.5 設置視頻文件的高度和寬度 127
8.5 專家答疑 127
第9章 網(wǎng)頁圖形的繪制 129
9.1 添加canvas的步驟 130
9.2 繪制基本形狀 130
9.2.1 繪制矩形 131
9.2.2 繪制圓形 132
9.2.3 使用moveTo與lineTo繪制直線 133
9.2.4 使用bezierCurveTo繪制貝塞爾曲線 134
9.3 繪制漸變圖形 136
9.3.1 繪制線性漸變 136
9.3.2 繪制徑向漸變 137
9.4 繪制變形圖形 138
9.4.1 繪制平移效果的圖形 138
9.4.2 繪制縮放效果的圖形 139
9.4.3 繪制旋轉(zhuǎn)效果的圖形 140
9.4.4 繪制組合效果的圖形 141
9.4.5 繪制帶陰影的圖形 143
9.5 使用圖像 144
9.5.1 繪制圖像 145
9.5.2 平鋪圖像 146
9.5.3 裁剪圖像 147
9.5.4 圖像的像素處理 149
9.6 繪制文字 150
9.7 圖形的保存與恢復 152
9.7.1 保存與恢復狀態(tài) 152
9.7.2 保存文件 153
9.8 綜合示例——繪制火柴棒人物 154
9.9 上機練習——繪制商標 157
9.10 專家答疑 158
第10章 CSS 3網(wǎng)頁樣式核心基礎 161
10.1 CSS 3基礎語法概述 162
10.1.1 CSS 3的構(gòu)造規(guī)則 162
10.1.2 CSS 3的常用單位 162
10.1.3 CSS 3的注釋 166
10.2 編輯CSS 3文件的方法 167
10.2.1 手工編寫CSS 3 167
10.2.2 用Dreamweaver編寫CSS 168
10.3 在HTML 5中使用CSS 3的方法 169
10.3.1 行內(nèi)樣式 169
10.3.2 內(nèi)嵌樣式 170
10.3.3 鏈接樣式 171
10.3.4 導入樣式 172
10.3.5 優(yōu)先級問題 173
10.4 CSS 3的基本選擇器 176
10.4.1 標簽選擇器 176
10.4.2 類選擇器 177
10.4.3 ID選擇器 178
10.4.4 全局選擇器 179
10.5 綜合示例——制作炫彩網(wǎng)站Logo 179
10.6 上機練習——制作學生信息統(tǒng)計表 182
10.7 專家答疑 184
第11章 使用CSS 3控制網(wǎng)頁字體與段落樣式 185
11.1 豐富網(wǎng)頁文字樣式 186
11.1.1 設置文字的字體樣式 186
11.1.2 設置文字的字號 187
11.1.3 設置字體風格 188
11.1.4 設置加粗字體 189
11.1.5 將小寫字母轉(zhuǎn)為大寫字母 190
11.1.6 設置字體的復合屬性 191
11.1.7 設置字體顏色 192
11.2 網(wǎng)頁文本的高級樣式 193
11.2.1 設置文本陰影效果 193
11.2.2 設置文本溢出效果 194
11.2.3 設置文本的控制換行 195
11.2.4 保持字體尺寸不變 196
11.3 豐富網(wǎng)頁中的段落樣式 197
11.3.1 設置單詞之間的間隔 197
11.3.2 設置字符之間的間隔 198
11.3.3 設置文字的修飾效果 199
11.3.4 設置垂直對齊方式 200
11.3.5 轉(zhuǎn)換文本的大小寫 202
11.3.6 設置文本的水平對齊方式 203
11.3.7 設置文本的縮進效果 204
11.3.8 設置文本的行高 205
11.3.9 文本的空白處理 206
11.3.10 文本的反排 207
11.4 綜合示例——設置網(wǎng)頁標題 208
11.5 上機練習——制作新聞頁面 210
11.6 專家答疑 211
第12章 使用CSS 3控制網(wǎng)頁圖片的顯示樣式 213
12.1 縮放圖片 214
12.1.1 使用描述標記width和height縮放圖片 214
12.1.2 使用CSS 3中的max-width和max-height縮放圖片 214
12.1.3 使用CSS 3中的width和height縮放圖片 215
12.2 網(wǎng)頁圖片與文字的對齊方式 216
12.2.1 橫向?qū)R方式 216
12.2.2 縱向?qū)R方式 217
12.3 圖文混排樣式 219
12.3.1 設置文字環(huán)繞效果 219
12.3.2 設置圖片與文字的間距 220
12.4 綜合示例——制作學校宣傳單 222
12.5 上機練習——制作簡單的圖文混排網(wǎng)頁 224
12.6 專家答疑 225
第13章 使用CSS 3控制網(wǎng)頁背景與邊框的樣式 227
13.1 使用CSS 3美化背景 228
13.1.1 設置背景顏色 228
13.1.2 設置背景圖片 229
13.1.3 背景圖片重復 230
13.1.4 背景圖片顯示 231
13.1.5 背景圖片位置 233
13.1.6 背景圖片大小 234
13.1.7 背景顯示區(qū)域 236
13.1.8 背景圖像裁剪區(qū)域 237
13.1.9 背景復合屬性 238
13.2 使用CSS 3美化邊框 239
13.2.1 設置邊框的樣式 240
13.2.2 設置邊框的顏色 241
13.2.3 設置邊框的線寬 242
13.2.4 設置邊框的復合屬性 244
13.3 設置邊框的圓角效果 245
13.3.1 設置圓角邊框 245
13.3.2 指定兩個圓角半徑 246
13.3.3 繪制四個不同圓角邊框 247
13.3.4 繪制不同種類的邊框 249
13.4 綜合示例——制作簡單的公司主頁 250
13.5 上機練習——制作簡單的生活資訊主頁 253
13.6 專家答疑 255
第14章 使用CSS 3控制表格和表單樣式 257
14.1 美化表格的樣式 258
14.1.1 設置表格邊框的樣式 258
14.1.2 設置表格邊框的寬度 260
14.1.3 設置表格邊框的顏色 261
14.2 美化表單樣式 262
14.2.1 美化表單中的元素 262
14.2.2 美化提交按鈕 264
14.2.3 美化下拉菜單 265
14.3 綜合示例——制作用戶登錄頁面 267
14.4 上機練習——制作用戶注冊頁面 268
14.5 專家答疑 270
第15章 使用CSS 3控制網(wǎng)頁超鏈接和鼠標的樣式 273
15.1 使用CSS 3豐富超鏈接樣式 274
15.1.1 改變超鏈接的基本樣式 274
15.1.2 設置帶有提示信息的超鏈接 275
15.1.3 設置超鏈接的背景圖 276
15.1.4 設置超鏈接的按鈕效果 277
15.2 使用CSS 3豐富鼠標樣式 278
15.2.1 使用CSS 3控制鼠標箭頭 278
15.2.2 設置鼠標變幻式超鏈接 280
15.2.3 設置網(wǎng)頁的頁面滾動條 281
15.3 綜合示例1——圖片版本的超鏈接 283
15.4 綜合示例2——鼠標特效 284
15.5 上機練習——制作一個簡單的導航欄 287
15.6 專家答疑 288
第16章 使用CSS 3控制網(wǎng)頁導航菜單的樣式 291
16.1 使用CSS 3來豐富項目的列表樣式 292
16.1.1 豐富無序列表樣式 292
16.1.2 豐富有序列表樣式 293
16.1.3 豐富自定義列表樣式 295
16.1.4 制作圖片列表 296
16.1.5 縮進圖片列表 298
16.1.6 列表的復合屬性 299
16.2 使用CSS 3制作網(wǎng)頁菜單 300
16.2.1 制作無需表格的菜單 300
16.2.2 制作水平和垂直菜單 302
16.3 綜合示例——模擬搜搜導航欄 304
16.4 上機練習——將段落轉(zhuǎn)變成列表 307
16.5 專家答疑 309
第17章 掌握CSS 3的高級屬性 311
17.1 復合選擇器 312
17.1.1 “交集”選擇器 312
17.1.2 “并集”選擇器 313
17.1.3 后代選擇器 313
17.2 CSS 3新增的選擇器 314
17.2.1 屬性選擇器 315
17.2.2 結(jié)構(gòu)偽類選擇器 316
17.2.3 UI元素狀態(tài)偽類選擇器 318
17.3 CSS的繼承特性 319
17.3.1 繼承關(guān)系 319
17.3.2 CSS繼承的運用 320
17.4 CSS的層疊特性 321
17.4.1 同一選擇器被多次定義的處理 321
17.4.2 同一標簽運用不同類型選擇器的處理 322
17.5 綜合示例——制作新聞菜單 323
17.6 專家答疑 326
第18章 CSS 3定位與DIV布局核心技術(shù) 327
18.1 了解塊級元素和行內(nèi)級元素 328
18.1.1 塊級元素和行內(nèi)級元素的應用 328
18.1.2 div元素和span元素的區(qū)別 330
18.2 盒子模型 331
18.2.1 盒子模型的概念 331
18.2.2 定義網(wǎng)頁的border區(qū)域 332
18.2.3 定義網(wǎng)頁的padding區(qū)域 333
18.2.4 定義網(wǎng)頁的margin區(qū)域 334
18.3 CSS 3新增的彈性盒模型 338
18.3.1 定義盒子的布局取向(box-orient) 338
18.3.2 定義盒子的布局順序(box-direction) 339
18.3.3 定義盒子布局的位置(box-ordinal-group) 341
18.3.4 定義盒子的彈性空間(box-flex) 342
18.3.5 管理盒子空間(box-pack和box-align) 344
18.3.6 盒子空間的溢出管理(box-lines) 346
18.4 綜合示例——圖文排版效果 347
18.5 上機練習——淘寶導購菜單 349
18.6 專家答疑 352
第19章 CSS 3 + DIV盒子的浮動與定位 353
19.1 定義DIV 354
19.1.1 什么是DIV 354
19.1.2 創(chuàng)建DIV 354
19.2 盒子的定位 355
19.2.1 靜態(tài)定位 355
19.2.2 相對定位 356
19.2.3 絕對定位 357
19.2.4 固定定位 358
19.2.5 盒子的浮動 359
19.3 其他CSS布局定位方式 361
19.3.1 溢出(overflow)定位 361
19.3.2 隱藏(visibility)定位 362
19.3.3 z-index空間定位 364
19.4 新增的CSS 3多列布局 366
19.4.1 設置列寬度 366
19.4.2 設置列數(shù) 367
19.4.3 設置列間距 369
19.4.4 設置列邊框樣式 370
19.5 綜合示例——定位網(wǎng)頁布局樣式 372
19.6 上機練習——制作陰影文字效果 374
19.7 專家答疑 375
第20章 網(wǎng)頁布局剖析與制作 377
20.1 固定寬度網(wǎng)頁剖析與布局 378
20.1.1 示例1——網(wǎng)頁單列布局模式 378
20.1.2 示例2——網(wǎng)頁1-2-1型布局模式 381
20.1.3 示例3——網(wǎng)頁1-3-1型布局模式 384
20.2 自動縮放網(wǎng)頁1-2-1型布局模式 387
20.2.1 示例4——“1-2-1”等比例變寬布局 387
20.2.2 示例5——“1-2-1”單列變寬布局 388
20.3 自動縮放網(wǎng)頁1-3-1型布局模式 389
20.3.1 示例6——“1-3-1”三列寬度等比例布局 390
20.3.2 示例7——“1-3-1”單側(cè)列寬度固定的變寬布局 390
20.3.3 示例8——“1-3-1”中間列寬度固定的變寬布局 393
20.3.4 示例9——“1-3-1”雙側(cè)列寬度固定的變寬布局396
20.3.5 示例10——“1-3-1”中列和左側(cè)列寬度固定的變寬布局 399
20.4 分列布局背景色的使用 402
20.4.1 示例11——設置固定寬度布局的列背景色 402
20.4.2 示例12——設置特殊寬度變化布局的列背景色 404
20.4.3 示例13——設置單列寬度變化布局的列背景色 405
20.4.4 示例14——設置多列等比例寬度變化布局的列背景 406
20.5 專家答疑 408
第21章 制作企業(yè)門戶類網(wǎng)頁 411
21.1 構(gòu)思布局 412
21.1.1 設計分析 412
21.1.2 排版架構(gòu) 412
21.2 模塊分割 413
21.2.1 Logo與導航菜單 413
21.2.2 左側(cè)的文本介紹 415
21.2.3 右側(cè)的導航鏈接 417
21.2.4 版權(quán)信息 418
21.3 整體調(diào)整 419
第22章 制作在線購物類網(wǎng)頁 421
22.1 整體布局 422
22.1.1 設計分析 422
22.1.2 排版架構(gòu) 422
22.2 模塊分割 423
22.2.1 Logo與導航區(qū) 423
22.2.2 Banner與資訊區(qū) 425
22.2.3 產(chǎn)品類別區(qū)域 427
22.2.4 頁腳區(qū)域 429
22.3 專家答疑 429