Web前端开发项目教程配套教材电子课件（完整版）.pptx

Web前端开发项目教程;项目01 认识网站和网页;任务01-1：网站设计与开发起步;一、基本概念-网页;基本概念-网页;基本概念-网站;基本概念-网站;基本概念-网站;二、Web标准;Web标准;Web标准——结构标准;Web标准——表现标准;Web标准——行为标准;实训任务;实训任务;任务01-2 制作第一个网页;任务01-2：制作第一个网页;一、常用HTML编辑器;一、常用HTML编辑器;一、常用HTML编辑器;二、在Hbuilder中新建网页;三、HTML5的文档结构;标签;!DOCTYPE声明;HTML文档头部标记head/head;title/title;meta /;meta /;link/;HTML文档主体标记body/body;h1~h6标题标记;p/p段落标记;HTML的树形文档结构;实训任务;项目02 网页的蓝图--简单布局;任务02-1 使用CSS装饰网页;一、DIV+CSS网页布局流程;二、CSS样式表;1. CSS样式表简介—样式规则;1. CSS样式表简介—层叠;1. CSS样式表简介—样式表的优点;2. 样式表分类;2.1内嵌样式表;2.1内嵌样式表; 如果希望一个网站中多个页面的样式保持一致，如何解决？;2.2外部样式表;2.2外部样式表;2.2外部样式表;2.2外部样式表;2.3内联样式表（行内样式）;2.3内联样式表;实训任务;项目02 网页的蓝图—简单布局;任务02-2 巧用选择器调兵遣将;一、CSS选择器;二、基本选择器的用法——标记名选择器;二、基本选择器的用法——class类选择器; body h2静夜思/h2 h3作者：李白/h3 p class=fir床前明月光，/p p class=fir疑是地上霜。/p p举头望明月，/p p低头思故乡。/p /body /html;class类选择器; class类选择器的样式复用;二、基本选择器的用法——ID选择器; body h2静夜思/h2 h3作者：李白/h3 p class=fir床前明月光，/p p class=fir疑是地上霜。/p p举头望明月，/p p id=last低头思故乡。/p /body /html; ID选择器;结合元素选择器使用;三、扩展选择器的用法;3.1 后代选择器;3.1 后代选择器;3.2 子代选择器;3.2 子代选择器;3.3 交集选择器;3.3 交集选择器;3.4 并集选择器;3.5 通用选择器;实训任务;实训任务;项目02 网页的蓝图—简单布局;任务2-3 使用盒模型划分页面;一、页面元素的分类和转换;1.1 块级元素;1.2 行内元素;1.3 行内元素和块级元素的转换;二、块级元素的盒子模型;2.1 盒子的宽度和高度;宽度如何取值？;高度如何取值？;2.2 盒子的边框;2.2 盒子的边框;2.2 盒子的边框;圆角边框的设置;圆角边框的设置;;2.3 盒子的内填充属性;2.3 盒子的内填充属性;;2.4 盒子的外边距属性;盒子的居中;实训任务1;实训任务2;2.5 盒子的背景;设置背景颜色;设置背景图片;设置样式背景图片如何重复;设置样式背景图片位置;背景图片位置示例;背景图片位置示例;设置背景图片不随滚动条移动;设置背景图片的尺寸;设置背景图片的定位区域;实训任务3;2.6 盒子的阴影效果;2.6 盒子的阴影效果;多阴影效果;2.7 盒子的占位;默认模式：content-box;IE怪异模式：border-box;IE怪异模式：border-box;项目02 网页的蓝图—简单布局;任务2-4 BFC布局;一、垂直外边距的合并;一、垂直外边距的合并;二、BFC布局——规则;二、BFC布局——触发BFC;BFC解决外边距合并问题;解决方案1. 使用overflow属性触发BFC。;解决方案2.使用display属性值触发BFC。;实训任务;项目03 网页的蓝图—复杂布局;任务3-1 浮动布局两栏式页面;一、认识浮动;二、元素的浮动属性float;2.1 不设置浮动;2.2 设置浮动;三、清除浮动;三、清除浮动;四、盒子的高度塌陷及解决方法;四、盒子的高度塌陷及解决方法;4.1 使用空标记清除浮动;4.2 使用after伪对象清除浮动;4.3 使用overflow属性清除浮动;实训任务1 网页元素的水平排版;实训任务2;项目03 网页的蓝图—复杂布局;任务3-2 DIV+CSS布局网上商城首页;一、网页布局的流程;一、网页布局的流程;二、常见网页布局——单栏式布局;二、常见网页布局——两栏式布局;二、常见网页布局——通栏多列式布局;二、常见网页布局——通栏多列式布局;二、常见网页布局——通栏多列式布局;实训任务：完成网上