本教材是基于慕课《Web前端设计基础》的配套教材。内容包括Web基础知识、HTML、CSS、JavaScript四个单元，各内容单元又分别按照基础知识、操作技能、应用提高三个层次组织教学内容。教材基于OBE理念及Web前端设计的工作过程，以培养学生的实践应用能力为主线，通过具体网站建设项目的学习Web前端设计的相关规范、HTML超文本标记语言、CSS样式、JavaScript脚本等基本知识和操作技术，通过任务实践提升综合应用能力。
《Web前端设计基础》教材内容丰富、结构合理、思路清晰、语言简练流畅、示例翔实，适合作为高等院校电子商务、信息管理等相关专业Web前端设计、网页设计等课程的教材，还可作为Web前端设计与开发从业人员的参考资料。

项目1 认识Web前端设计
学习任务1.1 了解Web基础知识
任务1.1.1 理解Web相关概念
任务1.1.2 了解页面元素
任务1.1.3 了解Web前端设计技术与工具
任务1.1.4 了解网站建设流程
学习任务1.2 设计网站
任务1.2.1 设计网站形象
任务1.2.2 设计页面布局
任务1.2.3 设计网站导航及栏目
任务1.2.4 设计网页层次及目录结构
项目2 创建及编辑Web网页——HTML5
学习任务2.1 创建网站首页文档
任务2.1.1 创建网站首页
任务2.1.2 理解HTML标记语法
任务2.1.3 理解HTML布局标记
任务2.1.4 理解HTML5结构标记
学习任务2.2 编辑网站首页内容
任务2.2.1 插入文本及列表
任务2.2.2 插入图像和媒体
任务2.2.3 设置超链接和应用框架
任务2.2.4 应用表格和表单
项目3创建及应用Web样式——CSS3
学习任务3.1 创建网站首页样式
任务3.1.1 理解CSS语法
任务3.1.2 应用CSS样式
任务3.1.3 理解CSS选择器
任务3.1.4 理解CSS层叠性和继承性
学习任务3.2 设计网站首页样式
任务3.2.1 设置CSS字体和文本属性
任务3.2.2 设置CSS背景和列表属性
任务3.2.3 设置CSS边框和表格属性
任务3.2.4 应用CSS3效果
学习任务3.3 定位网站页面元素
任务3.3.1 理解CSS盒子模型
任务3.3.2 应用流布局
任务3.3.3 应用浮动布局
任务3.3.4 应用定位布局
任务3.3.5 制作移动端页面
项目4应用Web网页特效——JavaScript
学习任务4.1 理解JavaScript语言基础
任务4.1.1 认识JavaScript
任务4.1.2 认识JavaScript语言基础
任务4.1.3 认识JavaScript自定义函数
任务4.1.4 认识JavaScript控制语句
任务4.1.5 认识JavaScript对象
任务4.1.6 认识JavaScript内置对象
学习任务4.2 应用jQuery
任务4.2.1 理解jQuery框架
VII
任务4.2.2 利用jQuery实现网页特效
任务4.2.3 了解Web前端框架技术
学习任务4.3 了解HTML5高级应用
任务4.3.1 了解HTML5画布
任务4.3.2 了解HTML5拖放操作
任务4.3.3 了解HTML5地理定位
项目5 网站设计与开发综合案例
实践任务5.1 网站设计
实践任务5.2 网站首页布局及内容编辑
实践任务5.3 应用CSS样式美化网站首页
实践任务5.4 应用CSS样式精准定位网站页面元素
参考文献