欢迎光临
免费的PDF电子书下载网站
当前位置：网志栈 > 计算机/网络 > HTML5+CSS3跨平台网页设计实例教程 PDF下载

HTML5+CSS3跨平台网页设计实例教程 PDF下载

2020-12-21 分类：计算机/网络 阅读(781)

编辑推荐

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

内容简介

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

作者简介

暂无

HTML5+CSS3跨平台网页设计实例教程 PDF下载

目录

单元1站点与网页的创建1
【知识必备】1
【引导训练】4
任务11创建“单元1”站点并浏览网页4
任务111创建本地站点“单元1”4
任务112认识Dreamweaver CC的工作界面6
任务113打开与浏览网页文档0101.html10
任务12认知HTML5的典型标记和结构标签13
任务121分析HTML代码的组成结构13
任务122认知HTML5中典型的标记方法17
任务123认知HTML5主要的结构标签17
【同步训练】18
任务13打开并浏览网页0103.html18
【技术进阶】19
【问题探究】20
【单元习题】21
单元2网页中文本与段落的应用设计22
【知识必备】22
【引导训练】37
任务21制作阿坝概况的文本网页37
任务211建立站点及其目录结构38
任务212创建与保存网页文档0201.html40
任务213设置网页的首选项40
任务214设置页面的整体属性42
任务215在网页中输入文字48
任务216输入与编辑网页中的文本49
任务217格式化网页文本50
任务218设置超链接与浏览网页效果51
任务219在【代码】视图中查看CSS代码和HTML代码51
任务22使用CSS美化文本标题和文本段落55
【同步训练】61
任务23制作介绍九寨沟概况的文本网页61
【技术进阶】62
【问题探究】65
【单元习题】67
目录单元3网页中图像与背景的应用设计68
【知识必备】68
【引导训练】74
任务31制作介绍九寨沟景区景点的图文混排网页74
任务311使用【管理站点】对话框创建站点“单元3”75
任务312应用【文件】面板新建网页0301.html76
任务313设置页面的背景图像77
任务314在网页中输入所需的文本内容与设置文本格式78
任务315插入图像与设置图像属性79
任务316在“代码”视图中查看CSS代码和HTML代码81
任务32使用CSS美化网页文本与图片82
任务33创建多张图片并行排列的网页0303.html88
【同步训练】90
任务34在网页中设置图片与背景属性90
任务35创建图文混排的网页0305.html91
【技术进阶】91
【问题探究】96
【单元习题】98
单元4网页中列表与表格的应用设计99
【知识必备】99
【引导训练】105
任务41创建以项目列表形式表现新闻标题的网页105
任务42创建以项目列表形式表现图文按钮的网页109
任务43创建应用表格存放数据的网页114
任务44创建包含个性化表格的网页119
【同步训练】122
任务45创建项目列表为主的旅游攻略标题网页122
任务46创建包含5行3列表格的网页123
【技术进阶】123
【问题探究】124
【单元习题】127
单元5网页中超链接与导航栏的应用设计128
【知识必备】128
【引导训练】131
任务51设置网页中导航栏的超链接属性131
任务52制作包含横向主导航栏的网页134
任务53制作包含纵向栏目导航栏的网页139
任务54创建包含图像热点链接的网页141
【同步训练】145
任务55创建包含顶部横向导航栏的网页145
任务56创建包含多种不同形状图像链接的网页146
【技术进阶】146
【问题探究】150
【单元习题】151
单元6网页中表单与控件的应用设计152
【知识必备】152
【引导训练】158
任务61在网页中添加表单及表单控件158
任务62创建用户注册的表单网页164
【同步训练】171
任务63创建用户登录的表单网页171
任务64创建用户留言反馈网页172
【技术进阶】172
【问题探究】174
【单元习题】174
单元7网页中音频与视频的应用设计175
【知识必备】175
【引导训练】177
任务71设计基于HTML5的网页音乐播放器之一177
任务72设计基于HTML5的网页视频播放器之一179
【同步训练】180
任务73设计基于HTML5的网页音乐播放器之二180
任务74设计基于HTML5的网页视频播放器之二181
【技术进阶】182
【问题探究】183
【单元习题】184
单元8网页中图形绘制与操作的应用设计185
【知识必备】185
【引导训练】194
任务81网页中应用纯CSS绘制各种规则图形194
任务82网页中应用纯CSS绘制各种特色图形197
任务83网页中应用canvas元素绘制各种图形和文字200
任务84网页中绘制菊花图形206
【同步训练】208
任务85网页中绘制阴阳图和五角星208
任务86网页中绘制多种图形和图片208
【技术进阶】209
【问题探究】210
【单元习题】213
单元9网页中特效与交互的应用设计214
【知识必备】214
【引导训练】227
任务91网页中显示当前日期227
任务92网页中不同时间段显示不同的问候语231
任务93网页中制作圆角按钮和圆角图片234
任务94设计网页中的圆形导航按钮239
任务95网页中实现搜索框聚焦变长的效果242
任务96网页中应用CSS实现超酷导航菜单243
任务97网页中实现仿Office风格的多级菜单246
任务98网页中实现图片拖动操作251
【同步训练】254
任务99网页中不同的节假日显示不同的问候语254
任务910网页中创建下拉导航菜单255
【技术进阶】255
【问题探究】255
【单元习题】261
单元10网页中元素与整体布局的应用设计262
【知识必备】262
【引导训练】276
任务101体验网页的不同布局方式276
任务102创建浮动定位2列式布局的网页281
任务103创建等距排列的4列式布局网页289
任务104创建不规则布局网页295
【同步训练】300
任务105创建浮动定位2列规则分块的网页300
任务106创建3列式与4列式等距布局的网页301
【技术进阶】301
【问题探究】302
【单元习题】304
参考文献305
附录ACSS的属性306
附录BCSS的选择器307

