HTML5+CSS3 Web前端設計基礎教程

第1章 Web前端職業前景與重要理念
1.1 了解Web前端工程師
1.1.1 HTML5前端開發的前景與必要認知
1.1.2 認識網頁的構成元素
1.1.3 了解專業術語
1.2 重要理念——表現和結構相分離
1.2.1 體驗「表現和結構相分離」
1.2.2 認識Web標准
1.3 Web前端開發基本流程
1.3.1 開發流程
1.3.2 常用開發軟件介紹
1.4 使用記事本創建HTML5頁面
1.5 課堂動手實踐
第2章 HTML 5頁面的構建與簡單控制
2.1 Dreamweaver的工作環境概述
2.1.1 界面介紹
2.1.2 常用工具欄和面板
2.2 創建和管理站點
2.2.1 創建站點
2.2.2 「文件」面板的使用方法
2.2.3 管理站點
2.3 HTML5入門
2.3.1 使用Dreamweaver構建「H5標准頁面」
2.3.2 DOCTYPE文檔類型與基本結構元素
2.3.3 HTML5常見元素
2.3.4 HTML5新增結構元素
2.4 課堂動手實踐
第3章 CSS3基礎入門
3.1 CSS3的基礎知識
3.1.1 CSS介紹
3.1.2 CSS的語法與注釋
3.1.3 CSS的引入方式
3.2 盒模型
3.2.1 盒模型的基本概念
3.2.2 計算盒模型中的寬與高
3.3 CSS3初級選擇器
3.3.1 通配符選擇器
3.3.2 類型選擇器
3.3.3 類選擇器
3.3.4 ID選擇器
3.3.5 后代選擇器
3.3.6 群組選擇器
3.4 CSS3選擇器
3.4.1 子元素選擇器和相鄰兄弟選擇器
3.4.2 屬性選擇器
3.4.3 關於優先級
3.5 使用CSS3基礎知識完成頁面簡易美化——404頁面的制作
3.6 課堂動手實踐
第4章 實現Web前端排版的基本美化
4.1 控制文本
4.1.1 CSS中字體屬性與文本屬性介紹
4.1.2 Web Font與@font-face
4.1.3 文本的首行縮進、行高和陰影
4.1.4 文本溢出處理
4.2 控制超鏈接
4.2.1 文本鏈接、郵件鏈接與錨鏈接
4.2.2 CSS偽類與超鏈接
4.3 控制圖像和顏色
4.3.1 CSS中控制圖像和顏色的基本屬性
4.3.2 仿「鳳凰網」的圖文混排
4.4 課堂動手實踐
第5章 浮動、定位與列表
5.1 浮動與清除浮動
5.1.1 浮動
5.1.2 清除浮動的3種方法
5.2 CSS定位
5.2.1 靜態定位和固定定位
5.2.2 相對定位和定位
5.2.3 相對於某一容器的定位
5.3 列表
5.3.1 有關列表的CSS樣式
5.3.2 仿「」首頁的縱向導航
5.3.3 仿「鳳凰網」首頁的橫向導航
5.4 仿「電器城（手機館）」的圖文信息列表
5.5 課堂動手實踐
第6章 HTML 5增強型表單與簡易表格
6.1 表單的創建與編輯
6.1.1 表單的基本知識
6.1.2 常見的表單對象
6.2 CSS控制表單
6.2.1 搜索欄
6.2.2 用戶登錄頁面
6.2.3 傳統按鈕、CSS3按鈕與開源樣式庫按鈕
6.3 表格
6.3.1 表格的基本概念及其簡易操作
6.3.2 細線表格
6.3.3 隔行換色表格
6.4 課堂動手實踐
第7章 CSS3與HTML5的應用
7.1 CSS Sprite技術
7.1.1 CSS Sprite技術分解
7.1.2 CSS Sprite技術的應用
7.2 CSS3漸變
7.3 CSS3動畫
7.3.1 變形——transform屬性
7.3.2 過渡——transition屬性
7.3.3 CSS3動畫的應用——「幽靈按鈕」
7.4 CSS3選項卡
7.5 HTML5 Canvas
7.5.1 創建畫布並繪制簡單圖形
7.5.2 Canvas坐標、線條與圓
7.6 課堂動手實踐
第8章 PC端典型頁面的設計與實現
8.1 Photoshop在Web前端的常見操作
8.1.1 基礎操作
8.1.2 切片並輸出
8.2 頁面布局規划與實現
8.2.1 首頁的實現
8.2.2 列表頁的實現
8.2.3 內容頁的實現
8.3 課堂動手實踐
第9章 多設備響應式頁面的實現
9.1 響應式頁面開發
9.1.1 了解「響應式Web設計」
9.1.2 viewport網頁可視區域
9.1.3 媒體查詢詳解
9.2 「響應式」頁面的設計與實現
9.2.1 頁面分析
9.2.2 詳細實施過程
9.3 「響應式」框架介紹
9.4 課堂動手實踐
第10章 Web App類頁面的設計與實現
10.1 Web App開發基礎知識
10.1.1 開發模式概述
10.1.2 手機屏幕基本知識
10.2 Bootstrap框架和Swiper插件
10.2.1 Bootstrap框架
10.2.2 Swiper插件
10.3 「宇澤鮮風商城」Web App頁面分析與環境准備
10.3.1 頁面分析
10.3.2 環境准備
10.4 頁面實現的詳細過程
10.4.1 首頁的實現
10.4.2 列表頁的實現
10.4.3 詳細內容頁的實現
10.5 課堂動手實踐