精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)

更多详情

内容简介: HTML5、CSS3和JavaScript技术是网页设计的精髓,本书以应用实例和综合实战案例的形式逐一详解HTML5网页设计的文档结构、文本、图像、用HTML5创建超链接、表格、使用表单;用CSS3设置表格和表单的样式、美化图片、背景和边框;讲述JavaScript内置对象、对象编程、JavaScript操纵CSS3、HTML5绘制图形、HTML5中的音频和视频、使用jQuery Mobile设计移动页面等网页设计的方法和技巧。
通过对本书实例和综合实战案例的学习与演练,读者可以尽快掌握所学的知识,提高网页设计的实战能力;同时本书提供实例源代码,可供读者直接查看和调用,以便快速上手或进行二次开发。
本书内容丰富、理论结合实践,对从事网站美工工作的读者而言,是一本必不可少的工具书;对从事Web系统开发的读者来说,也是一本难得的参考手册。

目录:
第1章  HTML5快速入门    1
1.1  HTML5概述    1
1.2  HTML5的文档结构    3
1.2.1  文档类型说明    3
1.2.2  HTML标记    3
1.2.3  头标记head    3
1.2.4  网页的主体标记body    7
1.2.5  页面注释标记    7
1.3  HTML5文件的编写方法    8
1.3.1  使用记事本手工编写HTML文件    8
1.3.2  使用Dreamweaver CC编写HTML文件    9
1.4  HTML5语法的新变化    11
1.4.1  标签不再区分大小写    11
1.4.2  允许属性值不使用引号    12
1.4.3  允许部分属性值的属性省略    12
1.5  专家解惑    13
第2章   HTML5网页中的文本和图像    15
2.1  添加文本    15
2.1.1  普通文本    15
2.1.2  特殊文字符号    16
2.1.3  文本特殊样式    17
2.2  文本排版    19
2.2.1  换行标记
与段落标记    19
2.2.2  标题标记~    21
2.3  文字列表    22
2.3.1  建立无序列表    23
2.3.2  建立有序列表    24
2.4  网页中的图像    25
2.4.1  网页中支持的图片格式    26
2.4.2  使用路径    26
2.4.3  网页中插入图像标记    28
2.5  综合实例—图文并茂房屋装饰装修网页    31
2.6  专家解惑    32
第3章  用HTML5建立超链接    34
3.1  URL的概念    34
3.1.1  URL的格式    34
3.1.2  URL的类型    35
3.2  超链接标记    36
3.2.1  设置文本和图片的超链接    36
3.2.2  超链接指向的目标类型    37
3.2.3  设置以新窗口显示超链接页面    39
3.3  创建热点区域    40
3.4  浮动框架iframe    41
3.5  综合实例—用Dreamweaver精确定位热点区域    42
3.6  专家解惑    44
第4章  用HTML5创建表格    46
4.1  表格基本结构及操作    46
4.1.1  表格基本结构    46
4.1.2  合并单元格    48
4.2  完整的表格标记    52
4.3  综合实例—制作计算机报价单    54
4.4  专家解惑    56
第5章  使用表单    58
5.1  表单概述    58
5.2  表单基本元素的使用    59
5.2.1  单行文本输入框text    59
5.2.2  多行文本框标记    60
5.2.3  密码输入框password    61
5.2.4  单选按钮radio    61
5.2.5  复选框checkbox    62
5.2.6  选择列表标记    63
5.2.7  普通按钮button    64
5.2.8  提交按钮submit    65
5.2.9  重置按钮reset    66
5.3  表单高级元素的使用    67
5.3.1  url属性    67
5.3.2  email属性    68
5.3.3  date和times属性    69
5.3.4  number属性    70
5.3.5  range属性    71
5.3.6  required属性    72
5.4  综合实例—创建用户反馈表单    72
5.5  专家解惑    74
第6章  CSS3快速入门    75
6.1  CSS3介绍    75
6.1.1  CSS3功能    75
6.1.2  CSS3发展历史    76
6.1.3  浏览器与CSS3    76
6.2  编辑和浏览CSS    77
6.2.1  CSS基础语法    77
6.2.2  使用记事本手工编写CSS文件    78
6.2.3  使用Dreamweaver CC创建CSS文件    79
6.3  在HTML5中使用CSS3的方法    80
6.3.1  行内样式    80
6.3.2  内嵌样式    81
6.3.3  链接样式    83
6.3.4  导入样式    84
6.3.5  优先级问题    86
6.4  CSS3选择器    88
6.4.1  标记选择器    89
6.4.2  类选择器    90
6.4.3  ID选择器    91
6.4.4  全局选择器    93
6.4.5  组合选择器    94
6.4.6  继承选择器    95
6.4.7  伪类    97
6.4.8  属性选择器    98
6.4.9  结构伪类选择器    100
6.4.10  UI元素状态伪类选择器    101
6.5  选择器声明    103
6.5.1  集体声明    103
6.5.2  多重嵌套声明    104
6.6  综合实例1—制作五彩标题    105
6.7  综合实例2—制作新闻菜单    108
6.8  专家解惑    111
第7章  CSS3字体与段落属性    112
7.1  字体属性    112
7.1.1  字体font-family    112
7.1.2  字号font-size    113
7.1.3  字体风格font-style    115
7.1.4  加粗字体font-weight    116
7.1.5  小写字母转为大写字母font-variant    117
7.1.6  字体复合属性font    118
7.1.7  字体颜色color    119
7.2  文本高级样式    121
7.2.1  阴影文本text-shadow    121
7.2.2  溢出文本text-overflow    122
7.2.3  控制换行word-wrap    123
7.2.4  保持字体尺寸不变font-size-adjust    125
7.3  段落属性    126
7.3.1  单词间隔word-spacing    126
7.3.2  字符间隔letter-spacing    127
7.3.3  文字修饰text-decoration    128
7.3.4  垂直对齐方式vertical-align    129
7.3.5  文本转换text-transform    131
7.3.6  水平对齐方式text-align    132
7.3.7  文本缩进text-indent    134
7.3.8  文本行高line-height    135
7.3.9  处理空白white-space    136
7.3.10  文本反排unicode-bidi和direction    137
7.4  综合实例1—制作旅游宣传网页    139
7.5  综合实例2—网页简单图文混排    143
7.6  专家解惑    145
第8章  CSS3美化表格和表单样式    146
8.1  表格基本样式    146
8.1.1  表格边框样式    146
8.1.2  表格边框宽度    149
8.1.3  表格边框颜色    150
8.2  CSS3与表单    151
8.2.1  美化表单元素    152
8.2.2  美化提交按钮    154
8.2.3  美化下拉菜单    155
8.3  综合实例1—隔行变色    157
8.4  综合实例2—表格图文网页布局    160
8.5  综合实例3—变色表格    162
8.6  综合实例4—登录表单    165
8.7  综合实例5—注册表单    167
8.8  专家解惑    170
第9章  CSS3美化图像    171
9.1  图片样式    171
9.1.1  图片边框    171
9.1.2  图片缩放    173
9.2  对齐图片    176
9.2.1  横向对齐方式    176
9.2.2  纵向对齐方式    177
9.3  图文混排    179
9.3.1  文字环绕    179
9.3.2  设置图片与文字间距    180
9.4  综合实例1—一句话新闻    181
9.5  综合实例2—学校宣传单    185
9.6  专家解惑    187
第10章  CSS3美化背景与边框    188
10.1  背景相关属性    188
10.1.1  背景颜色    188
10.1.2  背景图片    190
10.1.3  背景图片重复    191
10.1.4  背景图片显示    192
10.1.5  背景图片位置    194
10.1.6  背景图片大小    196
10.1.7  背景显示区域    197
10.1.8  背景图像裁剪区域    199
10.1.9  背景复合属性    200
10.2  边框    201
10.2.1  边框样式    201
10.2.2  边框颜色    203
10.2.3  边框线宽    204
10.2.4  边框复合属性    206
10.3   圆角边框    207
10.3.1  圆角边框属性    207
10.3.2  指定两个圆角半径    208
10.3.3  绘制四个不同圆角边框    209
10.3.4  绘制边框种类    212
10.4  图片边框    213
10.4.1  图片边框属性    213
10.4.2  设置图像边框显示方式    215
10.5  综合实例—设计公司主页    217
10.6  专家解惑    221
第11章   JavaScript概述    222
11.1  JavaScript简介    222
11.1.1  JavaScript是什么    222
11.1.2  JavaScript和Java的关系    223
11.1.3  JavaScript的发展历史    224
11.1.4  JavaScript开发及运行环境    225
11.2  在HTML5文件中使用JavaScript代码    226
11.2.1  JavaScript嵌入HTML5文件    226
11.2.2  外部JavaScript文件    227
11.3  综合实例—欢迎光临网站的JavaScript程序    228
11.4  专家解惑    230
第12章  JavaScript语言基础    231
12.1  数据类型与变量    231
12.1.1  数据类型    231
12.1.2  变量    234
12.1.3  保留关键字    235
12.2  运算符与表达式    236
12.2.1  算术运算符及其表达式    237
12.2.2  赋值运算符及其表达式    237
12.2.3  关系运算符及其表达式    239
12.2.4  位运算符及其表达式    239
12.2.5  逻辑运算符与逻辑表达式    240
12.2.6  其他运算符及运算符优先级    241
12.3  流程控制语句    242
12.3.1  注释语句和语句块    243
12.3.2  选择语句    244
12.3.3  循环语句    251
12.4  函数    255
12.4.1  函数简介    255
12.4.2  定义函数    255
12.4.3  调用函数    259
12.4.4  系统函数    261
12.5  综合实例—购物简易计算器    264
12.6  专家解惑    267
第13章   JavaScript内置对象    268
13.1  字符串对象    268
13.1.1  字符串对象的创建    268
13.1.2  字符串对象的常用属性    269
13.1.3  字符串对象的常用函数    269
13.2  数学对象    272
13.2.1  数学对象的属性    272
13.2.2  数学对象的函数    272
13.3  日期对象    276
13.3.1  创建日期对象    276
13.3.2  日期对象的常用函数    278
13.3.3  日期间的运算    280
13.4  数组对象    281
13.4.1  数组对象的创建    282
13.4.2  数组对象的操作    283
13.4.3  数组对象的常用方法    285
13.5  综合实例—随机验证码和动态时钟    289
13.6  专家解惑    293
第14章  JavaScript对象编程    295
14.1  文档对象模型    295
14.1.1  文档对象模型概述    295
14.1.2  在DOM模型中获得对象的方法    296
14.1.3  事件驱动    297
14.2  窗口对象    299
14.2.1  窗口概述    299
14.2.2  对话框    302
14.2.3  窗口操作    304
14.3  文档对象    306
14.3.1  文档的属性    306
14.3.2  文档中的图片    308
14.3.3  文档中的超链接    309
14.4  表单对象    311
14.4.1  form对象    311
14.4.2  form对象属性与方法    312
14.4.3  单选与复选的使用    314
14.4.4  使用下拉菜单    315
14.5  综合实例1—表单注册与表单验证    317
14.6  综合实例2—省市联动效果    322
14.7  专家解惑    326
第15章  JavaScript操纵CSS3    327
15.1  DHTML简介    327
15.2  前台动态网页效果    328
15.2.1  动态内容    328
15.2.2  动态样式    329
15.2.3  动态定位    331
15.2.4  显示与隐藏    333
15.3  综合实例1—JS控制表单背景色和文字提示    334
15.4  综合实例2—实现即时验证效果    337
15.5  专家解惑    339
第16章  HTML5绘制图形    341
16.1  canvas概述    341
16.1.1  添加canvas元素    341
16.1.2  绘制矩形    342
16.2  绘制基本形状    343
16.2.1  绘制圆形    343
16.2.2  使用moveTo与lineTo绘制直线    345
16.2.3  使用bezierCurveTo绘制贝塞尔曲线    346
16.3  绘制渐变图形    348
16.3.1  绘制线性渐变    349
16.3.2  绘制径向渐变    350
16.4  绘制变形图形    351
16.4.1  变换原点坐标    352
16.4.2  图形缩放    353
16.4.3  旋转图形    354
16.5  图形组合    356
16.6  绘制带阴影的图形    358
16.7  使用图像    359
16.7.1  绘制图像    359
16.7.2  图像平铺    360
16.7.3  图像裁剪    362
16.7.4  像素处理    364
16.8  绘制文字    366
16.9  图形的保存与恢复    368
16.9.1  保存与恢复状态    368
16.9.2  保存文件    369
16.10  综合实例1—绘制商标    371
16.11  综合实例2—绘制火柴棒人物    372
16.12  综合实例3—制时钟    376
16.13  专家解惑    380
第17章  HTML5中的音频和视频    381
17.1  标记    381
17.1.1  标记概述    381
17.1.2  标记的属性    382
17.1.3  音频解码器    383
17.1.4  标记浏览器的支持情况    383
17.2  标记    383
17.2.1  标记概述    383
17.2.2  标记的属性    384
17.2.3  视频解码器    385
17.2.4  标记浏览器的支持情况    385
17.3  音频和视频中的方法    386
17.3.1  canPlayType()方法    386
17.3.2  load()方法    387
17.3.3  play()方法和pause()方法    388
17.4  音频和视频中的属性    389
17.4.1  autoplay 属性    389
17.4.2  buffered 属性    391
17.4.3  controls属性    392
17.4.4  currentSrc属性    394
17.5  专家解惑    395
第18章  地理定位、离线Web应用 和Web存储    396
18.1  获取地理位置    396
18.1.1  地理定位的原理    396
18.1.2  地理定位的函数    397
18.1.3  指定纬度和经度坐标    397
18.1.4  目前浏览器对地理定位的支持情况    399
18.2  HTML5离线Web应用    399
18.2.1  新增的本地缓存    399
18.2.2  本地缓存的管理者——manifest文件    399
18.2.3  浏览器网页缓存与本地缓存的区别    401
18.2.4  目前浏览器对Web离线应用的支持情况    401
18.3  Web存储    401
18.3.1  本地存储和Cookies的区别    402
18.3.2  在客户端存储数据    402
18.3.3  sessionStorage函数    402
18.3.4  localStorage函数    404
18.3.5  目前浏览器对Web存储的支持情况    405
18.4  专家解惑    406
第19章  使用jQuery Mobile设计移动页面    407
19.1  jQuery Mobile概述    407
19.2  跨平台移动设备网页    408
19.2.1  移动设备模拟器    408
19.2.2  jQuery Mobile的安装    410
19.3  jQuery Mobile网页的架构    411
19.4  使用UI组件    412
19.5  导航条    422
19.6  使用jQuery Mobile主题    425
19.7  创建多页面的jQuery Mobile网页    429
19.8  制作对话框效果    430
19.9  绚丽多彩的页面切换效果    432
19.10  大神解惑    434
第20章  项目实训1 —设计企业门户网站    435
20.1  构思布局    435
20.1.1  设计分析    435
20.1.2  排版架构    436
20.2  模块分割    437
20.2.1  Logo与导航菜单    437
20.2.2  左侧文本介绍    439
20.2.3  右侧导航链接    441
20.2.4  版权信息    443
20.3  整体调整    444
20.4  专家解惑    445
第21章   项目实训2—设计星际争霸的网页游戏    446
21.1  游戏概述    446
21.2  游戏需求分析    447
21.3  HTML5、CSS和JavaScript搭配实现    448
21.3.1  基本的HTML5结构和标记    448
21.3.2  使用CSS修改页面    449
21.3.3  编写JavaScript程序    450
第22章   项目实训3—设计手机移动类网站    457
22.1  项目概述    457
22.2  项目开发前必备知识    457
22.2.1  Camera插件    458
22.2.2  Swipebox插件    460
22.3  项目实现    462
22.3.1  首页    462
22.3.2  宠物图片展示页面    465
22.3.3  咨询页面    467
22.3.4  注册页面    469


