本書內(nèi)容包括:使用文本、鏈接、圖像、表格和表單來構(gòu)建HTML頁面;使用CSS調(diào)整顏色、背景、頁面布局以及格式化文本,甚至是實現(xiàn)簡單的動畫效果;學習JavaScript的工作原理及其在Web設計中的重要性;創(chuàng)建并優(yōu)化Web圖像,加快圖像下載速度。
這書是一本完整的Web 設計和制作的入門指南。全書716頁,詳解WEB前端基礎知識,如HTML、CSS、JavaScript、Web圖像制作等等,帶領(lǐng)讀者學習網(wǎng)站開發(fā)的全過程。無論你是一名初學者還是想進一步提高自己的網(wǎng)頁設計技能,本書都能為你提供極具參考性的信息。
Jennifer Niederst Robbins 資深Web設計師,有25年行業(yè)經(jīng)驗,在Web設計方面有獨到的見解與認識,全球第一個商業(yè)Web網(wǎng)站——O’Reilly的“全球網(wǎng)絡導航器”(Global Network Navigator,GNN)的設計者。她是Artifact Conference的創(chuàng)始人和組織者,該會議致力于解決與移動Web設計相關(guān)的問題。她是全美廣受歡迎的會議演講者,著有Web Design in a Nutshell和HTML5 Pocket Reference。
【第一部分 開始起步7】
從哪里開始9
它需要一個團隊(網(wǎng)站創(chuàng)建角色)10
為Web設計做準備19
你學會了什么25
自我測驗25
互聯(lián)網(wǎng)與Web26
提供你的信息27
關(guān)于瀏覽器27
網(wǎng)頁地址(URL)29
網(wǎng)頁結(jié)構(gòu)31
小結(jié)36
自我測驗37
各種設備40
與標準一致41
逐步提高42
自適應Web設計43
可訪問性:所有用戶一個網(wǎng)站46
網(wǎng)站性能:連接速度的要求48
自我測驗50
【第二部分 HTML結(jié)構(gòu)53】
-
第4章 創(chuàng)建簡單網(wǎng)頁55
創(chuàng)建網(wǎng)頁的步驟55
啟動文本編輯器56
第1步:從內(nèi)容開始58
第2步:HTML文檔結(jié)構(gòu)化61
第3步:確定文本元素64
第4步:添加圖像67
第5步:使用樣式表改變外觀70
當網(wǎng)頁出錯時72
驗證你的文檔73
自我測驗74
元素回顧:HTML文檔結(jié)構(gòu)75
段落76
標題77
主題中斷78
列表79
更多內(nèi)容元素82
組織網(wǎng)頁內(nèi)容85
內(nèi)聯(lián)元素綜述91
泛型元素div和span100
使用ARIA提高可訪問性104
字符轉(zhuǎn)義107
小結(jié)109
自我測驗112
元素回顧:文本元素112
href屬性115
鏈接到Web上的網(wǎng)頁117
站內(nèi)鏈接118
以新瀏覽器窗口為目標127
郵件鏈接129
電話鏈接129
自我測驗130
元素回顧:鏈接131
圖像格式簡介133
img元素134
添加SVG圖像139
自適應圖像標記146
小結(jié)158
自我測驗158
元素回顧:圖像159
如何使用表格161
最小表結(jié)構(gòu)162
表頭165
合并單元格165
表格可訪問性166
行和列組168
小結(jié)170
自我測驗172
元素回顧:表格172
表單如何工作174
表單元素176
變量和內(nèi)容178
重要表單控件綜述179
表單可訪問性功能197
表單布局和設計201
自我測驗202
元素回顧:表單203
窗口中的窗口207
多用途嵌入器209
視頻和音頻210
畫布219
自我測驗223
元素回顧:嵌入式媒體223
【第三部分 表現(xiàn)層的CSS227】
CSS的優(yōu)點229
樣式表如何工作231
大概念235
CSS計量單位241
開發(fā)者工具就在瀏覽器中244
繼續(xù)使用CSS246
自我測驗247
基本字體屬性249
使用CSS3的高級排版功能265
改變文本顏色267
更多選擇器類型268
文本行設置274
下劃線和其他“修飾”277
改變字母大小寫278
空格279
文本陰影280
改變列表的數(shù)字編號284
自我測驗286
CSS回顧:字體和文本屬性288
指定顏色值290
前景色297
背景色298
裁剪背景299
使用不透明度300
偽類選擇器301
偽元素選擇器306
屬性選擇器308
背景圖像309
快捷背景屬性323
漸變327
外部樣式表334
小結(jié)339
自我測驗339
CSS回顧:色彩和背景屬性341
元素盒子342
指定盒子尺寸343
填充348
邊框352
空白邊362
分配顯示類型365
盒子陰影368
自我測驗369
CSS回顧:盒子屬性369
普通流372
浮動373
用CSS形狀進行精美文本環(huán)繞383
定位基礎390
相對定位391
絕對定位392
固定定位400
自我測驗401
CSS回顧:浮動和定位屬性402
-
第16章 使用Flexbox和網(wǎng)格進行CSS布局403
使用CSS Flexbox的靈活盒子403
CSS網(wǎng)格布局432
自我測驗463
CSS回顧:布局屬性466
為什么要使用RWD470
自適應秘訣470
選擇斷點477
自適應設計481
關(guān)于測試492
更多的RWD資源494
自我測驗495
CSS過渡497
CSS變換507
關(guān)鍵幀動畫515
小結(jié)520
自我測驗521
CSS回顧:過渡、變換和動畫522
對表單設置樣式524
對表格設置樣式527
重置和Normalize.css530
圖像替換技術(shù)532
CSS Sprite533
CSS特性檢測535
小結(jié)539
自我測驗539
CSS回顧:表格屬性541
-
第20章 現(xiàn)代Web開發(fā)工具542
熟悉命令行542
CSS的強大工具:處理器546
構(gòu)建工具:Grunt和Gulp552
使用Git和Github進行版本控制554
小結(jié)560
自我測驗561
【第四部分 JavaScript行為563】
關(guān)于JavaScript565
給網(wǎng)頁添加JavaScript568
腳本剖析569
瀏覽器對象582
事件582
綜合應用584
學習更多關(guān)于JavaScript的知識585
自我測驗588
DOM簡介589
polyfill597
JavaScript庫599
小結(jié)603
自我測驗603
【第五部分 Web圖像605】
圖像來源607
格式簡介610
圖像尺寸和分辨率620
圖像資產(chǎn)策略623
favicon627
小結(jié)630
自我測驗630
將圖像保存為Web格式632
使用透明度637
自適應圖像制作技巧640
圖像優(yōu)化650
自我測驗660
使用XML繪圖663
SVG作為XML的特性670
SVG工具675
SVG制作技巧677
自適應SVG681
SVG的進一步探索687
自我測驗687
我們學完了688
【第六部分 附錄689】
附錄A 自我測驗答案691
附錄B HTML5全局屬性705
附錄C CSS選擇器的第3級和第4級707
附錄D 從HTML 到HTML5710