本書全面、系統、深入地講解了HTML5+CSS3網頁設計與編程的基礎知識與高級應用。在講解過程中,通過大量取自實際操作的案例,將網頁開發知識全面、系統、深入地呈現給讀者。此外,作者專門為本書錄制了大量的配套教學視頻,讓讀者通過分析實例、運行實例盡快熟悉網頁編程,在學習遇到問題時,也可以作為參考。本書共分21章。第1~11章介紹HTML語言的語法、網頁結構,網頁中的圖像、鏈接、表單、音頻、視頻、本地存儲等;第12~18章介紹用來美化頁面的CSS,包括CSS規則、選擇符、盒布局、多列布局、動畫、漸變、跨設備支持等;第19~21章通過3 個案例對網頁設計的完整流程進行了講解,幫助讀者熟悉如何從大局著手搭建網站。本書在內容上涉及面廣,從基本頁面結構到HTML5和CSS3增強技術實現及綜合案例,涉及目前網頁設計與網站搭建的幾乎所有技術。本書內容淺顯易懂、實例豐富,尤其適合廣大網頁編程愛好者自學,也適合對網頁開發語言感興趣的讀者作為參考書。
本書的作者團隊成員為一線開發工程師、資深編程專家或專業培訓師,在編程開發方面有著豐富的經驗,并已出版過多本相關暢銷書,頗受廣大讀者認可。
第1章 了解網頁
1.1 什么是網頁
1.1.1 網頁概述
1.1.2 靜態網頁
1.1.3 動態網頁
1.1.4 動態頁面和靜態頁面的聯系
1.1.5 網頁瀏覽器的工作原理
1.2 HTML和HTML5
1.2.1 超文本標記語言HTML
1.2.2 可擴展超文本標記語言XHTML
1.2.3 HTML5的設計理念
1.2.4 HTML頁面的開發工具
1.3 實戰:編寫一個簡單的頁面(HTML和HTML5)
1.4 小結
1.5 本章習題
第2章 了解HTML網頁的結構
2.1 用記事本打開一個頁面
2.2 HTML基礎
2.2.1 HTML的基礎語法
2.2.2 HTML文檔的結構
2.3 HTML文檔中的標簽
2.3.1 樣本代碼DOCTYPE
2.3.2 開始標簽<html>
2.3.3 頭標簽和頭標簽的對象
2.3.4 標題標簽<title>
2.3.5 體標簽<body>
2.3.6 美化HTML文檔
2.4 實戰:從無到有地設計一個頁面
2.5 小結
2.6 本章習題
第3章 網頁的文本設計
3.1 新舊方法對比
3.2 文本的排版格式
3.2.1 寫一行換一行
3.2.2 在頁面文本中空格
3.2.3 文本的段落要對齊
3.3 文本的屬性樣式
3.3.1 不一樣的文本字體樣式
3.3.2 奇妙的特殊符號
3.3.3 給文本加標注
3.4 整齊的文本列表
3.4.1 無序列表
3.4.2 有序列表
3.4.3 定義列表
3.4.4 列表嵌套
3.5 實戰:制作一則HTML網頁版的通知
3.6 小結
3.7 本章習題
第4章 網頁中的圖像設計
4.1 圖像的基礎知識
4.1.1 最常用的位圖圖像
4.1.2 在頁面中常用的位圖格式
4.1.3 矢量圖
4.1.4 圖像的分辨率
4.1.5 了解一些網頁中常用的Banner尺寸
4.2 頁面中的圖像
4.2.1 理解圖像路徑
4.2.2 像設置文本對齊一樣在頁面中對齊圖片
4.2.3 圖像與文本的對齊方式
4.2.4 控制圖像與文本的距離
4.3 讓圖像更美觀
4.3.1 使用畫圖工具修改圖像
4.3.2 給圖像添加邊框
4.3.3 獨樹一幟的水平線
4.4 改變頁面的背景
4.5 實戰:把照片放到網頁上
4.6 小結
4.7 本章習題
第5章 網頁中的鏈接
5.1 網頁鏈接
5.1.1 初識頁面鏈接
5.1.2 理解鏈接地址
5.2 鏈接的種種不同
5.2.1 基本的文本鏈接
5.2.2 基本的圖像鏈接
5.2.3 把郵箱留給需要聯系你的人
5.2.4 在同一頁面中快速查找信息
5.3 提高頁面鏈接的友好度
5.3.1 美化鏈接的狀態
5.3.2 特殊的鏈接方式
5.3.3 熱點圖像區域的鏈接
5.4 在新窗口中顯示鏈接窗口
5.5 實戰:一個帶鏈接的電影排行榜頁面
5.6 小結
5.7 本章習題
第6章 網頁中的表單
6.1 表單的工作原理
6.1.1 <script>標記
6.1.2 創建表單
6.1.3 表單域
6.2 通過表單展示不一樣的頁面
6.2.1 input對象下的多種表單的表現形式
6.2.2 text:文本框的樣式表單
6.2.3 password:輸入密碼的樣式表單
6.2.4 checkbox:復選框的樣式表單
6.2.5 radio:單選框的樣式表單
6.2.6 submit:提交數據的樣式表單
6.2.7 hidden:隱藏域的樣式表單
6.2.8 image樣式的表單
6.2.9 file:上傳文件的樣式表單
6.2.10 textarea對象的表單
6.2.11 select對象的表單
6.2.12 表單域集合
6.3 HTML5表單的進化
6.3.1 早期的表單發展
6.3.2 HTML5表單的出世
6.3.3 當前的支持情況
6.3.4 增加的表單輸入類型
6.4 增加表單的特性及元素
6.4.1 form特性
6.4.2 formaction特性
6.4.3 formmethod、formenctype、formnovalidate、formtarget特性
6.4.4 placeholder特性
6.4.5 autofocus特性
6.4.6 autocomplete特性
6.4.7 list特性和datalist元素
6.4.8 keygen元素
6.4.9 output元素
6.5 表單驗證API
6.5.1 與驗證有關的表單元素特性
6.5.2 表單驗證的屬性
6.5.3 ValidityState對象
6.5.4 表單驗證的方法
6.5.5 表單驗證的事件
6.6 實戰:表單構成的HTML頁面
6.7 實戰:表單構成的用戶注冊頁面(HTML5)
6.7.1 案例簡介
6.7.2 頁面基本元素
6.7.3 實現表單驗證
6.7.4 其他處理函數
6.8 小結
6.9 習題
第7章 音頻和視頻
7.1 audio和video的基礎知識
7.1.1 在線多媒體的發展
7.1.2 多媒體術語
7.1.3 HTML5多媒體文件格式
7.1.4 功能缺陷及未來趨勢
7.2 使用HTML5的audio和video元素
7.2.1 在頁面中加入音頻和視頻
7.2.2 使用source元素
7.2.3 使用腳本檢測瀏覽器的標簽支持情況
7.2.4 audio和video的特性和屬性
7.2.5 audio和video的接口方法
7.2.6 audio和video的事件
7.3 實戰:自定義播放工具條
7.3.1 案例簡介
7.3.2 網頁基本元素
7.3.3 定義全局的視頻對象
7.3.4 添加播放/暫停、前進/后退功能
7.3.5 添加慢進和快進功能
7.3.6 添加靜音和調節音量的功能
7.3.7 添加進度顯示功能
7.4 小結
7.5 本章習題
第8章 拖放功能
8.1 拖放API
8.1.1 draggable特性
8.1.2 光標拖放事件
8.1.3 DataTransfer對象
8.1.4 實戰:拖放元素的內容
8.2 文件API
8.2.1 增加的標簽特性
8.2.2 FileList對象與File對象
8.2.3 Blob對象
8.2.4 FileReader接口
8.3 實戰:把圖片拖入瀏覽器
8.3.1 案例簡介
8.3.2 設計網頁基本元素
8.3.3 基本函數的實現
8.3.4 頁面加載處理
8.4 小結
8.5 本章習題
第9章 本地存儲
9.1 本地存儲對象——Web Storage
9.1.1 Web Storage簡介
9.1.2 localStorage和sessionStorage
9.1.3 設置和獲取Storage數據
9.1.4 Storage API的屬性和方法
9.1.5 存儲JSON對象的數據
9.1.6 Storage API的事件
9.1.7 實戰:在兩個窗口中實現通信
9.2 本地數據庫——Web SQL Database
9.2.1 Web SQL Database簡介
9.2.2 操作Web SQL數據庫
9.2.3 實戰:基本的數據庫操作實例
9.3 小結
9.4 本章習題
第10章 利用Canvas繪制圖形
10.1 認識Canvas
10.1.1 Canvas的歷史
10.1.2 Canvas與SVG、VML之間的差異
10.2 Canvas的基本知識
10.2.1 構建Canvas元素
10.2.2 使用JavaScript實現繪圖的流程
10.3 使用Canvas繪圖
10.3.1 繪制矩形
10.3.2 使用路徑
10.3.3 圖形組合
10.3.4 繪制曲線
10.3.5 使用圖像
10.3.6 剪裁區域
10.3.7 繪制漸變
10.3.8 描邊屬性
10.3.9 模式
10.3.10 變換
10.3.11 使用文本
10.3.12 陰影效果
10.3.13 狀態的保存與恢復
10.3.14 操作像素
10.4 實戰:在Canvas中實現動畫
10.5 小結
10.6 本章習題
第11章 創建框架結構的頁面
11.1 創建窗口框架頁面
11.1.1 創建窗口框架的<frameset>和<frame>標簽
11.1.2 橫向分割窗口
11.1.3 縱向分割窗口
11.1.4 框架的嵌套
11.1.5 將頁面放入窗口框架中
11.2 修飾框架的細節
11.2.1 給無法處理框架的瀏覽器注釋說明
11.2.2 固定框架的位置
11.2.3 在框架中設置滾動條
11.3 修改框架邊框的樣式
11.3.1 判定邊框是否顯示
11.3.2 改變邊框的表現效果
11.3.3 邊框的邊距
11.4 框架集中頁面之間的鏈接
11.4.1 在指定的框架中打開鏈接
11.4.2 框架內的錨點鏈接
11.5 靈活的<iframe>框架
11.6 實戰:制作自己的鏈接主頁
11.7 小結
11.8 本章習題
第12章 CSS規則
12.1 如何學習CSS
12.2 CSS基本的規則寫法
12.2.1 基本的樣式表的寫法
12.2.2 使用類和標志鏈接樣式表
12.2.3 創建選擇器
12.2.4 應用CSS樣式表
12.3 用CSS修飾頁面文本
12.3.1 修飾頁面文本字體
12.3.2 文本的字號
12.3.3 文本段落的行高
12.3.4 禁止文本自動換行
12.4 給頁面對象添加顏色
12.5 CSS3的發展
12.5.1 模塊化的發展
12.5.2 瀏覽器支持情況
12.5.3 CSS3新特性預覽
12.6 CSS3增強的選擇器功能
12.6.1 屬性選擇符
12.6.2 結構偽類選擇符
12.6.3 UI元素狀態偽類選擇符
12.6.4 偽元素選擇符
12.7 實戰:使用CSS制作個人頁面
12.8 小結
12.9 本章習題
第13章 文本、背景、邊框不再單調
13.1 文本與字體
13.1.1 多樣化的文本陰影——text-shadow屬性
13.1.2 溢出文本處理——text-overflow屬性
13.1.3 對齊的文字才好看——word-wrap和word-break屬性
13.1.4 使用服務器端的字體——@font-face規則
13.1.5 實戰:豐富的文字樣式
13.2 色彩模式和不透明度
13.2.1 還在為配色發愁嗎——HSL色彩模式
13.2.2 HSLA色彩模式
13.2.3 RGBA色彩模式
13.2.4 opacity屬性
13.2.5 實戰:半透明的遮蔽層
13.3 背景
13.3.1 在元素中定義多張背景圖片
13.3.2 指定背景的原點位置
13.3.3 指定背景的顯示區域
13.3.4 指定背景圖像的大小
13.3.5 實戰:設計信紙的效果
13.4 邊框
13.4.1 設計圓角邊框——border-radius屬性
13.4.2 設計圖像邊框——border-image屬性
13.4.3 設計多色邊框——border-color屬性
13.4.4 實戰:使用新技術設計網頁
13.5 小結
13.6 本章習題
第14章 傳統的DIV+CSS設計
14.1 理解塊級的意義
14.2 頁面中的層
14.2.1 行<span>和層<div>
14.2.2 層的基本定位
14.2.3 層的疊加
14.3 框模型
14.3.1 理解框模型
14.3.2 padding屬性
14.3.3 border的擴展屬性
14.3.4 margin屬性
14.3.5 框模型的溢出
14.4 定制層的display屬性
14.5 CSS Hack
14.6 實戰:簡單的CSS+DIV
14.7 小結
14.8 本章習題
第15章 靈活的盒布局和界面設計
15.1 靈活的盒布局
15.1.1 開啟盒布局
15.1.2 元素的布局方向——box-orient屬性
15.1.3 元素的布局順序——box-direction屬性
15.1.4 調整元素的位置——box-ordinal-group屬性
15.1.5 彈性空間分配——box-flex屬性
15.1.6 元素的對齊方式——box-pack屬性和box-align屬性
15.1.7 實戰:使用新型盒布局設計網頁
15.2 增強的盒模型
15.2.1 盒子陰影——box-shadow屬性
15.2.2 盒子尺寸的計算方法——box-sizing屬性
15.2.3 盒子溢出內容處理——overflow-x和overflow-y屬性
15.2.4 實戰:設計網站服務條款頁面
15.3 增強的用戶界面設計
15.3.1 允許用戶改變尺寸——resize屬性
15.3.2 定義外輪廓線——outline屬性
15.3.3 偽裝的元素——appearance屬性
15.3.4 為元素添加內容——content屬性
15.3.5 實戰:設計一個水果選擇盤
15.4 小結
15.5 本章習題
第16章 多列布局
16.1 多列布局基礎
16.1.1 多列屬性columns
16.1.2 列寬屬性column-width
16.1.3 列數屬性column-count
16.1.4 列間距屬性column-gap
16.1.5 定義列分隔線——column-rule屬性
16.1.6 定義橫跨所有列——column-span屬性
16.2 實戰:模仿雜志的多列版式
16.3 小結
16.4 本章習題
第17章 動畫和漸變
17.1 CSS3變形基礎
17.1.1 元素的變形——transform屬性
17.1.2 旋轉
17.1.3 縮放和翻轉
17.1.4 移動
17.1.5 傾斜
17.1.6 矩陣變形
17.1.7 同時使用多個變形函數
17.1.8 定義變形原點——transform-origin屬性
17.1.9 實戰:設計圖片畫廊
17.2 CSS3過渡效果
17.2.1 實現過渡效果——transition屬性
17.2.2 指定過渡的屬性——transition-property屬性
17.2.3 指定過渡的時間——transition-duration屬性
17.2.4 指定過渡延遲時間——transition-delay屬性
17.2.5 指定過渡方式——transition-timing-function屬性
17.2.6 實戰:制作滑動的菜單
17.3 CSS3動畫設計
17.3.1 關鍵幀動畫——@keyframes規則
17.3.2 動畫的實現——animation屬性
17.3.3 實戰:永不停止的風車
17.4 CSS3漸變設計
17.4.1 CSS線性漸變
17.4.2 CSS徑向漸變
17.4.3 實戰:設計具有漸變效果的按鈕
17.5 小結
17.6 本章習題
第18章 CSS3的跨設備支持
18.1 媒體查詢
18.1.1 @media規則的語法
18.1.2 使用Media Queries鏈接的外部樣式表文件
18.2 實戰:自適應屏幕的樣式表方案
18.3 小結
18.4 本章習題
第19章 案例1:制作主流網站界面
19.1 構思基礎的布局
19.2 設計基礎模塊的樣式表
19.3 完善網站的子模塊
19.3.1 網站的導航欄
19.3.2 頁面的側欄
19.4 最終頁面
19.5 小結
第20章 案例2:設計復雜頁面
20.1 頁面的框架布局
20.1.1 定位頁面的內容
20.1.2 頁面初級布局的代碼
20.2 細化頁面的局部
20.2.1 intro部分
20.2.2 頁面的左側部分
20.2.3 頁面的右側欄主體部分
20.3 小結
第21章 案例3:制作個人網站(HTML5+CSS3)
21.1 網站的整體規劃
21.1.1 網站結構規劃
21.1.2 頁面的功能劃分
21.1.3 頁面的結構布局
21.2 頁面設計效果圖
21.3 站點目錄規劃
21.3.1 規劃各種資源目錄
21.3.2 配置IIS虛擬目錄
21.4 構建HTML結構并用CSS布局
21.5 參照最終的效果圖美化頁面樣式
21.5.1 輸入所有的標題和內容
21.5.2 用CSS設置背景圖片
21.5.3 用CSS設置漸變背景
21.5.4 用CSS設置頁面垂直滾動條樣式
21.6 在首頁中添加動態行為
21.7 制作日志頁面
21.7.1 設計日志瀏覽功能的思路分析
21.7.2 日志頁面的代碼編寫
21.8 制作相冊頁面
21.8.1 設計相冊瀏覽功能的思路分析
21.8.2 相冊頁面的代碼編寫
21.9 注冊域名并發布網站
21.10 小結