网页设计与制作（HTML5+CSS3+JavaScript）

本书以实用的案例、通俗易懂的语言详细介绍了使用HTML5、CSS3及JavaScript 进行网页制作的各方面内容和技巧。

本书以实用的案例、通俗易懂的语言详细介绍了使用HTML5、CSS3及JavaScript 进行网页制作的各方面内容和技巧。

全书共13 章，结合HTML5、CSS3 和JavaScript 的基础知识及应用，提供了100 多个课堂案例和1 个综合项目。其中，第1、2 章主要讲解网页制作的基础知识，包括网页、网站的概念以及网站制作工具的使用技巧；第3～10 章主要讲解HTML5/CSS3、盒子模型、列表与超链接、表单、元素的浮动与定位等静态网页搭建技巧；第11 章讲解使用JavaScript 为网页添加动态效果；第12 章讲解网站测试和发布的相关知识；第13 章为一个综合项目，带领读者按照项目流程开发了一个包含首页、个人中心页、注册页以及视频播放页的大型网站。

本书适合作为高等院校相关专业网页设计与制作课程的教材，也可作为网页平面设计的培训教材，是一本适合网页制作、美工设计、网站开发、网页编程等行业人员阅读与参考的优秀读物。

黑马程序员：江苏传智播客教育科技股份有限公司（简称传智播客）是一家专门致力于高素质软件开发人才培养的高科技公司。传智播客致力于为企业优选一流的人才的培训理念，经过多年的教学探索及战略布局，已向着综合型职业教育集团发展。目前，传智播客旗下已涵盖传智播客IT教育培训、黑马程序员训练营及博学谷三大子品牌。“黑马程序员”是传智播客旗下高端IT教育品牌。

第1章 网页和网站概述............ 1
1.1 网页和网站简介............................... 1
1.1.1 网页和网站基本概念............................ 1
1.1.2 网页基本构成要素..... 2
1.1.3 网站页面构成............ 4
1.1.4 网站类型.................... 5
1.1.5 浏览器概述................ 7
1.2 网站制作流程..................................10
1.3 网页设计原则..................................14
1.4 网页设计规范................................. 16
1.4.1 配色原则.................. 16
1.4.2 设计尺寸规范.......... 19
1.4.3 字体规范.................. 20
1.4.4 命名规范.................. 20
习题................................................. 20
第2章 使用网页制作工具......... 22
2.1 初识Dreamweaver工具......... 22
2.2 界面介绍............................................. 23
2.3 软件初始化设置............................ 27
2.4 Dreamweaver工具的基本操作........................................... 29
2.5 创建站点............................................. 31
2.5.1 认识站点.................. 32
2.5.2 建立站点.................. 32
2.5.3 管理站点.................. 33
2.6 创建模板.............................................34
2.6.1 认识模板.................. 35
2.6.2 创建模板.................. 35
2.6.3 编辑模板................... 37
2.6.4 管理模板................... 37
习题..................................................39
第3章 运用HTML5搭建网页结构.................... 40
3.1 HTML和HTML5........................ 40
3.1.1 认识HTML和HTML5................. 40
3.1.2 认识标签................... 41
3.1.3 文档基本格式........... 42
3.1.4 标签属性................... 43
3.1.5 HTML5文档头部相关标签................... 44
3.2 文本控制标签................................. 46
3.2.1 标题和段落标签....... 46
3.2.2 文本样式标签........... 49
3.2.3 文本格式化标签....... 50
3.2.4 特殊字符标签........... 51
3.3 图像标签.............................................51
3.3.1 常用图像格式........... 52
3.3.2 图像标签 ..... 52
3.3.3 绝对路径和相对路径.......................... 56
3.4 认识HTML5新标签....................57
习题..................................................58
第4章 运用CSS3设置网页样式... 59
4.1 认识CSS和CSS3...........................59
4.2 CSS核心基础.................................. 60
4.2.1 CSS样式规则............ 60
4.2.2 引入CSS样式表........ 62
4.2.3 CSS基础选择器........ 66
4.3 CSS文本样式.................................. 71
4.3.1 字体样式属性.......... 71
4.3.2 文本外观属性.......... 74
4.4 CSS高级属性..................................80
4.4.1 CSS层叠性和继承性.................. 80
4.4.2 CSS优先级................ 82
4.5 CSS3新增选择器.......................... 85
习题................................................. 87
第5章 运用盒子模型划分网页模块... 88
5.1 盒子模型概述.................................. 88
5.1.1 认识盒子模型.......... 88
5.1.2 标签................ 89
5.1.3 盒子的宽与高.......... 90
5.2 盒子模型相关属性....................... 91
5.2.1 边框属性.................. 91
5.2.2 内边距属性.............. 98
5.2.3 外边距属性.............. 99
5.2.4 box-shadow属性.....101
5.2.5 box-sizing属性........102
5.2.6 背景属性.................104
5.3 元素类型与转换......................... 112
5.3.1 元素的类型.............112
5.3.2 标签.............113
5.3.3 元素的转换.............115
5.4 块元素垂直外边距的合并... 115
5.4.1 相邻块元素垂直
外边距的合并.........115
5.4.2 嵌套块元素垂直
外边距的合并.........116
习题............................................... 117
第6章 为网页添加列表和超链接...119
6.1 列表标签......................................... 119
6.1.1 无序列表......... 119
6.1.2 有序列表......... 121
6.1.3 定义列表......... 122
6.2 CSS控制列表样式.....................123
6.2.1 list-style-type属性.... 123
6.2.2 list-style-image属性........................ 125
6.2.3 list-style-position属性........................ 125
6.2.4 list-style属性........... 127
6.3 超链接标签.....................................128
6.3.1 创建超链接............. 128
6.3.2 锚点链接................. 130
6.4 链接伪类控制超链接...............131
习题................................................133
第7章 为网页添加表格和表单.... 134
7.1 表格标签......................................... 134
7.1.1 创建表格................. 134
7.1.2

