本书以一个弘扬中国优秀传统文化主题网站首页的制作为主线，将网站首页制作分解成若干个小案例，分布到各个项目单元中，按照从整体到部分、从简单到复杂，循序渐进地进行知识、技能展示。全书按照Web前端开发的流程，从网页内容结构HTML、网页样式CSS以及网页行为jQuery三大知识内容进行编写。以2020年5月*《高等学校课程思政建设指导纲要》提出的课程思政建设五大内容入手，将以习近平谈网络安全和信息化相关论述、中国IT界风云人物、古诗词、中华美食、中华名胜古迹、网络安全法等作为教材相关知识点教学案例的文字素材，项目案例以慢谈历史、话说家乡、趣谈美食、中国节日、网络安全法律法规等为主题进行设计。*后用一个综合案例对全书知识进行贯穿总结，使读者全面掌握Web前端设计与制作知识与技能；本书将价值塑造、知识传授和能力培养三者融为一体，实现专业教育与思政教育同向同行，形成协同效应。全书内容结构合理，实例简单易懂，既适合高职院校Web前端开发课程教学使用，也适合从事网页设计相关工作的初学者阅读或作为社会培训教材使用。
1.采用项目-任务-能力式组织体例、发挥教材育人功能本教材按照网页设计三大构成技术（HTMl CSS jQuery），以案例为主线，根据学生特点和认知规律，把教学内容重组、整合和分割成一个个相对独立又彼此联系的项目单元，每个项目单元采用项目导入、项目目标、项目设计、项目任务、项目案例、项目小结、本项目习题的方式组织教材内容。这种编写方式具有目标的整体性、知识的系统性、训练的序列性。2.有效融入思政元素、实现专业教育与思政教育同向同行本教材以2020年5月*《高等学校课程思政建设指导纲要》提出的课程思政建设五大内容入手，将以习近平谈网络安全和信息化相关论述、中国IT界风云人物、古诗词、中华美食、中华名胜古迹、网络安全法等作为教材相关知识点教学案例的文字素材，项目案例以话说家乡、趣谈美食、中国节日、网络安全法律法规等为主题进行设计。将将价值塑造、知识传授和能力培养三者融为一体，实现专业教育与思政教育同向同行，形成协同效应。3.提供数字化教学资源平台、创设全新的教育时空提供与纸质教材紧密融合的扫码通平台易智教云教学平台，教材的全部教学资源如教学视频、PPT、电子教案、图片素材、典型案例、习题库等都上传到易智教云教学平台，该平台除了具有浏览查询、下载资源功能外，还提供了许多实用教学功能。如视频学习、项目练习、在线测试等，可以满足学生自主学习、个性化学习的需求，适应互联网 信息化教育的需要。
本书若有印装质量问题,请向出版社营销中心调换全国免费服务热线:400-6679-118竭诚为您服务版权所有侵权必究近几年 ,随着移动互联网的迅速发展 ,各大公司都在大量招聘网页前端设计人员 ,同时对前端设计师的技能要求也大大提高。如今的网页设计师需要了解整个 Web前端开发的技术及标准才能制作出符合规范的页面。本书主要介绍 Web前端开发*的三大技术 ,即 HTML5、CSS3和JavaScript,还包括响应式布局和 Bootstrap前端框架技术。编者以原创案例 茅草屋网站 为主线 ,根据学生特点和认知规律 ,将 Web前端开发所需的三大核心技术分割成一个个相对独立又彼此联系的项目模块 ,每个项目模块中 ,先提出项目任务 ,然后介绍知识点 ,随之实现相关项目任务 ,学习者以任务驱动的方式进行学习 ,通过任务实施的过程来巩固和吸收所学知识。本书适合网页设计的初学者阅读 ,并提供图片、代码等相关素材。建议在阅读本书的同时,使用网页制作工具及浏览器同步操作 ,在完成实例后及时浏览查看结果 ,这样学习效率会大大提高。一、本书内容概述全书共分为 10个项目。项目 1 Web前端开发概述 :介绍网页和网站的基本概念、网页制作的三大技术及标准、网页制作的工具。项目 2使用 HTML5组织页面内容 :介绍 HTML5的基础知识、常用 HTML标签的使用方法 ,使读者掌握 HTML5标记语言的使用方法。项目 3使用 HTML5新增的标签 :介绍 HTML5新增的语义标签、音频标签、视频标签及表单元素标签 ,使读者学会使用 HTML标签组织页面内容。项目 4使用 CSS样式设置页面外观 :介绍 CSS样式规则、CSS选择器、CSS文本与字体样式属性、背景与超链接样式属性 ,使读者学会使用 CSS样式设置页面外观。项目 5网页布局与定位 :介绍盒子模型、元素的定位机制及常见页面布局的实现方法。项目 6设置页面导航条和列表样式 :介绍 CSS列表样式属性、边框样式属性以及边距样式属性 ,并通过实例讲解导航条、图片列表、新闻列表的制作方法。项目 7使用 CSS3美化页面 :介绍 CSS3文本阴影、圆角边框、字体图标、2D转换、过渡与动画属性 ,使读者学会使用 CSS3样式属性美化页面。项目 8使用 JavaScript和jQuery实现动态效果 :介绍 JavaScript编程基础和 jQuery 常用动态效果的制作方法。项目9使用 Bootstrap构建响应式网页:介绍响应式布局的概念、媒体查询的含义、 Bootstrap前端框架技术的使用。项目10综合案例:以原创案例钟山文化之旅网站的制作为案例,将整本书的知识融会贯通。二、本书特点 (1)以原创案例为主线,采用六段式编写体例组织教材内容。本书以原创案例茅草屋网站为主线,根据学生特点和认知规律,将 Web前端开发所需的三大技术分割成一个个相对独立又彼此联系的项目模块,每个项目模块采用学习目标、案例导入、任务驱动、项目总结、项目习题、项目实验六段式的编写方式组织教材内容。 (2)案例设计有效融入思政元素,实现专业教育与思政教育同向同行。网站案例的文字、图片素材均是围绕思政元素进行设计,本书将价值塑造、知识传授和能力培养三者融为一体,实现专业教育与思政教育同向同行,形成协同效应。 (3)教材的教学资源如教学视频、PPT、电子教案、图片素材、典型案例、习题库等全部上传到云教学平台,可以满足学生自主学习、个性化学习的需求,适应互联网 信息化教育的需要。本书项目1至项目6由南京交通职业技术学院张淑梅编写,项目7至项目10由江苏经贸职业技术学院宋维堂编写,教材由常州机电职业技术学院李桂秋教授主审。由于编者水平有限,书中难免有不足之处,敬请广大读者批评、指正!为了方便教学,本书还配有电子课件等资料,任课教师可以发邮件至 hustpeit@163. com索取。编者 2023年5月
项目 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
书单推荐