前言: 前  言
HTML5 CSS3 JavaScript技术具有布局标准和样式精美的特点,成为Web 2.0众多技术中最受欢迎的网页设计技术。HTML5 CSS3 JavaScript技术的应用范围越来越广,例如门户网站、BBS、博客、在线影视等。HTML5、CSS3和JavaScript三者的结合,使网页样式布局和美化达到了一个不可思议的高度。引领读者快速学习和掌握新的设计模式是本书的初衷。
本书内容
第1章是HTML5快速入门,包括HTML5的基本概念、HTML5网页文档结构、HTML5文件的编写方法和HTML5语法的新变化。
第2章介绍HTML5网页中的文本和图像,包括添加文本、文本排版、文字列表和网页中的图像等。
第3章介绍用HTML5建立超链接,包括URL的概念、超链接标记、创建热点区域和浮动框架iframe等。
第4章介绍用HTML5创建表格,包括表格基本结构及操作、完整的表格标记和制作计算机标价表等。
第5章介绍使用表单,包括表单概述、表单基本元素的使用和表单高级元素的使用等。
第6章是CSS3概述,包括CSS3基本概念、编写与浏览CSS3,以及在HTML5中使用CSS3的方法。
第7章介绍CSS3中文字与段落属性,主要包括字体属性、文本高级样式和段落属性。最后通过两个综合实例,进一步讲述如何设置公司标题和旅游网页混排的方法和技巧。
第8章介绍用CSS3设置表格和表单的样式,包括表格基本样式和CSS3与表单,并通过5个综合实例进一步讲述表单和表格样式的制作方法和技巧。
第9章介绍CSS3美化图片,主要包括图片样式、图片的对齐和图文混排等。
第10章介绍CSS3美化背景与边框,主要包括背景相关属性、边框、圆角边框、图像边框和边距,最后通过1个综合实例进一步讲述如何制作圆角边框效果。
第11章是JavaScript概述,包括JavaScript简介、在HTML5文件中使用JavaScript代码等。
第12章介绍JavaScript语言基础,包括数据类型与变量、运算符与表达式、流程控制语句和函数等。
第13章介绍JavaScript内置对象,包括字符串对象、数学对象、日期对象和数组对象等。
第14章介绍JavaScript对象编程,包括文档对象模型、窗口对象、文档对象和表单对象等。
第15章介绍JavaScript操纵CSS3,包括DHTML简介、前台动态网页效果、JS控制表单背景色、文字提示和实现即时验证效果等。
第16章介绍HTML5绘制图形,包括canvas概述、绘制基本形状、绘制渐变图形、绘制变形图形、图形组合、绘制带阴影的图形、使用图像、绘制文字和图形的保存和恢复等。
第17章介绍在HTML5中的音频和视频,包括标记和标记等。
第18章介绍地理定位和离线Web应用,包括地理定位、离线Web应用和Web存储技术。
第19章介绍使用jQuery Mobile设计移动页面,包括jQuery Mobile概述、跨平台移动设备网页、jQuery Mobile网页的架构、使用UI组件、导航条、使用jQuery Mobile主题、创建多页面的jQuery Mobile网页、制作对话框效果、绚丽多彩的页面切换效果。
第20章介绍企业门户型网站的综合实战案例。
第21章介绍在线游戏类网站的综合实战案例。
第22章介绍手机移动类网站的综合实战案例。
本书特色
知识全面:知识由浅入深,涵盖所有HTML5、CSS3和JavaScript知识点,便于读者循序渐进地掌握HTML5 CSS3 JavaScript网页布局技术。
图文并茂:注重操作,图文并茂,在介绍案例的过程中,每一个操作均有对应的插图。这种图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程以及效果,便于更快地理解和掌握。
易学易用:颠覆传统“看”书的观念,变成一本能“操作”的图书。
案例丰富:把知识点融汇于系统的案例实训当中,并且结合经典案例进行讲解和拓展,进而达到“知其然,并知其所以然”的效果。
贴心周到:本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“技巧”的形式进行了说明,以免读者在学习的过程中走弯路。
代码支持:本书提供实例和综合实战案例的源代码,可让读者在实战应用中掌握网页布局的每一项技能,真正体现“自学无忧”,是一本物超所值的好书。
技术支持:读者可加入QQ群,索要源代码、教学幻灯片和精品教学视频,讨论相关问题。
读者对象
本书是一本完整介绍HTML5 CSS3 JavaScript网页制作技术的教程,内容丰富,条理清晰,实用性强,适合如下读者学习使用:
●    对网页制作有兴趣的读者,可以快速上手制作精美网页。
●    对从事美工工作的读者,是必不可少的工具书。
源码、课件与教学视频下载
本书源码课件与教学视频下载地址请扫描右边二维码获取。如果下载有问题,请联系,邮件主题为“精通H5C3JS”。
鸣谢
本书由王英英编著,参与编写的还有贾文学、肖品、胡霞、贺盼盼、胡秀芳、郑玉超、纪克新、唐跃爱、李爱玲、郭红侠、李茂有、贺金刚、李鑫、郭红梅、马继梅、郑思贤、贾福运、贺单单、王二帅、郭红民、张工厂、邓爱玲、谢德胜、李友洪、郭推、申小相、覃达朝、张开保、陈敏敏、庞世芳、陈莹莹、贺积回、贺咸阳、李爱勤、许金花、张国年、王永超、刘增杰、李小威、张桐嘉、杨翔艳等。本书虽然倾注了编者的心血,但由于水平有限,书中难免有疏漏之处,敬请谅解。如果遇到问题或有意见和建议,请与我们联系,我们将全力提供帮助
编    者
2019年2月