內容簡介
HTML 語言是當今網頁設計的主流表現語言,CSS 是當今網頁設計的通用修飾技術,JavaScript 是當今網頁設計的最通用腳本表現技術。HTML+CSS+JavaScript 是當前主流的網頁設計組合,是每一名網頁設計師所必須具備並精通的技術。本書將上述三種技術巧妙地結合起來,詳細講解了這三種技術的基本知識和具體用法。
本書共分為25 章,循序漸進、由淺入深地詳細講解了
HTML+
CSS+
JavaScript技術的核心內容,並通過具體實例的實現過程演練了各個知識點的具體用法。首先,詳細講解了HTML標記語言的核心內容,主要包括頁面標記、文欄位落、超連結、使用圖片、插入列表、使用表格、插入框架、表單、
HTML 5等知識點的具體用法;然後,詳細講解了CSS 的核心內容,主要包括CSS 語法、頁面布局、容器、網頁元素修飾等知識點的具體用法;接下來,詳細講解了
JavaScript的核心內容,主要包括JavaScript基礎、行為操作等知識點的具體用法;最後通過一個個人部落格系統的實現過程,詳細講解了在網頁設計過程中聯合套用HTML+CSS+JavaScript 技術的過程。全書採用知識性、趣味性相結合的講解方式,穿插了學習技巧和職場生存法則,介紹了設計師所必須具備的基本素養,並且緊跟時代潮流,講解了HTML+CSS+JavaScript 技術在移動站點中的用法。
本書不但適合於網頁設計的初學者,對於有一定網頁設計經驗的讀者來說,本書也具有很大的參考價值。
書本目錄
第1章 設計的靈魂源於靈感 1
1.1 成為一名出色的網頁設計師 1
1.2 認識網頁和網站 2
1.2.1 網頁 2
1.2.2 網站 3
1.3 製作網頁和網站的那些事 4
1.3.1 網站製作流程 4
1.3.2 網頁設計流程 5
1.3.3 發布站點 5
1.4 Web標準布局介紹 5
1.4.1 看當前的Web開發標 6
1.4.2 為什麼使用Web標準 6
1.4.3 CSS布局標準 7
1.5 網頁製作工具面面觀 8
1.5.1 幾種可視化工具 8
1.5.2 安裝Dreamweaver 10
1.6 談HTML和JavaScript的必要性 13
1.7 靈感是設計師的設計之源 13
第2章 網頁設計三劍客 15
2.1 三劍客之——體現身材的HTML 15
2.1.1 HTML概述15
2.1.2 HTML的特點 16
2.1.3 看HTML的身材如何 16
2.2 三劍客之——會化妝的CSS 16
2.2.1 CSS概述 17
2.2.2 CSS的特點17
2.2.3 CSS的好處18
2.3 三劍客之——JavaScript是美的升華 18
2.3.1 JavaScript概述 18
2.3.2 JavaScript基本概念 18
2.3.3 JavaScript的作用 19
2.4 一個典型頁面檔案實例 20
第3章 網頁的記號 23
3.1 為網頁設計髮型——設定網頁頭部元素 23
3.1.1 設定文檔類型 23
3.1.2 設定編碼類型 26
3.1.3 設定頁面標題 28
3.2 其他頭部元素 30
3.2.1 命名空間 30
3.2.2 meta標記 31
3.2.3 關鍵字 31
3.2.4 網頁描述 31
3.3 設定頁面正文 34
3.4 注釋是一種說明 36
第4章 你不一定了解的文字和段落 40
4.1 標題文字 40
4.2 文本文字 42
4.2.1 文本文字標記<font>43
4.2.2 字型設定 44
4.3 段落標記 46
4.4 換行標記 48
4.5 插入水平線 48
4.6 特殊符號處理 51
第5章 看超連結的跳躍 56
5.1 連結概述 56
5.1.1 錨鏈 56
5.1.2 URL引用 57
5.2 建立內部連結 57
5.3 建立外部連結 60
5.4 使用Telnet連結 63
5.5 創建E-mail連結 64
5.6 創建FTP連結 66
5.7 其他形式的連結 68
5.7.1 新聞組連結 69
5.7.2 WAIS連結 69
第6章 圖片是修飾網頁的最佳途徑 71
6.1 常用的圖片格式介紹 71
6.1.1 GIF格式 71
6.1.2 JPEG格式 72
6.2 設定背景圖片 73
6.3 插入圖片 75
6.3.1 圖片的基本處理 76
6.3.2 圖片布局處理 77
6.4 設定圖片連結 80
第7章 你不一定了解的列表 82
7.1 無序列表 82
7.2 有序列表 84
7.3 更加緊湊的選單列表 87
7.4 定義列表標記 89
7.5 列表的嵌套使用 91
第8章 表格沒那么簡單 94
8.1 創建一個表格 94
8.2 表格標題 97
8.3 跨行和跨列 99
8.3.1 實現跨列處理 100
8.3.2 實現跨行處理 102
8.3.3 實現同時跨行、跨列處理 105
8.4 設定表格頁眉 107
8.5 設定表格背景圖像 109
8.6 對齊處理 110
8.6.1 表格的整體對齊 110
8.6.2 對齊表格中的內元素 112
8.7 設定單元格大小 115
第9章 特效和多媒體帶來的絢麗 117
9.1 實現滾動效果 117
9.2 設定背景音樂 119
9.2.1 代碼指定 119
9.2.2 媒體外掛程式實現 120
9.3 插入Flash 122
9.4 插入Applet 126
9.5 ActiveX 控制項129
第10章 使用框架 133
10.1 框架標記介紹 133
10.2 創建框架 135
10.3 設定框架大小 139
10.4 為框架創建連結142
10.5 框架嵌套 146
第11章 看錶單帶來的革命性意義 152
11.1 表單標記 152
11.2 使用form標記 153
11.3 使用文本域154
11.4 使用文本區域 156
11.5 使用按鈕 159
11.6 使用單選按鈕和複選框 161
11.7 使用列表選單 164
11.8 使用檔案域167
11.9 使用圖像域169
11.10 使用隱藏域171
11.11 使用單選組按鈕173
11.12 表單的綜合使用176
第12章 div布局處理188
12.1 div標記介紹 188
12.1.1 div的格式 188
12.1.2 使用div 189
12.2 插入div標記 190
12.3 插入AP div 192
第13章 HTML 5來了196
13.1 HTML 5 是下一代的HTML 196
13.1.1 發展歷程 196
13.1.2 HTML 5的吸引力 197
13.2 新特性之視頻處理 197
13.2.1 video標記 198
13.2.2 <video>標記的屬性198
13.3 新特性之音頻處理 203
13.3.1 audio標記 203
13.3.2 <audio>標記的屬性204
13.4 新特性之Canvas 208
13.4.1 <canvas>標記介紹 208
13.4.2 HTML DOM Canvas 對象 209
13.4.3 Canvas實踐 209
13.5 新特性之Web存儲 219
13.5.1 Web存儲介紹 219
13.5.2 HTML 5中Web存儲的意義 220
13.5.3 兩種存儲方法 220
13.6 新特性之表單新特性223
13.6.1 全新的Input 類型 223
13.6.2 全新的表單元素 227
13.6.3 全新的表單屬性 229
第14章 等了很久的CSS基礎 236
14.1 CSS語法 236
14.2 使用選擇符239
14.2.1 命名機制 239
14.2.2 通配選擇符 240
14.2.3 類型選擇符 242
14.2.4 群組選擇符 244
14.2.5 包含選擇符 246
14.2.6 ID選擇符248
14.2.7 class選擇符 250
14.2.8 組合選擇符 250
14.3 CSS屬性介紹 250
14.4 CSS編碼規範 252
14.4.1 書寫規範 253
14.4.2 命名規範 253
14.5 顏色介紹 253
14.5.1 顏色名稱定義 254
14.5.2 十六進制定義 255
14.6 長度單位 257
14.6.1 絕對長度單位 257
14.6.2 相對長度單位 257
14.7 百分比值 258
14.8 URL是地址 261
14.8.1 相對路徑 261
14.8.2 絕對路徑 261
14.8.3 套用實例 261
14.9 CSS的調用 264
第15章 先看頁面布局 268
15.1 CSS元素介紹 268
15.1.1 塊元素 268
15.1.2 內聯元素 271
15.1.3 可變元素 272
15.2 CSS元素定位介紹 272
15.2.1 元素的定位 272
15.2.2 定位屬性 277
15.3 內容控制屬性 282
15.3.1 控制頁面內容屬性display 282
15.3.2 是否顯示屬性visibility 283
15.3.3 居中顯示屬性text-align 286
15.3.4 邊界屬性margin 289
15.4 控制頁面背景 291
15.4.1 頁面背景概述 291
15.4.2 使用背景顏色 292
15.4.3 使用背景圖片 293
15.4.4 背景顏色和背景圖片混用 301
15.4.5 設定文本樣式 303
15.4.6 設定連結樣式 305
15.5 使用浮動屬性 307
15.5.1 浮動屬性簡介 307
15.5.2 固定元素相鄰 307
15.5.3 兩個浮動元素相鄰 309
15.5.4 多個浮動元素相鄰 310
15.6 清除浮動屬性 311
15.6.1 清除浮動屬性簡介 311
15.6.2 使用清除浮動屬性 313
15.7 使用列表屬性 315
15.7.1 列表樣式屬性list-style-type 315
15.7.2 列表位置屬性list-style-position 317
15.7.3 列表圖片屬性list-style- image 318
15.7.4 列表綜合屬性list-style 320
第16章 將網頁打造成一個容器 322
16.1 盒模型簡介322
16.1.1 盒模型的內容 322
16.1.2 盒模型的背景 324
16.2 使用補白屬性 324
16.2.1 補白屬性概述 324
16.2.2 使用補白屬性百分比值 327
16.2.3 使用單側補白屬性 329
16.3 使用框線屬性 331
16.3.1 框線樣式屬性 331
16.3.2 框線寬度屬性 333
16.3.3 框線顏色屬性 335
16.3.4 框線屬性的綜合使用 336
16.3.5 使用表格框線屬性 338
16.4 使用邊界屬性 340
16.4.1 邊界屬性 340
16.4.2 單側邊界屬性 342
16.4.3 相鄰邊界屬性 344
16.5 父子元素之間的距離349
16.5.1 子元素邊界為0 349
16.5.2 父元素補白為0 351
16.6 嵌套元素使用負邊界353
16.7 固定元素的大小355
第17章 CSS設定和修飾 358
17.1 CSS文本設定 358
17.1.1 文本縮進 358
17.1.2 對齊文本 362
17.1.3 圖文混排對齊處理 365
17.1.4 設定行高和間隔 367
17.1.5 設定文本間隔和空白 372
17.1.6 實現文本轉換 375
17.1.7 實現水平和垂直居中 376
17.2 文本修飾連結 380
17.2.1 文本修飾 380
17.2.2 使用連結屬性 383
17.2.3 設定滑鼠懸停樣式 389
17.3 CSS修飾圖片 391
17.3.1 背景圖片修飾 391
17.3.2 修飾內容圖片 392
17.4 CSS表單修飾 395
17.4.1 修飾表單文本域 396
17.4.2 修飾表單文本區域 396
17.4.3 修飾表單按鈕 398
17.4.4 修飾表單複選框 399
17.4.5 修飾表單單選按鈕 400
17.4.6 修飾表單列表 401
17.4.7 修飾表單檔案域 402
17.4.8 修飾表單圖像域 403
17.5 修飾頁面滾動條404
17.6 修飾水平線406
17.7 修飾表格 407
17.7.1 修飾表格邊線和背景 407
17.7.2 設定表格的寬度和高度 408
17.7.3 實現表格居中 409
17.7.4 設定表格內容高度 412
第18章 引入JavaScript 414
18.1 JavaScript簡介 414
18.1.1 JavaScript格式414
18.1.2 一個典型的JavaScript檔案 414
18.2 數據類型 416
18.2.1 數據類型概述 416
18.2.2 JavaScript常量417
18.2.3 JavaScript變數417
18.3 表達式和運算符420
18.3.1 JavaScript表達式 420
18.3.2 JavaScript運算符 420
18.4 JavaScript循環語句 424
18.4.1 if條件語句 424
18.4.2 for循環語句 427
18.4.3 while循環語句 429
18.4.4 do…while循環語句 430
18.4.5 break控制 432
18.4.6 switch循環語句 432
18.5 JavaScript函式 432
18.5.1 函式的構成 433
18.5.2 JavaScript常用函式434
18.6 JavaScript對象 436
18.6.1 對象基礎知識 436
18.6.2 JavaScript常用對象和方法 438
18.7 JavaScript事件 441
18.7.1 JavaScript常用事件441
18.7.2 事件處理程式 443
18.8 JavaScript視窗對象 444
18.8.1 視窗對象 444
18.8.2 視窗對象的事件驅動 444
18.8.3 視窗對象中的屬性 444
18.8.4 視窗對象的方法 445
18.8.5 JavaScript視窗對象的套用 445
18.9 JavaScript框架對象 448
第19章 行為操作 451
19.1 行為介紹 451
19.1.1 行為簡介 451
19.1.2 行為事件 453
19.1.3 行為的使用 453
19.2 調用JavaScript 455
19.3 URL轉移 456
19.4 交換圖像 458
19.5 打開瀏覽器視窗460
19.6 顯示隱藏元素 462
19.7 播放聲音 463
19.8 改變屬性 465
19.9 彈出信息 467
19.10 跳轉選單 469
19.11 拖動AP元素 472
第20章 談一談設計師這個行業 474
20.1 網頁設計師這一行業474
20.2 從合格到優秀其實並不遙遠 475
20.3 企業需要什麼樣的人才 476
20.4 設計師們的三塊大蛋糕 476
20.5 從設計師的擔心談出路 477
第21章 從面試中談設計 479
21.1 面試 479
21.1.1 面試前的準備 479
21.1.2 常見的面試錯誤 480
21.2 面試中最大的問題 481
21.2.1 網頁設計師要抓住設計的靈魂 481
21.2.2 需要牢記的原則 481
21.2.3 考官的問題——網頁設計理念 484
21.2.4 考官的問題——網頁設計的誤區 484
21.3 在面試中所得——什麼才是好的網頁設計 484
21.4 配色的問題485
21.5 不得不說的標題486
21.6 面試問題——網頁設計布局 487
21.7 網頁設計必須注意的26個問題 488
21.8 探索無止境,學習無歸期491
第22章 從項目中談模組 493
22.1 一個項目引發的問題493
22.2 JavaScript特效的套用 495
22.3 文字處理 496
22.3.1 實例概述 496
22.3.2 定義文本顏色 497
22.3.3 指定文本內容 498
22.3.4 文本增亮處理 498
22.3.5 文本減亮處理 498
22.3.6 定義變換頻率 499
22.4 時間處理 502
22.5 圖像處理 506
22.5.1 實例概述 507
22.5.2 設定圖像屬性 507
22.5.3 亮度增加處理 507
22.5.4 亮度減小處理 508
22.6 背景處理 511
22.7 滑鼠游標處理 515
22.7.1 實例概述 515
22.7.2 指定跟隨文本 515
22.7.3 文本效果處理 515
22.7.4 頁面顯示 516
22.8 選單處理 518
22.8.1 實例概述 518
22.8.2 設定選單元素內容 518
22.8.3 設定滾動區域屬性 519
第23章 為Android手機設計網頁 523
23.1 搭建開發環境 523
23.1.1 搭建Android開發環境 523
23.1.2 搭建網頁運行環境 525
23.2 先看一段代碼 528
23.2.1 實現主頁 528
23.2.2 編寫CSS檔案 529
23.2.3 實現頁面自動縮放 531
23.3 添加Android的CSS 532
23.3.1 編寫基本的樣式 532
23.3.2 添加視覺效果 534
23.4 添加JavaScript 535
23.4.1 jQuery框架介紹 535
23.4.2 具體實踐 536
23.5 使用Ajax 539
23.5.1 編寫HTML檔案 539
23.5.2 編寫JavaScript檔案 543
23.5.3 最後的修飾 544
23.6 讓網頁動起來 545
23.6.1 一個開源框架——JQTouch 546
23.6.2 一個簡單套用 546
第24章 SEO最佳化 555
24.1 SEO基礎 555
24.2 搜尋引擎 556
24.2.1 搜尋引擎的工作 556
24.2.2 搜尋引擎之間的差異 557
24.3 非常重要的關鍵字 557
24.3.1 最佳化正確的關鍵字 557
24.3.2 關鍵字密度 558
24.3.3 特殊的關鍵字 559
24.3.4 利用相關性提高網站關鍵字排名 560
24.3.5 挖掘準確的長尾關鍵字 562
24.4 連結 563
24.4.1 內向連結和外向連結 563
24.4.2 錨文本 564
24.5 做好數據分析 565
24.6 網站排名算法總結 566
24.7 幾個有效的SEO排名策略567
第25章 個人部落格網站 569
25.1 網站規劃 569
25.1.1 站點需求分析 569
25.1.2 預期效果分析 570
25.1.3 站點結構規劃 571
25.2 切圖分析 571
25.3 製作站點首頁 572
25.3.1 實現流程分析 572
25.3.2 製作頂部導航 573
25.3.3 設計中間內容部分 577
25.3.4 製作底部著作權部分 583
25.4 製作日誌頁面 585
25.4.1 實現流程分析 585
25.4.2 日誌內容實現 585
25.5 製作日誌詳情頁面 586
25.5.1 實現流程分析 586
25.5.2 頁面具體實現 587
媒體評論
作者陸川是IBM的一位高級資料庫專家,從事資料庫技術工作多年,對資料庫技術和業界主流的資料庫產品及與資料庫相關產品都有豐富的經驗,尤其擅長informix資料庫的開發、移植、部署和複雜的資料庫問題解決,參與了國內許很大客戶的
informix大型項目開發與實施,在客戶和同事眼裡是受尊敬的informix高手。本書是作者在工作之餘積累平時的工作與經驗寫作而成的,是作者非常寶貴的實際經驗的總結與分享,所以我特別向大家推薦本書。
劉勝利
IBM大中華區數據管理類產品
Tivoli系統管理類產品技術總監
前言
自從網際網路技術誕生以來,便孕育出了海量級數量的Web站點,網頁設計師便成了很熱門的工作職位,“高薪、熱門、有前景”是權威部門對網頁設計師這一行業的客觀評價。這是一本講解HTML、CSS、JavaScript核心內容和具體用法的書,可作為網頁製作初學者的入門教程,同時也可為網站建設的專業人士提供一些參考。本書以“講清語法、學以致用”為指導思想,不僅僅將筆墨局限於語法講解上,而且還通過一個個鮮活、典型的小實例來達到學以致用的目的。從本書的目錄可見一斑,每個語法都有相應的實例,實例教學始終是本書的核心思想。為了方便廣大讀者學習,本人花費了半年時間寫作這本書。本書全面地介紹了網站製作的基礎技術,並以對應的實例介紹了各種技術的實現方法。本書力求讓讀者迅速掌握網頁設計技術的根本,使讀者能夠建設出基本的Web站點。
本書特色
本書內容相當豐富,實例內容覆蓋全面。我們的目標是通過一本圖書,提供多本圖書的價值,讀者可以根據自己的需要有選擇地閱讀。在內容的編寫上,本書具有以下特色。
結構合理
從讀者的實際需要出發,科學安排知識結構,內容由淺入深,敘述清楚,具有很強的知識性和實用性,幾乎講解了HTML+CSS+JavaScript所有的知識點。全書精心篩選的最具代表性、讀者最關心的典型知識點,幾乎包括網頁設計的各個方面。
易學易懂
本書條理清晰、語言簡潔,可幫助讀者快速掌握每個知識點;每個部分既相互連貫又自成體系,使讀者既可以按照本書編排的章節順序進行學習,也可以根據自己的需求對某一章節進行有針對性的學習。
實用性強
本書徹底摒棄枯燥的理論和簡單的操作,注重實用性和可操作性,詳細講解了各個部分的源碼知識,使讀者掌握相關操作技能的同時,還能學習到相應的基礎知識。
舉一反三
書中的每一個實例都專門配備了“舉一反三”模組,針對本實例實現了進一步的拓展,使整個內容深度上了一個台階,使讀者了解了與之有關的知識,讓讀者不知不覺地邁入了高手殿堂。
案例精講,深入剖析
為使讀者步入網頁製作的高手之林,在本書的最後詳細介紹了一個典型實戰實例的實現過程,使讀者不但對前面的內容進行了系統的複習,而且能夠從實戰中輕鬆掌握各個知識點的綜合運用技巧,為讀者將來更深層次的學習打下堅實的基礎。
實例剖析,Dreamweaver操作
為使讀者真正掌握具體的網頁製作知識,本書通過對應的實例對各個知識點的使用進行了詳細剖析。在實例的具體講解過程中,完全實現了Dreamweaver操作的處理方法。這樣使讀者不但掌握了網頁製作技術的精髓,而且學會了Dreamweaver工具的使用方法,做到了一舉兩得。
附帶教學資源豐富
本書贈送了豐富的教學資源,既有長時間的實例講解視頻,也有實用的知識點講解視頻,還有豐富的電子書資源;既有國內外經典網站模板,也有贈送的綜合大型網站實例。這些附帶資源,可以使讀者的學習過程更加便捷。
附帶光碟說明
(1)daima
保存了本書中所有實例的源碼和“舉一反三”的源碼。
為讀者和教研人員設計了精美的PPT檔案,供學習和教學使用。
保存了本書中所有實例的講解視頻,講解詳細,便於讀者理解學習並掌握。
(4)知識點講解視頻
保存了針對本書知識點的講解視頻,講解細緻而深入,便於讀者課餘時間學習並掌握相關知識點。
(5)豐富的電子書學習資料
保存了筆者精心挑選的學習資料,包括HTML、CSS和JavaScript、HTML、網頁設計、Dreamweaver等學習資料。這些贈送的資料以免費電子書的形式體驗,可以直接複製到自己的智慧型手機設備中,這樣便可以在業餘時間閱讀學習。
(6)贈送的綜合實例
免費贈送了5個大型綜合實例,幫助讀者深入本書內容,學習在大型項目中如何運用本書的知識。
讀者對象
初學網頁設計的自學者 大中專院校的老師和學生
網頁設計愛好者 相關培訓機構的老師和學員
網頁設計師
作者致謝
參與本書編寫工作的有陳德春、管西京、李冬艷、代林峰、黃河、曹臻、白樺、伍傑、劉英田、劉繼虎、王玉芹、程星、朱萬林、楊陽、徐亮等。在編寫本書過程中,得到了電子工業出版社工作人員的大力支持,正是各位編輯的求實、耐心和效率才能使本書快速出版。另外也十分感謝我的家人,在我寫作的時候給予了我巨大的支持。但是畢竟水平有限,紕漏和不盡人意之處在所難免,誠請讀者提出意見或建議,以便修訂並使之更加完善。