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)
培训课程中心版块'查看详情'样式
总结
网站解决方案版块实现
解决方案版块导学
解决方案版块标题区域结构
解决方案版块标题区域样式
解决方案版块具体内容结构
解决方案版块版心区域样式
解决方案版块背景图像添加
解决方案版块伪类样式
解决方案文本样式
总结
网站讲师团队版块实现
讲师团队版块导学
讲师团队标题区域实现
讲师团队版块讲师列表结构
讲师团队版块版心区域样式
讲师团队版块第一位讲师样式效果
讲师团队版块“查看详情”样式实现
讲师团队版块讲师列表样式
讲师团队版块讲师简介样式
讲师团队版块‘查看更多’样式
总结
网站课程合作案例版块实现
合作案例版块导学
合作案例整体结构实现
总结
网站服务版块实现
服务版块导学
服务版块标题结构实现
服务版块标题样式
服务版本服务内容结构设计
服务版块服务内容样式设计
服务版块'我们的优势'内容样式设计
服务版块’我们的优势‘文本样式
总结
网站公司介绍版块实现
公司介绍版块导学
公司介绍版块结构实现
公司介绍版块图片定位
公司介绍版块图片样式
公司介绍版块文本样式
总结
网站在线报名版块实现
在线报名版块导学
在线报名版块表单创建
在线报名版块版心样式
在线报名版块表单样式
在线报名版块文本样式
在线报名表单校验
总结
网站底部信息版块实现
页面底部版块导学
页面底部结构实现
页面底部版块文本样式
总结





