高职高专计算机任务驱动模式教材HTML5+CSS3跨平台网页设计实例教程

作者：陈承欢韩耀坤颜珍平

页数：304

出版社：清华大学出版社

出版日期：2017

ISBN：9787302502142

电子书格式：pdf/epub/txt

内容简介

本书从网页设计实际应用的角度理解HTML5和CSS3的新元素和新功能,合理选取教学内容。本书设置了以下10个教学单元: 站点与网页的创建、网页中文本与段落的应用设计、网页中图像与背景的应用设计、网页中列表与表格的应用设计、网页中超链接与导航栏的应用设计、网页中表单与控件的应用设计、网页中音频与视频的应用设计、网页中图形绘制与操作的应用设计、网页中与交互的应用设计、网页中元素与整体布局的应用设计,将HTML5和CSS3的相关知识合理安排到各个教学单元中。
本书编者充分调研HTML5、CSS3新技术的实际应用情况,优选了50多个来自真实网站的典型教学案例,采用“任务驱动、精讲多练、理论实践一体化”的教学方法,改进和优化教学内容的组织方法和网页设计技能的训练方法,多方面促进基于HTML5+CSS3网页应用设计能力的提升。每个教学单元面向教学全过程设置“知识推荐→引导训练→同步训练→技术进阶→问题探究→单元习题”6个教学环节，同时还提供了丰富的配套教学资源。
本书可以作为普通高等院校、高职高专或中等职业院校各专业网页设计的教材,也可以作为网页设计的培训用书及技术用书。

本书特色

充分调研HTML5、CSS3新技术的实际应用情况，优选了53个来自于真实网站的典型教学案例，采用“任务驱动、精讲多练、理论实践一体化”的教学方法，改进和优化教学内容的组织方法和网页设计技能的训练方法，全方向促进基于HTML5+CSS3网页应用设计能力的提升。

目录

节选

单元3网页中图像与背景的应用设计
(接正文是42mm)图像是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。
【知识第一】〖最2〗1. HTML5中常用的图片标签HTML5的图像标签如表31所示。表31HTML5的图像标签标签名称标 签 描 述标签名称标 签 描 述定义图像定义figure元素的标题定义图像映射定义媒介内容的分组,以及它们的标题定义图像地图内部的区域1) 标签
标签用于向网页中嵌入一幅图像。从技术上讲,标签并不会在网页中插入图像,而是从网页上链接图像。标签创建的是被引用图像的占位空间。标签有两个必需的属性: src属性和alt属性。
2) 标签和标签
标签表示一段独立的流内容(图像、图表、照片、代码等),一般表示文档主体流内容中的一个独立单元,figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。向文档中插入带有标题图像的示例代码如下:
九寨沟风光