标签的属性........................ 1367.1.3 标签的属性..... 1397.1.4 标签的属性..... 141
7.1.5 标签................ 143
7.2 CSS控制表格样式.................... 143
7.2.1 CSS控制表格边框.... 143
7.2.2 CSS控制单元格边距........................ 145
7.2.3 CSS控制单元格宽高........................ 147
7.3 认识表单......................................... 148
7.3.1 表单的构成............. 148
7.3.2 创建表单................. 148
7.3.3 表单属性................. 149
7.4 表单控件......................................... 150
7.4.1 input控件................ 150
7.4.2 标签的type属性..................151
7.4.3 标签的其他属性.................156
7.4.4 textarea控件.............159
7.4.5 select控件.................160
7.4.6 datalist控件...............162
7.5 CSS控制表单样式.................... 162
习题............................................... 164
第8章 运用浮动和定位布局网页...166
8.1 布局概述......................................... 166
8.2 布局常用属性............................... 167
8.2.1 标签的浮动属性......167
8.2.2 标签的定位属性......175
8.3 布局其他属性...............................180
8.3.1 overflow属性...........180
8.3.2 Z-index标签层叠....182
8.4 布局类型......................................... 182
8.4.1 单列布局.................182
8.4.2 两列布局.................184
8.4.3 三列布局.................185
8.5 网页模块命名规范.................... 189
习题............................................... 190
第9章 全新的网页视听技术......191
9.1 音频、视频嵌入技术.............. 191
9.1.1 传统音频、视频嵌入方式.........................191
9.1.2 使用嵌入视频.........................192
9.1.3 使用嵌入音频.........................193
9.1.4 浏览器对音视频文件的兼容性.....................194
9.1.5 控制视频的宽高......196
9.2 过渡.................................................... 198
9.2.1 transition-property
属性........................ 198
9.2.2 transition-duration
属性........................ 200
9.2.3 transition-timingfunction
属性........... 200
9.2.4 transition-delay
属性........................ 201
9.2.5 transition属性.......... 202
9.3 变形.................................................... 202
9.3.1 2D变形.................... 202
9.3.2 3D变形.................... 207
9.4 动画.....................................................212
9.4.1 @keyframes ............. 212
9.4.2 animation-name属性........................ 213
9.4.3 animation-duration属性........................ 213
9.4.4 animation-timingfunction属性........... 214
9.4.5 animation-delay属性........................ 214
9.4.6 animation-iterationcount属性............... 215
9.4.7 animation-direction属性........................ 215
9.4.8 animation属性......... 216
习题................................................217
第10章 CSS应用技巧.......... 218
10.1 CSS精灵技术.............................218
10.1.1 认识CSS精灵........ 218
10.1.2 应用CSS精灵........ 219
10.2 CSS滑动门技术.......................222
10.2.1 认识滑动门........... 222
10.2.2 使用滑动门制作导航条...................223
10.3 margin设置负值技巧......... 226
10.3.1 margin负值基本应用.......................226
10.3.2 利用margin负值制作压线效果...............228
习题............................................... 231
第11章 JavaScript基础知识....232
11.1 初识JavaScript ...................... 232
11.1.1 JavaScript简介........234
11.1.2 JavaScript语法规则.......................235
11.1.3 JavaScript引入方式.......................237
11.1.4 JavaScript常用输出语句.......................238
11.1.5 简单的JavaScript页面.......................238
11.2 JavaScript基础入门...........240
11.2.1 数据类型...............240
11.2.2 数据基本操作........241
11.2.3 常见的流程控制语句.......................243
11.2.4 函数.......................247
11.2.5 对象.......................249
11.2.6 事件和事件调用.....254
11.2.7 常见的JavaScript事件.......................255
11.3 网页中常见的JavaScript特效................................................. 256
11.3.1 验证码...................256
11.3.2 焦点图轮播...........258
习题................................................262
第12章 测试和发布网站........ 264
12.1 网站测试...................................... 264
12.2 网站发布.......................................265
12.2.1 域名....................... 265
12.2.2 服务器空间........... 269
12.2.3 网站的上传........... 270
习题................................................276
第13章 综合项目实战：摄影▪开课吧........... 277
13.1 网页设计规划............................277
13.1.1 确定网站主题....... 277
13.1.2 规划网站结构....... 278
13.1.3 收集素材............... 278
13.1.4 设计网页效果图.... 279
13.2 使用Dreamweaver工具建立站点..................................................281
13.3 切图..................................................282
13.4 搭建首页.......................................283
13.4.1 效果图分析........... 284
13.4.2 首页制作............... 285
13.5 制作模板.......................................298
13.5.1 建立模板的步骤..... 298
13.5.2 引用模板............... 302
13.6 使用模板搭建网页................ 302
13.6.1 搭建注册页........... 302
13.6.2 搭建个人中心页面...................... 305
13.6.3 搭建视频播放页.................. 309
13.7 测试和上传................................. 314

