网页设计与Web前端开发教与学（教学大纲+教案+课件+视频+AI助教，莫小梅）

1

课程教学目标

（一）知识目标

1. 使学生全面了解 Web 相关基础知识，包括 Web 概述、网页标准、网站开发工作流程及常用开发工具。

2. 深入掌握 HTML5、CSS3、Java 的核心知识，如 HTML 常用标签、CSS 样式表及布局方法、Java 脚本编程基础等。

3. 熟悉 jQuery、Vue 等前端框架的基本原理和使用方法，了解 BootStrap 框架等拓展知识。

4. 理解网站设计综合实训的各个环节，包括网站规划、素材准备、页面设计与布局、功能添加及发布维护等。

（二）能力目标

1. 培养学生熟练运用 HTML5、CSS3 进行网页结构搭建和样式设计的能力，能够完成 PC 端和移动端网页布局。

2. 提升学生使用 Java 进行网页交互功能开发的能力，实现浏览器对象操作、DOM 和 BOM 操作等。

3. 让学生具备使用 jQuery 简化 Java 代码，实现常见网页特效的能力，掌握 Vue 框架进行组件化开发的基础能力。

4. 通过网站设计综合实训，锻炼学生将理论知识应用于实际项目的能力，培养项目规划、团队协作和问题解决能力。

（三）素质目标

1. 培养学生严谨的编程思维和规范的代码编写习惯。

2. 提高学生的创新意识和审美能力，能够设计出美观且实用的网页。

3. 增强学生的团队合作精神和沟通能力，在项目实训中学会分工协作。

4. 培养学生自主学习和持续学习的能力，适应 Web 前端技术的快速发展。

2

课程教学重点难点

（一）教学重点

1. HTML5 常用标签的使用及网页结构搭建。

2. CSS3 样式表的应用，包括盒模型、选择器、布局方法（浮动、定位、弹性盒模型等）。

3. Java 的基本语法、条件语句、循环语句、函数以及 DOM 和 BOM 对象操作。

4. jQuery 的选择器和事件处理，Vue 框架的基础语法和组件使用。

5. 网站设计综合实训的全流程操作，包括规划、设计、开发和发布。

（二）教学难点

1. CSS3 复杂布局的实现，如响应式布局和自适应布局的原理与实践。

2. Java 面向对象编程思想及复杂交互功能的实现。

3. Vue 框架的生命周期理解和组件化开发模式的应用。

4. 综合运用多种技术进行完整网站项目的开发与调试。

3

教学方法

1. 讲授法：系统讲解 Web 前端开发的基础理论知识、语法规则和概念原理，确保学生对知识点有清晰准确的理解。

2. 演示法：通过实际操作演示，如使用开发工具编写代码、展示网页效果，让学生直观地看到知识的应用过程和实际效果。

3. 案例教学法：引入大量实际的网页设计与开发案例，引导学生分析案例需求、实现思路和技术要点，培养学生解决实际问题的能力。

4. 项目驱动法：在课程后期安排综合性的项目实训，让学生分组完成实际的网站开发项目，在项目实践中巩固所学知识，提高团队协作和项目管理能力。

5. 小组讨论法：组织学生针对一些复杂问题或技术难点进行小组讨论，促进学生之间的思想交流和知识共享，培养学生的团队合作和自主学习能力。

4

课程教学内容与学时安排

5

课程考核方式

1. 平时成绩（30%）：包括课堂表现（回答问题、参与讨论等）、作业完成情况、实验报告质量等。

2. 实践成绩（40%）：根据学生在课程实验、项目实训中的表现和成果进行评分，考察学生的实际操作能力和项目完成质量。

3. 期末考核（30%）：采用理论考试与实践操作相结合的方式，理论考试考查学生对课程基础知识和核心概念的掌握程度，实践操作考核学生综合运用所学知识解决实际问题的能力。

6

课程教材

扫码优惠购书

内容简介：

国家级一流专业建设点教材

浙江省省一流课程配套教材

教育部“1+X”Web前端开发职业技能等级证书（初级）参考用书

