网页设计与Web前端开发教与学（含教学大纲和教案）

《网页设计与Web前端开发》课程教学大纲

一、课程基本信息

1．课程编号：AA06300

2．课程名称：网页编程基础

3. 适用专业：信息管理与信息系统，软件工程

4．课程简介：本课程是为信息管理及软件工程专业学生开设的一门实践性很强的计算机应用课程。通过本课程的学习，让学员还能掌握静态网站的制作并且HTML5标记语言的利用，并掌握CSS3与Java类库语言编程的基本原则与方法，具备网页后端编程开发的基础能力。

二、课程说明

1．教学目的跟要求：本课程目标是让学员把握网页编程的基础知识，包括HTML5语言、CSS3、及网站制作脚本语言Java，具备网页后端编程与研发的基本技能，并在此基础上对网页编程技术的全貌有界定的知道，为平台研发模块方向的进一步学习打下坚实的基础。

2．前继课程：《高级语言程序设计》等

3. 后续课程：《J2EE构架》》 、《软件测试》等

4．周课时、总学时：周学时4；总学时56，理论36，实验20。

5．开课学期：信息管理专业第3学期，软件工程专业第1学期。

6．考试方式：平时成绩20%，实验成绩20%，期中检查10%，期末考试50%。

7、教学方法: 在课堂教学中引入多媒体辅助教学与电子备课，40学时用于教学讲授，24学时用于上机实践。按照课程的每位阶段，要求教师做相应的上机实验，以超过本课程教学目的。

三、课程内容与学时分布

第1章 网页设计与Web前端基础

本章主要介绍Web、网站跟网页相关的概念，包括Web的基本概念、体系构架等相关概念，网页编程的3类标准，望网站开发的工作步骤及常见的网站制作工具。

通过本章的学习，了解Web的相关概念跟网页编程的标准，理解网站开发的工作步骤，能够进行简单的网站规划及申请网页空间。

第2章 HTML常用标签

本章主要讲解网页中的常见标签及属性的用法，包括文本、图片及超链接标签。

通过本章的学习，深入认识并把握HTML常用标签在网页实际页面内容建设中的应用。

第3章 使用CSS3样式表

本章主要讲解CSS3基本词汇，包括CSS样式的定义跟应用，CSS的高级词汇及常见的CSS3属性。

通过本章的学习，理解CSS的基本概念跟用法，能够使用CSS3的常见属性实现网站风格定义及站点外观统一。

第4章 使用HTML+CSS布局网页

本章主要讲解HTML+CSS布局的概念跟步骤，包括浮动布局、定位布局，以及对于图片、表单、表格和内联框架的布局。

通过本章的学习，理解常用的三种定位模式及布局方式，初步掌握DIV+CSS页面布局的技能。

由于本课程的课时限制，CSS进阶应用及PC端网站布局综合案例实战作为教师的课后自学和选学内容。

第5章 HTML5+CSS3移动网站布局

本章主要讲解HTML5的新增标签跟CSS3的新增选择器，过渡、动画及变换等常见的CSS3属性，以及CSS3的新增属性，最后是CSS3弹性盒模型和移动端网站自适应布局的主要机理和技巧。

通过本章的学习，熟悉HTML5和CSS的新增特性，掌握其中常用的标签、选择器和属性的应用。

由于本课程的课时限制，CSS弹性盒模型和移动端网站自适应布局成为教师的课后自学和选学内容。

第6章 使用Java脚本

本章主要讲解Java的基本概念、语法及使用Java操作HTML标签属性及CSS样式的常见方式，最后是常用的网页对象及操作方法。

通过本章的学习，在理解Java基本概念跟语法的基础上，能够熟练使用Java操作网页元素、对象跟属性。

由于课时限制，localStorage对象跟Web交互开发案例实战作为教师的课后自学和选学内容。

第7章 图形绘制

本章主要讲解Canvas的概念、相关常识和使用方式。

通过本章的学习，了解并把握Canvas绘图科技以及在动画设计中的应用。

由于课时限制，本章作为教师的课后自学和选学内容。

提供PPT课件，源码，答案，教案，视频，大纲

作者：莫小梅、毛卫英

定价：79.80元

ISBN：9787302534532

配套视频赏析

《网页设计与Web前端开发》课程教案

第1 次课2 学时

网页设计与Web前端基础、HTML5网页结构、网页文本、图片标签及属性。

通过本次课的学习，了解Web的相关概念及网站开发的工作步骤，掌握HTML5网页结构、网页文本、图片标签及属性的用法。

