Web前端設計與製作——HTML+CSS+jQuery

《Web前端設計與製作——HTML+CSS+jQuery》是清華大學出版社於2016年5月1日出版的圖書，作者是劉心美、陳義輝、韓寶玉、孫文江。

基本介紹

• 書名：Web前端設計與製作——HTML+CSS+jQuery
• 作者：劉心美、陳義輝、韓寶玉、孫文江
• 出版社：清華大學出版社 
• 出版時間：2016年5月1日
• 定價：35 元
• ISBN：9787302424079 

內容簡介

本書系統完整地介紹了網站前台設計與製作所需技術基礎和3個企業項目。技術基礎包括網頁布局基礎、圖文排版、網站導航、網站欄目、網站表單、框架網站等，企業項目包括企業宣傳網站——舒適家居網、彩宇商貿公司網站、弘葉美容美髮公司網站的主頁設計與製作。

Web前端設計與製作——HTML+CSS+jQuery 封面

本書從網站前台設計與製作項目開發角度出發，採用HTML+CSS+jQuery技術作為主體，以任務為單位，全面、系統地將網站項目開發中前台所需的常用技術、技巧進行逐一剖析，對於網站前台開發中所出現的各種技術難點給出合理的解決方案，指明實現的技術技巧，每一任務都有針對性的解決項目開發中的具體技術，避免了大量的知識堆積。 本書提供了所有任務和項目的原始碼、素材、習題及部分答案。

目錄

第1篇網頁基礎知識

第1章網頁布局基礎31.1Web前端技術概述3

1.1.1全球資訊網與W3C3

1.1.2關於Web前端技術4

1.1.3網站與網頁4

1.2認識HTML5

1.2.1關於HTML5

1.2.2HTML結構檔案6

1.3CSS樣式7

1.3.1關於CSS的調用7

1.3.2關於選擇器10

1.3.3框模型介紹12

1.3.4CSS的定位13

1.4關於網頁布局15

1.4.1網頁布局的相關技術15

1.4.2網頁布局的流程16

1.4.3網頁布局的HTML技術17

1.5DIV+CSS頁面布局基礎17

1.5.1單欄式布局設計17

1.5.2二欄式布局設計19

1.5.3三欄式布局設計21

1.6任務拓展24

1.7本章小結24

習題25

第2章網頁圖文排版26

2.1設計圖文版面26〖2〗〖4〗Web前端設計與製作——HTML+CSS+jQuery目錄〖3〗

2.1.1製作網頁文字版面26

2.1.2製作網頁圖片版面34

2.1.3製作網頁圖文混排版面37

2.2插入多媒體44

2.2.1製作滾動的文本和圖片頁面44

2.2.2製作背景音樂頁面49

2.2.3製作視頻混排頁面55

2.2.4製作動畫混排頁面59

2.3任務拓展62

2.4本章小結63

習題63

第3章連結與導航設計64

3.1關於超連結64

3.1.1理解超連結64

3.1.2理解路徑65

3.1.3創建檔案連結65

3.2利用文字實現超級連結66

3.2.2製作水平欄導航67

3.2.3製作書籤導航70

3.3利用圖片實現超級連結74

3.3.1製作圖片水平欄導航74

3.3.2製作圖像局部導航75

3.4關於其他連結76

3.4.1下載檔案的連結77

3.4.2電子郵件連結78

3.5任務拓展80

3.6本章小結80

習題80

第4章網頁欄目設計82

4.1關於網頁欄目82

4.1.1網站欄目的含義82

4.1.2網站欄目的策劃82

4.2常用欄目設計83

4.2.1製作簡易式欄目83

4.2.2製作典型式欄目87

4.3TAB式欄目設計91

4.4視頻欄目設計93

4.5滾動式欄目設計95

4.5.1製作左右滾動式欄目96

4.5.2製作上下滾動式欄目102

4.6任務拓展105

4.7本章小結105

習題105

第5章表單頁面設計106

5.1表單概述106

5.1.1表單的概念106