本书分为两部分： 理论篇和应用篇。其中，理论篇在内容上详细剖析了**Web标准的三大部分——HTML5、CSS3、Java，及其在网页设计与Web前端开发中的应用，同时增加了jQuery和Vue框架的实用指南； 应用篇则从实用的角度补充了综合实训指导及课业拓展知识等。本书结合当前新兴的企业前端工程师的必备知识体系和技能要求，系统、全面覆盖时下网页设计与Web前端开发的知识体系和实践技巧，同时案例形式丰富，既有针对单一知识点的小实例及贯穿特定案例网站的开发实录，也有针对Web前端技术重点和难点的案例实践，更有阶段性的综合案例实战。在案例设计方面，既突出新知识点的应用技巧，又以不同的方式巩固学过的技能，使读者能够一步一个脚印，循序渐进地扎实掌握网页设计与Web前端开发的各项技能。

为便于教学，本书提供丰富的配套资源，包括教学大纲、教学课件（PPT）、电子教案、重点及难点综合案例的教学视频、本书所有的实例和综合案例的程序源码、在线题库及参考答案等。其中，程序源码全部经过精心测试，能够在Windows系统及以Chrome为代表的主流浏览器中编译和运行。

7

目录

源码下载

第一部分理论篇

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

1.1Web概述

1.1.1Web的发展历史

1.1.2Web的体系结构

1.1.3基本Web技术

1.1.4相关概念

1.1.5了解Web前端开发

1.2网页标准简介

1.2.1结构标准语言

1.2.2表现标准语言

1.2.3行为标准语言

1.3网站开发流程

1.3.1拟定网站主题

1.3.2规划网站架构与内容

1.3.3收集相关资料

1.3.4页面设计和布局规划

1.3.5制作网页并测试与上传

1.3.6网站的推广与更新维护

1.4Web开发工具

1.4.1HBuilderX

1.4.2Adobe Dreamweaver

1.4.3Sublime Text

1.4.4EditPlus

1.4.5WebStorm

1.4.6Visual Studio Code

习题1

第2章HTML常用标签

2.1HTML5网页结构

2.1.1HTML的发展历程

2.1.2初识HTML标签

2.1.3HTML5文档的基本结构

2.1.4HTML文档的主体标签

网页设计与Web前端开发案例教程——HTML5、CSS3、Java（第2版·微课视频版）

目录

2.2网页文本

2.2.1注释标签

2.2.2段落和换行标签

2.2.3标题标签

2.2.4特定文字样式标签

2.2.5网页中的特殊字符

2.3图片标签及属性

2.3.1常见图片格式

2.3.2网页图片的四要素

2.4超链接标签

2.4.1超链接的基本格式

2.4.2URL链接

2.4.3本地链接

2.4.4书签链接

2.4.5下载文件链接

2.4.6邮件链接

2.5插入音频和视频

2.5.1使用HTML5的audio标签播放音频

2.5.2使用HTML5的video 标签播放视频

2.5.3视频网站的辅助解决方案

习题2

第3章使用CSS3样式表

3.1初识CSS样式表

3.1.1第一个CSS案例

3.1.2CSS的基本语法

3.1.3CSS的创建

3.1.4组合选择器

3.1.5后代选择器

3.1.6类选择器的创建和引用

3.1.7id选择器的创建和引用

3.2盒模型

3.2.1盒模型的概念

3.2.2样式的初始化

3.2.3边框属性

3.2.4内边距属性

3.2.5外边距属性

3.2.6外边距合并

3.2.7盒模型案例实践

3.3列表标签及样式

3.3.1无序列表

3.3.2有序列表

3.3.3定义列表

3.3.4列表样式

3.3.5列表样式案例实践

3.4元素的分类及转换

3.4.1块元素

3.4.2行内元素

3.4.3行内块元素

3.4.4元素类型的转换

3.4.5元素类型转换案例实践

3.5CSS的常用属性

3.5.1背景属性

3.5.2字体属性

3.5.3文本属性

3.5.4鼠标属性

3.5.5CSS常用属性案例实践

3.6高级选择器

3.6.1子元素选择器

3.6.2相邻元素选择器

3.6.3关联元素选择器

3.6.4属性选择器

3.6.5伪类选择器

3.6.6伪元素选择器

3.6.7高级选择器案例实践

3.7CSS的继承与优先

3.7.1CSS样式的继承

3.7.2选择器的优先级

3.7.3样式的优先级

