网页制作与网站建设实战教程

　　在当今以互联网产业为基础的时代，网站建设已经成为很多企业重视的问题。我们认为有必要出一本知识覆盖面较广的网页制作教材，帮助网站建设人员快速、全面地掌握网站建设的技巧和规范。 在内容的安排上，本书涉及网页设计基础（网站布局配色）、Dreamweaver工具使用、静态页面搭建（HTML5+CSS3）、网页动效制作（JavaScript）、动态网站开发（PHP+MySQL）以及网站推广和维护等知识。其中，第1~3章介绍了网站建设的基础知识，包括网络概念、网站设计和建设流程等；第4、5章介绍了Dreamweaver工具使用方法，例如文件操作、设置站点等；第6~13章介绍了静态页面的搭建，例如盒子模型、div布局、HTML5、CSS3等；第14、15章介绍了JavaScript基础知识，包括JavaScript语法、数据类型、变量、表达式、事件、对象等；第16、17章介绍了PHP和MySQL的基础知识，并通过一个综合项目“手绘日记”网站建设，对前面的知识进行了回顾；第18、19章介绍了网站推广、优化和维护的相关内容。 本书附有源代码、习题、教学课件等资源；为了帮助初学者更好地学习，还提供了在线答疑，希望得到更多读者的关注。 本书适合作为高等院校相关专业网页设计与制作课程的教材，也可作为网页平面设计的培训教材，还可供网页制作、美工设计、网站开发、网页编程等行业人员阅读与参考。

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

