网页设计套课件幻灯片教学教程电子讲义.pptx

幻灯片编号,第,1,章 网页设计基础,第,2,章,HTML5+CSS,简章页面制作,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,1.1,网页的基本概念,1.1,网页的基本概念,1.2,网页的基本元素,1.3 常用前端开发工具,1.4.1 Dreamweaver CC开发平台工作区介绍,1.4.2 基于Dreamweaver CC的网站创建与管理,创建站点,1.4.2 基于Dreamweaver CC的网站创建与管理,管理站点,1.4.2 基于Dreamweaver CC的网站创建与管理,创建网页,快捷菜单创建网页和文件夹,文件菜单创建网页,1.5.1 HBuilderX开发平台工作区介绍,开发平台界面,1.5.2 HBuilderX项目的创建,创建项目或文件,1.5.2 HBuilderX项目的创建,创建项目,1.5.2 HBuilderX项目的创建,创建网页文件,1.5.2 HBuilderX项目的创建,创建样式表文件,1.6,网页基本结构和文本元素,网页的结构,这里添加网页标题,这里添加网页内容,1.6,网页基本结构和文本元素,网页的结构,这里添加网页标题,这里添加网页内容,1.6,网页基本结构和文本元素,网页的结构,这里添加网页标题,这里添加网页内容,1.6,网页基本结构和文本元素,网页的结构,这里添加网页标题,这里添加网页内容,1.6,网页基本结构和文本元素,网页的结构,1.6.2 HTML中的文本元素,1.6.2 HTML中的文本元素,1.6.3 HTML块元素与内联元素,块元素,1.6.3 HTML块元素与内联元素,内联元素,1.7.1 在网页中添加文字,在网页的,标签内添加下面文字：,1.7.2 文字和段落的CSS样式,CSS样式,文件的引用,1.7.2 文字和段落的CSS样式,CSS样式,的分类,1.7.2 文字和段落的CSS样式,CSS样式,的分类,1.7.2 文字和段落的CSS样式,CSS样式,的分类,1.7.2 文字和段落的CSS样式,字体属性,1.7.2 文字和段落的CSS样式,字号属性,1.7.2 文字和段落的CSS样式,字体颜色,1.7.2 文字和段落的CSS样式,字体的其他属性,1.7.2 文字和段落的CSS样式,段落及行距设置,1.7.2 文字和段落的CSS样式,文本对齐设置,1.7.3 CSS样式在文本页面的应用实例,案例,完成下面效果图页面制作,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,2.1.1 CSS盒子模型,CSS盒子模型,2.1.1 CSS盒子模型,CSS基本语法,2.1.1 CSS盒子模型,外边距margin属性,2.1.1 CSS盒子模型,内边距padding属性,2.1.1 CSS盒子模型,边框属性,2.1.1 CSS盒子模型,背景属性,2.1.1 CSS盒子模型,背景属性,2.1.1 CSS盒子模型,背景属性,2.1.2 CSS页面布局基础,布局标签,2.1.2 CSS页面布局基础,浮动,2.1.2 CSS页面布局基础,清除浮动,2.1.2 CSS页面布局基础,溢出,2.1.2 CSS页面布局基础,定位,2.1.3 CSS样式分类,按选择器类型分类,2.1.3 CSS样式分类,按样式的定义位置分类,2.1.3 CSS样式分类,CSS的伪类,2.1.4 样式规则的优先级别,不同样式的优先级别,2.1.6 样式命名规范,2.2.1 制作一列固定宽度布局网页,案例,2-2,：根据给定图片素材，完成下面布局,2.2.1 制作一列固定宽度布局网页,案例,2-3,：在案例,2-2,的基础上添加文字内容，并设置样式,2.2.2 制作一列自适应宽度布局网页,案例,2-4,2.3网页中的图片元素,2.3网页中的图片元素,图片代码,2.4.1 图文混排效果,案例,2-5,2.4.2 一列布局图文混排网页制作,案例,2-6,第,3,章 多列布局页面制作,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,3.1.1 网页常见二列布局方案,二列布局参考方案,3.1.2 二列布局页面制作实例,案例,3-1,具体过程见教材没视频,3.2.1 网页常见三列布局方案,三列布局参考方案,3.2.2 三列布局页面制作实例,案例,3-2,具体过程见教材没视频,3.3.1 网页常见多列布局方案,多列布局参考方案,3.3.2 多列布局页面制作实例,案例,3-3,具体过程见教材没视频,3.3.2 多列布局页面制作实例,案例,3-3,布局分解,第,4,章 链接与导航制作,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,4.1.1 文本链接,4.1.2 邮件链接,4.1.3 下载链接,4.1.4 空链接,4.1.5 链接文字样式设置,4.2 图片链接,4.3.1 横向文字链接导航制作,案例,4-1,4.3.2 图片链接导航制作,案例,4-2,4.3.3 列表导航制作,带背景色的列表导航,案例,4-3,4.3.3 列表导航制作,带背景图的横向列表导航,4.3.3 列表导航制作,带背景图的竖向列表导航,第,5,章,HTML5,表单基础,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,5.1,认识表单,设置表单form常用属性,属性名称,属性值,用途,ID,用于标志表单的名称，每个表单的名称都不能相同。字母或数字，不能包含空格,表单命名后，用户就可以使用JavaScript或VBScript等脚本语言引用或控制该表单。,action,服务器处理脚本的URL或文件名/路径,用户可以在此选项中直接输入动态网页的完整路径，也可以单击选项右侧的“浏览文件”按钮，选择处理该表单数据的动态网页,Method,包含POST和GET选项，其中GET是默认值,用于设置将表单数据传输到服务器的方法，其中GET：将值附加到请求该页面的URL中，并将其传输到服务器。由于GET方法有字符个数的限制，所以适用于向服务器提交少量的数据。POST：在HTTP请求中嵌入表单数据，并将其传输到服务器，所以，该方法适用于向服务器提交大量数据的情况。,name,描述表单名称，以字母或数字开关，不能有空格,为单命名，使客户端脚本语言能方便访问表单。,Enctype,编码类型默认设置为application/x-www-form-urlencode，通常与POST方法一起使用。,用于设置对提交给服务器处理的数据使用的编码类型。,Accept Charset,可以设置为UT-8和ISO5589-1,告知（服务器）客户端可以处理的字符集类型,5.2.1 input元素,文本对象,5.2.1 input元素,5.2.1 input元素,5.2.1 input元素,5.2.1 input元素,input,元素,日历控件,input,元素,颜色池控件,textarea元素,select元素和option元素,label元素,fieldset和legend,元素,无障碍访问表单元素,datalist预设列表选项元素,表单应用案例,第,6,章,CSS3,样式基础,学习要点,了解,CSS3,背景设置、阴影和渐变,1,掌握,CSS3,设置圆角边框的方法,2,熟悉,CSS3,设置文本效果的方法,3,掌握,CSS3 transitions,过渡效果设计,4,掌握,CSS3 animation,动画效果,5,6.1 CSS3,文本效果应用,CSS3,包含多个新的文本特性，其中,Internet Explorer 10,、,Firefox,、,Chrome,、,Safari,以及,Opera,支持属性,text-shadow,和,word-wrap,。在,CSS3,中的属性应用，有些需要添加浏览器私有前缀，这是源于不同内核浏览器对新,CSS,属性的一个提前支持。,Internet Explorer(,简称,IE),浏览器,IE9,以下版本需添加,-ms-,；,firefox,火狐浏览器需添加,-moz-,；,google chrome,、,safari,浏览器需添加,-webkit-,；,opera,浏览器，添加前缀,-o-,；,例如：,-moz-text-shadow:6px 4px 4px#999;,-webkit-text-shadow:6px 4px 4px#999;,text-shadow:6px 4px 4px#999;,6.1.1,文本阴影效果,在网页中经常要用到文本，文本的多样化显示也给网页带来的多样的变化，,CSS3,中除了基本的文本设置效果外，还可以通过,text-shadow,可以给文本添加阴影效果，其语法如下：,text-shadow:h-shadow v-shadow blur color;,h-shadow,、,v-shadow,是必选项，分别代表水平阴影和垂直阴影的位置，允许负值，负值代表方向相反；,blur,是可选项，代表模糊阴影距离；,color,是可选项，代表阴影的颜色。,6.1.2,文本描边效果,文本描边效果可以通过给文本,四周添加差色阴影,的方式进行设置，关键代码如下：,text-shadow:-2px 0 white,2px 0 white,0 2px white,0-2px white;,代码通过设置左侧（,-2px 0,）、上侧（,0-2px,）、右侧（,2px 0,）、下侧（,0 2px,）四个方向,2,个像素的白色阴影来呈现描边效果，坐标系向右向上方向为正，负值代表相反方向。,文本浮雕效果可以采用颜色对比，加上阴影效果，使平面的文字看起来像浮雕，比如给文字右侧下侧加上深色阴影，左侧和上侧加上浅色阴影模拟光照，就可以显示浮雕的效果，关键代码如下：,text-shadow:-1px-2px#fff,2px 2px#222;,6.1.3,文本浮雕效果,6.1.4 CSS3,文本效果应用实例,案例,6-1,：,创建名为,ch06,的网站项目，再新建网页文件，命名为,index6-1,文本效果,.html,，分别在网页中编写文本阴影、描边效果和文本浮雕效果的样式，再在,标签内引用相关样式，实现不同的文本效果。,关键代码如下：,/*,文本阴影,*/,#yinying,font-size:40px;,color:#294f7b;,font-weight:bold;,-moz-text-shadow:6px 4px 4px#999;,-webkit-text-shadow:6px 4px 4px#999;,text-shadow:6px 4px 4px#999;,6.1.4 CSS3,文本效果应用实例,/*,描边效果,*/,#miaobian,font-size:40px;,background-color:#ccc;,padding:10px;,width:250px;,font-weight:bold;,color:red;,/*,四个方向设置白色的框,*/,-moz-text-shadow:-2px 0 white,2px 0 white,0 2px white,0-2px white;,-webkit-text-shadow:-2px 0 white,2px 0 white,0 2px white,0-2px white;,text-shadow:-2px 0 white,2px 0 white,0 2px white,0-2px white;,6.1.4 CSS3,文本效果应用实例,/*,文本浮雕,*/,#fudiao,font-size:40px;,font-weight:bold;,color:#eee;,background:#c0c;,padding:10px;,width:250px;,text-shadow:-1px-2px#fff,2px 2px#222;,-moz-text-shadow:-1px-2px#fff,2px 2px#222;,/*,根据需要添加浏览器兼容，该处兼容,firework,浏览器,*/,6.2 CSS3,背景与渐变效果,背景作为衬托网页主体内容的容器颜色，给网页增色不少，背景除了最基本的纯色和图像填充外，在,CSS3,增加了背景渐变效果，渐变是两种或者多种颜色之间的平滑过渡，渐变背景一直以来在,web,页面中都是一种常见的视觉元素，,CSS3,的渐变属性主要包括线性渐变、径向渐变和重复渐变。,渐变效果可以用在,div,p,form,body,ul,ol,等块标签元素上，起到修饰的效果。,6.2.1,线性渐变,CSS3,中的线性渐变通过,“background-image:linear-gradient,（参数值）；,“,来设置，其基本语法如下：,background-image:linear-gradient(|,color stop,color stop,color stop*);,中的参数为可选值，,linear-gradient,参数取值说明如表,6-1,中的参数为可选值，,linear-gradient,参数取值说明如表,6-1,参数类型,取值说明,angle,表示渐变的角度，角度数的取值范围是,0365deg,。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。,side-or-corner,通过关键词来确定渐变的方向。默认值为,top,（从上向下），取值范围是,left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center,，其中,IE10,只能取,left,top,，,Chrome,则没有,center,left center,right center,；,color stop,用于设置颜色边界，,color,为边界的颜色，,stop,为该边界的位置，,stop,的值为像素数值或百分比数值，若为百分比且小于,0%,或大于,100%,则表示该边界位于可视区域外，两个,color stop,之间的区域为颜色过渡区。,表,6-1 linear-gradient,参数取值说明,6.2.1,线性渐变,6.2.2,径向渐变,CSS3,中的径向渐变通过,“background-image:radial-gradient,（参数值）；,”,来设置，,其基本语法格式如下：,background-image:radial-gradient(,圆心坐标,渐变形状,渐变大小,color stop,color stop,color stop*);,其中,中的参数为可选值，,radial-gradient,参数取值说明如表,6-2,。,6.2.2,径向渐变,参数类型,取值说明,圆心坐标,用于设置放射的圆形坐标，可设置为形如,10px 20px,的,x-offset y-offset,，或使用预设值,center,（默认值）,渐变形状,circle,圆形,ellipse,椭圆形，默认值；,渐变大小,closest-sid,或,contain,以距离圆心最近的边的距离作为渐变半径,closest-corner,以距离圆心最近的角的距离作为渐变半径,farthest-side,以距离圆心最远的边的距离作为渐变半径,farthest-corner,或,cove,以距离圆心最远的角的距离作为渐变半径,表,6-2 radial-gradient,参数说明表,6.2.3,重复渐变,重复渐变是对以上两种渐变方式使用，只需在两个属性前添加,repeating-,，具体语法如下：,/*,线性重复渐变,*/,repeating-linear-gradient(,起始角度,color stop,color stop,color stop*),/*,径向重复渐变,*/,repeating-radial-gradient(,圆心坐标,渐变形状 渐变大小,color stop,color stop,color stop*),6.2.4 CSS3,背景与渐变效果应用实例,案例,6-2,：,在,ch06,的网站项目下新建网页文件，命名为,index6-2,背景与渐变效果,.html,，分别在网页中编写不同的渐变样式，再在,标签内引用相关样式。,关键代码：,.rainbow-linear-gradient,width:300px;,height:60px;,background-image,:linear-gradient(right,#E50743 0%,#F9870F 15%,#E8ED30 30%,#3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);,.rainbow-radial-gradient,width:300px;,height:100px;,background-image,:radial-gradient(100px,#ffe07b 10%,#ffb151 2%,#16104b 70%);,6.3 CSS3,制作边框效果,元素的边框（,border,）是围绕元素内容和那边句的一条或多条线，每个边框有,3,个属性：宽度、样式以及颜色。,在,CSS3,中除了上述方法之外，还增加了以下功能：,border-radius,：用于创建圆角。,border-image,：将图片设置为边框。,box-shadow,：用于给边框添加阴影。,6.3.1,圆角边框,网页上的图片可以通过,CSS3,样式成形圆角边框，要实现这样的效果，在以前的版本中只能由,UI,设计师给我们制作圆角的背景图，在,CSS3,中可以使用,border-radius,属性赋不同的值来设计各种类型的圆角边框。,border-radius,属性可以赋,4,个值，这,4,个值按照,top-left,、,top-right,、,bottom-left,、,bottom-right,的顺序来设置。,如果只设置,1,个值，则表示,4,个圆角相同。,如果,bottom-left,值省略，其圆角效果与,top-right,相同。,如果,bottom-right,值省略，其圆角效果与,top-left,相同。,如果,top-right,值省略，其圆角效果与,top-left,相同。,注意：,border-radius,除了可以用在图片外，还可以用于常用的块标签中，如,div,、,p,、,ul,、,li,、,form,等。,6.3.2 CSS3,圆角边框应用实例,案例,6-3,：在,ch06,的网站项目下新建网页文件，命名为,index6-3,圆角边框,.html,，分别在网页中编写不同的圆角参数样式，再在,标签内引用相关样式，关键代码如下：,/*,一个值，代表四方向,50px,像素,*/,#img1,-moz-border-radius:50px;,-webkit-border-radius:50px;,border-radius:50px;,/*,两个值，正反对角线方向分别为,10px,，,50px,像素,*/,#img2,-moz-border-radius:10px 50px;,-webkit-border-radius:10px 50px;,border-radius:10px 50px;,/*,三个值，代表左上、右上左下、右下,*/,#img3,-moz-border-radius:10px 50px 80px;,-webkit-border-radius:10px 50px 80px;,border-radius:10px 50px 80px;,/*,四个值，代表左上、右上、右下、左下,*/,#img4,-moz-border-radius:10px 30px 50px 70px;,-webkit-border-radius:10px 30px 50px 70px;,border-radius:10px 30px 50px 70px;,6.3.2 CSS3,圆角边框应用实例,案例,6-4,：,在,ch06,的网站项目下新建网页文件，命名为,index6-4,半径不同的圆角边框,.html,，分别在网页中编写不同的圆角参数样式，再在,标签内引用相关样式，关键代码如下：,/*,半径不同圆角效果,*/,.jieqige,width:300px;,padding:10px 20px;,border:5px solid;,border-radius:20px 50px;,border-top-color:aqua;,border-right-color:#994D26;,border-left-color:red;,border-bottom-color:blue;,text-align:center;,春雨惊春清谷天，夏满芒夏暑相连。,秋处露秋寒霜降，冬雪雪冬小大寒。,上半年是六廿一，下半年是八廿三。,每月两节日期定，最多只差一两天,6.3.3,边框阴影,为了加强网页的元素效果，常会使用阴影晕染的方式对于图片、段落的边框等盒子结构进行增强效果，其中,CSS3,中,box-shadow,可以进行晕染阴影的设置，语法如下：,box-shadow:h-shadow v-shadow blur spread color inset;,其中,h-shadow v-shadow,、,box-shadow,为必选，其他为可选属性，参数说明如表,6-3,。,表,6-3 box-shadow,参数说明,值,说明,h-shadow,必需，水平阴影的位置，允许负值，负值代表相反方向,v-shadow,必需，垂直阴影的位置，允许负值，负值代表相反方向,blur,可选，模糊距离,spread,可选，阴影的尺寸,color,可选，阴影的颜色,inset,可选，将外部阴影（,outset,）改为内部阴影,6.3.4,边框阴影制作实例,案例,6-5,：,在,ch06,的网站项目下新建网页文件，命名为,index6-5,边框阴影,.html,，分别在网页中编写不同的图像阴影样式，再在,标签内引用相关样式，关键代码如下。,img,-moz-border-radius:10px;,-webkit-border-radius:10px;,border-radius:10px;,-webkit-box-shadow:#779977 10px 15px 8px;,box-shadow:10px 15px 8px#779977;,6.4 CSS3,制作动画效果,无论是国内网站还是国外网站，动画都在网页上有着举足轻重的作用。动画在网页上随处可见，已经成为网上活动的标志，广泛用于广告、导航、步骤展示等。在,CSS3,之前，网页做出动画主要由两种方式，一是使用,flash,，二是使用,JavaScript,，这两种都需要网页设计人员单独学习,Flash,和,JavaScript,以及,jQuery,技术，且,Flash,和,JavaScript,制作的动画在页面加载的时候都需要占用资源。而,CSS3,的动画能避免上面提到的问题。通过设置,CSS3,中的属性可以制作两种类型的动画：一种是过渡动画，另一种是动画方式。,6.4.1 CSS3 transitions,过渡动画制作,CSS3,的过渡就是平滑的改变一个元素的,CSS,值，使元素从一个样式逐渐过渡到另一个样式。,CSS3,过渡使用,transition,属性来定义，,transition,属性的基本语法如下所示：,transition:property duration timing-function delay;,例如：,transition:width 0.5s ease-out 1s;transition,是一个符合属性，由,4,个属性构成，属性说明如表。,属性,描述,transition-property,规定应用过渡的,CSS,属性的名称，对应用的属性值有：,none|all|property,transition-duration,定义过渡效果花费的时间（秒或毫秒），默认,0,没有动画,transition,timing-function,规定过渡效果的时间曲线，默认,ease,transition-delay,规定效果开始之前需要等待的时间，过渡效果何时开始，以秒或毫秒计，默认,0,没有动画,其中属性,transition-property,三个属性值分别为：,1,）,none,：没有属性会获得过渡效果；,2,）,all,：所有属性都会获得过渡效果；,3,）,property,：定义应用过渡效果的,CSS,属性名称列表，列表以逗号分隔，例如,width,、,height.,6.4.1 CSS3 transitions,过渡动画制作,属性,改变的对象,background-color,颜色,background-image,只是渐变,background-position,百分比，长度,color,色彩,font-size,百分比，长度,font-weight,数字,Height,、,left,、,bottom,、,top,百分比，长度,text-shadow,阴影,opacity,数字,padding,长度,line-height,百分比，长度，数字,表,6-5 transition-property,常用过渡属性,值,说明,linear,规定以相同速度开始至结束的过渡效果,ease,规定慢速开始，然后变快，然后慢速结束的过渡效果,ease-in,规定以慢速开始的过渡效果,ease-out,规定以慢速结束的过渡效果,ease-in-out,规定以慢速开始和结束的过度效果,表,6-6 transition-timing,function,的值,6.4.2,过渡动画制作实例,案例,6-6,：,在,ch06,的网站项目下新建网页文件，命名为,index6-6,过渡动画,.html,，分别在网页中编写不同的动画样式，再在,标签内引用相关样式，关键代码如下：,div,width:200px;,height:280px;,background:url(img/qian.png)no-repeat;,-webkit-transition:all 3s 1s ease-in;,div:hover,background:url(img/hou.png)no-repeat;,p,width:100px;,height:25px;,text-align:left;,background-color:rgba(0,0,230,0.5);,-webkit-transition:all 3s 1s ease-in;,/*,宽度和颜色过渡,*/,transition:all 3s 1s ease-in;,/*transition:width 3s 1s ease-in;*/,p:hover,width:193px;,/*,过渡属性,width*/,height:25px;,background-color:rgba(0,0,230,0.9);,6.4.3 CSS3 animation,动画,在,CSS3,中除了使用,transition,功能（过渡）实现动画效果以外，还可以使用,animation,功能实现更为复杂的动画效果。,animation,是一个复合属性，通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。创建动画分为两步，第一步是创建动画，第二步是在对应元素上使用动画。,在,CSS3,中使用,keyframes,规则来创建动画，,keyframes,可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。,keyframes,规则的语法格式如下所示：,keyframes animationname,keyframes-selectorcss-styles;,类型,描述,animationname,表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。,keyframes-selector,keyframes-selector,是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、,from,或者,to,。其中，,from,和,0%,效果相同表示动画的开始，,to,和,100%,效果相同表示动画的结束。,css-styles,css-styles,定义执行到当前关键帧时对应的动画状态。以上三个属性都是必需品，缺一不可。,表,6-7 keyframes,属性,keyframes,创建动画部分代码，如下：,-webkit-keyframes name,0%,width:120px;,25%,width:200px;,50%,width:300px;,100%,width:500px;,6.4.3 CSS3 animation,动画,6.4.3 CSS3 animation,动画,animation,属性用于描述动画的,CSS,声明，包括指定具体动画以及动画时长等行为，相关属性描述如表,6-8,所示，,animation,属性的基本语法如下所示：,animation:name duration timing-function delay iteration-count direction fill-mode play-state;,属性,描述,animation-name,规定,keyframes,动画的名称。,animation-duration,规定动画完成一个周期所花费时间，,time,值以秒或毫秒计，默认是,0,。,animation-timing-function,规定动画的速度曲线。,animation-delay,规定动画开始前的延迟，,time,值以秒或毫秒计，默认是,0,，可选。,animation-iteration-count,规定动画被播放的次数,n,，默认是,1,。,infinite,规定动画应该无限次播放。,animation-direction,规定动画是否在下一周期逆向播放。,normal,默认值，动画应该正常播放。,alternate,动画应该轮流反向播放。,animation-play-state,规定动画是否正在运行或暂停。,paused,规定动画已暂停。,running,默认值，规定动画正在播放。,表,6-8 animation,属性,6.4.4 animation,动画制作实例,案例,6-7,：,雪碧图是一种,CSS,图像合并技术生成的图片，该方法是将若干个小图标和背景图像合并到一张图片上，软后利用,CSS,的背景定位技术来显示需要显示的图片部分，案例使用雪碧图,6-8,完成生长的花朵效果图,6-9,。,图,6-8,效果图,6-9,关键代码：,#hua,margin:0 20px;,padding-top:15px;,border-radius:3px;,width:73px;,height:117px;,background-image:url(img/animation.png);,animation:hua 5s step-start 0s infinite normal;,6.5 CSS3,应用综合案,案例,6-8,：综合本章所学知识设计网上花店首页，步骤见课本。,网页结构图,Thank you,第,7,章,HTML5,新特性与媒体应用,学习要点,CSS+DIV,一列布局页面（,4,学时）,任务,1,图文混排页面制作（,4,学时）,任务,2,复杂页面设计（,10,学时）,任务,3,网页导航和面板设计（,10,学时）,任务,4,网页版面设计（,6,学时）,任务,5,7.1 HTML5,新特性,7.1.1 解决了浏览器兼容问题,在HTML5之前，各大浏览器厂商为了争夺市场，在各自浏览器中增加各种各样功能，并且不具有统一标准。导致了同一网页使用不同浏览器，会呈现不同效果。在HTML5中，具备了良好的跨平台性能。只要在HTML5中稍加处理则可以兼容多个浏览器。,7.1.2 新增多个功能丰富的新元素和API,HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示元素到图文并茂的多媒体元素，让用户在使用过程中增添了许多的便利性。HTML5新增的元素和API如下。,1.提供了一组丰富的语义化元素，比如header、nav、section、article、footer,2.表单控件，比如date、time、email、url、search,3.用于绘图的canvas元素,4.支持多媒体的音频和视频元素，比如、,5.增强离线存储功能，比如sessionStorage、localStorage,6.地理位置、拖曵等API,7.1 HTML5,新特性,7.1.3 用户优先的原则,HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，HTML5会把用户放在第一位。,7.1.4 元素语法化繁为简,HTML5进一步地简化了元素语法，严格遵守“简单至上”的原则，主要体现在以下几个方面。,1.简化的文档类型声明，只用表示HTML5文档。,2.新的简化字符集声明，比如charset=utf-8。,3.元素属性值只有一个，且与属性名一致时，可以省略，比如可以简写为。,7.2 HTML5,常用新增元素,7.2.1 figure元素和figcaption元素,在HTML5中，figure元素用于标记文档中的一个图像。figcaption元素用于为figure元素添加标题，一个figure元素内最多允许使用一个figcaption元素，而且该元素应该放在figure元素内的第一个或者最后一个子元素位置。,7.2 HTML5,常用新增元素,7.2.2 details和summary元素,details用来对显示在页面内容做进一步解释，其展现出来的效果和jQuery手风琴效果差不多。,使用summary作为details的第一个子元素，用于为details定义标题，标题是可见的，当用户单击标题时，其它内容则会显示或隐藏。,7.2 HTML5,常用新增元素,7.2.3 time和mark元素,time元素用于表示24小时制时间和公历日期。该元素能够以机器可读的格式表示日期和时间，有安排日程表功能的应用可以将此时间添加至日程表中。但在浏览器渲染中不会呈现任何特殊效果。,time元素有两个属性：datetime，表示此元素的时间和日期，并且属性值必须是一个有效的日期格式，并可包含时间。如果此值不能被解析为日期，则由元素的内容给定日期或时间；pubdate，表示 元素中的日期/时间是文