前沿

目前,HTML5和CSS3已成为Web应用开发中的热门技术,HTML5和CSS3不仅是两项新的Web技术标准,更代表了HTML和CSS技术的发展趋势,是Web开发领域的一次重大改变。HTML5具有便捷的描述性标签、良好的多媒体支持、强大的Web应用、先进的选择器、精美的视觉效果、方便的操作、跨文档的消息通信、客户端的方便存储等诸多优势。HTML5的突出优点是该技术可以进行跨平台使用。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化方向发展的。CSS3中可以使用新的选择器和属性,而且可以很简单地设计出许多理想的展示效果。
本书具有以下特色和创新。
(1) 编者充分调研了HTML5、CSS3新技术的实际应用情况,精心挑选教学案例。本书开发前期对HTML5、CSS3新技术在网页中的实际应用情况做了大量细致的调研工作,经过多次筛选、优化和简化,最终形成了50多个典型教学案例,这些教学案例全部来自于真实网站,代表了网页应用设计的实际需求和最新水平。
(2) 全书合理选取教学内容,科学设置教学单元。让读者从网页设计实际应用的角度理解HTML5和CSS3的新元素和新功能,而不是过于注重学习HTML5和CSS3理论知识。同时，本书遵循学习者的认知规律,将基于HTML5 CSS3的网页应用设计分为10个单元。
(3) 全书充分考虑教学实施的实际需求,每个教学单元面向教学全过程合理设置了6个教学环节: 知识必备→引导训练→同步训练→技术进阶→问题探究→单元习题。书中将网页设计的相关理论知识分层次进行分析与呈现,将网页设计技能的训练分阶段实施,充分满足不同专业、不同层次学习者学习网页设计知识和训练网页设计技能的需求。全书还提供了500多道习题,让学习者通过大量的练习进一步加深对HTML5、CSS3、网页设计相关知识的理解,从而提升网页设计的操作技能。
(4) 全书围绕网页应用的实际需要来设计具有很强操作性的任务。采用“任务驱动、精讲多练、理论实践一体化”的教学方法,全方位促进基于HTML5 CSS3网页应用设计能力的提升。注重引导学习者在完成各个设计任务的过程中,逐步理解HTML5和CSS3的新功能和新特点,循序渐进地学会HTML5和CSS3的实际应用,从而熟练掌握网页设计的方法和具备网页设计的能力。
(5) 本书创新了教材的结构和呈现形式,采用纸质教材 电子书相结合的方式。由于纸质教材篇幅的限制,同时要保证教学内容的系统性,部分内容在纸质教材中只列出主干内容,完整内容通过扫描二维码可以在线浏览,各单元的习题也是以在线浏览方式提供。
(6) 本书配套教学资源丰富。教学单元设计、教学流程设计、网页任务设计、教学案例及素材、电子教稿等教学资源一应俱全,力求做到想师生之所想,急师生之所急。
本书由湖南铁道职业技术学院的陈承欢、颜珍平老师,包头轻工职业技术学院的韩耀坤老师共同编写,颜谦和、谢树新、吴献文、肖素华、林保康、王欢燕、张丹、王姿、裴来芝、潘玫玫、郭外萍、侯伟、张丽芳等多位老师也参与了教材的编写。
由于编者水平有限,书中难免存在疏漏之处,敬请各位专家和读者批评、指正。编者的QQ为1574819688，需要相关资源的读者可通过QQ与编者联系。

编者2018年2月

免费在线读

单元3网页中图像与背景的应用设计
(接正文是42mm)图像是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。
【知识必备】〖*2〗1. HTML5中常用的图片标签HTML5的图像标签如表31所示。表31HTML5的图像标签标签名称标 签 描 述标签名称标 签 描 述定义图像

定义figure元素的标题

定义图像映射

定义媒介内容的分组,以及它们的标题

定义图像地图内部的区域1)
标签

标签用于向网页中嵌入一幅图像。从技术上讲,
标签并不会在网页中插入图像,而是从网页上链接图像。
标签创建的是被引用图像的占位空间。
标签有两个必需的属性: src属性和alt属性。

2)

标签和
标签

标签表示一段独立的流内容(图像、图表、照片、代码等),一般表示文档主体流内容中的一个独立单元,figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。向文档中插入带有标题图像的示例代码如下:


