本书是一本专注于HTML5、CSS3、jQuery开发和Bootstrap相关内容开发的活页式教材, 内容涉及Web前端开发与设计、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识, 突出内容的实用性和实践性,坚持以职业能力为本位,以满足职业岗位的需要,与相应的“1+X”证书标准接轨。本书有效融入课程思政, 并突出其职业引导功能。读者通过教材了解职业、热爱职业岗位,树立正确的价值观、择业观, 形成良好的职业道德和职业意识。
本书的编写从满足Web前端开发工程师岗位的技术和能力需求出发,系统深入地介绍了Web前端开发的基础知识与前沿技术,还融入了《Web前端开发职业技能等级标准》中的职业素养和岗位技术技能,以专业技能为模块、以项目任务为驱动、以课程思政为纲要进行组织编写。为落实“党的二十大精神”课程思政元素的实施方案,以坚持立德树人为根本任务,从爱国情怀、民族自信、社会责任、法制意识、工业文化、职业态度、职业素养等方面着眼,以学生综合职业能力培养为中心推进编写工作。帮助学习者有效提升Web前端开发能力,确保学习者拥有最关键的Web前端开发工程师岗位技能;提升个人生活质量与升学、就业、职场竞争力。
本书组织方式
本书共六个模块,主要介绍HTML+CSS+jQuery+Bootstrap前端技术基础知识,具体包括初识HTML、构建HTML网页文件、CSS新样式修饰网页、盒子模型、元素的浮动与定位、网页布局技术、网页表单的应用、跨平台响应式技术等。其中模块六为综合实战篇,其目的是实现特产网系统的开发。
本书特色内容
书中运用二维码呈现微课视频,扫码即可查看与图书内容深度融合的精彩纷呈的微课视频。
章节具体结构如下:
核心概念:章节职业能力中重要概念、关键词的解释或定义。
学习目标:重点要掌握的基础知识和操作技巧,进行点睛指引。
基本知识:章节职业能力中涉及的知识点与技能点。
活动组织:引入案例,并结合案例提出一些问题,引发学生思考,激发学生学习兴趣。在项目活动组织中提高学生的动手能力和创新能力,培养学生的逻辑分析能力与解决实际问题的能力,逐步将学生培养成兼具基础素养、逻辑思维、设计能力以及应用创新能力的综合性人才,初步具备Web应用开发程序员的素质。
模块一 Web前端开发的准备
任务1.1 Web相关概念
职业能力1.1.1 掌握Web前端开发基本概念
职业能力1.1.2 了解常用Web前端开发工具
模块二 使用HTML5建立网页结构
任务2.1 初识HTML
职业能力2.1.1 HTML基本语法
职业能力2.1.2 HTML的主体元素
任务2.2 HTML常用标签
职业能力2.2.1 文本、图像
职业能力2.2.2 超链接、音频、视频
职业能力2.2.3 列表、表格
职业能力2.2.4 表单
模块三 使用CSS3样式修饰网页
任务3.1 初识CSS
职业能力3.1.1 CSS样式基本语法结构
职业能力3.1.2 CSS的选择器
任务3.2 CSS常用样式
职业能力3.2.1 CSS样式的单位和颜色
职业能力3.2.2 文本与字体样式
职业能力3.2.3 背景样式
职业能力3.2.4 列表样式
职业能力3.2.5 表格样式
任务3.3 定位与布局
职业能力3.3.1 盒子模型
职业能力3.3.2 定位方式
职业能力3.3.3 弹性盒子布局
职业能力3.3.4 响应式布局
任务3.4 CSS3
职业能力3.4.1 边框和阴影
职业能力3.4.2 2D和3D变换
职业能力3.4.3 过渡和动画
模块四 轻量级框架应用
任务4.1 jQuer基础
职业能力4.1.1 在网页中使用JavaScript的语句
职业能力4.1.2 使用BOM对象与浏览器窗口交互
职业能力4.1.3 使用DOM对象改变文档对象
职业能力4.1.4 在网页中使用jQuery框架
职业能力4.1.5 使用jQuer在网页中添加事件
任务4.2 jQuery效果
职业能力4.2.1 使用jQuer操作网页样式
职业能力4.2.2 使用jQuer添加动画
任务4.3 jQueryAJAX
职业能力4.3.1 在网页中使用AJAX
模块五 响应式开发技术
任务5.1 Bootstrap基本架构
职业能力5.1.1 在页面中引入Bootstrap
职业能力5.1.2 使用Bootstrap的栅格系统搭建网页结构
任务5.2 Bootstrap样式
职业能力5.2.1 使用Bootstrap的文本与颜色样式
职业能力5.2.2 使用Bootstrap的图文样式
职业能力5.2.3 使用Bootstrap的表格样式与列表样式
职业能力5.2.4 使用Bootstrap制作表单
任务5.3 Bootstrap组件
职业能力5.3.1 使用Bootstrap的按钮和按钮组快捷开发
职业能力5.3.2 使用Bootstrap的导航样式
职业能力5.3.3 使用Bootstrap徽章、警告窗和卡片样式
职业能力5.3.4 使用Bootstrap制作轮播图
模块六 综合项目实战
任务6.1 特产网网站项目分析
职业能力6.1.1 进行网站整体规划
任务6.2 网页实现
职业能力6.2.1 实现导航栏和轮播图模块
职业能力6.2.2 实现特产展示模块
职业能力6.2.3 实现特产网新闻模块
职业能力6.2.4 实现页脚和版权信息模块