当前位置:平面设计学院 > WEB前端实战高级教程
 

WEB前端实战高级教程

7017次 6条 20次
讲师:韩文强
课级:高级拓展
时长:23.7小时
单价:¥650元 助学价:¥320元 我要单买
年会员:¥1800元/年 今日促销:¥399元 平面设计学院所有教程免费学
分享到:

《Web前端实战高级教程》从Web开发实际应用的角度,结合响应式web网页和手机端实战项目实例的演示,讲解HTML5、CSS3、响应式设计等新技术,并通过Bootstrap工具开发来整合HTML5、CSS3和响应式开发的知识,进行快捷开发。通过本套课程的学习,让你快速了解响应式布局的原理与概念,并能独立完成一个整站的搭建到上线的具体流程与操作。

响应式布局:用户浏览网页的设备越来越复杂,以前我们做设计只针对大屏幕电脑,现在已经不太合适了,因为移动端智能设备的普及与发展。响应式Web设计就是随着移动互联网的发展孕育而生的重要技术,其核心思想是制作一个网站可供多种不同终端同时使用。

Bootstrap开发工具: Bootstrap是一种简洁、直观、强悍的Web前端开发框架,它包含了HTML、CSS、Javascript以及jQuery的,各种元素、组件和插件,主要用于开发响应式布局页面和移动设备优先的Web项目。

 

 

 

 

 

 
第一章 HTML5+CSS3新技能

本节课主要介绍HTML5的概念和新增特性,以及通过HTML5+CSS3到底能做什么。

本节课主要介绍HTML5新增的常用布局标签,了解HTML5的语法和格式,以及在结构上有哪些优化。

本小节主要介绍audio和video标签的用法,教你如何通过视频和音频向页面中插入信息。

本小节了解视频标签和音频标签的用法,能够通过视频和音频向页面中插入信息。

本小节结合上节知识,教你掌握如何引入视频并将其作为背景图的应用方法。

本节课主要介绍html5新增的表单控件和属性。

本小节主要介绍canvas画布的用法,通过本节课的学习,了解canvas的用于以及应用场景。

本节课介绍SVG图形的使用和运用场景,了解SVG图形能实现哪些效果。

第二章 CSS3新特性

本小节主要教大家认识CSS3,了解CSS3可以完成哪些工作,哪些是CSS3最擅长的方面。

本小节主要介绍border-radius圆角属性的用法,以及圆角属性的应用场景。

本小节主要介绍Box-shadow属性,并通过实际的小案例,来介绍阴影的用法,通过阴影能完成哪些效果。

本小节主要介绍常规边框和边框图片的对比,及边框图片的应用,通过实际小案例了解边框图片在项目中的重要意义。

本小节主要了解background在CSS3中新增了哪些应用,background的新增值能够完成哪些应用。

本节课主要教你认识网页中常见的十六进制颜色表示方式、英文表示方式、三原色表示方式以及三原色配合透明度的概念。

本小节主要介绍CSS3字体阴影的用法,了解CSS3新增字体的意义,通过实际案例在项目中插入自定义字体。

本节课主要基于自定义字体的基础上讲解图标字体的概念和具体操作。

第三章 CSS3的高级应用

本小节主要介绍子集选择器的用法,以及各种不同类型的子集选择器的作用,通过实际的小案例了解子集选择器的优势。

本小节主要介绍常用伪类选择器的用法,包括::selection选择器、::before和::after伪类选择器的使用。

本小节主要介绍transition的作用与用途,了解transition在项目中存在的重要意义。

本小节主要介绍.translate位移、rotate选择、scale缩放、skew倾斜、transform-origin命令,学习CSS3的2D转换的各种不同类型的操作,能通过2D转换操作复杂的结果。

本小节主要介绍3D场景搭建与应用,常见的几种3D功能函数,了解最新项目中3D转换的作用,并且可以通过3D转换操作项目案例。

本小节主要介绍animation动画属性和用法,了解animation的作用与用途。通过CSS3,我们能够创建动画,并且在许多网页中取代动画图片、Flash动画以及JavaScript。

本节课主要综合本章所学知识,模拟360浏览器雷达动画实例,加强对定位和JS事件的使用。

CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡,本节课主要介绍CSS3渐变色及多重动画的应用,掌握线性渐变的属性和参数。

第四章 响应式布局

本章主要讲解响应式布局的意义,了解响应式布局的重要作用,能够通过媒体查询原生的做出一套响应式网站,本小节主要介绍响应式布局的概念。

本小节主要讲解响应式布局原理,了解如果通过bootstrap全局CSS样式,在less文件中使用媒体查询来创建关键的分界点阈值。

本小节主要介绍响应式图片的使用,用户代理根据输出设备的分辨率不同加载不同类型的图片,同时在改变输出设备类型或分辨率时,能及时加载对应类型的图片。

从本节课开始主要演示Bootstrap中文网的开发,本小节主要完成该网页头部的创建与布局。

本节课继续演示Bootstrap中文网的开发,本节课主要完成PC端主体内容模块的布局。

本节课主要完成Bootstrap网页在手机端、平板、不同媒介下的响应式布局。

本小节主要讲解响应式布局下,不同分辨率和设备下,折叠菜单按钮特效的实现。

第五章 力豪斯健身网站开发

本章主要对以上所学知识进行巩固,从项目前期规划,到网站响应式调试,了解整站开发流程,本小节主要完成项目分析及页面头部的搭建。

本小节主要教大家使用Swiper插件完成海报轮播区的制作。

本小节主要介绍功能划分模块的CSS3特效的应用。

