《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特效的应用。 |
本小节主要讲解关于pg电子游戏app模块的搭建及公共样式的修改技巧。 |
本小节主要运用css3知识和swiper插件完成热门课程的网络轮播特效。 |
本节课主要对头部和轮播海波部分进行检查和细节调整,并完成新闻模块的制作。 |
本小节主要详细演示力豪斯网站广告模块和底部区域布局的搭建。 |
本小节主要讲解手机端头部导航特效的响应式布局。 |
本小节主要讲解网页pg电子游戏app首页轮播海报响应式布局的搭建,解决图片显示不全的问题,完成手机端的完整调试。 |
本小节主要调整pg电子游戏app首页在不同设备下的相应布局,完成网页在pc端和移动端下的响应。 |
本小节继续完成网站内页的搭建与响应式布局,以及内页与pg电子游戏app首页公共样式的互通。 |
本节课主要详细讲解内页在不同设备下的响应,以及上线调试。 |
第六章 勤学网手机端网站项目
|
本章主要完整的介绍一个手机端项目的完全制作过程,从效果图的分析到拆分到最后上线调试。本小节主要讲解弹性盒模型及rem单位的应用。 |
本节课主要讲解网站布局如何通过js取得不同设备下的响应的相关知识,并完成勤学网手机端头部的搭建。 |
本小节主要演示pg电子游戏app首页轮播海报以及课程分类弹性盒模型的布局。 |
本小节主要讲解网页列表的布局,介绍如何通过创建公共样式来搭建网页布局。 |
本小节主要讲解如何实现当前网页高亮显示的固定导航的创建。 |
本节课主要详细讲解如何通过选项卡完成课程分类页面展示 |
本小节主要分析个人中心页面,并完成个人中心的页面网页布局。 |
本小节重点介绍如何通过ajax实时调取mysql数据库中的动态数据。 |
本节课主要介绍如何把我们制作的企业站、响应式布局网站、手机端上线的具体流程,包括域名的挑选与购买,选择合适的主机,域名解析与主机绑定,以及源码上传调试的相关知识。 |