在这个以互联网产业为基础的时代，很多企业非常重视网站的建设。一个设计精良的网站不仅代表了企业的品牌形象，还能够推广宣传企业，为企业发掘潜在的客户。HTML5、CSS3、JavaScript作为网站建设技术的三要素，已成为网站设计人员的必备技术。

为什么学习本书

目前关于网站制作技术类的书籍较多，但大多偏向于某一块的知识，例如界面设计、HTML5、JavaScript等，使得网站建设人员缺乏对完整项目实现过程的深入了解。如何制作网站？我们学习的这些技术应用在网页制作的哪个环节？许多初学者学完之后，依然会有这样的疑问。因此，系统全面地学习网站制作的相关知识，是当下网页设计人员亟待解决的问题。

本书以实用的课堂案例、通俗易懂的语言详细介绍了使用HTML5、CSS3及JavaScript进行网页制作的各方面内容和技巧。同时以一个综合项目对前面的知识进行总结回顾，力求让不同层次的读者，全面系统快速地掌握网站建设的基础知识，具备搭建静态页面的能力。

如何使用本书

本书涵盖了静态网站搭建中需要重点掌握的技术，主要针对零基础或具备一定网站建设能力的人群。教材以既定的编写体例（理论+案例）规划所学知识点，以网站制作的基本流程为主线，详细讲解了静态页面搭建的相关技巧，力求让不同层次的网页设计师快速掌握网站制作技巧。

本书分为13章，结合HTML5、CSS3和JavaScript的基础知识及应用，提供了100多个课堂案例和1个综合实训项目，在帮助读者消化吸收知识的同时快速掌握网页设计技巧。各章讲解内容介绍如下。
第1 章：介绍了网站的基础知识，包括网页、网站的概念、网页设计流程以及网页设计规范等内容；
第2 章：介绍了Dreamweaver 工具的基本操作，包括界面介绍、软件初始化设置、站点和模板的建立等内容；
第3、4 章：介绍了HTML 和CSS 基础知识，包括常用HTML 基础标记、HTML5新增标记、CSS 基础样式等CSS3 新增选择器内容；
第5～8 章：介绍了静态网页搭建的应用技巧，包括盒子模型、列表、表格、表单、浮动和定位布局网页等内容；
第9 章：介绍了音频、视频、动画在网页中的应用技巧，包括音视频嵌入网页、过渡、变形、动画等内容；
第10 章：介绍了网页制作中一些常用的CSS 高阶技巧，包括CSS 精灵技术、滑动门技术、margin 负值压线技术；
第11 章：介绍了JavaScript 基础知识，包括JavaScript 语法、数据类型、函数、对象、事件等内容；
第12 章：介绍了网页测试和发布的相关知识，包括网站测试、域名和空间申请、网站上传等内容；
第13 章：是一个综合项目，包括网站规划、界面设计、静态页面搭建、网页动效实现等一系列完整的网站建设过程，是贯穿全书的综合项目。

本书以网站设计制作流程为主线，语言通俗易懂，内容丰富，知识涵盖面广，非常适合网站开发的初学者、网站建设人员以及大学选修课或自学网页设计的学生阅读。

本书附有源代码、习题、教学课件等资源，而且为了帮助初学者更好地学习本书讲解的内容，还提供了在线答疑，希望得到更多读者的关注。

致谢

本书的编写和整理工作由传智播客教育科技股份有限公司完成，主要参与人员有吕春林、高美云、王哲、孟方思等，全体人员在编写过程中付出了很多辛勤的汗水，在此一并表示衷心的感谢。

意见反馈

尽管我们尽了大的努力，但教材中仍难免会有疏漏与不妥之处，欢迎各界专家和读者朋友们来信提出宝贵意见，我们将不胜感激。您在阅读本书时，如发现任何问题或有不认同之处可以通过电子邮件与我们取得联系。
请发送电子邮件至：itcast_book@vip.sina.com
黑马程序员
2018年7月16日于北京