本书根据技术应用型人才的培养目标，以一个企业生产性项目“新闻网”的设计制作贯穿始终，将课程内容整合、序化为8个教学模块、26个开发任务、63个案例、28个实训操作任务、3个企业典型综合项目，采用由易到难、螺旋递进的方式详细讲解了Web前端开发技术，并介绍了HTML和CSS的基础知识和使用技巧。本书内容主要包括Web前端开发的相关概念、网站的设计与策划、开发工具的使用、文本图像的创建、CSS样式对页面的美化、列表的典型应用、各种超链接的创建、表格和表单的应用，以及DIV+CSS页面布局等实用技术，覆盖了“1+X证书”Web前端开发职业技能中HTML+CSS的基本知识点，同时根据教学模块主题，融入了思政教育内容，将立德树人、课程思政等元素穿插到教学内容中，润物细无声，使学习者掌握专业技能的同时，完成全方位育人的重任。本书是一本从零开始学习Web前端开发技术的教材，无须读者具有任何编程基础。本书既可作为高等院校本、专科计算机及相关专业的网页设计与制作课程的教材，又可作为Web前端开发学习班的培训教材或网页制作爱好者的参考书。

高丽霞，双师型教师，Oracle企业级认证讲师，自2002年从事教学工作以来，先后讲授过《Web编程基础》、《HTML5应用开发》、《Web前端开发（JavaScript与jQuery）》、《C语言程序设计》、《C#程序设计》、《Java程序设计》和《Authorware多媒体制作》等多门课程。参编4本教材，其中《Authorware多媒体技术应用实例教程（第2版）》十二五规划教材，被评选为"高等职业院校教学改革创新示范教材”；《C#程序设计任务式教程》十三五规划教材，被评为中国通信工业协会"全国计算机类优秀教材”。撰写多篇论文，其中两篇为国家核心期刊论文。参与国家级、省级资源库建设4项，课题、重点课题建设5项，参与品牌专业群建设1项。连续6年讲授《Web编程基础》课程，授课年级8个，累计授课班级32个，本课程授课人数约1580人，在《Web编程基础》课程上积累了丰富的实践、教科研经验，通过项目化教学、任务驱动、信息化教学等多种教学方式调度课堂、融合创新，深受学生喜爱。2020年作为课程负责人，主持《Web编程基础》校级精品资源库建设。

