HTML前端設計教與學(32/48/60學時教學大綱+視頻)

HTML5前端開發教學大綱

課程編號：20211201001

開課部門：XX系

學    分：X學分

學    時：32學時   （其中理論學時：20學時  上機學時：12學時）

先修課程：計算機基礎、計算機網絡、計算機應用

後續課程：UI設計、 JavaScript與jQuery開發與設計、資料庫應用、移動互聯開發應用等

適用專業：信息技術及其計算機相關專業

HTML5網頁前端設計是計算機專業一門重要的專業方向課程，它是為培養我們社會主義現代化建設所需要的高質量專業人才服務。HTML5網頁前端設計是學習Web前端開發的必修課程。本課程介紹了開發Web前端網頁應具備的基礎知識，包括HTML5、CSS3、JavaScript技術入門以及HTML5拖放、表單、畫布、音頻和視頻、地理定位、Web存儲的應用API等知識。通過理論教學和上機練習訓練學生編寫程序的熟練度和規範性；在項目經驗的積累方面，通過完成項目案例，增加對實際軟體項目開發的經驗。知識目標：了解Web原理基礎和前端新技術的由來，掌握HTML5+CSS3+JavaScript基礎知識以及各類HTML5 API如拖放、表單、畫布、音頻和視頻、地理定位、Web存儲的應用。技能目標：能綜合應用HTML5、CSS3與JavaScript技術開發Web網站，能夠在開發過程中熟練掌握HTML5新增文檔結構元素的使用、CSS各類選擇器的使用和樣式的表達，提高開發者網頁前端實戰項目分析能力以及強化綜合應用能力。一、嚴格按照課表規定的時間、地點上課，不遲到、不早退。二、根據大綱要求，認真備課完成教案與講稿編寫等各項課前準備工作；授課過程力求內容充實、概念準確、思路清晰、詳略得當、邏輯性強、重難點突出，力戒平鋪直敘、照本宣科，三、重視對學生的學習方法指導和課堂教學效果信息的反饋，實現教與學的雙向互動；四、做好考核內容設計，並嚴格按照大綱要求做好出勤率統計、作業評價。五、學生根據課程大綱要求制定本門課程學習計劃，加強學業管理，嚴格自我要求，提升自主學習能力，主動適應課程學習要求。參與課堂教學活動不遲到、不早退，無正當理由不請假，上課認真聽講，不做任何與課堂教學無關事宜，不使用手機，積極與授課教師進行教學互動，同時利用課餘時間做好預習、複習、課外書籍閱讀等工作，主動與同學開展合作學習，認真完成任課教師布置的課程作業。第2章 HTML5基礎：HTML5基本結構、HTML5保留的常用標籤、HTML5新增的常用標籤。第3章 CSS基礎：CSS樣式表、CSS選擇器、CSS常用樣式、CSS定位。第4章 JavaScript基礎：JavaScript變量、基本數據類型、JavaScript對象類型、JavaScript運算符、JavaScript 條件語句、JavaScript函數、JavaScript DOM。第5章 HTML5 拖放API：掌握HTML5元素拖放功能第6章 HTML5 表單API：HTML表單基礎、HTML5表單新增輸入類型、HTML5表單新增元素標籤、HTML5表單新增屬性。第7章 HTML5 畫布API：HTML5畫布創建，繪製路徑、矩形、圖片和文本，顏色和樣式設置，保存與恢復技術，變形與剪裁。第8章 HTML5 媒體API：HTML5音頻的應用、HTML5視頻的應用、HTML5媒體API的其他通用功能。第9章 HTML5 地理定位API：經緯度坐標、HTML5獲取當前定位、HTML5實時更新定位。第10章 HTML5 Web存儲API：localStorage和sessionStorage存儲，存儲、讀取數據、數據遍歷，刪除指定數據，清空所有數據。第11章 CSS3技術：CSS3邊框和背景效果、CSS3文本和字體效果、CSS3變形與動畫效果、CSS3多列。第12章 綜合應用設計實例：綜合應用HTML5、CSS3與JavaScript相關知識開發網頁。

本課程建議課內上機18個學時，針對每章節知識點進行基礎項目案例開發訓練。教師可根據實際情況從配套的《HTML5網頁前端設計實戰》一書中選取上機的具體案例內容，該書基本每章節均提供2個案例對應主教材一個章節，教師可每次任選對應章節中一個案例作為上機課主題，另外一個案例留給學生選學。

