網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程：HTML5、CSS3、JavaScript

第一部分理論篇

第1章網(wǎng)頁設(shè)計(jì)與Web前端基礎(chǔ)

1.1Web概述

1.1.1Web的歷史

1.1.2Web體系結(jié)構(gòu)

1.1.3基本W(wǎng)eb技術(shù)

1.1.4相關(guān)概念

1.2網(wǎng)頁標(biāo)準(zhǔn)簡介

1.2.1結(jié)構(gòu)標(biāo)準(zhǔn)語言

1.2.2表現(xiàn)標(biāo)準(zhǔn)語言

1.2.3行為標(biāo)準(zhǔn)語言

1.3網(wǎng)站開發(fā)工作流程

1.3.1擬定網(wǎng)站主題

1.3.2規(guī)劃網(wǎng)站架構(gòu)與內(nèi)容

1.3.3收集相關(guān)資料

1.3.4頁面設(shè)計(jì)和布局規(guī)劃

1.3.5網(wǎng)頁制作、測(cè)試與上傳

1.3.6網(wǎng)站的推廣與更新維護(hù)

1.4Web開發(fā)工具

1.4.1Adobe Dreamweaver

1.4.2Sublime Text

1.4.3Notepad++

1.4.4EditPlus

1.4.5WebStorm

1.4.6Visual Studio Code

1.5習(xí)題

第2章HTML常用標(biāo)簽

2.1HTML5網(wǎng)頁結(jié)構(gòu)

2.1.1HTML的發(fā)展歷程

2.1.2初識(shí)HTML標(biāo)簽

2.1.3HTML5文檔的基本結(jié)構(gòu)

2.1.4HTML文檔主體標(biāo)簽

2.2網(wǎng)頁文本

2.2.1注釋標(biāo)簽

2.2.2段落和換行標(biāo)簽

2.2.3標(biāo)題標(biāo)簽

2.2.4特定文字樣式標(biāo)簽

2.2.5網(wǎng)頁特殊字符

2.3圖片標(biāo)簽及屬性

2.3.1常見圖片格式

2.3.2網(wǎng)頁圖片的四要素

2.4超鏈接標(biāo)簽

2.4.1超鏈接的基本格式

2.4.2URL鏈接

2.4.3本地鏈接

2.4.4書簽鏈接

2.4.5下載文件鏈接

2.4.6郵件鏈接

2.5插入多媒體

2.5.1在外部窗口中播放多媒體

2.5.2在當(dāng)前文檔中播放音頻

2.5.3在當(dāng)前文檔中播放視頻

2.6習(xí)題







第3章使用CSS3樣式表

3.1初識(shí)CSS樣式表

3.1.1第一個(gè)CSS案例

3.1.2CSS基本語法

3.1.3CSS的創(chuàng)建

3.1.4組合選擇器

3.1.5后代選擇器

3.1.6類選擇器的創(chuàng)建和引用

3.1.7id選擇器的創(chuàng)建和引用

3.2盒模型

3.2.1盒模型的概念

3.2.2樣式初始化

3.2.3邊框?qū)傩?

3.2.4內(nèi)邊距屬性

3.2.5外邊距屬性

3.2.6外邊距合并

3.2.7盒模型案例實(shí)踐

3.3列表標(biāo)簽及樣式

3.3.1無序列表

3.3.2有序列表

3.3.3定義列表

3.3.4列表樣式

3.3.5列表樣式案例實(shí)踐

3.4元素的分類及轉(zhuǎn)換

3.4.1塊元素

3.4.2行內(nèi)元素

3.4.3行內(nèi)塊元素

3.4.4元素類型的轉(zhuǎn)換

3.4.5元素類型轉(zhuǎn)換案例實(shí)踐

3.5CSS的常用屬性

3.5.1背景屬性

3.5.2字體屬性

3.5.3文本屬性

3.5.4鼠標(biāo)屬性

3.5.5CSS常用屬性案例實(shí)踐

3.6高級(jí)選擇器

3.6.1子元素選擇器

3.6.2相鄰元素選擇器

3.6.3關(guān)聯(lián)元素選擇器

3.6.4屬性選擇器

3.6.5偽類選擇器

3.6.6偽元素選擇器

3.6.7高級(jí)選擇器案例實(shí)踐

3.7CSS繼承與優(yōu)先

3.7.1CSS樣式繼承

3.7.2選擇器的優(yōu)先級(jí)

3.7.3樣式優(yōu)先級(jí)

3.7.4CSS書寫順序

3.8常用CSS3屬性

3.8.1圓角屬性

3.8.2方框陰影屬性

3.8.3文本陰影屬性

3.8.4溢出屬性

3.8.5可見性屬性

3.8.6常用CSS3屬性案例實(shí)踐

3.9習(xí)題

