Web前端零基础入门 开发企业级教育网站

课程详情

课程详情

课程名称:Web前端零基础入门 - 开发企业级教育网站

课程简介:本课程分为基础知识应用及项目实战两大阶段,旨在帮助学员从零开始,掌握Web前端开发的核心技能,并能够独立开发企业级教育网站。

适合人群

  • 对Web前端开发感兴趣,希望转行或提升技能的人员
  • 零基础学习Web前端开发的新手
  • 希望提升个人技能,增加就业竞争力的职场人士

学习收获

  • 掌握HTML、CSS、JavaScript基础语法及WebAPI等前端开发技能
  • 构建前端知识体系,提升编程思维
  • 通过实战项目,学会开发企业级教育网站
  • 增强个人项目经验,提升就业竞争力

课程亮点

  • 系统化教学,从基础到实战,循序渐进
  • 实战项目驱动,学以致用
  • 资深讲师授课,经验丰富
  • 互动式学习,答疑解惑及时

课程目录

第一章 页面结构解析-HTML
  浏览器介绍
    认识网页
    常见浏览器
    浏览器内核
    web标准
  HTML基本结构
    HTML初识
    HTML骨架
    我的第一个页面及其标签简介
    猪八戒版骨架记忆法
  HTML常用标签
    什么是标签及其分类
    标签嵌套和并列关系
    简单小测验
    开发工具sublime
    sublime生成html骨架
    doctype文档类型
    字符集简介
    标签的语义化及其标题标签
    段落标签和水平线标签
    课堂案例-新闻页面
    换行和div span标签
    文本格式化标签
    标签属性
    图像标签
    链接标签
    锚点定位
    base标签
    特殊字符
    注释标签
  相对路径
    相对路径(一)
    相对路径(二)
  列表
    无序列表的使用
    无序列表注意事项
    有序列表
    四大名著案例
    自定义列表
    第一天HTML总结
  表单和表单控件
    表单的作用
    文本框和密码框
    单选按钮和复选按钮
    默认选中表单属性
    input按钮组
    最多字符数和文本值
    label标签
    文本域
    下拉菜单
    表单域
第二章 页面美容师-CSS/CSS3
  CSS介绍
    CSS产生的原因
    CSS网页的美容师
    体会CSS样式
    CSS样式规则
  font字体
    字体样式字号和字体
    字体字号常用技巧
    unicode字体
    CSS注释
    字体加粗
    字体倾斜
    字体综合设定
  CSS基本选择器
    调试工具chrome使用
    标签选择器
    体会类选择器
    CSS命名规范
    谷歌课堂案例
    多类名选择器
    ID选择器
    id选择器和类选择器的区别
    通配符选择器
    链接伪类选择器的使用
    链接伪类的简写方式
  CSS外观样式及应用
    CSS颜色
    行高对齐和首行缩进
    字间距和单词间距
    颜色半透明
    文字阴影初识
    sublime快捷方式
  CSS样式表
    内部样式表
    行内样式表
    外部样式表
    三种样式表总结
  标签显示模式
    块级标签显示模式
    行内标签显示模式
    行内块元素
    显示模式转换
  CSS复合选择器
    交集选择器
    并集选择器
    后代选择器
    子元素选择器
    课堂练习-测试选择器
    CSS书写规范
  CSS背景及应用
    背景颜色图片及其平铺
    背景位置(一)
    背景位置(二)
    背景附着(固定)
    背景简写
    背景半透明
    背景缩放(一)
    背景缩放(二)
    多背景图片
  CSS三大特性
    CSS层叠性
    CSS继承性
    CSS优先级
    权重叠加
    继承的权重为0
    css权重6道精华题
    优先级总结
  CSS盒模型及应用
    看透网页布局本质
    认识盒子模型组成
    盒子边框
    边框综合写法(一)
    边框综合写法(二)
    圆角矩形
    盒子内边距
    外边距以及盒子居中对齐
    文字盒子居中图片和背景区别
    清除内外边距
    行内元素上下内外边距的问题
    外边距合并(一)
    外边距合并(二)
    盒子的计算尺寸
    padding不影响盒子大小的情况
    盒子模型布局稳定性
  浮动及应用
    文档流介绍
    浮动是用来做文字环绕效果的
    体会浮动
    浮动就是漂浮的意思
    浮动首先需要添加标准流父级
    浮动特性对齐父盒子
    浮动特性盒子排列
    浮动影响盒子显示模式
    浮动总结
  清除浮动
    清除浮动的本质
    额外标签法
    父级添加overflow方法
  CSS四种定位及应用
    为什么学习定位
    定位属性
    静态定位(1)
    相对定位
    绝对定位脱标
    父级没有定位
    父级有定位
    何为子绝父相
    定位练习-哈根达斯
    绝对定位水平垂直居中
    固定定位
    叠加次序
    定位总结
    固定绝对定位模式转换