3.7.4CSS的书写顺序

3.8常用CSS3属性

3.8.1@fontface 规则

3.8.2圆角属性

3.8.3方框阴影属性

3.8.4文本阴影属性

3.8.5溢出属性

3.8.6可见性属性

3.8.7常用CSS3属性案例实践

习题3

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

4.1CSS布局概述

4.1.1CSS布局的相关概念

4.1.2CSS的3种定位机制

4.2元素的浮动

4.2.1浮动

4.2.2浮动的常规用法

4.2.3浮动的特殊情况

4.2.4与inlineblock的比较

4.2.5清除属性

4.2.6元素浮动案例实践

4.3元素的定位

4.3.1定位属性

4.3.2相对定位

4.3.3绝对定位

4.3.4固定定位

4.3.5zindex

4.3.6定位元素的居中

4.3.7元素定位案例实践

4.4图片及布局

4.4.1图片布局的特点

4.4.2水平对齐

4.4.3垂直对齐

4.4.4图片布局案例实践

4.5表单及布局

4.5.1表单的基本结构

4.5.2表单元素

4.5.3表单的相关伪类

4.5.4表单布局案例实践

4.6表格及布局

4.6.1表格标签

4.6.2合并单元格

4.6.3表格的样式

4.6.4表格的特征

4.6.5表格布局及案例实践

4.7内联框架

4.7.1内联框架的基本用法

4.7.2内联框架布局案例实践

4.8CSS进阶应用

4.8.1网站Logo的应用

4.8.2图标的应用

4.8.3CSS代码的复用

4.8.4CSS进阶应用案例实践

4.9PC端网页布局综合案例实战

4.9.1华为商城首页PC端布局

4.9.2“谁的来电——防范电信诈骗”思政案例PC端布局

习题4

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

5.1HTML5新增标签

5.1.1HTML5概述

5.1.2HTML5结构性标签

5.1.3HTML5语义化标签

5.1.4HTML5网页案例实践

5.2CSS3新增伪类和伪元素

5.2.1以first、last、only为前缀的伪类

5.2.2以nth为前缀的伪类

5.2.3其他伪类和伪元素

5.2.4CSS3新增伪类案例实践

5.3CSS3变形、过渡及动画

5.3.1变形

5.3.2过渡

5.3.3动画

5.3.4变形、过渡及动画案例实践

5.4CSS3新增属性

5.4.1新增背景属性

5.4.2新增颜色属性

5.4.3倒影

5.4.4遮罩

5.4.5CSS3新增属性案例实践

5.5CSS3弹性盒模型

5.5.1基本弹性盒模型设置

5.5.2弹性容器的相关属性

5.5.3弹性项目的相关属性

5.5.4替代盒模型

5.5.5动态计算

5.5.6弹性盒模型案例实践

5.6响应式布局和自适应布局

5.6.1媒体查询

5.6.2视口

5.6.3自适应布局

5.7移动端网页布局案例实战

5.7.1天猫网站移动端布局

5.7.2“宋韵卿裳”思政案例移动端布局

习题5

第6章使用Java脚本

6.1初识Java

6.1.1Java简介

6.1.2Java的使用

6.1.3Java代码规范

6.1.4弹窗与调试

6.1.5获取元素及操作内容

6.1.6简单认识DOM0级事件

6.1.7定义变量

6.1.8Java基本应用案例实践

6.2Java的基本元素

6.2.1数据类型

6.2.2常量

6.2.3运算符和表达式

6.2.4数据类型转换

6.3操作对象属性及CSS样式

6.3.1操作对象属性

6.3.2操作对象属性案例实践

6.3.3操作CSS样式

6.3.4操作CSS样式案例实践

6.4Java的条件语句

6.4.1if语句

6.4.2switch语句

6.4.3条件语句案例实践

6.5Java的循环语句

6.5.1for循环语句

6.5.2while循环语句

6.5.3do while循环语句

6.5.4break和continue语句

6.5.5循环语句案例实践

6.6使用Java函数

6.6.1函数的分类

6.6.2函数的参数

6.6.3返回语句

6.6.4变量的作用域

6.6.5JS函数案例实践

6.7Java对象的操作语句

6.7.1with语句

6.7.2for…in语句

6.7.3对象关键字及操作符

