第十一章第十一章

第11章HTML5和弹性布局网页设计与制作DreamweaverCC标准教程1．HTML5概述2．HTML5结构元素3．弹性盒子布局4．媒体查询应用本章学习主要内容：HTML5是在HTML4.01规范的基础上，建立起来的一个全新HTML标准规范，得到了各主流浏览器厂商的广泛认可和支持。11.1HTML5概述11.1.1HTML5简介11.1.2HTML5特性11.1HTML5概述在HTML5标准规范中，对视频、音频、图像、动画以及与计算机等终端设备的交互进行了标准化，引入新标签元素和属性，以适应互联网应用的迅速发展，为桌面和移动平台提供无缝衔接的丰富内容。11.1.1HTML5简介解决了跨浏览器问题新增了多个新特性设计安全机制表现和内容进一步分离简化HTML描述语言11.1.2HTML5特性11.2.1HTML5结构标签11.2.2课堂案例——在线课程11.2HTML5布局<article>标签<header>标签<nav>标签<section>标签<aside>标签<footer>标签11.2.1HTML5结构标签案例学习目标：学习掌握HTML5结构标签的使用。案例知识要点：<article>标签、<header>标签、<nav>标签、<section>标签、<aside>标签和<footer>标签等在文字页面结构中的作用。素材所在位置：案例素材/ch11/课堂案例-在线课程。案例布局要求如图11-1所示，案例效果如图11-2所示。11.2.2课堂案例——在线课程11.3.1弹性盒子概念11.3.2弹性容器属性11.3.3弹性容器项目属性11.3.4课堂案例-尚品家居11.3弹性盒子布局弹性盒子是实现“弹性布局"的基础，弹性盒子模型如11-35所示。弹性盒子是具有弹性布局属性的元素，也可称为”弹性容器“，所有嵌入到“弹性容器”内的元素称为容器成员，简称"项目"。11.3.1弹性盒子概念弹性容器可以通过flex-direction，flex-wrap，justify-content，align-item等属性，设置项目的排列方式。11.3.2弹性容器属性弹性盒子中的项目可以通过flex-grow和flex-shrink属性控制自身缩放比例，以适应弹性盒子的大小变化，最终适应浏览器窗口大小的变化。11.3.3弹性容器项目属性案例学习目标：学习应用弹性布局的方法。案例知识要点：设置弹性盒子相关属性的方法，以及弹性盒子内各项目的显示方式。素材所在位置：案例素材/ch11/课堂案例-尚品家居。案例布局效果如图11-52所示，案例效果如图11-53所示。11.3.4课堂案例-尚品家居11.4.1媒体查询11.4.2课堂案例-健康大步走11.4媒体查询应用媒体查询介绍媒体查询是一种条件语句，可用来确定将不同的CSS样式应用到Web页面，因此弹性布局和媒体查询的结合使用，可以实现一个能适应移动、平板和桌面环境的响应式页面设计。媒体查询的使用媒体查询格式：@media媒体类型and（媒体特征）{样式代码}媒体查询通过不同的媒体类型和媒体特征的定义调用特定的样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同特

征条件。11.4.1媒体查询案例学习目标：学习应用媒体查询的方法。案例知识要点：设置媒体查询条件的方法以及将不同CSS样式应用到不同的Web页面。素材所在位置：案例素材/ch11/课堂案例-健康大步走。案例布局要求如图11-85所示，11-86所示，案例效果如图

11-87所示，11-88所示。11.4.2课堂案例-健康大步走11.5.1练习案例——优胜企业网站12.3.2练习案例-恒生国际老年公寓11.5.2练习案例——雅派服饰11.5练习案例案例练习目标：练习HTML5结构元素的使用。案例操作要点：1．创建名称为index.html的网页文档并存于站点根文件夹中。2．将外部样式表文件mystyle.css链接到网页中。3．根据案例布局要求，使用HTML5结构标签<header>、

<article>、<section>、<aside>和<footer>以及预设样式

body、#container、.n1、.n1a:link、.n1a:hover、.h、.s1、

.a1、.as1和.f1，完成网页制作。11.5.1练习案例——优胜企业网站案例练习目标：练习弹性布局的设置。案例操作要点如下。1．创建名称为index.html的网页文档并存于站点根文件夹中。2．将外部样式表文件mystyle.css链接到网页中。3．根据案例布局要求，应用预设样式body、#container、#logo、#nav、#nava:link、#nava:hover、#banner、.mainbox-1和#footer，定义#header、#mainbox、img和*样式，插入<div>标签。4、设置#header样式属性，宽度为100%，高度为40px，背景颜色为#cccccc；

设置display属性为flex，justify-content属性为space-between。5、设置#mainbox样式属性，宽度为100%，左右外边距为自动