本書共10個(gè)模塊，模塊1-3介紹HTML知識(shí)，包括文件結(jié)構(gòu)、開發(fā)環(huán)境和常用元素，如圖像、音頻、視頻、超鏈接、表格、表單等元素的用法，完成了網(wǎng)頁內(nèi)容的設(shè)計(jì)。模塊4-6介紹CSS基礎(chǔ)知識(shí)，包括CSS語法、選擇器和元素基本樣式，重點(diǎn)介紹了元素的框模型和背景樣式，基于圖像背景和背景起點(diǎn)屬性實(shí)現(xiàn)了圖像精靈，完成了網(wǎng)頁樣式的初步設(shè)計(jì)。模塊7-9介紹CSS3知識(shí)，包括定位、過渡、動(dòng)畫和布局的知識(shí)，基于定位、過渡和動(dòng)畫技術(shù)設(shè)計(jì)了輪播圖像、菜單和幽靈按鈕等典型網(wǎng)頁效果，基于布局技術(shù)設(shè)計(jì)了常用網(wǎng)頁布局，包括自適應(yīng)響應(yīng)式布局，完成了實(shí)用復(fù)雜網(wǎng)頁和網(wǎng)頁實(shí)用效果的設(shè)計(jì)。模塊10為綜合實(shí)訓(xùn)，仿照華為官網(wǎng)首頁設(shè)計(jì)了一個(gè)網(wǎng)站首頁。
摸摸1 Web開發(fā)概述
任務(wù)1.1 書寫一封家信
1.1.1 Web標(biāo)準(zhǔn)
1.1.2 HTML文件
1.1.3 HTML項(xiàng)目
1.1.4 文本格式化元素
1.1.5 任務(wù)實(shí)現(xiàn)
任務(wù)1.2 設(shè)計(jì)一個(gè)公告
1.2.1 HTML注釋
1.2.2 HTML頭部元素
1.2.3 HTML元素分類
1.2.4 簡(jiǎn)單HTML元素
1.2.5 字符實(shí)體
1.2.6 元素的通用屬性
1.2.7 任務(wù)實(shí)現(xiàn)
模塊小結(jié)1
隨堂測(cè)試1
課后實(shí)踐1
模塊2 常用HTML元素
任務(wù)2.1 設(shè)計(jì)一個(gè)海報(bào)
2.1.1 img元素
2.1.2 video元素
2.1.3 audio元素
2.1.4 object元素
2.1.5 任務(wù)實(shí)現(xiàn)
任務(wù)2.2 設(shè)計(jì)海報(bào)導(dǎo)航
2.2.1 a元素
2.2.2 列表元素
2.2.3 任務(wù)實(shí)現(xiàn)
任務(wù)2.3 設(shè)計(jì)網(wǎng)頁底部導(dǎo)航
2.3.1 map元素
2.3.2 area元素
2.3.3 圖像映射
2.3.4 任務(wù)實(shí)現(xiàn)
模塊小結(jié)2
隨堂測(cè)試2
課后實(shí)踐2
模塊3 表格與表單元素
任務(wù)3.1 設(shè)計(jì)通訊錄表格
3.1.1 基本表格元素
3.1.2 復(fù)雜表格元素
3.1.3 任務(wù)實(shí)現(xiàn)
任務(wù)3.2 設(shè)計(jì)收貨地址表單
3.2.1 form元素
3.2.2 input元素
3.2.3 下拉列表元素
3.2.4 textarea元素
3.2.5 任務(wù)實(shí)現(xiàn)
模塊小結(jié)3
隨堂測(cè)試3
課后實(shí)踐3
模塊4 CSS語法基礎(chǔ)
任務(wù)4.1 規(guī)范海報(bào)樣式設(shè)計(jì)
4.1.1 CSS語法規(guī)則
4.1.2 樣式聲明方式
4.1.3 簡(jiǎn)單CSS屬性
4.1.4 簡(jiǎn)單選擇器
4.1.5 任務(wù)實(shí)現(xiàn)
任務(wù)4.2 設(shè)計(jì)通訊錄表格樣式
4.2.1 層級(jí)選擇器
4.2.2 偽類選擇器
4.2.3 任務(wù)實(shí)現(xiàn)
任務(wù)4.3 規(guī)范書信的格式
4.3.1 偽元素選擇器
4.3.2 屬性選擇器
4.3.3 任務(wù)實(shí)現(xiàn)
任務(wù)4.4 掌握樣式優(yōu)先級(jí)規(guī)則
4.4.1 聲明方式的優(yōu)先級(jí)
4.4.2 樣式的三大特性
4.4.3 樣式優(yōu)先級(jí)規(guī)則
模塊小結(jié)4
隨堂測(cè)試4
課后實(shí)踐4
模塊5 元素框模型
任務(wù)5.1 使用框模型布局海報(bào)
5.1.1 元素框模型定義
5.1.2 邊距
5.1.3 display屬性
5.1.4 overflow屬性
5.1.5 任務(wù)實(shí)現(xiàn)
任務(wù)5.2 設(shè)計(jì)一個(gè)展板
5.2.1 邊框
5.2.2 圓角邊框
5.2.3 box-sizing屬性
5.2.4 任務(wù)實(shí)現(xiàn)
任務(wù)5.3 展板再設(shè)計(jì)
5.3.1 陰影
5.3.2 輪廓
5.3.3 任務(wù)實(shí)現(xiàn)
模塊小結(jié)5
隨堂測(cè)試5
課后實(shí)踐5
模塊6 元素背景
任務(wù)6.1 設(shè)計(jì)展板的詳情
6.1.1 圖像背景
6.1.2 漸變背景
6.1.3 任務(wù)實(shí)現(xiàn)
任務(wù)6.2 優(yōu)化展板設(shè)計(jì)
6.2.1 圖像背景相關(guān)的屬性
6.2.2 background屬性
6.2.3 圖像精靈
6.2.4 任務(wù)實(shí)現(xiàn)
模塊小結(jié)6
隨堂測(cè)試6
課后實(shí)踐6
模塊7 元素定位
任務(wù)7.1 掌握定位的語法
7.1.1 定位屬性
7.1.2 基本定位
7.1.3 黏性定位
任務(wù)7.2 應(yīng)用子絕父相定位
7.2.1 設(shè)計(jì)內(nèi)容標(biāo)識(shí)
7.2.2 設(shè)計(jì)輪播圖布局
7.2.3 設(shè)計(jì)下拉式菜單
7.2.4 設(shè)計(jì)彈出式菜單
模塊小結(jié)7
隨堂測(cè)試7
課后實(shí)踐7
模塊8 元素過渡與動(dòng)畫
任務(wù)8.1 掌握轉(zhuǎn)換與過渡的語法
8.1.1 瀏覽器前綴
8.1.2 轉(zhuǎn)換屬性
8.1.3 過渡屬性
任務(wù)8.2 設(shè)計(jì)過渡效果
8.2.1 設(shè)計(jì)歡迎動(dòng)畫
8.2.2 設(shè)計(jì)幽靈按鈕
任務(wù)8.3 設(shè)計(jì)輪播圖的動(dòng)畫
8.3.1 動(dòng)畫關(guān)鍵幀
8.3.2 動(dòng)畫屬性
8.3.3 任務(wù)實(shí)現(xiàn)
模塊小結(jié)8
隨堂測(cè)試8
課后實(shí)踐8
模塊9 網(wǎng)頁布局技術(shù)
任務(wù)9.1 設(shè)計(jì)浮動(dòng)布局
9.1.1 float屬性
9.1.2 clear屬性
9.1.3 任務(wù)實(shí)現(xiàn)
任務(wù)9.2 設(shè)計(jì)響應(yīng)式布局
9.2.1 網(wǎng)頁視口
9.2.2 媒體查詢
9.2.3 網(wǎng)格視圖
9.2.4 任務(wù)實(shí)現(xiàn)
任務(wù)9.3 設(shè)計(jì)彈性布局
9.3.1 彈性布局相關(guān)概念
9.3.2 容器屬性
9.3.3 項(xiàng)目屬性
9.3.4 任務(wù)實(shí)現(xiàn)
模塊小結(jié)9
隨堂測(cè)試9
課后實(shí)踐9
模塊10 網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)
任務(wù)10.1 設(shè)計(jì)網(wǎng)頁布局
10.1.1 布局分析
10.1.2 布局設(shè)計(jì)
任務(wù)10.2 設(shè)計(jì)網(wǎng)頁菜單
10.2.1 設(shè)計(jì)頂部導(dǎo)航主菜單
10.2.2 設(shè)計(jì)側(cè)邊幫助菜單
任務(wù)10.3 設(shè)計(jì)網(wǎng)頁內(nèi)容
10.3.1 設(shè)計(jì)輪播圖
10.3.2 設(shè)計(jì)推薦信息
10.3.3 設(shè)計(jì)中分廣告
10.3.4 設(shè)計(jì)新聞與活動(dòng)
10.3.5 設(shè)計(jì)搜索框、鏈接與頁腳
任務(wù)10.4 總結(jié)網(wǎng)站設(shè)計(jì)
附錄 框架
參考文獻(xiàn)
書單推薦
