时：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的基础知识，并能够应用所学知识实现网页交互和动态效果，以及具备响应式设计和跨平台开发的能力。