5.1.2創建表單106

5.1.3表單元素107

5.1.4表單布局112

5.2搜尋表單設計113

5.2.1表單及其作用113

5.2.2製作百度搜尋頁面114

5.3跟帖評論表單設計116

5.3.1表單及其作用116

5.3.2製作跟帖評論頁面116

5.4註冊表單設計120

5.4.1表單及其作用120

5.4.2製作賬戶註冊頁面122

5.5任務拓展128

5.6本章小結128

習題129

第6章框架網頁設計130

6.1關於框架網頁130

6.2製作導航框架頁131

6.2.1關於導航框架131

6.2.2製作導航框架131

6.3製作綜合框架頁135

6.3.1關於框架的嵌套135

6.3.2製作綜合框架135

6.4製作浮動框架頁139

6.4.1關於浮動框架139

6.4.2製作浮動框架140

6.5任務拓展142

6.6本章小結142

習題143

第7章套用jQuery144

7.1關於jQuery144

7.1.1jQuery的概念144

7.1.2jQuery的原理與運行機制144

7.1.3jQuery運行環境145

7.2利用jQuery設計網站導航146

7.2.1製作普通下拉選單147

7.2.2製作級聯選單150

7.3利用jQuery設計Tab選項卡153

7.3.1橫向選項卡設計153

7.3.2縱向選項卡設計155

7.4利用jQuery設計圖片效果158

7.4.1製作圖片切換效果158

7.4.2製作圖片滾動效果161

7.5任務拓展163

7.6本章小結164

習題164

第8章移動產品網頁設計165

8.1了解jQueryMobile165

8.1.1關於jQueryMobile165

8.1.2安裝jQueryMobile166

8.2創建第一個移動產品網站167

8.2.1製作單容器頁面結構網站167

8.2.2製作多容器頁面結構網站170

8.2.3製作可摺疊內容頁面174

8.3網站導航欄設計177

8.3.1製作導航工具列177

8.3.2製作固定導航欄181

8.4使用布局格線185

8.4.1兩列布局185

8.4.2三列布局186

8.4.3多行多列布局186

8.5創建列表視圖190

8.5.1製作文字列表190

8.5.2製作圖文列表194

8.6表單設計196

8.7任務拓展203

8.8本章小結204

習題204

第2篇項目開發

第9章企業宣傳網站——舒適家居網2079.1客戶需求207

9.2網站分析207

9.2.1網頁主題分析207

9.2.2網頁風格定位208

9.3網站搭建209

9.3.1建立網站結構209

9.3.2建立網站主頁210

9.4技術準備210

9.4.1網頁DIV區域劃分210

9.4.2網頁效果圖切片212

9.5添加網頁結構和樣式214

9.5.1建立網頁主體輪廓214

9.5.2建立網頁內容區域215

9.5.3建立網頁頁腳區域220

9.6常規添加Flash動畫220

9.7本章小結221

第10章彩宇商貿公司網站222

10.1客戶需求222

10.2網站分析222

10.2.1網頁主題分析222

10.2.2網頁風格定位223

10.3網站技術準備224

10.3.1網頁效果圖切片224

10.3.2網頁DIV區域劃分225

10.4添加網頁結構和樣式227

10.4.1建立網頁主體227

10.4.2建立網頁頁頭區域228

10.4.3建立網頁內容區域231

10.4.4建立網頁頁腳區域236

10.5利用jQuery添加網頁特效237

10.6本章小結238

第11章弘葉美容美髮公司網站239

11.1客戶需求239

11.2網站分析239

11.2.1網頁主題分析239

11.2.2網頁風格定位240

11.3網站技術準備240

11.3.1網頁效果圖切片241

11.3.2網頁DIV區域劃分242

11.4添加網頁結構和樣式243

11.4.1建立網頁主體243

11.4.2建立網頁頁頭區域244

11.4.3建立網頁內容區域245

11.4.4建立網頁頁腳區域249

11.5利用jQuery添加網頁特效249

11.6本章小結250

參考文獻