中图网文创礼盒，买2个减5元 读者节开场福利
818读者节|每满100减50，文创免费送
欢迎光临中图网 请 | 注册
搜索
搜索全部
  • 搜索全部
  • 书名
  • 作者
  • 出版社
  • ISBN
高级搜索
我身体里的人造星星乡间的日常情感勒索神秘的黑猫
  • 合成诗经
  • 新人领礼券
  • 新用户注册领10元
中图网
>
计算机/网络
>
计算机教材
高职高专计算机任务驱动模式教材HTML5+CSS3跨平台网页设计实例教程
分享

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

作者：陈承欢韩耀坤颜珍平
出版社：清华大学出版社出版时间：2017-04-01
开本： 其他 页数： 304
本类榜单：计算机/网络销量榜
中 图 价:¥27.4(5.6折) 定价  ¥49.0 登录后可看到会员价
加入购物车 收藏
运费6元，满39元免运费
?新疆、西藏除外
本类五星书更多>
中图价:¥27.4 加入购物车
洞明世事，从读书开始 淘书团

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

  • ISBN：9787302502142
  • 条形码：9787302502142 ; 978-7-302-50214-2
  • 装帧：一般胶版纸
  • 册数：暂无
  • 重量：暂无
  • 所属分类：
    计算机/网络
    >
    计算机教材

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

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

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

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

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

单元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跨平台网页设计实例教程 节选

单元3网页中图像与背景的应用设计 (接正文是42mm)图像是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。 【知识**】〖*2〗1. HTML5中常用的图片标签HTML5的图像标签如表31所示。表31HTML5的图像标签标签名称标 签 描 述标签名称标 签 描 述定义图像定义figure元素的标题定义图像映射定义媒介内容的分组,以及它们的标题定义图像地图内部的区域1) 标签 标签用于向网页中嵌入一幅图像。从技术上讲,标签并不会在网页中插入图像,而是从网页上链接图像。标签创建的是被引用图像的占位空间。标签有两个必需的属性: src属性和alt属性。 2) 标签和标签 标签表示一段独立的流内容(图像、图表、照片、代码等),一般表示文档主体流内容中的一个独立单元,figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。向文档中插入带有标题图像的示例代码如下: 九寨沟风光 其浏览效果如图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('bg_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('bgimg.gif'); background-repeat:no-repeat; background-position:top; }2) 应用百分数值 百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中,这很容易,示例代码如下:

商品评论(0条)
写书评 赚书币
暂无评论……
书友推荐
本类畅销
编辑推荐
返回顶部
新手上路
新用户指引
注册用户 更改注册信息
购物常见问题
关于特价书的常见问题
购买问题
订单跟踪
付款方式
账户余额  申请提现
配送方式及费用、范围
集团购买
售后服务
退换货流程
投诉与建议
特色服务
会员等级与书币
中图网书馨卡
邀请好友购买返10元礼包
其他信息
本站简介
联系我们
招聘英才
网站联盟
友情链接
微信公众号
中图网微信
中图网微博
中图网微博
手机中图网
手机中图网
中图网
诚信认证 电子商务诚信单位认证

京ICP备09013606号-3京信市监发[2002]122号海淀公安分局备案编号：1101083394

营业执照出版物经营许可证 京出发京批字第直110071

在线客服