前端Web开发基础课程标准Word文件下载.docx

前端Web开发基础课程标准Word文件下载.docx

《前端Web开发基础课程标准Word文件下载.docx》由会员分享，可在线阅读，更多相关《前端Web开发基础课程标准Word文件下载.docx（16页珍藏版）》请在冰豆网上搜索。

通过本课程的学习，使学生理解HTML、CSS及JavaScript等基本的理论知识；

掌握应用上述理论知识，制作基本网页、设计网页布局、实现多样化及良好客户体验的页面效果等应用技能；

培养学生的创新意识，设计特色网页。

（二）课程教学目标

通过本课程的学习，使学生掌握Web开发技术的基本理论知识，具备一定的应用开发技能，培养学生工程意识、创新能力和素质。

1.知识目标

（1）了解本课程内容在Web开发领域的定位与作用；

（2）了解HTML、CSS及JavaScript技术的发展脉络、趋势及应用前景；

（3）掌握HTML中的基本元素、文字与段落元素、图像元素、列表元素、表格元素、超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识；

（4）掌握CSS中元素的语法、属性和参数等基础知识；

（5）了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识；

（6）掌握JavaScript中的基本语法知识；

（7）掌握JavaScript进行提交内容校验、生成网页特效等方法。

2.能力目标

（1）具备使用HTML制作包含基本内容的网页的能力；

（2）具备使用HTML及CSS等技术来设计网页布局的能力；

（3）具备使用JavaScript技术来提高网页交互性、体验性的能力；

（4）具备综合使用HTML、CSS与JavaScript的相关知识，来丰富、渲染网页的能力；

（5）具备根据具体应用需求，创新性地设计网页的能力。

3.素质目标

（1）培养学生具备克服困难解决问题的意志；

（2）培养学生养成严谨认真的科学态度，耐心细致的工作作风；

（3）培养学生具备良好的交流沟通素养和创新精神。

（三）参考学时

32\实验：

32）

（四）课程学分

4学分

（五）课程内容和要求（理论48学时，实验16学时）

本课程的主要内容有：

HTML，主要包括网页基本组成元素，网页框架、超文本链接、表单、表格、层等。

CSS，产要包括修改网页元素，主要包括修改文字颜色及背景、调整字符间距、单词间距、添加文字修饰、设置文本排列方式、设置段落缩进、调整行高、转换英文大小写、设置颜色、设置背景颜色、插入背景图片、设置背景图片位置、设计边框样式、调整边框宽度、设置边框颜色、设置边框属性等。

JavaScript，包括JavaScript基本语法、基本数据类型、运算符、函数、JavaScript事件分析、图片和多媒体文件的使用、JavaScript对象的应用、浏览器内部对象、内置对象和方法等。

本课程要求学生了解web编程技术的产生和发展过程，会使用HTML编写网页，会用CSS对网页样式进行设计，会使用JavaScript实现一些客户端的数据验证及网页特效，达到一般企业用人标准。

表2课程内容与学时安排表

序号

教学项目

教学内容与教学要求

活动设计建议

参考课时

（理论+实验）

1

第1章HTML、CSS、JavaScript综述

1.1这就是HTML、CSS、JavaScript的代码

1.2HTML、CSS、JavaScript各自的角色

1.3如何学习HTML、CSS、JavaScript

1.4小实例——HTML、CSS、JavaScript的

1.4综合应用

（1）采用理论课讲授形式

（2）布置学生提前预习，查找资料，课堂讲授中，穿插发言、讨论的形式，来进行授课

2

第2章HTML基础介绍

2.1HTML文档的结构

2.2HTML基本语法

2.3HTML文件的命名

2.4编写HTML文件的注意事项

（2）布置学生提前预习，除讲授基本知识外，编写一个HTML简单文件进行示例讲解

第3章HTML文件的整体结构

3.1文件头部内容

3.2主体内容＜body＞

（2）布置学生提前预习，除讲授基本知识外，给出关于<

body>

的程序示例进行讲解

4

实验1制作简单的HTML页面

使用网页基本组成元素，编写一个简单的HTML页面，运行查看效果

（1）采用实验课形式

（2）建议布置学生提前复习所学习的相关HTML元素的语法、属性及参数知识

5

第4章文字与段落

4.1编辑内容

4.2文字效果

4.3文字修饰

4.4段落＜p＞

4.5小实例——文字网页