第4章使用HTML+CSS布局網(wǎng)頁

4.1CSS布局概述

4.1.1CSS布局相關(guān)概念

4.1.2CSS的3種定位機(jī)制

4.2元素的浮動(dòng)

4.2.1浮動(dòng)

4.2.2浮動(dòng)的常規(guī)用法

4.2.3浮動(dòng)的特殊情況

4.2.4與inlineblock的比較

4.2.5清除屬性

4.2.6元素浮動(dòng)案例實(shí)踐

4.3元素的定位

4.3.1定位屬性

4.3.2相對(duì)定位

4.3.3絕對(duì)定位

4.3.4固定定位

4.3.5zindex

4.3.6定位元素的居中

4.3.7元素定位案例實(shí)踐

4.4圖片及布局

4.4.1圖片布局的幾個(gè)概念

4.4.2水平對(duì)齊

4.4.3垂直對(duì)齊

4.4.4圖片布局案例實(shí)踐

4.5表單及布局

4.5.1表單的基本結(jié)構(gòu)

4.5.2表單元素

4.5.3表單相關(guān)偽類

4.5.4表單布局案例實(shí)踐

4.6表格及布局

4.6.1表格標(biāo)簽

4.6.2合并單元格

4.6.3表格的樣式

4.6.4表格的特征

4.6.5表格布局及案例實(shí)踐

4.7內(nèi)聯(lián)框架

4.7.1內(nèi)聯(lián)框架的基本用法

4.7.2內(nèi)聯(lián)框架布局案例實(shí)踐

4.8CSS進(jìn)階應(yīng)用

4.8.1網(wǎng)頁logo應(yīng)用

4.8.2阿里圖標(biāo)應(yīng)用

4.8.3CSS代碼復(fù)用

4.8.4CSS進(jìn)階應(yīng)用案例實(shí)踐

4.9PC端網(wǎng)頁布局綜合案例實(shí)戰(zhàn)

4.10習(xí)題

第5章HTML5+CSS3移動(dòng)網(wǎng)站布局

5.1HTML5新增標(biāo)簽

5.1.1HTML5概述

5.1.2HTML5結(jié)構(gòu)性標(biāo)簽

5.1.3HTML5語義化標(biāo)簽

5.1.4HTML5網(wǎng)頁案例實(shí)踐

5.2CSS3新增偽類和偽元素

5.2.1以fisrt、last、only為前綴的偽類

5.2.2以nth為前綴的偽類

5.2.3其他偽類和偽元素

5.2.4CSS3新增偽類案例實(shí)踐

5.3CSS3變形、過渡及動(dòng)畫

5.3.1變形

5.3.2過渡

5.3.3動(dòng)畫

5.3.4變形、過渡及動(dòng)畫案例實(shí)踐

5.4CSS3新增屬性

5.4.1新增背景屬性

5.4.2新增顏色屬性

5.4.3倒影

5.4.4遮罩

5.4.5CSS3新增屬性案例實(shí)踐

5.5CSS3彈性盒模型

5.5.1基本彈性盒模型設(shè)置

5.5.2彈性容器相關(guān)屬性

5.5.3彈性項(xiàng)目相關(guān)屬性

5.5.4怪異盒模型

5.5.5動(dòng)態(tài)計(jì)算calc()

5.5.6彈性盒模型案例實(shí)踐

5.6響應(yīng)式布局和自適應(yīng)布局

5.6.1媒體查詢

5.6.2視口

5.6.3自適應(yīng)布局

5.7移動(dòng)端網(wǎng)頁布局案例實(shí)戰(zhàn)

5.8習(xí)題

第6章使用JavaScript腳本

6.1初識(shí)JavaScript

6.1.1JavaScript簡介

6.1.2JavaScript的使用

6.1.3JavaScript代碼規(guī)范

6.1.4彈窗與調(diào)試

6.1.5獲取元素及操作內(nèi)容

6.1.6簡單認(rèn)識(shí)DOM0級(jí)事件

6.1.7定義變量

6.1.8JS基本應(yīng)用案例實(shí)踐

6.2JavaScript的基本元素

6.2.1數(shù)據(jù)類型

6.2.2常量

6.2.3運(yùn)算符和表達(dá)式

6.2.4數(shù)據(jù)類型轉(zhuǎn)換

6.3操作瀏覽器對(duì)象屬性及CSS樣式

6.3.1操作對(duì)象屬性

6.3.2操作對(duì)象屬性案例實(shí)踐

6.3.3操作CSS樣式

6.3.4操作CSS樣式案例實(shí)踐

6.4JavaScript的條件語句

6.4.1if語句

6.4.2switch語句

6.4.3條件語句案例實(shí)踐

6.5JavaScript的循環(huán)語句

6.5.1for循環(huán)語句

