HTML5与CSS3项目实战 (3)教学课件

1、企业级卓越人才培养（信息类专业集群） 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 学习目标 学习目标学习目标010203掌握HTML5图像标签的使用掌握CSS3页面背景图像的设置掌握CSS3新增边框属性学习目标 通过实现去哪儿旅游主界面，学习HTML5图像相关标签以及CSS3图像相关属性，了解和掌握HTML5和CSS3图像标签在实战中的应用企业级卓越人才培养（信息类专业集群）02 学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业

2、级卓越人才培养（信息类专业集群） 情境导入情境导入在这个信息化的时代，人们现在更多的是利用图片来表达信息，那么在网页编辑时图片的美化和布局是非常重要的，我们需要在表达自己想要表达的信息的同时还要考虑界面的美观，能够让用户在了解信息的同时还要满足用户的视觉享受。本次任务主要是实现去哪儿旅游主界面设计。企业级卓越人才培养（信息类专业集群） 功能描述功能描述头部包括去哪儿旅游网站的logo、文本搜索框等 01 02 03主体包括推荐旅游城市的图片介绍底部包括网站的超链接和站点的版权信息企业级卓越人才培养（信息类专业集群） 基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows 7

3、系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端： 火狐浏览器 谷歌浏览器手机端： Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 任务技能任务技能 网页中图片格式 HTML5图像标签 背景属性 盒子模型 CSS3边框属性 HTML5图像过渡和变形 任务技能任务技能企业级卓越人才培养（信息类专业集群）1在网页中添加图片时，图片的格式与代码中图片的格式必须一致，所以我们需要对图片的格式有一定的了解。在网页中主要使用以下几种图片格式：JPG、PNG、GIF、BMP、PCX、TIFF。其中使用最广泛

4、的图片格式为：JPG、PNG、GIF 网页中图片格式网页中图片格式格式企业级卓越人才培养（信息类专业集群）标签1标签2标签3是添加图片的标签，在HTML5中添加图片的基本格式为：。标签可以成对出现也可以写成，在网页编写中标签主要用于添加网站logo和添加网站信息介绍的图片 标签是 HTML 5 中的新标签。标签代表一段独立的流内容，主要包括图像、文字、代码等。该标签添加标题时需要标签，所有主流浏览器都支持 标签定义图像映射内部的区域通常使用标签，area 元素始终嵌套在 标签内部。该标签是新增标签，属性有rel、media、hreflang。其中rel是规定当前文档与目标 URL 之间的关系，

5、media是规定目标 URL 是为何种媒介/设备优化的，hreflang是规定目标 URL 的语言 HTML5图像标签图像标签企业级卓越人才培养（信息类专业集群）1margin属性2把HTML页面中的元素看作是一个矩形的盒子叫做盒子模型。盒子模型所具备的四个属性为：内容、填充、边框、边界。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型的四个属性分别是：margin、border、padding、content在CSS中通过margin属性设置元素边框与相邻元素之间的距离。 盒子模型盒子模型盒子模型概念border是为图像添加边框的属性，border的属性值有三

6、种，分别是：边框的粗细程度（2px）、边框的样式（solid）、边框的颜色（#000）padding是设置边框和内部元素之间的距离的属性43border属性padding属性属性描述margin-top上外边距margin-right右外边距magin-bottom下外边距margin-left左外边距margin上外边距 右外边距 下边距 左边距属性描述border-width用来设置边框粗细主要参考值有thin定义细边框，medium定义中等边框border-style 用来设置元素边框样式，主要参考值有none 定义无边框，solid 定义实线border-color用来设置边框的颜色属

7、性描述padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding上内边距 右内边距 下内距 左内距企业级卓越人才培养（信息类专业集群）border-image属性1border-radius属性2box-shadow属性3border-image是使用图像作为标签的边框的属性。但是border-collapse属性不能跟border-image属性同时使用border-radius是实现圆角边框的属性box-shadow是给边框添加阴影效果的属性，box-shadow的属性值包括：阴影宽度、阴影颜色等CSS

8、3边框属性边框属性值描述border-image-source表示用在边框的图片的路径border-image-slice表示图片边框向内偏移border-image-width表示图片边框的宽度border-image-outset表示边框图像区域超出边框的量值描述length定义圆角的形状%以百分比定义圆角的形状值描述h-shadow必需填写。表示水平阴影的位置。允许负值v-shadow必需填写。表示垂直阴影的位置。允许负值blur可选。表示模糊距离spread可选。表示阴影的尺寸color可选。表示阴影的颜色。请参阅 CSS 颜色值inset可选。表示将外部阴影 (outset) 改为内

9、部阴影企业级卓越人才培养（信息类专业集群）CSS背景属性是CSS3中一个属性，通常用background来表示，主要是用来设置网页的背景，例如：背景颜色、背景图片等CSS背景属性background-color属性background-image属性background-repeat属性设置背景颜色通常使用background-color属性，该属性有三种表示方式：颜色名、RGB值、十六进制数。最常用的表示方式为十六进制数在网页添加背景图片通常使用background-image属性，在HTML5中添加背景图片的代码为：,而在CSS3中添加背景图片为：bodybackground-image:

10、url(图片名.jpg);设置图片平铺方向通常使用background-repeat属性，该属性必须在使用背景图片（background-image）属性的基础上使用，不可以单独使用 背景属性背景属性background-position属性背景定位通常使用background-position属性，该属性的值有三种方式background-position 属性的默认设置的值是top left。 background-attachment属性定义背景图片随滚动轴的移动方式通常使用background-attachment属性，在没有对background-attachment属性进行设置之前

11、，background-attachment的默认属性值为scroll企业级卓越人才培养（信息类专业集群）12transition是实现背景图像过渡的效果的属性，是HTML5增加属性transform是实现图形变形的属性HTML5图像过渡和变形图像过渡和变形transition属性transform属性值描述property表示设置过渡效果的 CSS 属性的名称transition-duration表示完成过渡效果需要多少秒或毫秒transition-timing-function表示速度效果的速度曲线transition-delay表示过渡效果何时开始值描述none表示不进行转换matrix

12、(n,n,n,n,n,n)表示 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)表示 3D 转换，使用 16 个值的 4x4 矩阵translate(x,y)表示 2D 转换translate3d(x,y,z)表示 3D 转换scale(x,y)表示 2D 缩放转换scale3d(x,y,z)表示转换，只是用 X 轴的值企业级卓越人才培养（信息类专业集群）05 任务实施第一步：头部样式制作分为三部分：网站logo、搜索框、搜索按钮，其中网站logo是使用的图片标签，搜索框和搜索按钮是表单标签第三步：主体部分主要包括导航栏和景点推荐部分第四步：底部信息样式设置，版权信息内容为Copyright 2016 ，该内容为一个段落，使用段落标签 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 本项目通过去哪儿网旅游网站旅游目的地推荐网页的训练，熟悉了HTML5中的图像标签、CSS的背景设置、图像的设置以