時：100

學分：6

HTML+CSS是網頁構成的基本要素，“跨平臺開發”的概念也逐漸走進移動開發者的視野。目前國內外已經有很多基于HTML5的跨平臺開發工具，掌握HTML+CSS技術，運用工具中所提供的各種豐富的功能模塊，可在很短時間內完成App的開發而且讓你的App具備完美的原生體驗。

通過本課程的學習，使學生對網頁得組成有所了解，從最簡單的網頁開發基礎入手，通過本課程的學習與實踐，使學生掌握網頁得基本組成部分，掌握使用HTML完成網頁開發得步驟，并能結合CSS為網頁增添華麗的動畫與3D效果樣式，能夠編寫大型綜合性網頁。

1. 課程學時分配

三、實踐教學的基本要求

1.課內實驗項目一覽表

2.實踐教學要求

（1）教學目的: 加強實踐環節，培養學生的動手能力。使學生通過實驗驗證課堂所學理論，加深理解并掌握網頁設計相關理論知識。

(2) 教學要求：了解要求學生掌握Hbulider軟件的操作過程，以及利用該軟件進行實際網頁設計開發的步驟。

(3) 教學形式：課堂教學和教學實驗相互結合，通過實驗內容鞏固所學知識。

四、課程的基本教學內容及要求

第一章 HTML語言基礎

1.教學內容

（1）B/S程序架構

（2）HTML語言

（3）HTML常用標簽

2.重點與難點

重點：HTML常用標簽分類，常用標簽使用。

難點：HTML常用標簽分類，常用標簽使用。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生了解HTML語言，掌握HTML常用標簽分類以及常用標簽使用，會使用Hblider完成簡單得頁面練習。

第二章 表格和表單

1.教學內容

（1）表格的基本結構，表格的基本語法

（2）表格的基本操作

（3）表單的使用

（4）表單基本元素

2.重點與難點

重點：表格/表單的基本結構，基本語法以及常用操作。

難點：表格/表單的基本結構，基本語法以及常用操作。

3.課程教學要求

本章采用多媒體講述的教學方法，要求掌握網頁中表格和表單的基本結構，基本語法以及常用操作，并可以完成簡單的表格表單頁面設計。

第三章 CSS樣式表基礎

1.教學內容

（1）CSS基本語法

（2）CSS基本用法

（3）CSS基礎選擇器

2.重點與難點

重點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。

難點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生了解什么是CSS，掌握CSS基本語法和基本使用方式，CSS中選擇器的分類及各類選擇器的使用方法，并能使用CSS為網頁添加簡單的樣式。

第四章 CSS樣式深入

1.教學內容

（1）CSS顏色屬性

（2）字體屬性

（3）CSS背景屬性

（4）CSS列表屬性

（5）CSS文本格式化

2.重點與難點

重點：CSS各類樣式的基本語法，屬性及使用。

難點：CSS各類樣式的基本語法，屬性及使用。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS顏色、字體、背景、列表等屬性基本語法和使用方式，并能使用CSS為網頁添加相應的樣式。

第五章 塊狀元素,行內元素

1.教學內容

（1）塊狀元素和行內元素

（2）元素之間相互轉換

2.重點與難點

重點：塊狀元素和行內元素區別和相互轉換。

難點：塊狀元素和行內元素區別和相互轉換。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS中元素的分類和相互轉換，并能使用CSS為網頁添加相應的樣式。

第六章 盒子模型

1.教學內容

（1）盒子模型

（2）盒子模型計算

（3）邊距設置

（4）盒子模型陰影

（5）盒子定位

2.重點與難點

重點：盒子模型大小計算方式，內外邊距設置使用，盒子定位方式和區別。

難點：盒子模型大小計算方式，內外邊距設置使用，盒子定位方式和區別。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS中盒子模型的分類，盒子大小的計算，以及盒子邊距的設計和計算，熟練定位盒子位置，并能使用CSS為網頁添加相應的樣式。

第七章 菜單樣式設計

1.教學內容

（1）水平導航菜單設計

（2）垂直導航菜單設計

（3）懸浮菜單設計

2.重點與難點

重點：水平/垂直/懸浮導航菜單設計。

難點：水平/垂直/懸浮導航菜單設計。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生熟練使用CSS樣式基礎完成不同類型的導航菜單設計。

第八章 表格布局網頁制作

1.教學內容

（1）網頁布局屬性

（2）使用表格完成完成網頁布局

2.重點與難點

重點：使用表格完成完成網頁布局。

難點：使用表格完成完成網頁布局。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生掌握網頁布局的用途，熟練使用CSS表格完成網頁布局。

第九章 DIV頁面布局

1.教學內容

（1）使用DIV完成完成網頁布局

（2）新疆旅游網網頁設計

2.重點與難點

重點：使用DIV完成完成網頁布局。

難點：使用DIV完成完成網頁布局。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生掌握網頁布局的用途，熟練使用DIV完成網頁布局，完成新疆旅游網網頁設計。

第十章 靜態網站設計案例

1.教學內容

（1）百度貼吧網頁設計

2.重點與難點

重點：百度貼吧網頁設計。

難點：百度貼吧網頁設計。

3.課程教學要求

本章采用多媒體講述的教學方法，要求學生熟練使用HTML+CSS完成百度貼吧網頁設計

五、課程考核

1.考核方式、記分制和考核時間

