WEB前端技术-17期(2025春季)
WEB前端技术-17期(2025春季)
2万+ 人选课
更新日期:2025/06/09
开课平台学银在线
开课高校济南大学
开课教师范玉玲董立凯段春笋张芊茜赵燕
学科专业工学计算机类
开课时间2025/03/12 - 2025/07/12
课程周期18 周
开课状态开课中
每周学时-
课程简介

互联网普及的今天,Web前端成为炙手可热的职业,其内容主要包括HTML5、CSS3、JavaScript和主流框架。本课程采用项目驱动的方式,让学习者由浅入深、循序渐进地掌握Web前端开发技术。主要介绍Web前端的核心技术和前沿框架,包括超文本标记语言HTML5、层叠样式表CSS3属性和Bootstrap框架。

教学计划:

根据课程特点,课程采用分层次教学的方法。

第一层示例:通过400余个示例,通过视频详细的讲授每个知识点,让学习者由浅入深的掌握HTML5标记和层叠样式表CSS3属性的使用规则,并能够运用BootStrap框架开发响应式页面;

第二层项目:通过拆解一个完整的网站,形成15个项目作业,循序渐进引导学习者掌握网站设计及开发流程,并巩固视频部分讲解的知识点;

第三层拓展:通过拓展习题,分析其重点难点,是对所学知识点的引申,要求学习者能够具有查阅资料、解决问题的能力。

   

        


 




课程大纲

专家讲座

  • 1.1 前端开发的前世今生
  • 1.2 前端的就业前景
  • 1.3 前端学习路线
  • 1.4 前端项目结构
  • 1.5 推荐教材
  • 1.6 素养专题-开篇词

网站开发基础知识

  • 2.1 Web工作原理
  • 2.2 开发环境及执行环境
  • 2.3 章节测试:网站开发基础知识
  • 2.4 素养专题-媒介素养的概念

HTML简单标记

  • 3.1 HTML文档基本结构
  • 3.2 块级元素
  • 3.3 内联元素
  • 3.4 div、span
  • 3.5 项目一 创建网页及发布
  • 3.6 项目二 李白代表作品页面(1)
  • 3.7 章节测试:块级元素、内联元素
  • 3.8 素养专题-网络公民的媒介素养教育

HTML复杂标记

  • 4.1 动手实践- 基本HTML标签
  • 4.2 动手实践-表格
  • 4.3 多媒体
  • 4.4 超链接
  • 4.5 动手实践-表单
  • 4.6 HTML5新特征
  • 4.7 HTML5语义元素
  • 4.8 动手实践-HTML5表单新增元素
  • 4.9 项目三 李白代表作品页面(2)
  • 4.10 项目四 古诗词调查问卷(1)
  • 4.11 项目五 李白个人生平(1)
  • 4.12 章节测试
  • 4.13 素养专题-当代大学生应具有媒介素养

CSS初步

  • 5.1 内容、结构、表现、行为
  • 5.2 CSS语法格式及附加方式
  • 5.3 基本选择器
  • 5.4 字体属性
  • 5.5 文本相关属性
  • 5.6 颜色和背景
  • 5.7 表格、列表及边框
  • 5.8 继承、层叠和优先级
  • 5.9 Display属性
  • 5.10 复杂选择器
  • 5.11 动手实践-基本选择器及文本属性
  • 5.12 动手实践-CSS综合练习
  • 5.13 动手实践-CSS3新增属性
  • 5.14 项目六 杜甫个人成就页面(1)
  • 5.15 项目七 李白代表作品页面(3)
  • 5.16 章节测试
  • 5.17 素养专题-网站筹备之信息检索技能

盒模型与网页布局

  • 6.1 盒模型(1)
  • 6.2 盒模型(2)
  • 6.3 浮动
  • 6.4 定位
  • 6.5 动手实践-浮动定位
  • 6.6 布局
  • 6.7 动手实践-布局(1)
  • 6.8 动手实践-布局(2)
  • 6.9 项目八 古诗词调查问卷(2)
  • 6.10 项目九 李白个人生平(2)
  • 6.11 项目十 杜甫个人成就页面(2)
  • 6.12 章节测试
  • 6.13 素养专题-网站筹备之佳作赏析

CSS特效

  • 7.1 filter滤镜
  • 7.2 transition过渡
  • 7.3 animation动画
  • 7.4 项目十一 首页
  • 7.5 章节测试:css3属性
  • 7.6 素养专题-网站开发之协同工具Github

响应式网页

  • 8.1 响应式网页设计概述
  • 8.2 媒体查询
  • 8.3 前端框架Bootstrap概述
  • 8.4 项目十二 杜甫作品问卷
  • 8.5 项目十三 白居易代表作品
  • 8.6 项目十四 白居易个人生平
  • 8.7 素养专题-前端框架大PK

网站建设流程

  • 9.1 网站建设流程
  • 9.2 项目十五 网站整合

优秀学生作品

  • 10.1 作业项目
  • 10.2 综合项目