九寨沟风光
HTML5+CSS3跨平台网页设计实例教程 PDF下载

其浏览效果如图31所示。

图31带标题的图片浏览效果

标签用于定义

元素的标题,figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。

2. CSS的背景设置与定位

1) 背景色的设置

CSS允许应用纯色作为背景,可以使用backgroundcolor属性为元素设置背景色,这个属性接受任何合法的颜色值。backgroundcolor属性用于设置元素的背景颜色,其取值为指定的颜色或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image属性,该属性的默认值是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image也不能继承,事实上,所有背景属性都不能继承。

(1) backgroundimage。backgroundimage属性用于定义对象的背景图像,当背景图像与背景颜色(backgroundcolor)同时被定义时,背景图像覆盖于背景颜色之上。其取值可以为none(无背景图像)或者为图像地址,可以使用绝对或相对地址指定背景图像。

(2) backgroundsize。backgroundsize属性用于定义背景图像的尺寸,其属性值可以为数值或者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position。backgroundposition属性用于定义对象背景图像的位置,应先定义对象的backgroundimage属性,该属性不受对象的填充属性padding的影响。默认值为0,即背景图像默认位于对象内容区块的左上角。如果只指定了一个值,该值将用于横坐标,纵坐标默认为50%。如果指定了两个值,第一个值用于横坐标,第二个值用于纵坐标。

背景图像的位置由backgroundpositionx和backgroundpositiony两个属性综合确定。backgroundpositionx定位背景图像的横坐标位置,默认值为0,其取值包括left、center、right和数值。backgroundpositiony定位背景图像的纵坐标位置,默认值为0,其取值包括top、center、bottom和数值。当背景图像的位置坐标定义为数值时,单位可以取长度单位,也可以为百分比。

下面的示例代码在body元素中将一个背景图像居中放置。body {

background-image:url(g_03.gif)；

background-repeat:no-repeat；

background-position:center；

}(4) backgroundrepeat。backgroundrepeat属性用于定义对象的背景图像是否重复以及如何平铺,应先定义对象的backgroundimage属性。其取值包括repeat(重复,即背景图像在纵向和横向上都平铺)、norepeat(不重复)、repeatx(横向平铺)和repeaty(纵向平铺)。

如果需要在页面上对背景图像进行平铺,可以使用backgroundrepeat属性。属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeatx和repeaty分别导致图像只在水平或垂直方向上重复,norepeat则不允许图像在任何方向上平铺。背景图像默认将从一个元素的左上角开始,示例代码如下: body {

background-image: url(bg_03.gif)；

background-repeat: repeat-y；

}网页设计时,经常使用横向重复属性使一些小图片形成大的背景图像,主要应用于导航栏、标题栏以及按钮等。

(5) backgroundorigin。backgroundorigin属性用于规定背景图片的定位区域,背景图片可以放置于contentbox、paddingbox或borderbox区域,示意图如图32所示。

图32背景图片放置位置的示意图

在contentbox中定位背景图片的示例代码如下: div {

background:url(bg_flower.gif)；

background-repeat:no-repeat；

background-size:100% 100%；

background-origin:content-box；

}(6) backgroundattachment。backgroundattachment属性用于定义背景图像是否随对象内容滚动还是固定位置。其取值包括scroll(背景图像随对象内容滚动)和fixed(背景图像处在固定位置),默认值是scroll,也就是说在默认的情况下,背景会随文档滚动。

如果文档比较长,那么当文档向下滚动时背景图像也会随之滚动,当文档滚动到超过图像的位置时图像就会消失。可以通过backgroundattachment属性防止这种滚动,通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

对于背景图像固定的页面,浏览网页时可以看到页面滚动时背景仍保持固定,网页中的内容可以浮动在背景图像的不同位置。背景图像固定一般用于整个网页的背景设置,即设置body标签的背景属性,示例代码如下:body {

background-attachment: fixed；

background-image: url(../images/bg0301. jpg)；

background-repeat: repeat-y；

}(7) background。background属性是一个复合属性,可以快速定义背景图像,其组成包括backgroundcolor、backgroundimage、backgroundposition、backgroundrepeat和backgroundattachment,默认值为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(gimg.gif)；

background-repeat:no-repeat；

background-position:top；

}2) 应用百分数值

百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中,这很容易,示例代码如下:

HTML5+CSS3跨平台网页设计实例教程 pdf下载声明

本pdf资料下载仅供个人学习和研究使用，不能用于商业用途，请在下载后24小时内删除。如果喜欢，请购买正版

pdf下载地址

版权归出版社和作者所有，下载链接已删除。如果喜欢，请购买正版！

链接地址：HTML5+CSS3跨平台网页设计实例教程

标签：

相关推荐

随机推荐

热门标签

图像 多媒体 (3653)程序设计 (788)mysql (15)redis (6)分布式 (4)kafka (2)红包 (2)缓存 (1)事务 (1)elasticsearch (1)postgresql (1)MongoDB (1)TCP/IP (1)高并发 (1)无广告免费影视 (1)免费HTTP代理 (1)