Web前端设计与制作——HTML+CSS+JavaScript

本书以一个弘扬中国优秀传统文化主题网站首页的制作为主线，将网站首页制作分解成若干个小案例，分布到各个项目单元中，按照从整体到部分、从简单到复杂，循序渐进地进行知识、技能展示。全书按照Web前端开发的流程，从网页内容结构HTML、网页样式CSS以及网页行为jQuery三大知识内容进行编写。以2020年5月教育部《高等学校课程思政建设指导纲要》提出的课程思政建设五大内容入手，将以习近平谈网络安全和信息化相关论述、中国IT界风云人物、古诗词、中华美食、中华名胜古迹、网络安全法等作为教材相关知识点教学案例的文字素材，项目案例以慢谈历史、话说家乡、趣谈美食、中国节日、网络安全法律法规等为主题进行设计。最后用一个综合案例对全书知识进行贯穿总结，使读者全面掌握Web前端设计与制作知识与技能；本书将价值塑造、知识传授和能力培养三者融为一体，实现专业教育与思政教育同向同行，形成协同效应。全书内容结构合理，实例简单易懂，既适合高职院校Web前端开发课程教学使用，也适合从事网页设计相关工作的初学者阅读或作为社会培训教材使用。

张淑梅，女，教授，中共党员。1991年哈尔滨师范大学数学专业毕业。获得江苏省交通运输系统教学名师荣誉称号。主要讲授Web开发技术（HTML）、数据库应用与管理、动态网页设计（ASP.NET）、C语言程序设计、C#程序设计等课程。主要研究成果包括：主持完成江苏省现代教育技术、江苏省教育信息化、中国交通教育研究会等教育研究课题多项，主持完成院级科研项目多项，主编“十二五”江苏省高等学校重点教材1部。在中国职业教育、中国电力教育、数字技术与应用等期刊发表研究论文多篇。

项目 1 Web前端开发概述 1.1 认识网页和网站 …………………… 2 1.2 Web前端开发技术及标准 ……… 6 1.3网页制作工具 ………………………8 项目 2使用 HTML5组织页面内容 2.1 HTML基础 ……………………… 16 2.2 HTML5常用标签 ……………… 20 2.3项目案例 ………………………… 40 2.4 HTML表单 ………………………41 项目 3使用 HTML5新增的标签 3.1 HTML5新增的语义标签 ……… 55 3.2 HTML5视频、音频标签 ………… 65 3.3项目案例 ………………………… 69 3.4 HTML5新增的表单元素 ………72 项目 4使用 CSS样式设置页面外观 4.1认识 CSS ………………………… 83 4.2 CSS选择器 ……………………… 89 4.3 CSS文本与字体样式属性 ……… 97 4.4 CSS背景样式属性 ……………… 106 4.5项目案例 …………………………110 5.1网页布局概述 …………………… 118 5.2盒子模型 ………………………… 120 5.3定位机制 ………………………… 124 5.4 CSS布局 ………………………… 135 5.5项目案例 …………………………139 项目 6设置页面导航条和列表样式 6.1 CSS列表样式属性 ……………… 146 6.2 CSS边框样式属性 ……………… 153 6.3 CSS边距样式属性 ……………… 157 6.4项目案例 …………………………159 项目 7使用 CSS3美化页面 7.1 CSS3边框属性 ………………… 176 7.2 文本阴影与文本溢出属性 ……… 184 7.3 CSS3字体 ……………………… 187 7.4 CSS3的2D转换、过渡与动画 …… ……………………………………… 193 7.5项目案例 …………………………199 项目 8使用 JavaScript和jQuery实现动态效果 8.1初识 JavaScript………………… 211 8.2 JavaScript语言基础 …………… 213 8.3 JavaScript流程控制语句 ……… 218 8.4 函数的定义及使用 ……………… 222 8.5 数组的定义及使用 ……………… 223 8.6 HTMLDOM(文档对象模型 )…… ……………………………………… 226 8.7认识 JQuery …………………… 232 8.8 jQuery选择器 ………………… 234 8.9 jQuery事件操作 ……………… 238 8.10 jQuery的文档操作 …………… 238 8.11 jQuery动画特效 ……………… 242 8.12项目案例 ………………………251 项目 9使用 Bootstrap构建响应式网页 9.1 响应式布局与媒体查询 ………… 264 9.2 Web前端框架 Bootstrap的使用 … ……………………………………… 267 9.3项目案例 …………………………291 项目 10综合案例 10.1 “钟山文化之旅 ”网站首页制作 …… ……………………………………… 299 10.2响应式布局 “钟山文化之旅 ”网站首页制作 ………………………………… 317