（2）布置学生提前预习，除讲授基本知识外，给出关于文字与段落元素的的程序示例进行讲解

6

第5章建立和使用列表

5.1列表类型

5.2嵌套列表

5.3小实例——列表在网页中的使用

（2）布置学生提前预习，除讲授基本知识外，给出关于列表的程序示例进行讲解

7

第6章超链接

6.1超链接概述

6.2超链接的路径

6.3超链接的建立

6.4设置图像映射

6.5小实例——超链接的使用

（2）布置学生提前预习，除讲授基本知识外，给出超链接的程序示例进行讲解

8

第7章表格的应用

7.1表格概述

7.2插入表格＜table＞

7.3设置表格标记属性

7.4设置表格行与单元格

7.5表格嵌套

7.6小实例——表格在网页中的应用

（2）布置学生提前预习，除讲授基本知识外，给出表格相关的程序示例进行讲解

9

实验2练习使用表格和和列表

要求使用表格、列表对数据进行格式化的显示

（2）建议布置学生提前复习所学习的表格、列表等元素的语法、属性及参数知识

10

第8章层的应用

8.1图层的创建——＜div＞

8.2创建嵌套图层

8.3层的属性设置

8.4小实例——图层的实际应用

（2）布置学生提前预习，除讲授基本知识外，给出图层相关的程序示例进行讲解

11

第9章框架的应用

9.1框架概述

9.2框架的基本结构

9.3设置框架

9.4设置框架集＜frameset＞

9.5浮动框架＜iframe＞

9.6在框架上建立链接

9.7小实例——框架的实际应用

（2）布置学生提前预习，除讲授基本知识外，给出框架相关的程序示例进行讲解

12

实验3练习使用框架

练习使用框架，来规划、设计页面内容，包括使用<

frameset>

及<

iframe>

框架技术

（2）建议布置学生提前复习所学习的框架元素的语法、属性及参数知识

13

第10章表单的应用

10.1表单概述

10.2表单标记＜form＞

10.3信息输入＜input＞

10.4小实例——表单的实际应用

（2）布置学生提前预习，除讲授基本知识外，给出表单相关的程序示例进行讲解

14

实验4练习使用表单

练习使用表单，包括其action及method属性，并练习使用表单中的元素，包括文本框、列表框、文本域、单选框、复选框和按钮等内容

（2）建议布置学生提前复习所学习的表单及表单内相关元素的语法、属性及参数知识

15

第11章CSS样式表基础

11.1CSS的概述

11.2CSS的使用

11.3插入CSS样式表

11.4编写CSS文件

（2）布置学生提前预习，除讲授基本知识外，给出使用CSS、编写简单CSS的程序示例进行讲解

16

第12章字体的设置

12.1设置字体——font-family

12.2设置字号——font-size

12.3设置字体样式——font-style

12.4设置字体加粗——font-weight

12.5设置字体变体——font-variant

12.6组合设置字体属性——font

12.7小实例——综合设置字体

（2）布置学生提前预习，除讲授基本知识外，给出通过CSS设置字体相关的程序示例进行讲解

17

实验5练习使用CSS对字体进行设置

练习使用CSS，在HTML文件里进行调用，对字体进行设置，包括了对字体、字号、字体样式、加粗、字体变体、字体属性等的设置

18

第13章文本的精细排版

13.1调整字符间距——letter-spacing

13.2调整单词间距——word-spacing

13.3添加文字修饰——text-decoration

13.4设置文本排列方式——text-align

13.5设置段落缩进——text-indent

13.6调整行高——line-height

13.7转换英文大小写——text-transform

13.8小实例——综合应用文本属性

（2）布置学生提前预习，除讲授基本知识外，给出CSS对文本进行精密排版相关的程序示例进行讲解

19

实验6使用CSS来对文本进行精细排版

要求编写CSS文件，在HTML文件里进行调用，控制DIV显示效果，练习调整字符间距、单词间距、文字修饰、文本排列方式、段落缩进、行高英文大小写等内容

（2）建议布置学生提前复习所学习的CSS语法知识

20

第14章图片和多媒体文件的使用

14.1图片

14.2滚动文字

14.3插入多媒体文件——＜embed＞

14.4添加背景音乐——＜bgsound＞

14.5小实例——综合设置图片和多媒体

（2）布置学生提前预习，除讲授基本知识外，给出图片和多媒体文件相关的程序示例进行讲解

21

第15章CSS样式的高级应用

15.1列表

15.2定位

15.3CSS层

15.4鼠标指针——cursor

15.5小实例——综合设置层样式

（2）布置学生提前预习，除讲授基本知识外，给出CSS样式相关高级应用的程序示例进行讲解

22

实验7熟练使用CSS+DIV等元素进行网页布局设计

理解网页布局的几种方法，重点使用CSS+DIV进行网页布局设计

（2）建议布置学生提前复习所学习的使用CSS+DIV的网页布局知识

23

第16章颜色和背景

16.1设置颜色——color

16.2设置背景颜色——background-color

16.3插入背景图片——background-image

16.4插入背景附件——background-attachment

16.5设置重复背景图片——background-repeat

16.6设置背景图片位置——background-position

16.7小实例——综合设置颜色和背景

（2）布置学生提前预习，除讲授基本知识外，给出CSS设置颜色和背景相关的程序示例进行讲解

24

第17章边框和边距

17.1设计边框样式——border-style

17.2调整边框宽度——border-width

17.3设置边框颜色——border-color

17.4设置边框属性——border

17.5边距——margin-top/margin-bottom/margin-left/margin-right/margin

17.6填充——padding-top/padding-bottom/padding-left/padding-right/padding

17.7小实例——综合设置边框和边距

（2）布置学生提前预习，除讲授基本知识外，给出CSS设置边框和边距相关的程序示例进行讲解

25

第18章JavaScript基础

18.1JavaScript语言概况

18.2第一个JavaScript程序

（2）布置学生提前预习，除讲授基本知识外，设计一个简单的JavaScript程序进行讲解

26

第19章JavaScript基本语法

19.1基本数据类型

19.2运算符

19.3程序结构

19.4函数

19.5小实例——修改密码

（2）布置学生提前预习，除讲授基本知识外，给出相关的程序示例进行讲解

27

第20章JavaScript事件分析

20.1事件概述

20.2主要事件分析

20.3其他常用事件

（2）布置学生提前预习，除讲授基本知识外，给出事件相关的程序示例进行讲解

28

第21章JavaScript对象的应用

21.1对象概述

21.2浏览器内部对象

21.3内置对象和方法

（2）布置学生提前预习，除讲授基本知识外，给出JavaScript对象相关的程序示例进行讲解

29

实验8编写JavaScript程序进行页面验证

要求编写一个JS程序文件，在另一个文件中对属性进行赋值，对方法进行引用，能够进行页面验证等功能

（2）建议布置学生提前复习所学习的JavaScript语法知识

（六）教学建议

1.教学方法

本门课程教学中应注意激发和保持学生的学习兴趣，采用灵活的教学方法和先进的教学手段，加强理论与实际的联系，加强课前、课后的答疑辅导，组织学生自我经验叙述、讨论、问题教学、阅读指导等。

（1）借助范例教学，以点带面，突出重点

在理论知识讲授过程中，应适当选取基本点、重点内容，对其设计相关范例，进行教学，来提高、巩固学生对该理论知识的认知水平，让学生可以理论结合实践，不仅限于纸面，更可深入到具体的范例场景，加深理解。

（2）分组讨论式教学方法。

学生按照要求，进行预习、查阅资料等，在课堂上再根据教师的问题进行分组讨论，并由各组选派一名同学发言回答老师所提问题，并由本组的其他同学补充，讲述完毕后，由教师及其他各组的同学讨论、提问。

2.评价方法

本课程的教学环节包括课堂讲授，课堂讨论和期末考试。

通过加强基础、面向实际、引导思维、启发创新，使学生获得理论知识，培养理论联系实际的能力。

总评成绩=过程性考核（30%）+终结性考核（70%）

3.教学条件

拥有多媒体教室、实验中心等设施，能够确保教师课堂讲授、学生实践训练的需求。

4.教材选编

编选本教材根据教学标准编写活页教材，课程实践中优化编著适应性教材

（1）课程教材

[1]刘西杰,柳林.HTML、CSS、JavaScript网页制作——从入门到精通[M].人民邮电出版社.2013

（2）参考教材

[1]王津涛.网页设计与开发——HTML、CSS、JavaScript（21世纪高等学校规划教材）[M].清华大学出版社.2012年

[2]吕凤顺,王爱华,王轶凤.HTML+CSS+JavaScript网页制作实用教程（新世纪高职高专课程与实践系列教材）[M].清华大学出版社.2012年