網頁設計與Web前端開發案例教程——HTML5、CSS3、JavaScript（第2版·微課視頻版）

"莫小梅,2003年4月畢業於杭州電子科技大學，獲計算機應用碩士學位。畢業後至今在浙江傳媒學院從事專職教學工作，承擔《網頁設計與編程》、《網頁編程基礎》、《Web前端開發基礎》、《“1+X”證書考級輔導——Web前端開發初級》、《大學計算機》等多門課程教學工作。    2018年9月——2019年6月在中國傳媒大學進行為期一年的訪學，從事傳媒大數據研究及教材編寫工作。有近二十年的專業教學經驗，主編兩本專業課程教材。    主持2022年浙江省線上線下混合式一流課程：網頁編程基礎及多項校級教改項目。參與1項省科技廳重點項目和1項橫向課題，2項省級教改項目。發表論文10多篇，含SCI一區和二區論文各一篇，EI收錄3篇（其中1篇教改論文），取得軟件著作權6項。主編的兩本教材通過清華大學出版社發行，印數2萬余冊，為上百所高校使用。承擔浙江傳媒學院 “1+X”Web前端開發證書考級的學生培訓工作，每年通過率均高於全國平均通過率，且逐年提升。    指導學生在中國大學生計算機設計大賽、浙江省大學生多媒體作品設計競賽、藍橋杯Web應用開發、全國高校數字藝術設計大賽等學科競賽中獲國家級二等獎等多項獎勵。"

 

目錄

 

 

 

 

掃一掃

源碼下載

 

 

 

 

 

第一部分理論篇

 

第1章網頁設計與Web前端基礎

 

1.1Web概述

 

1.1.1Web的發展歷史

 

1.1.2Web的體系結構

 

1.1.3基本Web技術

 

1.1.4相關概念

 

1.1.5了解Web前端開發

 

1.2網頁標準簡介

 

1.2.1結構標準語言 

 

1.2.2表現標準語言

 

1.2.3行為標準語言

 

1.3網站開發流程

 

1.3.1擬定網站主題

 

1.3.2規劃網站架構與內容

 

1.3.3收集相關資料

 

1.3.4頁面設計和布局規劃 

 

1.3.5制作網頁並測試與上傳

 

1.3.6網站的推廣與更新維護

 

1.4Web開發工具

 

1.4.1HBuilderX

 

1.4.2Adobe Dreamweaver

 

1.4.3Sublime Text

 

1.4.4EditPlus

 

1.4.5WebStorm

 

1.4.6Visual Studio Code

 

習題1

 

 

第2章HTML常用標簽

 

2.1HTML5網頁結構

 

2.1.1HTML的發展歷程

 

2.1.2初識HTML標簽

 

2.1.3HTML5文檔的基本結構

 

2.1.4HTML文檔的主體標簽

 

 

網頁設計與Web前端開發案例教程——HTML5、CSS3、JavaScript（第2版·微課視頻版）

 

目錄

 

 

2.2網頁文本

 

2.2.1註釋標簽

 

2.2.2段落和換行標簽

 

2.2.3標題標簽

 

2.2.4特定文字樣式標簽

 

2.2.5網頁中的特殊字符

 

2.3圖片標簽及屬性

 

2.3.1常見圖片格式

 

2.3.2網頁圖片的四要素

 

2.4超鏈接標簽

 

2.4.1超鏈接的基本格式

 

2.4.2URL鏈接

 

2.4.3本地鏈接

 

2.4.4書簽鏈接

 

2.4.5下載文件鏈接

 

2.4.6郵件鏈接

 

2.5插入音頻和視頻

 

2.5.1使用HTML5的audio標簽播放音頻

 

2.5.2使用HTML5的video 標簽播放視頻

 

2.5.3視頻網站的輔助解決方案

 

習題2

 

第3章使用CSS3樣式表

 

3.1初識CSS樣式表

 

3.1.1第一個CSS案例

 

3.1.2CSS的基本語法

 

3.1.3CSS的創建

 