6.8Java常用的内置对象

6.8.1数组对象

6.8.2字符串对象

6.8.3数学对象

6.8.4日期对象

6.9DOM对象及操作

6.9.1HTML DOM简介

6.9.2HTML中的节点类型

6.9.3DOM节点的访问

6.9.4DOM节点的操作

6.9.5DOM对象案例实践

6.10BOM对象及操作

6.10.1BOM简介

6.10.2窗口对象

6.10.3文档对象

6.10.4位置对象

6.10.5历史对象

6.10.6浏览器信息对象

6.11localStorage对象及操作

6.11.1HTML5 Web存储简介

6.11.2localStorage对象的基本用法

6.11.3本地存储案例实践

6.12Web交互开发案例实战

6.12.1“谁的来电——防范电信诈骗”思政案例交互实现

6.12.2“宋韵卿裳”思政案例的交互实现

习题6

第7章jQuery基础知识

7.1jQuery的介绍

7.1.1下载与安装

7.1.2jQuery的第一个例程

7.2基本选择器

7.2.1标签选择器

7.2.2id 选择器

7.2.3类选择器

7.3高级选择器

7.3.1过滤器选择器

7.3.2属性选择器

7.3.3伪类选择器

7.3.4伪元素选择器

7.4事件处理

7.4.1绑定事件

7.4.2解绑事件

7.4.3触发事件

7.4.4事件委托

7.4.5事件对象

7.4.6自定义事件与链式调用

7.5内容处理

7.5.1一般属性的读写

7.5.2类的读写

7.5.3内容的读写

7.6样式处理

7.6.1标签样式的读写

7.6.2标签尺寸的读写

7.6.3标签位置的计算

7.7进阶应用

7.7.1批量操作

7.7.2表单验证

7.7.3动画处理

7.7.4视频控制

7.7.5标签处理

7.7.6改写案例

7.8扩展知识

7.8.1AJAX动态加载

7.8.2文档参考

习题7

第8章Vue框架

8.1Vue简介和环境搭建

8.1.1Vue的发展及特点

8.1.2Vue环境搭建

8.2Vue3基础语法

8.2.1Vue实例的创建

8.2.2模板语法

8.2.3条件渲染

8.2.4列表渲染

8.2.5样式绑定

8.2.6表单输入绑定

8.2.7计算属性

8.2.8事件处理

8.3组件基础知识

8.4生命周期

8.5简单Vue应用实例

8.5.1原项目代码的截取

8.5.2项目分析和数据准备

8.5.3项目改造

习题8

第二部分应用篇

第9章网站设计综合实训

9.1网站的规划

9.1.1网站设计项目书的书写

9.1.2网站的主要规划过程及创建

9.2网站的素材准备及管理

9.3网页的外观设计和布局

9.3.1网页外观布局

9.3.2网页布局的方案

9.4向页面添加内容

9.5使用CSS设置页面

9.6添加网页特效及功能

9.6.1添加网页特效

9.6.2添加网页功能

9.7站点的测试、发布及维护

9.7.1上传文件

9.7.2获取网站地址

9.7.3实机测试

9.7.4日常维护

9.8课程设计及要求

9.8.1课程设计的基本目的

9.8.2课程设计的基本要求

9.8.3课程设计的考核方式与评分方法

第10章课业拓展

10.1浏览器开发者工具

10.1.1浏览器开发者工具简介

10.1.2激活工具栏

10.1.3选择元素与Elements标签栏

10.1.4Console标签栏

10.1.5Network标签栏

10.1.6Sources标签栏

10.2Canvas图形绘制

10.2.1初识Canvas

10.2.2Canvas的坐标系统

10.2.3添加Canvas元素

10.2.4Canvas绘制环境

10.2.5绘图API

10.2.6动画制作

10.2.7时钟案例实践

10.3Bootstrap框架

10.3.1Bootstrap简介

10.3.2Bootstrap快速上手

10.4架设互联网网站

10.4.1域名服务

10.4.2主机托管

10.4.3虚拟主机

10.5云服务

10.5.1阿里云虚拟主机

10.5.2阿里云ECS

参考文献

专题学习资源网址

8

教学进度表

9

视频样例

10

题库及期末试卷（www.qingline.net）

11

课件样例

12

教案样例

13