重点：网页标准、网站规划、网页结构。

难点：网站规划。

1．第1章课后理论题（填空、选择、判断、简答）

2．第2章相关课后理论题

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结并逐渐深入体会Web相关概念、网页标准、网站规划及申请网页空间的用法，及时复习熟悉HTML5网页结构及文本、图片标签跟属性。

第2 次课2 学时

上机实践：HTML5网页结构设计及网页空间申请、上传。

通过本次课的实践，练习使用记事本编辑HTML5网页结构的方式、熟悉网页文本、图片标签及属性的用法。学会申请网页空间，及本地网站的上传方式。

重点：使用记事本编辑网站、图片和文本标签及属性的用法。

难点：网站规划及申请网页空间。

1．实验要求讲解及资料发放（30分钟）

2．上机实践及答疑（50分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第3 次课2 学时

网页超链接与多媒体的使用。

通过本次课的学习，了解熟悉网页几种常见的超链接用法，理解网页中多媒体播放的特征，掌握使用HTML5标签播放音视频的基本用法。

重点：超链接的格式跟用法、HTML5播放音视频的方式。

难点：相对链接、书签链接、HTML5播放音视频的兼容格式。

1．超链接的基本格式及URL链接（5分钟）

2．本地链接（10分钟）

3．书签链接（20分钟）

4．下载文件链接跟邮件链接（5分钟）

5．在内部窗口中播放多媒体（5分钟）

6．在当前文档中播放音频（15分钟）

7．在当前文档中播放视频（20分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结及复习熟悉各种超链接和HTML5音视频的使用格式跟步骤。

第4 次课2 学时

上机实践：HTML5超链接及多媒体的使用。

通过本次课的实践，练习使用Dreamweaver定义本地站点及编辑网站的方式，掌握常用的网站超链接定义方式，熟悉HTML5音视频标签的使用及相关的兼容用法。

重点：Dreamweaver定义本地站点、网页链接、HTML5音视频标签的使用。

难点：书签链接、HTML5音视频的兼容用法。

1．实验要求讲解及资料发放（30分钟）

2．上机实践及答疑（50分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验计算机原理教案下载，完成试验结果的上传。

第5 次课2 学时

CSS样式表的定义跟创建、盒模型、列表标签及样式。

通过本次课的学习，了解CSS样式表的概念跟使用方式、理解盒模型的概念跟相关属性及用法、熟悉列表标签以及风格定义。

重点：类跟id选择器的异同、盒模型的概念、3种列表的格式跟颜色定义。

难点：类跟id选择器的异同、盒模型的概念及外边距合并。

1．第一个CSS案例跟基本语法（7分钟）

2．CSS的4种创建方式（8分钟）

3．组合选择器和后代选择器（7分钟）

4．类选择器和id选择器（8分钟）

5．盒模型的属性：boder、padding、margin（20分钟）

6．外边距合并（10分钟）

7．列表标签及样式（20分钟）

1.第3章相关课后理论题

2.盒模型实例样式实践

3.列表样式案例实践

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结并逐渐深入体会CSS的用法、盒模型的概念及应用，以及列表定义及样式应用。

第6 次课2 学时

上机实践：样式表的定义、盒模型及列表样式应用。

通过本次课的实践，熟悉样式表的常用定义方式、熟练掌握盒模型及相关属性的用法，掌握列表的定义跟颜色应用方式。

重点：内部形状表的定义、类和id选择器的用法、盒模型及属性的应用。

难点：类跟id选择器的用法、盒模型及属性的应用。

1．实验要求讲解及资料发放（30分钟）

（1）使用Dreamweaver CC创建内部样式表

（2）标签选择器、类选择器和id选择器的构建和属性设定

（3）外部样式表和内联样式表的构建

2．上机实践及答疑（50分钟）

（1）盒模型实例实践

（2）列表样式案例实践

完成实验必做题，探究练习课后实践题的个别要求。

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第7 次课2 学时

元素分类及转化、CSS的常用属性

通过本次课的学习，了解网站三种元素的分类及排列方法的优劣，熟悉CSS的背景、字体、文本、鼠标等常用属性。

1．3种元素以及默认排列方法（30分钟）

2．元素类型的转换（10分钟）

3．CSS的常见属性：背景、字体、文本、鼠标等（40分钟）

第3章课后相关理论题

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结及复习熟悉元素分类跟转换，以及CSS的常见属性的应用方式。

