Web前端应用技术(HTML+CSS+JavaScript 网页设计)
Web前端应用技术(HTML+CSS+JavaScript 网页设计)
1万+ 人选课
更新日期:2025/05/22
开课时间2025/01/21 - 2025/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
随着互联网技术的飞速发展和移动终端的普及,Web前端技术成为了构建用户友好、交互性强、响应迅速的网站和应用程序的关键。为了满足市场对Web前端人才的需求,培养具备扎实前端技能和创新能力的人才,我们特别推出了这门Web前端应用技术课程。 通过本课程的学习,能够掌握新一代信息技术中Web前端开发的核心技术,包括HTML5、CSS3、JavaScript等,并能够独立完成由简单到复杂的Web应用开发真实项目案例,学生将学会如何构建实现交互效果、优化用户体验,以及与其他后端技术协同工作。专兼职教师组成的教学团队成员,具有丰富的Web前端设计经验,有多年的软件设计与开发工作经历,具有丰富的教学经验。
课程大纲

在线教程

章节简介教学计划
牛刀小试,百度首页项目
登录后可预览视频
网页设计概述
孟宪宁
信创技术简介
孟宪宁
HTML设计新闻网站
HTML基本语法
孟宪宁
HTML文档基本结构
孟宪宁
HTML文档头部相关标签
孟宪宁
段落与文本格式化
孟宪宁
列表
孟宪宁
超链接
孟宪宁
图像与多媒体
图像
孟宪宁
图像映射
孟宪宁
音频与视频
孟宪宁
表单
表单标签
孟宪宁
信息输入标签
孟宪宁
HTML 5新增的表单输入类型
孟宪宁
下拉列表标签
孟宪宁
多行文本输入标签
孟宪宁
域和域标题
孟宪宁
表格标签
孟宪宁
框架
框架
孟宪宁
浮动框架
孟宪宁
HTML 5 结构元素
孟宪宁
自主与创新精神——制作新闻网站
项目导入和新闻网站整体设计
宋海鹰
登录页面和新闻首页的制作
宋海鹰
二级新闻网页的制作
宋海鹰
CSS实现腾讯网首页搜索框
CSS基础
孟宪宁
引用CSS样式
行内样式
孟宪宁
内部样式
孟宪宁
外部样式
孟宪宁
CSS选择器
标签选择器
孟宪宁
ID选择器
孟宪宁
类选择器(1)
孟宪宁
类选择器(2)
孟宪宁
属性选择器
孟宪宁
后代选择器
孟宪宁
子元素选择器(1)
孟宪宁
子元素选择器(2)
孟宪宁
普通兄弟选择器
孟宪宁
相邻兄弟选择器
孟宪宁
结构性伪类选择器(1)
孟宪宁
结构性伪类选择器(2)
孟宪宁
伪类选择器
孟宪宁
通配符选择器
孟宪宁
并集选择器
孟宪宁
CSS文本样式
字体样式属性
孟宪宁
字号属性(1)
孟宪宁
字号属性(2)
孟宪宁
字体粗细属性
孟宪宁
字体风格属性
孟宪宁
综合字体样式的属性
孟宪宁
其他常用的文本样式属性(1)
孟宪宁
其他常用的文本样式属性(2)
孟宪宁
其他常用的文本样式属性(3)
孟宪宁
盒子模型(Box Model)
盒子模型概述
孟宪宁
盒子模型的相关属性(1)
孟宪宁
盒子模型的相关属性(2)
孟宪宁
盒子模型的相关属性(3)
孟宪宁
盒子模型的相关属性(4)
孟宪宁
盒子的内边距(1)
孟宪宁
盒子的内边距(2)
孟宪宁
盒子的外边距
孟宪宁
背景属性
设置背景颜色
孟宪宁
设置背景图片(1)
孟宪宁
设置背景图片(2)
孟宪宁
设置背景图片(3)
孟宪宁
继承、层叠和优先级
继承
孟宪宁
层叠和优先级(1)
孟宪宁
层叠和优先级(2)
孟宪宁
浮动与定位
浮动
孟宪宁
定位(1)
孟宪宁
定位(2)
孟宪宁
定位(3)
孟宪宁
定位(4)
孟宪宁
腾讯网首页搜索框布局案例
腾讯网首页搜索框布局案例(1)
孟宪宁
腾讯网首页搜索框布局案例(2)
孟宪宁
腾讯网首页搜索框布局案例(3)
孟宪宁
腾讯网首页搜索框布局案例(4)
孟宪宁
腾讯网首页搜索框布局案例(5)
孟宪宁
腾讯网首页搜索框布局案例(6)
孟宪宁
优秀传统文化-春联的设计与制作
项目导入
赵春霞
春联背景设计
包燕
春联主体部分设计
包燕
切片制作
包燕
春联网页制作
赵春霞
JavaScript实现腾讯网首页搜索框
JavaScript概述
孟宪宁
标识符、变量和基本数据类型
标识符
孟宪宁
变量
孟宪宁
基本数据类型
孟宪宁
复合数据类型:数组
孟宪宁
对象和this关键字
孟宪宁
运算符与表达式
赋值运算符
孟宪宁
算术运算符
孟宪宁
位运算符
孟宪宁
比较运算符
孟宪宁
逻辑运算符
孟宪宁
条件运算符
孟宪宁
流程控制
顺序流程控制
孟宪宁
分支程序结构
孟宪宁
循环程序结构(1)
孟宪宁
循环程序结构(2)
孟宪宁
函数
孟宪宁
事件
事件
孟宪宁
表单事件
孟宪宁
鼠标事件
孟宪宁
键盘事件
孟宪宁
DOM模型
DOM模型
孟宪宁
获取HTML元素
孟宪宁
读取或修改HTML元素的属性
孟宪宁
BOM模型
BOM模型概述
孟宪宁
定时器案例:图片轮播效果(1)
孟宪宁
定时器案例:图片轮播效果(2)
孟宪宁
定时器案例:图片轮播效果(3)
孟宪宁
定时器案例:图片轮播效果(4)
孟宪宁
腾讯网首页搜索框下拉菜单
孟宪宁
行业规范-购物网站的制作
项目导入和购物网站整体设计
宋海鹰
导航栏制作
宋海鹰
正文左边栏制作
宋海鹰
正文右边栏和底边栏制作
宋海鹰
腾讯网首页综合案例
网页介绍及定位
赵春霞
准备工作
建立站点
赵春霞
素材准备
赵春霞
网页布局分析
网页布局分析
赵春霞
标签页图标和文字显示
赵春霞
定义公共样式
赵春霞
定义页面的大小与浮动效果
赵春霞
网页头部分析与实现
头部分析与实现
赵春霞
头部样式分析
赵春霞
中间的搜索框代码实现(1)
赵春霞
中间的搜索框代码实现(2)
赵春霞
中间的搜索框代码实现(3)
赵春霞
中间的搜索框代码实现(4)
赵春霞
中间的搜索框代码实现(5)
赵春霞
右侧的三个QQ功能按钮的实现
赵春霞
导航部分分析与实现
导航部分分析与实现
赵春霞
主导航部分布局样式整体设计
赵春霞
更多导航部分的CSS样式分析与设计
赵春霞
广告部分分析与实现
广告部分分析与实现
赵春霞
广告部分样式设计(1)
赵春霞
广告部分样式设计(2)
赵春霞
主体部分的分析与实现
要闻部分和今日话题部分分析和实现(1)
赵春霞
要闻部分和今日话题部分分析和实现(2)
赵春霞
右侧快速链接部分分析与实现(1)
赵春霞
右侧快速链接部分分析与实现(2)
赵春霞
网页设计结束补充
赵春霞
爱国情怀- 八一建军节首页设计与制作
项目导入和头部设计
包燕
标题文字设计
包燕
主体部分设计
包燕
切片制作
包燕
网页制作
赵春霞
拓展知识-航天成就和科普网站设计
拓展知识--网页配色(1)
包燕
拓展知识--网页配色(2)
包燕
拓展知识--网页配色(3)
包燕
拓展知识--网页版式设计
包燕
拓展知识-网页设计-切片
Photoshop切片
包燕
新加坡校友录案例(1):首页布局
孟宪宁
新加坡校友录案例(2):顶部超链接
孟宪宁
新加坡校友录案例(3):中间区域的内容和样式
孟宪宁
新加坡校友录案例(4):文字样式及行高、左填充
孟宪宁
新加坡校友录案例(5):底部图片和版权区域
孟宪宁
拓展知识-本源
包燕
航天精神--中国航天事业成就和航天科普网站设计与制作
项目导入
赵春霞
banner制作
包燕
视频新闻、成果展示
包燕
图标的制作
包燕
左侧banner版块制作
包燕
精神学习、环球视野板块制作
包燕
切片制作
包燕
  • 项目一牛刀小试,百度首页项目

    网页设计综述

  • 1.1网页设计概述

    网页设计的基本概念、常用网页设计的工具软件等

  • 1.2信创技术简介

    信创技术简介

  • 项目二HTML设计新闻网站

    HTML语言

  • 2.1HTML基本语法

    HTML基本语法

  • 2.2HTML文档基本结构

    HEML文档基本结构

  • 2.3HTML文档头部相关标签

    HTML文档头部相关标签

  • 2.4段落与文本格式化

    段落与文本格式化

  • 2.5列表

    列表

  • 2.6超链接

    超链接

  • 2.7图像与多媒体

    图像与多媒体

  • 2.8表单

    表单

  • 2.9表格标签

    表格标签

  • 2.10框架

    框架

  • 2.11HTML 5 结构元素

    HTML 5结构元素

  • 2.12自主与创新精神——制作新闻网站

    自主与创新精神——制作新闻网站

  • 项目三CSS实现腾讯网首页搜索框

    CSS

  • 3.1CSS基础

    CSS基础

  • 3.2引用CSS样式

    引用CSS样式

  • 3.3CSS选择器

    CSS选择器

  • 3.4CSS文本样式

    CSS文本样式

  • 3.5盒子模型(Box Model)

    盒子模型

  • 3.6背景属性

    背景属性

  • 3.7继承、层叠和优先级

    继承、层叠和优先级

  • 3.8浮动与定位

    浮动与定位

  • 3.9腾讯网首页搜索框布局案例

    腾讯网首页搜索框布局案例

  • 3.10优秀传统文化-春联的设计与制作

    优秀传统文化-春联的设计与制作

  • 项目四JavaScript实现腾讯网首页搜索框

    JavaScript

  • 4.1JavaScript概述

    JavaScript概述

  • 4.2标识符、变量和基本数据类型

    标识符、变量和基本数据类型

  • 4.3运算符与表达式

    运算符与表达式

  • 4.4流程控制

    流程控制

  • 4.5函数

    函数

  • 4.6事件

    事件

  • 4.7DOM模型

    DOM模型

  • 4.8BOM模型

    BOM模型

  • 4.9腾讯网首页搜索框下拉菜单

    腾讯网首页搜索框下拉菜单

  • 4.10行业规范-购物网站的制作

    行业规范-购物网站的制作

  • 项目五腾讯网首页综合案例

    网页设计综合案例

  • 5.1网页介绍及定位

    网页介绍及定位

  • 5.2准备工作

    准备工作

  • 5.3网页布局分析

    网页布局分析

  • 5.4网页头部分析与实现

    网页头部分析与实现

  • 5.5导航部分分析与实现

    导航部分分析与实现

  • 5.6广告部分分析与实现

    广告部分分析与实现

  • 5.7 主体部分的分析与实现

    主体部分的分析与实现

  • 5.8爱国情怀- 八一建军节首页设计与制作

    爱国情怀- 八一建军节首页设计与制作

  • 项目六拓展知识-航天成就和科普网站设计

    拓展知识

  • 6.1拓展知识--网页配色(1)

    网页配色

  • 6.2拓展知识--网页配色(2)

    网页配色

  • 6.3拓展知识--网页配色(3)

    网页配色

  • 6.4拓展知识--网页版式设计

    网页版式设计

  • 6.5拓展知识-网页设计-切片

    切片

  • 6.6拓展知识-本源

    本源

  • 6.7航天精神--中国航天事业成就和航天科普网站设计与制作

    航天精神--中国航天事业成就和航天科普网站设计与制作

  • 开始学习
  • 项目一  作业测试
    项目一 牛刀小试,百度首页项目

    1.1 网页设计概述

    1.2 信创技术简介

    视频数2
  • 项目二  作业测试
    项目二 HTML设计新闻网站

    2.1 HTML基本语法

    2.2 HTML文档基本结构

    2.3 HTML文档头部相关标签

    2.4 段落与文本格式化

    2.5 列表

    2.6 超链接

    2.7 图像与多媒体

    2.8 表单

    2.9 表格标签

    2.10 框架

    2.11 HTML 5 结构元素

    2.12 自主与创新精神——制作新闻网站

    视频数22
  • 项目三  作业测试
    项目三 CSS实现腾讯网首页搜索框

    3.1 CSS基础

    3.2 引用CSS样式

    3.3 CSS选择器

    3.4 CSS文本样式

    3.5 盒子模型(Box Model)

    3.6 背景属性

    3.7 继承、层叠和优先级

    3.8 浮动与定位

    3.9 腾讯网首页搜索框布局案例

    3.10 优秀传统文化-春联的设计与制作

    视频数59
  • 项目四  作业测试
    项目四 JavaScript实现腾讯网首页搜索框

    4.1 JavaScript概述

    4.2 标识符、变量和基本数据类型

    4.3 运算符与表达式

    4.4 流程控制

    4.5 函数

    4.6 事件

    4.7 DOM模型

    4.8 BOM模型

    4.9 腾讯网首页搜索框下拉菜单

    4.10 行业规范-购物网站的制作

    视频数34
  • 项目五  作业测试
    项目五 腾讯网首页综合案例

    5.1 网页介绍及定位

    5.2 准备工作

    5.3 网页布局分析

    5.4 网页头部分析与实现

    5.5 导航部分分析与实现

    5.6 广告部分分析与实现

    5.7 主体部分的分析与实现

    5.8 爱国情怀- 八一建军节首页设计与制作

    视频数31
  • 项目六  作业测试
    项目六 拓展知识-航天成就和科普网站设计

    6.1 拓展知识--网页配色(1)

    6.2 拓展知识--网页配色(2)

    6.3 拓展知识--网页配色(3)

    6.4 拓展知识--网页版式设计

    6.5 拓展知识-网页设计-切片

    6.6 拓展知识-本源

    6.7 航天精神--中国航天事业成就和航天科普网站设计与制作

    视频数18
  • 期末考试