3.1.4組合選擇器

 

3.1.5後代選擇器

 

3.1.6類選擇器的創建和引用

 

3.1.7id選擇器的創建和引用

 

3.2盒模型

 

3.2.1盒模型的概念

 

3.2.2樣式的初始化

 

3.2.3邊框屬性

 

3.2.4內邊距屬性

 

3.2.5外邊距屬性

 

3.2.6外邊距合並

 

3.2.7盒模型案例實踐

 

 

3.3列表標簽及樣式

 

3.3.1無序列表

 

3.3.2有序列表

 

3.3.3定義列表

 

3.3.4列表樣式

 

3.3.5列表樣式案例實踐

 

3.4元素的分類及轉換

 

3.4.1塊元素

 

3.4.2行內元素

 

3.4.3行內塊元素

 

3.4.4元素類型的轉換

 

3.4.5元素類型轉換案例實踐

 

3.5CSS的常用屬性

 

3.5.1背景屬性

 

3.5.2字體屬性

 

3.5.3文本屬性

 

3.5.4鼠標屬性 

 

3.5.5CSS常用屬性案例實踐

 

3.6高級選擇器

 

3.6.1子元素選擇器

 

3.6.2相鄰元素選擇器

 

3.6.3關聯元素選擇器

 

3.6.4屬性選擇器

 

3.6.5偽類選擇器

 

3.6.6偽元素選擇器

 

3.6.7高級選擇器案例實踐

 

3.7CSS的繼承與優先

 

3.7.1CSS樣式的繼承

 

3.7.2選擇器的優先級

 

3.7.3樣式的優先級

 

3.7.4CSS的書寫順序

 

3.8常用CSS3屬性

 

3.8.1@fontface 規則

 

3.8.2圓角屬性

 

3.8.3方框陰影屬性

 

3.8.4文本陰影屬性

 

3.8.5溢出屬性

 

3.8.6可見性屬性

 

3.8.7常用CSS3屬性案例實踐

 

習題3

 

 

第4章使用HTML+CSS布局網頁

 

4.1CSS布局概述

 

4.1.1CSS布局的相關概念

 

4.1.2CSS的3種定位機制

 

4.2元素的浮動

 

4.2.1浮動

 

4.2.2浮動的常規用法

 

4.2.3浮動的特殊情況

 

4.2.4與inlineblock的比較

 

4.2.5清除屬性

 

4.2.6元素浮動案例實踐

 

4.3元素的定位

 

4.3.1定位屬性

 

4.3.2相對定位

 

4.3.3絕對定位

 

4.3.4固定定位

 

4.3.5zindex

 

4.3.6定位元素的居中

 

4.3.7元素定位案例實踐

 

4.4圖片及布局

 

4.4.1圖片布局的特點

 

4.4.2水平對齊

 

4.4.3垂直對齊

 

4.4.4圖片布局案例實踐

 

4.5表單及布局

 

4.5.1表單的基本結構

 

4.5.2表單元素

 

4.5.3表單的相關偽類

 

4.5.4表單布局案例實踐

 

4.6表格及布局

 

4.6.1表格標簽

 

4.6.2合並單元格

 

4.6.3表格的樣式

 

4.6.4表格的特征

 

4.6.5表格布局及案例實踐

 

4.7內聯框架

 

4.7.1內聯框架的基本用法

 

4.7.2內聯框架布局案例實踐

 

4.8CSS進階應用

 

4.8.1網站Logo的應用

 

4.8.2圖標的應用

 

4.8.3CSS代碼的復用

 

4.8.4CSS進階應用案例實踐

 

 

4.9PC端網頁布局綜合案例實戰

 

4.9.1華為商城首頁PC端布局

 

4.9.2“誰的來電——防範電信詐騙”思政案例PC端布局

 

習題4

 

第5章HTML5+CSS3移動網站布局

 

5.1HTML5新增標簽

 

5.1.1HTML5概述

 

5.1.2HTML5結構性標簽

 

