本书通过苏州英博特智能科技有限公司官网的设计与制作，为读者全面展示了网站设计与网页制作的基本知识，让没有网页制作基础的读者可以轻松地制作出自己心目中的网站。本书第一篇基本技能篇通过制作城市电子名片网页和爱国科学家钱学森先生的个人介绍页面，使读者快速掌握网页制作的基础知识，包括网页制作技术、常用开发工具、网站建设流程、HTML和CSS的基础知识。第二篇项目实战篇按照网站开发的一般流程，制作苏州英博特智能科技有限公司官网，包括网站前期策划、网站开发准备、首页页面制作、二三级页面制作、网站测试与发布、宣传推广与维护及项目总结七个任务，使读者在巩固网页制作技能的同时，进一步掌握HTML5和CSS3的新特性，实现更复杂的页面样式变化及一些交互效果，能够制作具有更好的交互性和用户体验的网页。第三篇岗位能力强化篇结合1+X职业技能证书Web前端开发（初级）的考核要求，以任务为驱动，针对HTML、CSS等重要知识单元，结合实际案例和应用环境进行分析和设计，使读者能够真正掌握这些知识单元在实际场景中的应用。本书配套资源包括书中所有任务案例素材及效果、电子课件，可登录华信教育资源网注册后免费下载。本书同时配有97段微课视频、电子活页、能力拓展和在线测试，可在书中二维码处扫码学习。本书是专门为高等职业教育计算机类、艺术设计类和电子商务类等专业编写的网站设计与网页制作课程的专业教材，也可作为考取1+X职业技能证书Web前端开发（初级）的培训材料。

何福男，1988.8 苏州工业职业技术学院 工作至今，先后担任过基础教研室主任、软件教研室主任、计算机应用专业带头人，系教学副主任、软件与服务外包学院副院长、教务处处长等工作。作为课程负责人、主讲老师，完成了《C#程序设计》《网站设计与网页制作》两门院级精品课程和“十三五”国规教材的建设工作。

第一篇 基本技能篇
任务1 网页体验—城市电子名片页面制作 1
1.1 任务概述 2
1.2 任务思考 3
1.3 任务实施 3
1.3.1 新建网页文件，添加内容 3
1.3.2 链接CSS样式表 3
1.3.3 添加JavaScript特效 4
1.4 相关知识 4
1.4.1 网页相关概念 4
1.4.2 网页制作技术 6
1.4.3 常用开发工具 6
1.4.4 网站建设流程 8
任务2 页面制作—人物介绍页面内容呈现 16
2.1 任务概述 17
2.2 任务思考 17
2.3 任务实施 17
2.3.1 新建网页文件 17
2.3.2 人物介绍文本格式化 18
2.3.3 添加人物图片 19
2.4 相关知识 20
2.4.1 HTML基础 20
2.4.2 HTML标题元素 22
2.4.3 HTML注释元素 23
2.4.4 HTML段落元素 23
2.4.5 HTML格式化元素 25
2.4.6 HTML图片元素 29
任务3 样式设计—人物介绍页面美化 32
3.1 任务概述 33
3.2 任务思考 33
3.3 任务实施 33
3.3.1 链接外部样式表 33
3.3.2 设计样式 34
3.4 相关知识 35
3.4.1 CSS简介 35
3.4.2 CSS语法 36
3.4.3 CSS选择器 37
3.4.4 CSS字体属性 39
3.4.5 CSS文本属性 42
3.4.6 CSS背景属性 44
任务4 图文混排—人物介绍页面布局 50
4.1 任务概述 51
4.2 任务思考 51
4.3 任务实施 51
4.3.1 添加HTML元素 51
4.3.2 图文混排布局 52
4.4 相关知识 53
4.4.1 元素分类 53
4.4.2 CSS盒模型 54
4.4.3 CSS布局模型 62
4.4.4 清除浮动 71
本篇小结 72
第二篇 项目实战篇
任务1 “英博特智能科技”企业网站前期策划 73
1.1 项目立项 74
1.1.1 分析“英博特智能科技”企业网站需求说明书 75
1.1.2 组建项目团队 76
1.2 撰写网站策划书 76
1.2.1 分析确定网站逻辑结构图 78
1.2.2 设计网站界面原型 78
1.2.3 撰写企业网站策划书 82