第三章 JavaScript基础知识
  JavaScript介绍
    网页、网站和应用程序
    JavaScript的强大
    JavaScript最初的目的
    JavaScript现在的意义
    JavaScript和HTML、CSS的区别,以及组成
    JavaScript初体验
    计算机组成
  JavaScript变量
    什么是变量
    变量的使用
    ������������͹淶
    交换两个变量
  JavaScript数据类型
    数据类型-Number
    String类型
    Undefined和Null
    typeof和注释
    转换成字符串类型
    转换成数值类型1
    转换成数值类型2
    转换成布尔类型
  JavaScript操作符
    数学运算符
    一元运算符讲解
    逻辑运算符
    关系运算符
    赋值运算符和运算符的优先级
  JavaScript流程控制及应用
    表达式和语句
    流程控制
    分支结构
    分支结构补充和作业
    三元运算符讲解
    switch
    成绩转换案例
    布尔类型的隐式转换
    while循环
    while案例
    dowhile
    dowhile案例
    for循环
    循环案例1
    打印正方形
    打印三角形
    打印99乘法表
    break和continue
    调试
  JavaScript数组及应用
    数组1
    数组2
    数组3
    求一组数的和和平均值
    求最大值和最小值-剪裁
    分隔符
    筛选数组
    翻转数组
  JavaScript函数及应用
    为什么要有函数
    函数的参数
    函数的参数案例-剪裁
    函数的返回值
    arguments
    函数案例1-剪裁
    函数案例2
    函数案例3
    函数案例4
    函数其它概念
    代码规范
    作用域
    作用域链
    预解析
    对象概念
  JavaScript对象
    对象之字面量
    创建对象的方式
    new关键字的执行过程
    this
    遍历对象和删除对象的属性
第四章 页面动效实现-WebAPI
  DOM介绍
    WebAPI的概念
    JavaScript组成
    DOM相关概念
  获取页面元素
    根据id获取元素-剪裁
    getElementsByTagName1
    getElementsByTagName2
    获取元素的其它方式
  注册事件及应用
    注册事件
    点击按钮切换图片
    非表单元素的属性
    点击按钮div显示隐藏
    表单元素的属性
    给文本框赋值
    检测用户名和密码
  样式操作及应用
    样式操作1
    样式操作2
    开关灯
    显示隐藏二维码案例
    高亮显示正在输入的文本框
    设置大小和位置
    隔行变色和高亮显示
  BOM介绍及应用
    BOM
    对话框
    js中的加载讲解
    setTimeout讲解
    删除提示讲解
    setInterval讲解
第五章 项目实战-在线教育培训网站
  项目实战导学
    项目实战-教育培训网站导学
  网站顶部内容实现
    顶部内容实现导学
    项目环境搭建
    网站顶部结构实现
    PxCook工具下载与使用
    顶部具体样式(上)
    顶部具体样式(下)
    总结
  网站导航条内容实现
    导航条内容导学
    导航条结构实现
    导航条样式(1)
    导航条样式(2)
    导航条样式(3)
    总结
  网站下拉菜单内容实现
    下拉菜单导学
    下拉菜单结构实现
    下拉菜单定位实现
    下拉菜单美化
    下拉菜单显示与隐藏
    总结
  网站横向菜单内容实现
    横向菜单内容导学
    横向菜单结构实现
    横向菜单样式实现
    横向菜单显示与隐藏
    总结
  网站轮播图实现
    轮播图-导学
    轮播图结构实现
    轮播图图片布局
    轮播图图片呈现顺序调整
    解决元素的层级关系
    在轮播图上添加箭头图标
    轮播图底部(横向)图标结构创建
    轮播图底部图标样式设定
    单击右侧箭头图标,实现轮播图切换
    实现轮播图循环播放
    底部图标切换
    单击左侧箭头图标,实现轮播图切换
    单击底部图标,完成轮播图切换
    轮播图自动播放效果实现
    总结
  网站优势版块实现
    优势版块导学
    优势版块结构实现
    优势版块整体样式设计
    优势版块具体内容样式设定
    总结
  网站问题项目版块实现
    问题项目版块导学
    问题项目版块标题区域结构设计
    问题项目版块标题区域样式设定
    问题项目版块具体内容结构
    问题项目版块具体内容版心区域样式
    问题项目版块具体内容样式设定
    问题项目版块'预约试听按钮'样式
    总结
  网站课程中心版块实现
    培训课程中心版块实现导学
    培训课程中心版块标题区域实现
    培训课程中心版块课程内容结构
    培训课程中心版块版心样式设计
    培训课程中心版块版心文本样式设计(1)
    培训课程中心版块文本版心样式设计(2)
    培训课程中心版块'查看详情'样式
    总结
  网站解决方案版块实现
    解决方案版块导学
    解决方案版块标题区域结构
    解决方案版块标题区域样式
    解决方案版块具体内容结构
    解决方案版块版心区域样式
    解决方案版块背景图像添加
    解决方案版块伪类样式
    解决方案文本样式
    总结
  网站讲师团队版块实现
    讲师团队版块导学
    讲师团队标题区域实现
    讲师团队版块讲师列表结构
    讲师团队版块版心区域样式
    讲师团队版块第一位讲师样式效果
    讲师团队版块“查看详情”样式实现
    讲师团队版块讲师列表样式
    讲师团队版块讲师简介样式
    讲师团队版块‘查看更多’样式
    总结
  网站课程合作案例版块实现
    合作案例版块导学
    合作案例整体结构实现
    总结
  网站服务版块实现
    服务版块导学
    服务版块标题结构实现
    服务版块标题样式
    服务版本服务内容结构设计
    服务版块服务内容样式设计
    服务版块'我们的优势'内容样式设计
    服务版块’我们的优势‘文本样式
    总结
  网站公司介绍版块实现
    公司介绍版块导学
    公司介绍版块结构实现
    公司介绍版块图片定位
    公司介绍版块图片样式
    公司介绍版块文本样式
    总结
  网站在线报名版块实现
    在线报名版块导学
    在线报名版块表单创建
    在线报名版块版心样式
    在线报名版块表单样式
    在线报名版块文本样式
    在线报名表单校验
    总结
  网站底部信息版块实现
    页面底部版块导学
    页面底部结构实现
    页面底部版块文本样式
    总结