5.1.3HTML5語義化標簽

 

5.1.4HTML5網頁案例實踐

 

5.2CSS3新增偽類和偽元素

 

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

 

5.2.2以nth為前綴的偽類

 

5.2.3其他偽類和偽元素

 

5.2.4CSS3新增偽類案例實踐

 

5.3CSS3變形、過渡及動畫

 

5.3.1變形

 

5.3.2過渡

 

5.3.3動畫

 

5.3.4變形、過渡及動畫案例實踐

 

5.4CSS3新增屬性

 

5.4.1新增背景屬性

 

5.4.2新增顏色屬性

 

5.4.3倒影

 

5.4.4遮罩

 

5.4.5CSS3新增屬性案例實踐

 

5.5CSS3彈性盒模型

 

5.5.1基本彈性盒模型設置

 

5.5.2彈性容器的相關屬性

 

5.5.3彈性項目的相關屬性

 

5.5.4替代盒模型

 

5.5.5動態計算

 

5.5.6彈性盒模型案例實踐

 

5.6響應式布局和自適應布局

 

5.6.1媒體查詢

 

5.6.2視口

 

5.6.3自適應布局

 

5.7移動端網頁布局案例實戰

 

5.7.1天貓網站移動端布局

 

5.7.2“宋韻卿裳”思政案例移動端布局

 

習題5

 

 

第6章使用JavaScript腳本

 

6.1初識JavaScript

 

6.1.1JavaScript簡介 

 

6.1.2JavaScript的使用

 

6.1.3JavaScript代碼規範

 

6.1.4彈窗與調試

 

6.1.5獲取元素及操作內容

 

6.1.6簡單認識DOM0級事件

 

6.1.7定義變量 

 

6.1.8JavaScript基本應用案例實踐

 

6.2JavaScript的基本元素

 

6.2.1數據類型

 

6.2.2常量

 

6.2.3運算符和表達式

 

6.2.4數據類型轉換

 

6.3操作對象屬性及CSS樣式

 

6.3.1操作對象屬性

 

6.3.2操作對象屬性案例實踐

 

6.3.3操作CSS樣式

 

6.3.4操作CSS樣式案例實踐

 

6.4JavaScript的條件語句

 

6.4.1if語句 

 

6.4.2switch語句

 

6.4.3條件語句案例實踐

 

6.5JavaScript的循環語句

 

6.5.1for循環語句

 

6.5.2while循環語句

 

6.5.3do while循環語句

 

6.5.4break和continue語句

 

6.5.5循環語句案例實踐

 

6.6使用JavaScript函數

 

6.6.1函數的分類

 

6.6.2函數的參數

 

6.6.3返回語句

 

6.6.4變量的作用域 

 

6.6.5JS函數案例實踐

 

6.7JavaScript對象的操作語句

 

6.7.1with語句

 

6.7.2for…in語句

 

6.7.3對象關鍵字及操作符

 

6.8JavaScript常用的內置對象

 

 

6.8.1數組對象

 

6.8.2字符串對象

 

6.8.3數學對象

 

6.8.4日期對象

 

6.9DOM對象及操作

 

6.9.1HTML DOM簡介

 

6.9.2HTML中的節點類型

 

6.9.3DOM節點的訪問

 

6.9.4DOM節點的操作

 

6.9.5DOM對象案例實踐

 

6.10BOM對象及操作

 

6.10.1BOM簡介

 

6.10.2窗口對象

 

6.10.3文檔對象

 

6.10.4位置對象

 

6.10.5歷史對象

 

6.10.6瀏覽器信息對象

 

6.11localStorage對象及操作

 

6.11.1HTML5 Web存儲簡介

 

6.11.2localStorage對象的基本用法 

 

6.11.3本地存儲案例實踐

 

6.12Web交互開發案例實戰

 

6.12.1“誰的來電——防範電信詐騙”思政案例交互實現

 

6.12.2“宋韻卿裳”思政案例的交互實現

 

習題6

 

第7章jQuery基礎知識

 