具體安排見下表。

章節

上機課時

實驗內容

第1章 緒論

0

無

第2章 HTML5基礎

1

上機實驗：

1. 開發第一個Web頁面

2. 使用HTML5新增標籤豐富頁面內容

第3章 CSS基礎

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第1章：

1. 導航欄菜單的設計與實現

2. 商務風格表格的設計與實現

第4章 JavaScript基礎

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第2章：

1. 電子時鐘的設計與實現

2. 電子日曆的設計與實現

第5章 HTML5 拖放API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第3章：

1. 仿回收站效果的設計與實現

2. 圖片相框展示的設計與實現

第6章 HTML5 表單API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第4章：

1. 用戶註冊頁面的設計與實現

2. 問卷調查頁面的設計與實現

第7章 HTML5 畫布API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第5章：

1. 手繪時鐘的設計與實現

2. 拼圖遊戲的設計與實現

第8章 HTML5 媒體API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第6章：

1. 音樂播放器的設計與實現

2. 在線教學視頻的設計與實現

第9章 HTML5 地理定位API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第7章：

1. 運動數據記錄的設計與實現

2. 運動軌跡記錄的設計與實現

第10章 HTML5 Web存儲API

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第8章：

1. 網頁主題設置的設計與實現

2. 網頁日誌本的設計與實現

第11章 CSS3技術

1

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第9章：

1. 特殊字體效果的設計與實現

2. 動畫放大菜單的設計與實現

第12章 綜合設計應用實例

2

上機實驗（任選其一）：

《HTML5網頁前端設計實戰》第10章

《HTML5網頁前端設計第2版-微課視頻版》第12章

在總課時量較少的情況下，建議上機課節選主要功能模塊講解，其餘擴展功能模塊作為選學內容由學生課下繼續完成，可上傳到學校配套的課堂派、學習通等平臺的討論區或者qq群等地方參與每期的交流討論。上機實驗環節可以鞏固學生對理論知識的理解，提高學生的實踐操作能力和解決問題的邏輯思維能力，課後還可布置思考題培養學生的創新思維能力。根據學生在上機課的參與度、表現、操作熟練程度以及項目原始碼等內容綜合評定上機實踐成績，建議按總成績的10%錄入課程總分。

章節

理論課時

上機課時

第1章 緒論

1

0

第2章 HTML5基礎

2

1

第3章 CSS基礎

2

1

第4章 JavaScript基礎

2

1

第5章 HTML5 拖放API

2

1

第6章 HTML5 表單API

2

1

第7章 HTML5 畫布API

2

1

第8章 HTML5 媒體API

2

1

第9章 HTML5 地理定位API

2

1

第10章 HTML5 Web存儲API

2

1

第11章 CSS3技術

1

1

第12章 綜合應用設計實例

0

2

理論和上機學時：

20

12

課程總學時：

32

章節

理論課時

上機課時

第1章緒論

2

0

第2章 HTML5基礎

2

2

第3章 CSS基礎

4

2

第4章 JavaScript基礎

4

2

第5章 HTML5 拖放API

2

1

第6章 HTML5 表單API

4

2

第7章 HTML5 畫布API

2

1

第8章 HTML5 媒體API

2

1

第9章 HTML5 地理定位API

2

1

第10章 HTML5 Web存儲API

2

1

第11章 CSS3技術

2

1

第12章綜合應用設計實例

2

4

理論和上機學時：

30

18

課程總學時：

48

章節

理論課時

上機課時

第1章緒論

2

0

第2章 HTML5基礎

2

2

第3章 CSS基礎

4

2

第4章 JavaScript基礎

4

2

第5章 HTML5 拖放API

2

2

第6章 HTML5 表單API

4

2

第7章 HTML5 畫布API

4

2

第8章 HTML5 媒體API

4

2

第9章 HTML5 地理定位API

2

2

第10章 HTML5 Web存儲API

2

2

第11章 CSS3技術

4

2

第12章綜合應用設計實例

2

4

理論和上機學時：

36

24

課程總學時：

60

掃碼，優惠購書

本書是一本從零開始學習的Web前端開發教材，無需額外的基礎。全書以項目驅動為宗旨，詳細介紹HTML5、CSS3與JavaScript的基礎知識與使用技巧。本書包含203個例題，均在瀏覽器中調試通過。作者為書中所有例題以及最後一章的綜合設計實例精心錄製了總計900分鐘的視頻講解，包括視頻文件212個。 本書還提供豐富的配套資源，包括教學大綱、教學課件、電子教案、例題原始碼、課後習題答案、教學講度表、題庫、試卷等。

 

 