本課程采用理論閉卷考查+上機實踐兩種考核方式，成績采用百分制記分，理論考試時間為60分鐘，上機考試時間為120分鐘

2.考試成績構成

課程總成績=平時成績10%+實踐成績20%+期末考試成績70%。

3.考核題型及命題要求

理論考核題型為選擇題。

上機考試題型為網頁設計題。

命題依據教學大綱要求，命題在教學大綱規定的教學目的、教學要求、教學內容和教材范圍之內，按照重分析推理和理論聯系實際原則，既考查對基本知識的識記能力，又考查運用所學知識實際運用能力，考試命題的覆蓋面應盡可能廣一些，其中主要考查學生對HTML+CSS基礎的掌握程度和使用HTML+CSS完成網頁設計的熟練程度。

六、參考教材

[1] 明日科技.梅長林.零基礎學HTML5+CSS3.吉林大學出版社,2017

[2] Elisabeth Robson,Eric Freeman著,徐陽,丁小峰等譯.Head First HTML與CSS（第2版）.中國電力出版社.2013

七、大綱說明

本大綱根據計算機應用專業人才培養方案、培養規格和數據分析與處理性質，結合學校現有條件制定本大綱，其內容根據課程內容、人才培養方案及科學性和合理性原則選編。對大綱中的重點應深入講解，對難點采用課堂講授與課下輔導為主，課堂講授中，教師反復強調工程性的指導思想，以及所講知識點在信息科學領域所處的位置和作用，以生動的實例引導學生，提高學生學習的積極性。

制定人： 審定人：

學目標：

1. 理解前端開發的基本概念和原理。

- 前端開發的定義和作用

- 前端開發的基本工具和環境

- 前端開發的職責和要求

2. 掌握HTML5標記語言的基本語法、元素和屬性。

- HTML5的發展歷程和版本

- HTML5文檔結構和基本語法規范

- HTML5常用的文本標記、圖像標記、表格標記等

- HTML5的表單元素和相關屬性

3. 掌握CSS3的基本語法、選擇器和常用樣式屬性。

- CSS3的發展歷程和版本

- CSS3的基本語法和選擇器

- CSS3的盒模型、布局和浮動

- CSS3的文本樣式、背景樣式和過渡動畫

4. 理解JavaScript的基本語法、數據類型、條件語句和循環結構。

- JavaScript的基本語法和變量定義

- JavaScript的數據類型和類型轉換

- JavaScript的條件語句和邏輯運算

- JavaScript的循環結構和數組操作

5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。

- DOM的概念和基本原理

- 使用JavaScript獲取和操作HTML元素

- 使用JavaScript創建、修改和刪除HTML元素

- DOM事件的處理和綁定

6. 理解響應式設計的概念和基本原理。

- 響應式設計的定義和作用

- 使用媒體查詢實現頁面布局的適應性

- 使用流式布局和彈性盒子布局實現頁面適配

- 使用響應式圖片等技術提升頁面響應性

大綱精細化教學設計：

第一部分：前端開發基礎

1. 前端開發概述

1.1 什么是前端開發

1.2 前端開發的歷史和發展趨勢

1.3 前端開發的基本工具和環境

2. HTML5基礎

2.1 HTML5的簡介和發展歷程

2.2 HTML5的文檔結構和基本語法規范

2.3 HTML5常用的文本標記、圖像標記、鏈接標記等

2.4 HTML5的表單元素和相關屬性

3. CSS3基礎

3.1 CSS3的簡介和發展歷程

3.2 CSS3的基本語法和選擇器

3.3 CSS3的盒模型、布局和浮動

3.4 CSS3的文本樣式、背景樣式和過渡動畫

4. JavaScript基礎

4.1 JavaScript的簡介和發展歷程

4.2 JavaScript的基本語法和變量定義

4.3 JavaScript的數據類型和類型轉換

4.4 JavaScript的條件語句和邏輯運算

4.5 JavaScript的循環結構和數組操作

第二部分：網頁交互與動態效果

1. DOM操作

1.1 DOM的概念和基本原理

1.2 使用JavaScript獲取和操作HTML元素

1.3 使用JavaScript創建、修改和刪除HTML元素

1.4 DOM事件的處理和綁定

2. 事件處理與表單驗證

2.1 常見的DOM事件類型和觸發條件

2.2 使用JavaScript處理交互事件

2.3 表單驗證的基本原理和實現方法

3. Ajax與數據交互

3.1 Ajax的簡介和發展歷程

3.2 使用JavaScript發送異步請求

3.3 處理服務器返回的數據

第三部分：響應式設計與跨平臺開發

1. 響應式設計概述

1.1 響應式設計的定義和作用

1.2 媒體查詢的基本語法和常用屬性

1.3 使用響應式設計實現網頁適配

2. 移動端開發概述

2.1 移動端開發的特點和挑戰

2.2 使用CSS3實現移動端樣式效果

2.3 使用JavaScript處理移動端交互

3. 跨平臺開發基礎

3.1 常見的跨平臺開發技術和框架

3.2 使用跨平臺開發工具搭建應用

3.3 測試和發布跨平臺應用

通過以上的教學目標和大綱精細化教學設計，學習者將能夠全面掌握前端開發所需的HTML5、CSS3和JavaScript的基礎知識，并能夠應用所學知識實現網頁交互和動態效果，以及具備響應式設計和跨平臺開發的能力。