第1章 初识网络、网页和网站 .............1
1.1　网络基本概念 ..............................1
1.1.1　认识网络 .............................1
1.1.2 网络的分类 .........................2
1.2 网络相关术语 ..............................3
1.3 认识网页和网站 ..........................4
1.3.1 网页和网站基本概念 .........5
1.3.2 网页基本构成要素 .............6
1.3.3 网站页面构成 .....................8
1.3.4 网站类型 ...........................10
1.4 浏览器概述 ................................12
习题 .....................................................15
第2章 网页设计基础 .........................17
2.1 网页设计原则 ............................17
2.2 网页配色基础 ............................20
2.2.1 认识色彩 ...........................20
2.2.2 色彩三属性 .......................22
2.2.3 色彩象征意义 ...................22
2.2.4 网页配色原则 ...................26
2.3 网页设计流程 ............................29
2.3.1 确定网站主题 ...................29
2.3.2 网站整体规划 ...................29
2.3.3 收集素材 ...........................30
2.3.4 设计网页效果图 ...............31
2.4 网页布局设计 ............................32
2.4.1 什么是网页布局 ...............32
2.4.2 基本结构分析 ...................33
2.4.3 网页布局分类 ...................33
2.4.4 网页布局原则 ...................36
2.5 网页内容元素设计 ....................38
2.5.1 文字编排设计 ...................39
2.5.2 图像设计 ...........................39
2.5.3 超链接设计 .......................41
2.6 常用的网页设计软件 ................42
2.6.1 Photoshop ...........................42
2.6.2 Illustrator ...........................42
2.6.3 Flash ..................................43
2.6.4 Fireworks ...........................43
习题 .....................................................44
第3章 网站建设基础 .......................45
3.1 网站建设流程 ............................45
3.1.1 页面观察和搭建 ...............45
3.1.2 开发动态网站模块 ...........46
3.1.3 网站建设后期事宜 ...........47
3.2 常用的网站建设工具 ................47
3.3 域名和服务器空间 ....................50
3.3.1 域名概述 ...........................50
3.3.2 域名的级别 .......................51
3.3.3 域名的意义 .......................53
3.3.4 选取域名 ...........................53
3.3.5 注册域名 ...........................54
3.3.6 认识服务器空间 ...............55
目　录
网页设计与网站制作1-2章_1校.indd 1 2018-10-26 10:37:06
2 网页制作与网站建设实战教程
3.3.7 购买服务器空间的
注意事项 ...........................56
3.4 网站的上传 ................................57
习题 .....................................................59
第4 章 Dreamweaver 工具基本操作 .... 61
4.1 界面介绍 ....................................61
4.2 软件初始化设置 ........................67
4.3 Dreamweaver 工具的
基本操作 ....................................70
4.3.1 文档的操作 .......................70
4.3.2 添加文本 ...........................73
4.3.3 添加图像 ...........................75
4.3.4 添加链接 ...........................76
习题 .....................................................78
第5 章 站点、模板和库 .................... 79
5.1 站点 ............................................79
5.1.1 认识站点 ...........................79
5.1.2 建立站点 ...........................80
5.1.3 管理站点 ...........................81
5.2 模板 ............................................84
5.2.1 认识模板 ...........................84
5.2.2 创建模板 ...........................85
5.2.3 编辑模板 ...........................86
5.2.4 管理模板 ...........................87
5.3 库 ...............................................89
5.3.1 认识库和库项目 ...............89
5.3.2 创建库项目 .......................90
5.3.3 管理库项目 .......................90
习题 .....................................................92
第6 章 网页制作入门——HTML ...... 94
6.1 HTML 概述 ................................94
6.1.1 什么是HTML ...................94
6.1.2 认识HTML 标记 ..............95
6.1.3 HTML 文档基本格式 .......95
6.1.4 HTML 标记属性 ...............96
6.1.5 HTML文档头部相关
标记 ...................................97
6.2 文本控制标记 ............................99
6.2.1 标题和段落标记 ...............99
6.2.2 文本样式标记 .................101
6.2.3 文本格式化标记 .............101
6.2.4 特殊字符标记 .................102
6.3 HTML 图像标记 ......................102
6.3.1 常用图像格式 .................102
6.3.2 图像标记 ............103
6.3.3 路径和相对路径 .....105
6.4 认识HTML5 ............................106
6.4.1 HTML5 概述 ...................106
6.4.2 HTML5文档格式的
变化 .................................107
6.4.3 HTML5 新增标记 ..........108
习题 ...................................................109
第7 章 网页制作入门——CSS ........110
7.1 CSS 简介 ..................................110
7.1.1 什么是CSS .....................110
7.1.2 CSS 发展史 .....................110
7.2 CSS 核心基础 ..........................111
7.2.1 CSS 样式规则 .................111
7.2.2 引入CSS 样式表 ............112
7.2.3 CSS 基础选择器 .............114
7.3 CSS 文本样式 ..........................116
7.3.1 字体样式属性 .................116
7.3.2 文本外观属性 .................119
7.4 CSS 高级属性 ..........................123
7.4.1 CSS 层叠性和继承性 .....123
网页设计与网站制作1-2章_1校.indd 2 2018-10-26 10:37:06
目录 3
7.4.2 CSS 优先级 .....................124
7.5 CSS3 新增选择器 ....................127
习题 ...................................................129
第8章 盒子模型 .............................. 131
8.1 盒子模型概述 ..........................131
8.1.1 认识盒子模型 .................131
8.1.2 标记 .......................132 8.1.3 盒子的宽与高 .................132
8.2 盒子模型相关属性 ..................133
8.2.1 边框属性 .........................133
8.2.2 内边距属性 .....................137
8.2.3 外边距属性 .....................137
8.2.4 box-shadow 属性 .............138
8.2.5 box-sizing 属性 ................139
8.2.6 背景属性 .........................139
8.3 元素类型与转换 ......................144
8.3.1 元素的类型 .....................144
8.3.2 标记 ....................145 8.3.3 元素的转换 .....................145
8.4 块元素垂直外边距的合并 ......146
8.4.1 相邻块元素垂直外
边距的合并 .....................146
8.4.2 嵌套块元素垂直外
边距的合并 .....................146
习题 ...................................................146
第9 章 列表和超链接 ..................... 148
9.1 列表标记 ..................................148
9.1.1 无序列表 ..................148 9.1.2 有序列表 ..................149 9.1.3 定义列表 ..................150 9.2 CSS控制列表样式 ...................150
9.2.1 list-style-type属性 ..........150
9.2.2 list-style-image属性 .......151
9.2.3 list-style-position属性 ...151
9.2.4 list-style属性 ...................152
9.3 超链接标记 ..............................152
9.3.1 创建超链接 .....................152
9.3.2 锚点链接 .........................153
9.4 链接伪类控制超链接 ..............154
习题 ...................................................154
第10 章 表格和表单 ....................... 156
10.1 表格标记 ................................156
10.1.1 创建表格 .......................156
10.1.2 标记的属性 ......157 10.1.3 标记的属性 ...........161 10.1.4 标记的属性 ...........162 10.1.5 标记 .......................163 10.2 CSS 控制表格样式 ................163
10.2.1 CSS 控制表格边框 .......164
10.2.2 CSS 控制单元格边距 ...164
10.2.3 CSS 控制单元格宽高 ...164
10.3 认识表单 ................................165
10.3.1 表单的构成 ...................165
10.3.2 表单的创建 ...................165
10.3.3 表单的属性 ...................166
10.4 表单控件 ................................167
10.4.1 input 控件 ......................167
10.4.2 标记的type
属性 ...............................169
10.4.3 标记的其他
属性 ...............................172
10.4.4 textarea 控件..................174
10.4.5 select 控件 .....................175
10.4.6 datalist 控件 ...................177
10.5 CSS 控制表单样式 ................177
习题 ...................................................178
网页设计与网站制作1-2章_1校.indd 3 2018-10-26 10:37:06
4 网页制作与网站建设实战教程
第11 章 div css 布局 ..................... 180
11.1 布局概述.................................180
11.2 布局常用属性.........................182
11.2.1 标记的浮动属性 ...........182
11.2.2 标记的定位属性 ...........184
11.3 布局其他属性.........................187
11.3.1 overflow 属性 ................187
11.3.2 Z-index 标记层叠 ..........188
11.4 布局类型.................................188
11.4.1 单列布局 .......................188
11.4.2 两列布局 ........................189
11.4.3 三列布局 .......................190
11.5 网页模块命名规范.................191
习题 ...................................................192
第12 章 CSS 应用技巧 .................. 194
12.1 CSS 精灵技术 ........................194
12.1.1 认识CSS 精灵 ..............194
12.1.2 应用CSS 精灵 ..............195
12.2 CSS 滑动门技术 ....................196
12.2.1 认识滑动门 ...................196
12.2.2 使用滑动门制作导
航条 ...............................197
12.3 margin 设置负值技巧 ............198
12.3.1 margin 负值基本应用 ...198
12.3.2 利用margin 负值制作
压线效果 .......................199
习题 ...................................................199
第13 章 视频和音频嵌入技术 ......... 201
13.1 视频和音频嵌入技术概述 ....201
13.2 视频文件和音频文件的
格式 ........................................203
13.3 嵌入视频和音频 ....................203
13.3.1 在HTML5 中嵌入
视频 ...............................204
13.3.2 在HTML5 中嵌入
音频 ...............................204
13.3.3 视频和音频文件的兼容
性问题 ...........................205
13.3.4 调用网络视频和音频
文件 ...............................206
13.3.5 CSS 控制视频的宽高 ...207
习题 ...................................................207
第14 章 JavaScript 基础知识 ......... 209
14.1 初识JavaScript .......................209
14.1.1 JavaScript 简介..............209
14.1.2 JavaScript 语法规则......213
14.1.3 JavaScript 引入方式......214
14.1.4 JavaScript 常用输出
语句 ...............................216
14.1.5 简单的JavaScript页面 ....218
14.2 认识标识符、关键字、
保留字 ....................................218
14.3 认识基本数据类型 ................219
14.3.1 数值型 ...........................220
14.3.2 字符串型 .......................220
14.3.3 布尔型 ...........................221
14.3.4 空型 ...............................221
14.3.5 未定义型 .......................222
14.4 常量与变量 ............................222
14.4.1 常量 ...............................222
14.4.2 变量 ...............................222
14.4.3 变量的赋值 ...................223
14.5 数据类型的检测与转换 ........223
14.5.1 检测数据类型 ...............224
14.