Web前端开发案例教程全套教学课件.pptx

第1章 Web前端开发概述;1.1web概述;1.1web概述;1.1web概述;1.2HTML;1.2HTML; HTML5的优势;1.3CSS;1.4Javascript;1.5jQuery;1.6Bootstrap;1.7其他前端框架;1.7其他前端框架;WEB工作原理-静态页面请求;WEB工作原理-动态页面请求;WEB工作原理-AJAX异步请求;Web工作原理;Browse/Server 前端即浏览器端发生的那些事 前端就是做网页的;网页设计师 （2007以前） 典型的多面手。 主要技能：网页制作 三剑客。 职责：设计、制作、 js、flash、甚至server 端。;UED（2007以后） 交互设计师 视觉设计师 用户体验设计师 UI设计师 前端开发工程师 ;分工与角色;豆瓣前端工程师克军眼里的 前端工程师的知识结构;WEB前端技术概览;小结;第二章 HTML5基础Ⅰ;本章目标;HTML基本结构;网页编辑工具;网页基本信息3-1;网页基本信息3-2;网页基本信息3-3;网页的基本标签6-1;网页的基本标签6-2;网页的基本标签6-3;网页的基本标签6-4;网页的基本标签6-5;网页的基本标签6-6;列表;列表的应用6-1;列表的应用6-2;列表的应用6-3;列表的应用6-4;列表的应用6-5;列表的应用6-6;小结;表格标签;表单标签;分区标签;图像标签;图像标签;图片列表标签;图片列表标签;换行标签 br/;链接标签;常用的超链接;常用的超链接;常用的超链接;行内元素和块元素;W3C标准;HTML5的媒体元素;视频元素;视频元素;音频元素;页面结构分析; HTML5的结构元素;总结;总结;实践指导;实践指导;实践指导;实践指导;实践指导;拓展训练;拓展训练;第3章 HTML5基础Ⅱ;学习目标;3.1表格;表格的基本语法;表格常用标签;表格的基本语法;表格常用属性;表格属性设置;表格的跨行和跨列;表格的跨行和跨列;表格的跨行和跨列;3.2表单;表单语法;表单元素格式;表单元素;表单元素;表单元素;表单元素;表单元素;表单元素;表单元素;表单元素;表单元素;HTML5新增的表单属性;HTML5新增表单标签;HTML5新增表单标签;邮箱;HTML5新增表单元素;HTML5新增表单元素;HTML5新增表单元素;表单的初级验证;表单初级验证的方法;placeholder;required;pattern;3.3表格布局;表格布局;表格布局;表格布局;页面结构分析; HTML5的结构元素;3.4iframe框架;iframe框架;3.5实践指导;;;;;;小结;拓展训练;;;;第4章 CSS3基础;学习目标;4.1CSS3简介;CSS在网页中的应用;CSS的发展史;CSS的优势;选择器 { 声明1; 声明2; …… };CSS3基本语法;HTML中引入CSS样式;HTML中引入CSS样式;HTML中引入CSS样式;HTML中引入CSS样式;HTML中引入CSS样式;HTML中引入CSS样式;HTML中引入CSS样式;CSS样式优先级;CSS3基本选择器;CSS3基本选择器;CSS3基本选择器;小结;基本选择器的优先级;CSS的高级选择器;层次选择器;后代选择器;子选择器;相邻兄弟选择器;通用兄弟选择器;结构伪类选择器3-1;结构伪类选择器3-2;结构伪类选择器3-3;小结;属性选择器;E[attr]属性选择器;E[attr=val]属性选择器;E[attr=val]属性选择器;E[attr*=val]属性选择器;E[attr^=val]属性选择器;E[attr$=val]属性选择器;CSS层叠性、继承性和重要性;4.3 CSS常用属性;字体属性;字体类型;字体大小;字体风格;值;字体属性;文本样式;文本颜色;首行缩进 text-indent：em或px 行高 line-height：px;文本修饰和垂直对齐; ;背景属性;网页背景;设置背景图像2-1;设置背景图像2-2;设置背景;列表样式;列表属性;伪类样式 ;使用CSS设置超链接;CSS3渐变;小结;小结;4.4实践指导;;;;;拓展训练;;;第5章 CSS 3布局;5.1盒子模型;外边距;外边距的妙用;边框;边框粗细;边框样式;border简写;内边距 ;盒子型模的尺寸;5.2DIV+CSS3布局;5.2DIV+CSS3布局;5.2DIV+CSS3布局;常见网页布局;标准文档流;标准文档流; display属性2-1;display属性2-2; display特性;浮动;设置左浮动;设置右浮动;清除浮动;清除浮动;溢出处理;inline-block和float的区别;定位;static定位