任务2 “英博特智能科技”企业网站开发准备 85
2.1 设计网站logo 85
2.2 加工图像素材 90
2.3 设计网站首页效果图 93
2.3.1 设置页面大小 95
2.3.2 规划首页内容，设计版式 96
2.3.3 确定配色方案 98
2.3.4 制作网站首页效果图 99
2.4 裁切网站首页效果图 100
2.4.1 创建首页切片 102
2.4.2 编辑首页切片 104
2.4.3 命名首页切片 105
2.4.4 导出首页切片 105
任务3 “英博特智能科技”企业网站首页页面制作 108
3.1 首页整体布局 108
3.1.1 新建项目 110
3.1.2 搭建页面主体结构 110
3.1.3 编写主体结构样式 111
3.2 页头制作 113
3.2.1 页头二列布局 114
3.2.2 logo制作 115
3.2.3 横向导航制作 116
3.2.4 下拉菜单制作 116
3.3 横幅广告制作 128
3.3.1 插入图像 130
3.3.2 样式设计 130
3.3.3 图片放大特效 131
3.4 公司优势制作 134
3.4.1 搭建公司优势模块结构 135
3.4.2 实现三列布局 135
3.4.3 设置图像和文本样式 136
3.5 关于我们制作 137
3.5.1 搭建关于我们模块结构 138
3.5.2 实现二列布局 139
3.5.3 设置文本内容样式 139
3.5.4 轮播图制作 140
3.6 服务范围制作 144
3.6.1 搭建服务范围模块结构 145
3.6.2 实现列表项内部的两列布局 146
3.6.3 实现服务范围弹性布局 147
3.6.4 设置文本内容样式 147
3.7 产品展示制作 148
3.7.1 搭建产品展示模块结构 150
3.7.2 实现三列布局 151
3.7.3 设置文本内容样式 151
3.7.4 设置CSS3过渡效果 151
3.8 案例展示制作 155
3.8.1 搭建案例展示模块结构 156
3.8.2 实现三列布局 157
3.8.3 设置文本内容样式 157
3.8.4 设置CSS3转换效果 158
3.9 新闻中心制作 162
3.9.1 搭建新闻中心模块结构 164
3.9.2 图片特效制作 165
3.9.3 新闻列表制作 166
3.10 合作伙伴制作 168
3.10.1 搭建合作伙伴模块结构 169
3.10.2 设置图片内容样式 170
3.11 页尾制作 172
3.11.1 搭建页尾模块结构 173
3.11.2 分享内容制作 174
3.11.3 联系我们制作 175
3.11.4 版权内容制作 176
3.12 客户服务制作 177
3.12.1 搭建客户服务模块结构 178
3.12.2 图片内容制作 179
3.12.3 弹出菜单制作 179
任务4 “英博特智能科技”企业网站二三级页面制作 183
4.1 产品案例页面制作 183
4.1.1 搭建页面结构 185
4.1.2 竖向导航制作 188
4.1.3 产品案例图文混排制作 190
4.2 产品详细信息页面制作 202
4.2.1 搭建页面结构 205
4.2.2 图文内容设计 205
4.2.3 数据表格设计 206
4.2.4 编写相关样式 208
4.3 应用场景详细信息页面制作 216
4.3.1 搭建页面结构 217
4.3.2 插入音视频 218
4.4 留言页面制作 221
4.4.1 搭建页面结构 223
4.4.2 插入表单元素 223
4.4.3 编写表单样式 224
任务5 “英博特智能科技”企业网站测试与发布 233
5.1 网站测试 233
5.1.1 整体界面测试 234
5.1.2 超链接测试 234
5.1.3 图形测试 234
5.1.4 内容测试 234
5.1.5 浏览器兼容性测试 235
5.1.6 打印机测试 236
5.1.7 显示代码合法性检查 236
5.2 网站发布 252
5.2.1 安装本地服务器 253
5.2.2 在IIS中发布和访问网站 255
5.2.3 申请域名 257
5.2.4 申请虚拟主机 261
5.2.5 使用FTP管理文件 262
任务6 “英博特智能科技”企业网站宣传推广与维护 267
6.1 网站宣传推广 267
6.1.1 搜索引擎推广 269
6.1.2 电子邮件推广 270
6.1.3 网络广告推广 271
6.1.4 分类信息推广 271
6.1.5 微信推广 272
6.1.6 搜索引擎优化工具 272
6.2 网站维护 278
6.2.1 网站日常维护 279
6.2.2 网站内容维护 280
6.2.3 网站安全维护 280
6.2.4 网站基础维护 280
6.2.5 网站服务与回馈 280

任务7 “英博特智能科技”企业网站项目总结 283
7.1 文档的书写与整理 283
7.1.1 撰写网站说明书 284
7.1.2 整理文档 285
7.2 网站展示、交流与评价 285
7.2.1 讨论交流 286
7.2.2 小组自评、互评 286
本篇小结 287
第三篇 岗位能力强化篇
任务1 HTML制作静态网页 288
3.1.1 任务概述 289
3.1.2 任务分析 290
3.1.3 任务实施 291
任务2 HTML实现静态页面内容的呈现 292
3.2.1 任务概述 293
3.2.2 任务分析 294
3.2.3 任务实施 294
任务3 CSS实现网页整体布局 295
3.3.1 任务概述 296
3.3.2 任务分析 296
3.3.3 任务实施 296
任务4 CSS设计页面样式 297
3.4.1 任务概述 298
3.4.2 任务分析 298
3.4.3 任务实施 299
任务5 CSS3实现页面动态交互效果 300
3.5.1 任务概述 301
3.5.2 任务分析 301
3.5.3 任务实施 301
任务6 HTML5制作移动端静态网页 302
3.6.1 任务概述 302
3.6.2 任务分析 303
3.6.3 任务实施 304
任务7 HTML5优化移动端静态网页结构 305
3.7.1 任务概述 306
3.7.2 任务分析 306
3.7.3 任务实施 307
任务8 CSS3新特性制作移动端网页加载动画 308
3.8.1 任务概述 309
3.8.2 任务分析 309
3.8.3 任务实施 310
任务9 CSS3新特性美化移动端页面样式 311
3.9.1 任务概述 311
3.9.2 任务分析 312
3.9.3 任务实施 313
任务10 CSS3自定义资源美化移动端页面元素 314
3.10.1 任务概述 315
3.10.2 任务分析 315
3.10.3 任务实施 316
本篇小结 316