7.1jQuery的介紹

 

7.1.1下載與安裝

 

7.1.2jQuery的第一個例程

 

7.2基本選擇器

 

7.2.1標簽選擇器

 

7.2.2id 選擇器

 

7.2.3類選擇器

 

7.3高級選擇器

 

7.3.1過濾器選擇器

 

7.3.2屬性選擇器

 

7.3.3偽類選擇器

 

7.3.4偽元素選擇器

 

7.4事件處理

 

7.4.1綁定事件

 

7.4.2解綁事件

 

7.4.3觸發事件

 

7.4.4事件委托

 

7.4.5事件對象

 

7.4.6自定義事件與鏈式調用

 

 

7.5內容處理

 

7.5.1一般屬性的讀寫

 

7.5.2類的讀寫

 

7.5.3內容的讀寫

 

7.6樣式處理

 

7.6.1標簽樣式的讀寫

 

7.6.2標簽尺寸的讀寫

 

7.6.3標簽位置的計算

 

7.7進階應用

 

7.7.1批量操作

 

7.7.2表單驗證

 

7.7.3動畫處理

 

7.7.4視頻控制

 

7.7.5標簽處理

 

7.7.6改寫案例

 

7.8擴展知識

 

7.8.1AJAX動態加載

 

7.8.2文檔參考

 

習題7

 

第8章Vue框架

 

8.1Vue簡介和環境搭建

 

8.1.1Vue的發展及特點

 

8.1.2Vue環境搭建

 

8.2Vue3基礎語法

 

8.2.1Vue實例的創建

 

8.2.2模板語法

 

8.2.3條件渲染

 

8.2.4列表渲染

 

8.2.5樣式綁定

 

8.2.6表單輸入綁定

 

8.2.7計算屬性

 

8.2.8事件處理

 

8.3組件基礎知識

 

8.4生命周期

 

8.5簡單Vue應用實例

 

8.5.1原項目代碼的截取

 

8.5.2項目分析和數據準備

 

8.5.3項目改造

 

習題8

 

 

第二部分應用篇

 

第9章網站設計綜合實訓

 

9.1網站的規劃

 

9.1.1網站設計項目書的書寫 

 

9.1.2網站的主要規劃過程及創建

 

9.2網站的素材準備及管理

 

9.3網頁的外觀設計和布局

 

9.3.1網頁外觀布局

 

9.3.2網頁布局的方案

 

9.4向頁面添加內容

 

9.5使用CSS設置頁面

 

9.6添加網頁特效及功能

 

9.6.1添加網頁特效

 

9.6.2添加網頁功能

 

9.7站點的測試、發布及維護 

 

9.7.1上傳文件

 

9.7.2獲取網站地址

 

9.7.3實機測試

 

9.7.4日常維護

 

9.8課程設計及要求

 

9.8.1課程設計的基本目的

 

9.8.2課程設計的基本要求

 

9.8.3課程設計的考核方式與評分方法

 

第10章課業拓展

 

10.1瀏覽器開發者工具

 

10.1.1瀏覽器開發者工具簡介

 

10.1.2激活工具欄

 

10.1.3選擇元素與Elements標簽欄

 

10.1.4Console標簽欄

 

10.1.5Network標簽欄

 

10.1.6Sources標簽欄

 

10.2Canvas圖形繪制

 

10.2.1初識Canvas

 

10.2.2Canvas的坐標系統

 

10.2.3添加Canvas元素

 

10.2.4Canvas繪制環境

 

10.2.5繪圖API

 

10.2.6動畫制作

 

10.2.7時鐘案例實踐

 

 

10.3Bootstrap框架

 

10.3.1Bootstrap簡介

 

10.3.2Bootstrap快速上手

 

10.4架設互聯網網站

 

10.4.1域名服務

 

10.4.2主機托管

 

10.4.3虛擬主機

 

10.5雲服務

 

10.5.1阿裏雲虛擬主機

 

10.5.2阿裏雲ECS

 

參考文獻

 

專題學習資源網址