PPT，大綱、教案、進度表、答案、題庫、上機、600個案例資源庫、前端設計文檔、經典網站設計模板、600分鐘視頻等

本書針對教師提供了題庫網站（www.qingline.net），總共526道題目。教師用戶：提供了布置作業，批改作業，統計班級成績，組卷等功能。

第一部分基礎知識篇

第1章緒論

1.1Web原理基礎

1.1.1Internet與全球資訊網

1.1.2Web架構

1.1.3Web應用

1.2Web前端技術基礎

1.2.1HTML技術

1.2.2CSS技術

1.2.3JavaScript技術

1.3Web前端新技術

1.3.1HTML5技術

1.3.2CSS3技術

1.4Web開發工具

1.4.1Adobe Dreamweaver

1.4.2Sublime Text

1.4.3NodePad++

1.4.4EditPlus

1.5Web技術的前景與展望

1.5.1Flash的興衰

1.5.2HTML5的前景

1.5.3未來展望

1.6本章小結

習題1

第2章HTML5基礎

2.1HTML5基本結構

2.1.1文檔類型聲明!DOCTYPE

2.1.2根標籤html

2.1.3首部標籤head

2.1.4主體標籤body

2.1.5HTML5文檔注釋

2.1.6HTML5文檔規範

2.1.7HTML4.01轉換為HTML5

2.2HTML5保留的常用標籤

2.2.1基礎標籤

2.2.2文本格式標籤

2.2.3列表標籤

2.2.4圖像標籤

2.2.5超連結標籤

2.2.6表格標籤

2.2.7框架標籤

2.2.8容器標籤

2.3HTML5新增的常用標

2.3.1HTML5新增文檔結構標籤

2.3.2HTML5新增格式標籤

2.4HTML5新增API

2.5本章小結

習題2

第3章CSS基礎

3.1CSS樣式表

3.1.1內聯樣式表

3.1.2內部樣式表

3.1.3外部樣式表

3.1.4樣式表層疊優先級

3.2CSS選擇器

3.2.1元素選擇器

3.2.2ID選擇器

3.2.3類選擇器

3.2.4屬性選擇器

3.3語法規則

3.3.1注釋語句

3.3.2@charset

3.3.3!important

3.4CSS取值與單位

3.4.1數字

3.4.2長度

3.4.3角度

3.4.4時間

3.4.5文本

3.4.6顏色

3.5CSS常用樣式

3.5.1CSS背景

3.5.2CSS框模型

3.5.3CSS文本

3.5.4CSS字體

3.5.5CSS超連結

3.5.6CSS列表

3.5.7CSS表格

3.6CSS定位

3.6.1絕對定位

3.6.2相對定位

3.6.3層疊效果

3.6.4浮動

3.7本章小結

習題3

第4章JavaScript基礎

4.1JavaScript的使用

4.1.1內部JavaScript

4.1.2外部JavaScript

4.2JavaScript的語法

4.2.1JavaScript的大小寫

4.2.2JavaScript分號

4.2.3JavaScript注釋

4.2.4JavaScript代碼塊

4.3JavaScript變量

4.3.1變量的聲明

4.3.2變量的命名規範

4.3.3JavaScript關鍵字和保留字

4.4JavaScript基本數據類型

4.4.1Undefined類型

4.4.2Null類型

4.4.3String類型

4.4.4Number類型

4.4.5Boolean類型

4.5JavaScript運算符

4.5.1賦值運算符

4.5.2算術運算符

4.5.3邏輯運算符

4.5.4關係運算符

4.5.5相等性運算符

4.6JavaScript條件語句

4.6.1if語句

4.6.2switch語句

4.7JavaScript函數

4.7.1函數的基本結構

4.7.2函數的調用

4.7.3函數的返回值

4.8文檔對象模型

4.8.1查找HTML元素

4.8.2DOM HTML

4.8.3DOM CSS

4.8.4DOM事件

4.8.5DOM節點

4.9本章小結

習題4

第二部分重點篇

第5章HTML5拖放API

5.1HTML5新增拖放API

5.2瀏覽支持情況

5.3HTML5拖放API的應用

5.3.1DragEvent事件

5.3.2DataTransfer對象

5.3.3拖放元素過程

5.3.4自定義拖放圖標

5.3.5自定義拖放行為

