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

随着“互联网+”理念在各个领域的深入应用，产生了对Web软件的大量需求，这使得前端工程师的地位越来越重要，而HTML、CSS是Web前端开发的必备基本技能。Web编程基础的教学主要培养前端开发工作岗位要求的高素质技术/技能人才，尤其注重培养解决实际问题的能力和创新能力。鉴于此，本书在编写中重点突出以下特点。 1．采用企业生产性项目贯穿始终 本书以一个企业生产性项目“新闻网”为载体，将课程内容整合、序化为8个教学模块、26个开发任务。其同步开展的28个实训操作任务，使用项目“班级网站”贯穿，以达到讲练结合、强化训练的目的。 2．紧扣“1+X证书”职业技能标准要求 为了紧密对接Web前端开发企业人才需求及“1+X证书”职业技能标准要求，本书内容覆盖了“1+X证书”Web前端开发职业技能中HTML+CSS的基本知识点，以及Web 前端编码、测试、技术服务等岗位的基本技能点。 3．融入课程思政，注重素质教育 本书内容的设计全面贯彻“立德树人”“文化育人”“思政育人”的教学理念。在每个模块中，根据教学模块主题，在项目任务中融入家国情怀、文化认同、职业认同、诚信担当、工匠精神、绿色环保等思政教育内容，如盐入水，有味无痕，使学习者在掌握职业技能、提高解决实际问题能力的同时，全方位地完成“育人”的重任，为其职业生涯的可持续发展和终身学习奠定基础。 4．突出能力培养，利于分层次提高 本书中每个教学模块都设计了“知识进阶”一节，内容包括知识拓展、技能拓展、开发经验技巧，或1～2个提高型的综合应用案例。这有利于提高学习者的综合应用能力，使学习者在知识和技能难度上进行延伸和突破，并且使学习能力强的学习者增加知识储备，提高专业技能。 5．类型丰富的教学资源，便于开展教学 本书提供的教学资源主要包括课程标准、整体设计、单元设计、教学进度表、考核方案、学习指南、教案、电子课件、教学视频、典型案例、实训指导等。此外，还包括了新知识/新技术进阶、任务拓展等，使课程资源既具有特色，又兼具适应产业发展的前瞻性。需要电子教学参考资料包的教师请登录华信教育资源网（http://www.hxedu.com.cn）注册后免费下载。 在本书中，“新闻网”的设计制作贯穿8个教学模块，其具体安排如下。 模块1 网站的设计与策划，通过4个开发任务介绍网页、网站、服务器和客户端等基本概念，以及网页开发技术、网站设计策划流程和网页开发工具的基础知识。 模块2 使用HTML技术制作“新闻网”中图文并茂的新闻页面，通过3个开发任务介绍网页结构的创建，添加网页文本内容，设置图文并茂的网页。 模块3使用CSS技术对“新闻网”中的新闻页面进行美化修饰，通过3个开发任务介绍CSS层叠样式表的使用，以及CSS控制页面中文本、字体、前景图、背景图的外观样式和盒子模型的使用。 模块4 制作并修饰“新闻网”中的最新动态页面，通过2个开发任务介绍有序列表、无序列表、嵌套列表、定义列表，以及各种超链接的创建和CSS样式的设置。 模块5 制作“新闻网”中的多媒体相册页面，通过4个开发任务介绍表格的创建、表格行列结构的调整、表格嵌套和音频、视频等多媒体元素的创建及CSS样式的修饰。 模块6 制作“新闻网”中的会员注册页面，通过3个开发任务介绍表单的创建、CSS样式的修饰，以及浮动框架在页面中的应用。 模块7 制作“新闻网”的首页，通过4个开发任务，即首页整体布局分析设计、头部的实现、中间主体内容的实现和底部页脚版权的实现，介绍了网站页面的创建过程，以及使用DIV+CSS实现页面布局，使用HTML和CSS进行页面设计的方法。 模块8 企业级项目综合应用，通过3个开发任务，即制作企业产品展示页面、制作新闻详情页面和制作用户登录页面，综合训练学习者的网页制作技能，以进一步提升学习者的网站设计开发能力。 同步进行的实训以学习者熟悉的“班级网站”展开，将28个实训操作任务贯穿于8个教学模块中，通过强化实践训练，培养学习者综合运用所学知识和技能进行网页设计制作的能力。 本书由高丽霞、柴大鹏、张静、王宏编写，由高丽霞担任主编并统稿。其中，柴大鹏编写模块7和模块8中的任务部分；张静编写模块1、模块2、模块3中的基础知识和小结部分，以及模块4中任务1的基础知识部分；王宏编写模块4中任务2的基础知识部分；其余部分由高丽霞编写。本书承山东电子职业技术学院徐新艳老师主审。 在制作过程中，本书的部分文字、图像、音频、视频等素材由孙骏雯、王梓人帮助搜集制作，在此表示衷心感谢！ 限于编者水平，书中难免存在疏漏和不足，恳请同行、专家和广大读者不吝赐教。 编 者

模块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