模块1 网站的设计与策划 1
1.1 任务1：认识网页与网站 1
1.1.1 网页与网站的相关概念 2
1.1.2 服务器与客户端 3
1.2 任务2：认识网页开发技术 4
1.2.1 Web前端的概念 4
1.2.2 Web前端开发技术 5
1.3 任务3：设计策划网站 9
1.3.1 网站设计原则 9
1.3.2 网站制作流程 11
1.4 任务4：选择网页开发工具 12
1.4.1 编写工具 12
1.4.2 浏览工具 16
1.5 知识进阶 16
1.6 小结 18
1.7 实训任务 19
实训任务1：创建班级网站页面 19
实训任务2：制作班级学习交流页面 20
实训任务3：制作班级公告栏 21
模块2 制作图文并茂的新闻页面 24
2.1 任务1：创建网页结构 25
2.1.1 HTML文档结构 25
2.1.2 HTML基本语法 26
2.1.3 ＜head＞标记 27
2.1.4 任务实施 28
2.2 任务2：添加网页文本内容 29
2.2.1 标题与段落标记 30
2.2.2 水平线标记 32
2.2.3 换行标记 33
2.2.4 特殊字符 33
2.2.5 ＜div＞与＜span＞标记 34
2.2.6 任务实施 35
2.3 任务3：设置图文并茂的网页 35
2.3.1 插入图像 36
2.3.2 网页中支持的图像文件格式 37
2.3.3 任务实施 38
2.4 知识进阶 38
2.5 小结 42
2.6 实训任务 42
实训任务1：制作图文并茂的班级学习交流页面 42
实训任务2：制作图文并茂的班级公告栏页面 44
模块3 美化修饰网站的新闻页面 47
3.1 任务1：修饰文字排版 48
3.1.1 CSS概述 48
3.1.2 引入CSS的方法 49
3.1.3 CSS选择器 50
3.1.4 CSS特性 66
3.1.5 文字修饰 68
3.1.6 文本修饰 69
3.1.7 任务实施 71
3.2 任务2：控制元素属性 74
3.2.1 盒子模型 74
3.2.2 边框属性 74
3.2.3 边距属性 76
3.2.4 浮动 81
3.2.5 定位 92
3.2.6 任务实施 100
3.3 任务3：设置页面背景 102
3.3.1 背景的设置 102
3.3.2 背景的运用技术 104
3.3.3 任务实施 107
3.4 知识进阶 108
3.5 小结 113
3.6 实训任务 114
实训任务1：使用CSS渲染班级学习交流页面 114
实训任务2：使用CSS渲染班级公告栏页面 116
实训任务3：制作班级网站中的青春名片 117
实训任务4：制作图文环绕效果 119
实训任务5：制作班级图片新闻版块 121
模块4 制作网站的最新动态页面 124
4.1 任务1：制作最新动态列表条目 125
4.1.1 有序列表 125
4.1.2 无序列表 127
4.1.3 嵌套列表 128
4.1.4 定义列表 129
4.1.5 CSS列表修饰 130
4.1.6 任务实施 131
4.2 任务2：创建最新动态条目链接 134
4.2.1 创建超链接 135
4.2.2 链接对象 135
4.2.3 CSS超链接修饰 136
4.2.4 任务实施 139
4.3 知识进阶 141
4.4 小结 143
4.5 实训任务 144
实训任务1：制作班级新闻栏目 144
实训任务2：制作班级网站的软件大赛通知 145
实训任务3：制作班级学习园地 147
实训任务4：制作班级网站的导航条 150
实训任务5：制作班级网站的新闻栏目 152
模块5 制作网站的多媒体相册页面 159
5.1 任务1：创建多媒体相册 160
5.1.1 表格组成 160
5.1.2 表格属性 161
5.1.3 任务实施 163
5.2 任务2：调整相册行列结构 164
5.2.1 单元格属性 164
5.2.2 单元格合并 165
5.2.3 任务实施 167
5.3 任务3：设置相册布局 168
5.3.1 表格嵌套 168
5.3.2 表格布局 170
5.3.3 任务实施 173
5.4 任务4：设置多媒体效果 175
5.4.1 音频 175
5.4.2 视频 176
5.4.3 任务实施 178
5.5 知识进阶 178
5.6 小结 181
5.7 实训任务 181
实训任务1：制作班级网站的班级课程表 181
实训任务2：制作班级网站的学生信息登记表 184
实训任务3：制作班级网站的新闻栏目 185
实训任务4：制作班级网站的首页布局 187
模块6 制作网站的会员注册页面 191
6.1 任务1：制作基本信息区 192
6.1.1 表单基础 192
6.1.2 辅助标记 194
6.1.3 单行文本输入框 194
6.1.4 密码输入框 194
6.1.5 表单按钮 197
6.1.6 单选按钮 199
6.1.7 复选框 199
6.1.8 文件上传域 201
6.1.9 任务实施 202
6.2 任务2：制作信息收集区 205
6.2.1 多行文本域 205
6.2.2 下拉列表框 206
6.2.3 任务实施 208
6.3 任务3：制作法律条款区 209
6.3.1 浮动框架标记 209
6.3.2 任务实施 210
6.4 知识进阶 211
6.5 小结 219
6.6 实训任务 220
实训任务1：制作班级网站的调查问卷 220
实训任务2：制作班级网站的邮箱注册页面 224
实训任务3：制作电子邮箱的发送邮件页面 226
实训任务4：制作班级网站的用户注册页面 229
模块7 网站首页的设计制作 233
7.1 任务1：首页整体布局分析设计 234
7.1.1 整体布局分析 234
7.1.2 样式重置 234
7.1.3 全局CSS的定义 235
7.2 任务2：头部的实现 236
7.2.1 头部的布局分析和实现 236
7.2.2 Logo的实现 237
7.2.3 顶部导航的实现 237
7.2.4 登录注册的实现 238
7.3 任务3：中间主体内容的实现 239
7.3.1 主体内容的布局分析和实现 239
7.3.2 上部内容区的实现 240
7.3.3 左侧主要内容区的实现 240
7.3.4 右侧主要内容区的实现 242
7.4 任务4：底部页脚版权的实现 243
7.5 知识进阶 244
7.6 小结 247
7.7 实训任务 248
实训任务1：DIV+CSS布局班级网站首页 248
实训任务2：使用DIV+CSS布局左中右页面结构 252
实训任务3：使用HTML5中新增语义化标记进行页面布局 254
模块8 企业级项目综合应用 258
8.1 任务1：制作企业产品展示页面 258
8.1.1 任务描述 258
8.1.2 定义页面结构 259
8.1.3 添加页面样式 259
8.2 任务2：制作新闻详情页面 261
8.2.1 任务描述 261
8.2.2 整体布局分析的实现 262
8.2.3 头部的实现 263
8.2.4 内容部分的实现 265
8.2.5 版权信息部分的实现 270
8.3 任务3：制作用户登录页面 271
8.3.1 任务描述 271
8.3.2 定义页面结构 271
8.3.3 登录表单部分的实现 272
8.3.4 其他部分的实现 274
8.4 知识进阶 275
8.5 小结 279
8.6 实训任务 279
实训任务1：CSS精灵技术制作导航条 279
实训任务2：CSS制作图文版块中的三角形 282
参考文献 286