本小节主要讲解关于我们模块的搭建及公共样式的修改技巧。

本小节主要运用CSS3知识和Swiper插件完成热门课程的网络轮播特效。

本节课主要对头部和轮播海波部分进行检查和细节调整,并完成新闻模块的制作。

本小节主要详细演示力豪斯网站广告模块和底部区域布局的搭建。

本小节主要讲解手机端头部导航特效的响应式布局。

本小节主要讲解网页首页轮播海报响应式布局的搭建,解决图片显示不全的问题,完成手机端的完整调试。

本小节主要调整首页在不同设备下的相应布局,完成网页在pc端和移动端下的响应。

本小节继续完成网站内页的搭建与响应式布局,以及内页与首页公共样式的互通。

本节课主要详细讲解内页在不同设备下的响应,以及上线调试。

第六章 勤学网手机端网站项目

本章主要完整的介绍一个手机端项目的完全制作过程,从效果图的分析到拆分到最后上线调试。本小节主要讲解弹性盒模型及rem单位的应用。

本节课主要讲解网站布局如何通过JS取得不同设备下的响应的相关知识,并完成勤学网手机端头部的搭建。

本小节主要演示首页轮播海报以及课程分类弹性盒模型的布局。

本小节主要讲解网页列表的布局,介绍如何通过创建公共样式来搭建网页布局。

本小节主要讲解如何实现当前网页高亮显示的固定导航的创建。

本节课主要详细讲解如何通过选项卡完成课程分类页面展示

本小节主要分析个人中心页面,并完成个人中心的页面网页布局。

本小节重点介绍如何通过Ajax实时调取mysql数据库中的动态数据。

本节课主要介绍如何把我们制作的企业站、响应式布局网站、手机端上线的具体流程,包括域名的挑选与购买,选择合适的主机,域名解析与主机绑定,以及源码上传调试的相关知识。

 
韩文强 主攻:网页设计/电商/web前端 简介:资深WEB前端工程师,站酷推荐设计师,是一名永不止步的学习者和分享者。擅长的行业包括WEB前端开发、电商设计及装修、UI设计等,多年从业经验和实战项目经验,共累计参与制作网站超过80个,原创设计文章超过二十几篇,点击量逾80万,被许多平台转载。开发的web前端开发课程,以通俗易懂的特点,帮助了很多菜鸟转变成了前端开发人才。
 
  • 1-1 概念介绍
  • 1-2 H5新增的常用标签
  • 1-3 更多类型的布局标签
  • 1-4 音频和视频标签的应用
  • 1-5 视频背景的做法
  • 1-6 表单的新功能
  • 1-7 canvas画布
  • 1-8 SVG图形
  • 2-1 认识强大的CSS3
  • 2-2 CSS3圆角的用法
  • 2-3 阴影的用法
  • 2-4 边框图片的使用
  • 2-5 背景的新功能
  • 2-6 网页中常见的颜色表示方式
  • 2-7 文字阴影和自定义字体
  • 2-8 图标字体的用法
  • 3-1 种类多样的选择器
  • 3-2 最常用的伪类选择器
  • 3-3 transition过渡属性
  • 3-4 CSS3的2D转换
  • 3-5 CSS3的3D转换
  • 3-6 animation动画
  • 3-7 模拟360浏览器雷达动画实例
  • 3-8 渐变色及多重动画应用
  • 4-1 响应式布局介绍
  • 4-2 布局原理实例
  • 4-3 响应式图片使用方法
  • 4-4 Bootstrap中文网开发实例
  • 4-5 PC端主体内容模块布局
  • 4-6 其他媒介的响应式布局
  • 4-7折叠菜单的按钮特效实现
  • 5-1 项目分析及页面头部搭建
  • 5-2 海报轮播区的搭建
  • 5-3 功能划分模块的CSS3特效应用
  • 5-4 关于我们模块搭建
  • 5-5 热门课程的网格轮播特效
  • 5-6 新闻模块的搭建
  • 5-7 广告模块和底部区域布局
  • 5-8 手机端头部导航特效
  • 5-9 网站首页手机端完整调试
  • 5-10 首页不同设备下的相应布局
  • 5-11 网站内页与首页公共样式的互通
  • 5-12 上线调试
  • 6-1 弹性盒模型及rem单位的应用
  • 6-2 通过JS取得不同设备下的响应
  • 6-3 课程分类弹性盒模型布局
  • 6-4 不同分类模块的布局样式
  • 6-5 底部固定导航的制作
  • 6-6 分类页面制作
  • 6-7 个人中心页面搭建
  • 6-8通过Ajax实时调取mysql数据库中的数据
  • 6-9 网站上线流程
  • 本套教程单价:¥650元 助学价:¥320元 
  • 平面设计学院年会员:¥1800元/年 今日促销:¥399元 可学习所有教程+新增教程 
  • 本学院已有 126 套教程 总计 1377 个小时 查看详情
购买了该教程的同学
百练成仙
夏個
当当小
situbei
胡钱多设计
桃汁
WBE
snakypeter
一寒
Rain
圆圆713
郭海江
陈露2013
专心8
木易
天成
黑猫
qwe5555
 
您可能感兴趣的课程
 
讲师:笨叔
39603次25条56次
 
讲师:贾斌
138069次58条158次
 
讲师:文成武
265306次237条561次
 
讲师:开心老师
444592次207条459次
 
讲师:Gordan
228982次118条324次
 
讲师:胡飞虎
310938次213条749次
 
讲师:陈志文
295267次223条194次
 
讲师:田婧
2133804次1303条1176次
 
微信客服 微信号:qinxue7855