6.5.2while循環(huán)語句

6.5.3do…while循環(huán)語句

6.5.4break和continue語句

6.5.5循環(huán)語句案例實(shí)踐

6.6使用JavaScript函數(shù)

6.6.1函數(shù)分類

6.6.2函數(shù)參數(shù)

6.6.3返回語句

6.6.4變量的作用域

6.6.5JS函數(shù)案例實(shí)踐

6.7JavaScript對(duì)象的操作語句

6.7.1with語句

6.7.2for…in語句

6.7.3對(duì)象關(guān)鍵字及操作符

6.8JavaScript常用內(nèi)置對(duì)象

6.8.1數(shù)組對(duì)象

6.8.2字符串對(duì)象

6.8.3數(shù)學(xué)對(duì)象

6.8.4日期對(duì)象

6.9DOM對(duì)象及操作

6.9.1HTML DOM簡介

6.9.2HTML中的節(jié)點(diǎn)類型

6.9.3DOM節(jié)點(diǎn)的訪問

6.9.4DOM節(jié)點(diǎn)的操作

6.9.5DOM對(duì)象案例實(shí)踐

6.10BOM對(duì)象及操作

6.10.1BOM簡介

6.10.2窗口對(duì)象

6.10.3文檔對(duì)象

6.10.4位置對(duì)象

6.10.5歷史對(duì)象

6.10.6瀏覽器信息對(duì)象

6.11localStorage對(duì)象及操作

6.11.1HTML5 Web存儲(chǔ)簡介

6.11.2localStorage對(duì)象的基本用法

6.11.3本地存儲(chǔ)案例實(shí)踐

6.12Web交互開發(fā)案例實(shí)戰(zhàn)

6.13習(xí)題

第7章圖形繪制

7.1初識(shí)Canvas

7.2Canvas的坐標(biāo)系統(tǒng)

7.3添加Canvas元素

7.4Canvas繪制環(huán)境

7.5繪圖API

7.5.1繪制路徑

7.5.2漸變色的使用

7.5.3圖形變換

7.5.4繪制環(huán)境的保存與恢復(fù)

7.5.5繪制圖像

7.5.6繪制文本

7.6動(dòng)畫制作

7.7時(shí)鐘案例實(shí)戰(zhàn)

7.8習(xí)題

第二部分應(yīng)用篇

第8章網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)

8.1網(wǎng)站的規(guī)劃

8.1.1網(wǎng)站設(shè)計(jì)項(xiàng)目書的書寫

8.1.2網(wǎng)站的主要規(guī)劃過程及創(chuàng)建

8.2網(wǎng)站的素材準(zhǔn)備及管理

8.3網(wǎng)頁外觀設(shè)計(jì)及布局

8.3.1網(wǎng)頁外觀布局方法

8.3.2網(wǎng)頁布局的方案

8.4向頁面添加內(nèi)容

8.5使用CSS設(shè)置頁面

8.6添加網(wǎng)頁特效及功能

8.6.1添加網(wǎng)頁特效

8.6.2添加網(wǎng)頁功能

8.7站點(diǎn)的本地測(cè)試

8.7.1運(yùn)行站點(diǎn)報(bào)告

8.7.2檢查站點(diǎn)范圍的鏈接

8.8發(fā)布及維護(hù)Web站點(diǎn)

8.8.1上傳文件

8.8.2獲取網(wǎng)站地址

8.8.3實(shí)機(jī)測(cè)試

8.8.4日常維護(hù)

8.9課程設(shè)計(jì)及要求

8.9.1課程設(shè)計(jì)的基本目的

8.9.2課程設(shè)計(jì)的基本要求

8.9.3課程設(shè)計(jì)的考核方式與評(píng)分方法

第9章課業(yè)拓展

9.1瀏覽器開發(fā)者工具

9.1.1瀏覽器開發(fā)者工具簡介

9.1.2激活工具欄

9.1.3選擇元素與Element標(biāo)簽

9.1.4Console標(biāo)簽欄

9.1.5Network標(biāo)簽欄

9.1.6Source標(biāo)簽欄

9.2jQuery庫

9.2.1jQuery簡介

9.2.2jQuery基礎(chǔ)用法

9.2.3文檔參考

9.3Bootstrap框架

9.3.1Bootstrap簡介

9.3.2Bootstrap快速上手

9.4架設(shè)互聯(lián)網(wǎng)網(wǎng)站

9.4.1域名服務(wù)

9.4.2主機(jī)托管

9.4.3虛擬主機(jī)

9.5云服務(wù)

9.5.1阿里云虛擬主機(jī)

9.5.2阿里云ECS

附錄書中視頻對(duì)應(yīng)二維碼匯總表

參考文獻(xiàn)

專題學(xué)習(xí)資源網(wǎng)址