其浏览效果如图31所示。
图31带标题的图片浏览效果
标签用于定义元素的标题,figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。
2. CSS的背景设置与定位
1) 背景色的设置
CSS允许应用纯色作为背景,可以使用background瞔olor属性为元素设置背景色,这个属性接受任何合法的颜色值。background瞔olor属性用于设置元素的背景颜色,其取值为指定的颜色或transparent(默认值即透明色)。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才能可见。一般都不采用这种方法进行设置,如果某个元素的父元素被设置了背景色,那么该元素就可以使用这种形式恢复成透明色的效果。
HTML5+CSS3跨平台网页设计实例教程单元3网页中图像与背景的应用设计定义背景颜色的示例代码如下: .main { background-color: #fff;}
p {background-color: gray;}如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距即可。p {background-color: gray; padding: 20px;}可以为网页中的任何元素设置背景颜色,也可以为HTML的标签设置背景颜色。
2) 背景图像的设置
在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
背景图像可以作为修饰要素在网页布局与排版中使用,CSS为了实现网页背景图像广泛应用,提供了大量的属性,且得到了各大浏览器的广泛支持,综合利用这些属性可以提高网页布局和排版的灵活性和适应能力。
CSS也允许使用背景图像创建相当复杂的效果,要把图像放入背景,需要使用background瞚mage属性,该属性的默认值是none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个URL值,示例代码如下: body {background-image: url(bg_01.gif);}大多数背景都应用到body元素,不过并不仅限于此。下面的示例代码为一个段落应用了一个背景,而不会对文档的其他部分应用背景。p.flower {background-image: url(bg_02.gif);}甚至可以为行内元素设置背景图像,下面的示例代码为一个链接设置了背景图像。a.radio {background-image: url(bg_03.gif);}background瞚mage也不能继承,事实上,所有背景属性都不能继承。
(1) background瞚mage。background瞚mage属性用于定义对象的背景图像,当背景图像与背景颜色(background瞔olor)同时被定义时,背景图像覆盖于背景颜色之上。其取值可以为none(无背景图像)或者为图像地址,可以使用绝对或相对地址指定背景图像。
(2) background瞫ize。background瞫ize属性用于定义背景图像的尺寸,其属性值可以为数值或者auto,也可以是percentage、cover和contain。示例代码如下:background-size: 200px;
background-size: 200px 100px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;如果属性值为数值或者auto,用于设置背景图像的高度和宽度,第1个值设置背景图的宽度,第2个值设置背景图的高度,其单位可以为像素(px)或者百分比(%),如果只设置1个值,则第2个值会被设置为auto。
如果属性值为percentage,则width和height是针对背景区域,不是背景图像大小。以父元素的百分比来设置背景图像的宽度和高度,同样第1个值设置宽度,第2个值设置高度。如果只设置1个值,则第2个值会被设置为auto。
如果属性值为cover,则把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
如果属性值为contain,则把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
(3) background瞤osition。background瞤osition属性用于定义对象背景图像的位置,应先定义对象的background瞚mage属性,该属性不受对象的填充属性padding的影响。默认值为0,即背景图像默认位于对象内容区块的左上角。如果只指定了一个值,该值将用于横坐标,纵坐标默认为50%。如果指定了两个值,第一个值用于横坐标,第二个值用于纵坐标。
背景图像的位置由background瞤osition瞲和background瞤osition瞴两个属性综合确定。background瞤osition瞲定位背景图像的横坐标位置,默认值为0,其取值包括left、center、right和数值。background瞤osition瞴定位背景图像的纵坐标位置,默认值为0,其取值包括top、center、bottom和数值。当背景图像的位置坐标定义为数值时,单位可以取长度单位,也可以为百分比。
下面的示例代码在body元素中将一个背景图像居中放置。body {
background-image:url(‘bg_03.gif’);
background-repeat:no-repeat;
background-position:center;
}(4) background瞨epeat。background瞨epeat属性用于定义对象的背景图像是否重复以及如何平铺,应先定义对象的background瞚mage属性。其取值包括repeat(重复,即背景图像在纵向和横向上都平铺)、no瞨epeat(不重复)、repeat瞲(横向平铺)和repeat瞴(纵向平铺)。
如果需要在页面上对背景图像进行平铺,可以使用background瞨epeat属性。属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat瞲和repeat瞴分别导致图像只在水平或垂直方向上重复,no瞨epeat则不允许图像在任何方向上平铺。背景图像默认将从一个元素的左上角开始,示例代码如下: body {
background-image: url(bg_03.gif);
background-repeat: repeat-y;
}网页设计时,经常使用横向重复属性使一些小图片形成大的背景图像,主要应用于导航栏、标题栏以及按钮等。
(5) background瞣rigin。background瞣rigin属性用于规定背景图片的定位区域,背景图片可以放置于content瞓ox、padding瞓ox或border瞓ox区域,示意图如图32所示。
图32背景图片放置位置的示意图
在content瞓ox中定位背景图片的示例代码如下: div {
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}(6) background瞐ttachment。background瞐ttachment属性用于定义背景图像是否随对象内容滚动还是固定位置。其取值包括scroll(背景图像随对象内容滚动)和fixed(背景图像处在固定位置),默认值是scroll,也就是说在默认的情况下,背景会随文档滚动。
如果文档比较长,那么当文档向下滚动时背景图像也会随之滚动,当文档滚动到超过图像的位置时图像就会消失。可以通过background瞐ttachment属性防止这种滚动,通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。
对于背景图像固定的页面,浏览网页时可以看到页面滚动时背景仍保持固定,网页中的内容可以浮动在背景图像的不同位置。背景图像固定一般用于整个网页的背景设置,即设置body标签的背景属性,示例代码如下:body {
background-attachment: fixed;
background-image: url(../images/bg0301. jpg);
background-repeat: repeat-y;
}(7) background。background属性是一个复合属性,可以快速定义背景图像,其组成包括background瞔olor、background瞚mage、background瞤osition、background瞨epeat和background瞐ttachment,默认值为transparent none repeat scroll 0,如果其单个属性没有显式定义,则取其默认值,示例代码如下:background: #c63 url(images/0303bg01.gif) repeat-x left top fixed;该属性不可继承,如果未指定,其父元素的背景颜色和背景图像将在元素下面显示。
3. 背景定位的方法
1) 应用位置关键字
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right使图像放置在元素内边距区的右上角。根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字(一个对应水平方向,另一个对应垂直方向)。如果只出现一个关键字,则认为另一个关键字是center。所以,如果希望每个段落的中部上方出现一个图像,只需声明如下所示的代码。p {
background-image:url(‘bgimg.gif’);
background-repeat:no-repeat;
background-position:top;
}2) 应用百分数值
百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中,这很容易,示例代码如下: