HTML5+CSS3網頁設計與制作任務教程
高歡、佟歡、郗君甫、陳曄樺、張小誌
商品描述
"本書關註Web 前端行業的前沿動態和技術發展趨勢，及時吸納了HTML5 和CSS3 的**技術標準和設計理念，所涉及內容與實際職業需求保持同步。根據HTML5 和CSS3 的技術特點，本書共設置11 個項目，涵蓋了“1+X”證書、Web 前端開發證書的相關專業知識，內容包括Web 基礎知識、HTML5 常用標記以及新增的結構化元素、CSS3 基礎以及常用樣式屬性、CSS 盒子模型、CSS3 高級選擇器、浮動與定位、網頁常見布局及彈性布局、HTML5 表單和表格、CSS3 過渡、轉換與動畫效果、HTML5 音頻和視頻、HTML5 畫布等。 本書配套數字教學資源包括示例源碼、PPT 課件、教學案例、課後習題答案。 本書適合高校相關專業師生、網頁設計初學者、前端開發人員及自學者和愛好者使用。"
作者簡介
高歡，河北工程職業技術大學副教授。主要講授《計算機文化基礎》《HTML5+CSS3網站設計》《JavaScript腳本語言》《Jquery網頁特效設計》《Vue前端框架技術》等課程。副主編、參編國家規劃教材5部，公開發表論文數篇，參與兩個省級課題研究。在第二屆全國高校微課教學比賽中獲全國三等獎、省一等獎。指導學生參加2020年“挑戰杯”河北省大學生課外學術科技作品競賽一等獎、第六屆‘互聯網+’創新創業大賽獲省賽銀獎。參與建設國家級精品在線課《計算機文化基礎》、省級精品在線課《HTML5網頁設計技術》。
目錄大綱
項目1 了解Web基礎知識
任務1.1 創建簡單的HTML5頁面
1.1.1 Web相關概念
1.1.2 HTML5概述
1.1.3 CSS3概述
1.1.4 HTML5開發工具
項目2 構建HTML5網頁結構
任務2.1 制作圖文混排頁面
2.1.1 HTML5的文檔結構
2.1.2 HTML5標記及屬性
2.1.3 HTML文本段落標記
2.1.4 HTML圖片標記
2.1.5 HTML列表標記
2.1.6 超鏈接標記
項目3 應用CSS3樣式
任務3.1 使用CSS3美化網頁元素
3.1.1 CSS書寫規則
3.1.2 CSS樣式的引入方式
3.1.3 CSS基礎選擇器
3.1.4 CSS常用的文本屬性
3.1.5 CSS列表樣式屬性
3.1.6 超鏈接偽類選擇器
3.1.7 CSS的三大特性
項目4 認識CSS盒子模型
任務4.1 理解盒子模型
4.1.1 盒子模型理論
4.1.2 盒子邊框屬性
4.1.3 內邊距屬性
4.1.4 外邊距屬性
任務4.2 使用CSS3新增盒子模型屬性
4.2.1 box-sizing屬性
4.2.2 圓角屬性
4.2.3 圖片邊框
4.2.4 盒子陰影
任務4.3 設置盒子背景
4.3.1 常用背景屬性
4.3.2 CSS3新增背景屬性
任務4.4 設置漸變效果
4.4.1 線性漸變
4.4.2 徑向漸變
4.4.3 重覆線性漸變
4.4.4 重覆徑向漸變
項目5 使用CSS3高級選擇器
任務5.1 使用屬性、關系選擇器選擇元素
5.1.1 屬性選擇器
5.1.2 關系選擇器
任務5.2 使用結構化偽類選擇器選擇元素
5.2.1 :root選擇器
5.2.2 :not選擇器
5.2.3 :only-child選擇器
5.2.4 :empty選擇器
5.2.5 :target選擇器
5.2.6 :first-child和:last-child選擇器
5.2.7 :nth-child(n)和:nth-last-child(n)選擇器
5.2.8 :nth-of-type(n)和:nth-last-of-type(n)選擇器
任務5.3 使用偽元素選擇器選擇元素
5.3.1 ::before選擇器
5.3.2 ::after選擇器
5.3.3 ::first-letter和::first-line選擇器
5.3.4 ::selection選擇器
項目6 設置浮動與定位
任務6.1 轉換元素的類型
6.1.1 元素的類型
6.1.2 元素類型的轉換
任務6.2 設置元素的浮動
6.2.1 元素的浮動
6.2.2 清除元素的浮動
任務6.3 設置元素的定位
6.3.1 定位的相關屬性
6.3.2 靜態定位
6.3.3 相對定位
6.3.4 絕對定位
6.3.5 固定定位
6.3.6 黏性定位
6.3.7 z-index屬性
項目7 實現網頁布局
任務7.1 實現常見的頁面布局
7.1.1 網頁布局類型
7.1.2 HTML5新增結構元素
7.1.3 HTML5頁面交互元素
任務7.2 實現彈性布局
7.2.1 Flex容器和項目
7.2.2 Flex容器的屬性
7.2.3 Flex項目的屬性
項目8 制作表單和表格
任務8.1 創建表單
8.1.1 表單標記
8.1.2 input控件
8.1.3 textarea控件
8.1.4 select控件
任務8.2 使用HTML5新增input類型及屬性
8.2.1 HTML5新增的input類型
8.2.2 HTML5新增的input屬性
8.2.3 pattern表單驗證屬性
任務8.3 制作表格
8.3.1 表格的創建與美化
8.3.2 合並單元格
8.3.3 表格的結構標記
項目9 實現過渡、轉換與動畫效果
任務9.1 實現過渡效果
9.1.1 參與過渡的屬性
9.1.2 過渡持續的時間
9.1.3 過渡的時間曲線
9.1.4 過渡的延遲時間
9.1.5 過渡覆合屬性
任務9.2 實現2D轉換效果
9.2.1 transform屬性
9.2.2 2D平移
9.2.3 2D縮放
9.2.4 2D旋轉
9.2.5 2D傾斜
9.2.6 改變轉換原點
任務9.3 實現3D轉換效果
9.3.1 3D轉換屬性
9.3.2 3D轉換方法
任務9.4 實現覆雜動畫
9.4.1 @keyframes規則
9.4.2 定義動畫名稱
9.4.3 定義動畫播放的時長
9.4.4 定義動畫的速度曲線
9.4.5 定義動畫延遲
9.4.6 定義動畫播放次數
9.4.7 定義動畫播放的方向
9.4.8 定義動畫播放的狀態
9.4.9 動畫覆合屬性
項目10 插入音頻與視頻
任務10.1 實現在線視聽
10.1.1 音頻和視頻文件格式
10.1.2 插入音頻
10.1.3 插入視頻
10.1.4 音頻和視頻的使用方法與事件
項目11 繪制HTML5畫布
任務11.1 繪制機器人
11.1.1 創建及使用畫布
11.1.2 繪制直線
11.1.3 繪制三角形
11.1.4 繪制矩形
11.1.5 繪制圓形
11.1.6 繪制文字
參考文獻