5.3.6本地文件的拖放

5.4本章小結

習題5

第6章HTML5表單API

6.1HTML表單基礎

6.1.1表單標籤form

6.1.2輸入標籤input

6.1.3標記標籤label

6.1.4多行文本標籤textarea

6.1.5列表標籤select

6.1.6按鈕標籤button

6.1.7域標籤fieldset和域標題標籤legend

6.2HTML5表單新特性

6.2.1HTML5表單新增輸入類型

6.2.2HTML5表單新增元素標籤

6.2.3HTML5表單新增屬性

6.3本章小結

習題6

第7章HTML5畫布API

7.1畫布概述

7.1.1HTML5畫布

7.1.2畫布坐標

7.1.3主流瀏覽器支持情況一覽

7.2HTML5畫布API的應用

7.2.1檢查瀏覽器支持情況

7.2.2創建畫布

7.2.3畫布繪製方法

7.2.4繪製路徑

7.2.5繪製矩形

7.2.6繪製圖片

7.2.7繪製文本

7.2.8顏色與樣式

7.2.9保存和恢復

7.2.10變形

7.2.11剪裁

7.3本章小結

習題7

第8章HTML5媒體API

8.1HTML5媒體API概述

8.1.1HTML5音頻和視頻

8.1.2HTML5媒體支持的格式

8.2主流瀏覽器支持情況一覽

8.2.1對HTML5音頻的支持情況

8.2.2對HTML5視頻的支持情況

8.3HTML5音頻的應用

8.3.1HTML5音頻的基本格式

8.3.2檢查瀏覽器支持情況

8.3.3音頻來源多樣性

8.3.4自定義音頻控制

8.4HTML5視頻的應用

8.4.1HTML5視頻的基本格式

8.4.2檢查瀏覽器支持情況

8.4.3視頻來源多樣性

8.4.4自定義視頻控制

8.5HTML5媒體API其他通用功能

8.5.1標記媒體播放時間範圍

8.5.2跳轉媒體播放時間點

8.5.3獲取媒體播放時間

8.5.4終止媒體文件的下載

8.5.5使用Flash播放器

8.6本章小結

習題8

第9章HTML5地理定位API

9.1位置信息

9.1.1經緯度坐標

9.1.2位置信息的來源

9.2主流瀏覽器支持情況一覽

9.3HTML5地理位置API的應用

9.3.1檢查瀏覽器支持情況

9.3.2Geolocation接口

9.3.3獲取當前定位

9.3.4實時更新定位

9.4本章小結

習題9

第10章HTML5 Web存儲API

10.1Web存儲技術概述

10.1.1HTTP cookie存儲

10.1.2HTML5 Web存儲

10.2主流瀏覽器支持情況

10.3HTML5 Web存儲 API的應用

10.3.1檢查瀏覽器支持情況

10.3.2Storage接口

10.3.3localStorage與sessionStorage

10.3.4存儲數據

10.3.5讀取指定數據

10.3.6數據遍歷

10.3.7刪除指定數據

10.3.8清空所有數據

10.4本章小結

習題10

第三部分提高篇

第11章CSS3技術

11.1CSS3邊框和背景效果

11.1.1CSS3邊框

11.1.2CSS3背景效果

11.2CSS3文本和字體效果

11.2.1CSS3文本

11.2.2CSS3字體

11.3CSS3變形與動畫效果

11.3.1CSS3 2D變形

11.3.2CSS3 Transition動畫

11.3.3CSS3 Animation動畫

11.4CSS3多列

11.4.1columns

11.4.2columngap

11.4.3columnrule

11.5本章小結

習題11

第12章綜合應用設計實例

12.1項目簡介

12.2整體布局設計

12.3網站頁眉實現

12.4菜單導航欄實現

12.4.1菜單欄目的實現

12.4.2搜索框的實現

12.5主體內容第一行實現

12.5.1左側面板的實現

12.5.2右側面板上方的實現

12.5.3右側面板下方的實現

12.6主體內容第二行實現

12.7網站頁腳實現

12.7.1頁腳1的實現

12.7.2頁腳2的實現

12.8完整代碼展示

附錄AHTML5元素標籤對照表

附錄BHTML5事件屬性對照表

附錄CCSS3顏色名稱對照表

由於篇幅的原因，教學進度表和教案請下載查閱（課件壓縮包裡面）

完整的配套，請在公眾號「書圈」後臺回復【9787302553588】下載完整版