第8 次课2 学时

上机实践：元素种类转换、CSS的常见属性。

通过本次课的实践，综合利用元素种类转换，及CSS的常见属性，实现不同特点网页的布局。

重点：元素种类转换、CSS的常见属性。

难点：元素类型转化。

1．实验要求讲解及资料发放（30分钟）

2．上机实践及答疑（50分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第9 次课2 学时

选择器高级、CSS继承与优先、常用CSS3属性

通过本次课的学习，了解跟初步应用常见的CSS3新增选择器，理解CSS的继承与优先特性，熟练运用CSS3的常见属性。

重点：选择器高级、常用CSS3属性。

难点：CSS继承与优先。

完成第3章课后理论题

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结及复习熟悉CSS3新增选择器、CSS继承与优先，以及常见的CSS3属性应用方式。

第10 次课2 学时

上机实践：选择器高级、常用CSS3属性。

通过本次课的实践，综合利用CSS3新增选择器、及CSS3的常见属性实现不同特点网页的布局。

重点：选择器高级、常用CSS3属性。

难点：伪类和伪元素选择器、visibility与display属性的异同。

1．实验要求讲解及资料发放（30分钟）

2．上机实践及答疑（50分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第11 次课2 学时

CSS布局概述、元素的浮动、元素的定位。

通过本次课的学习，了解CSS布局的基本概念及三种定位模式计算机原理教案下载，理解元素浮动和定位的机理，掌握运用元素的浮动和定位进行加码的方式。

重点：利用浮动实现横向导航条布局、定位元素的居中。

难点：浮动的特殊状况、定位元素的居中。

1．CSS布局概述（5分钟）

2．浮动的概念及应用（20分钟）

3．利用浮动实现横向导航条布局（15钟）

4．定位属性position和z-index（25分钟）

5．z-index属性（5分钟）

6．定位元素的居中（15钟）

1.第4章相关课后理论题

2.元素定位案例样式实践

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结并逐渐深入体会浮动和定位布局的概念、用法及在网页布局中的应用。

第12 次课2 学时

上机实践：元素的浮动和定位布局。

通过本次课的实践，熟悉利用元素的浮动和定位属性实现导航条布局和页面的居中和绝对定位等布局效果。

重点：横向导航条布局、页面居中、绝对定位布局。

难点：绝对定位布局。

1．实验要求讲解及资料发放（30分钟）

（1）横向导航条布局

（2）页面居中

（3）绝对定位布局

2．上机实践及答疑（50分钟）

（1）元素浮动案例实践

（2）元素定位案例实践

完成实验必做题，探究练习课后实践题的个别要求。

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第13 次课2 学时

图片特点及布局、表单及布局

通过本次课的学习，了解图片的布局特征，熟悉text-align和vertical-align在图片布局中的作用，熟悉表单的基本构架和常见的字段元素和相关伪类的属性设定，初步掌握图片和表单布局的基础原则。

重点：text-align和vertical-align在图片布局中的作用、表单的基本构架和常见表单元素。

难点：vertical-align在图片垂直对齐中的应用。

1．图片布局特点（5分钟）

2．图片的水平跟平行对齐（25分钟）

3．图片布局案例分析（10分钟）

4．表单的基本结构（5分钟）

5．表单的常用元素（20分钟）

6．表单相关伪类（15分钟）

第4章课后相关理论题

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结及复习熟悉图片特征及布局原理，表单结构、元素及伪类等概念跟应用方式。

第14 次课2 学时

上机实践：图片及表单布局。

通过本次课的实践，综合利用已学知识推动图片及表单布局。

重点：图片的发力水平跟平行对齐、表单及其元素的布局。

难点：图片的垂直对齐、同类型表单元素的风格设定。

1．实验要求讲解及资料发放（30分钟）

2．上机实践及答疑（50分钟）

1．

2．

3．《网页设计与Web前端开发案例教程——HTML5、CSS3、Java微课视频版》，清华大学出版社，莫小梅主编，2019年。

总结上机实践经验，完成试验结果的上传。

第15 次课2 学时

表格及布局、内联框架。

通过本次课的学习，熟悉表格的相关标签跟属性及应用，理解两种表格布局模式的优劣，了解内联框架的基本用法及相关属性，初步掌握表格及内联框架的布局原理。

重点：表格的标签、合并单元格、表格专用的CSS属性，内联框架的格式及应用。

难点：合并单元格、表格专用的CSS属性。