Web前端设计(高等学校动画与数字媒体专业教材)

Web前端设计是为适应 信息时代发展应运而生的多 领域交叉设计方向，对设计 师而言，Web跨平台、跨终 端、智能化的新特征，对内 容策略、交互方式、用户体 验设计都提出了更高的要求 ，同时了解前端技术对设计 师提升自身创新能力也变得 越发重要。因此，本书内容 整体上包含设计和技术两部 分，并在内容编排和设计上 充分体现设计和技术的有机 融合。在设计部分，按照思 维方法到用户体验设计再到 跨媒介综合设计的梯度组织 内容，融入跨终端、跨媒介 等符合时代变化的前沿设计 理念和方法；在技术部分， 不同于信息技术专业学习的 “硬核技术”，而是以设计师 视角切入，以辅助创意设计 实现为目标，形成与设计匹 配的前端技术基础到响应式 前端技术的知识梯度。 本书可以作为高等院校 数字媒体、视觉传达、交互 设计、网络传播等专业Web 前端设计相关课程的教材， 也可以作为爱好者的自学用 书。

王珊，毕业于北京航空航天大学虚拟现实技术与系统国家重点实验室，获得工学博士学位，2007年起任教于北京航空航天大学新媒体艺术与设计学院。主要研究方向为数字媒体艺术、Web前端设计、虚拟现实，在本领域内知名国际期刊和会议发表多篇论文。主讲课程有《Web前端设计》《网页设计》《网页设计技术》《移动交互应用设计》，在此Web前端设计类课程方面积累十几年的教学经验，打造了Web前端设计课程群，针对不同年级不同专业方向学生，形成了一套完整有效的教学体系和模式，目前依托此课程群承担了北航校级重点教学改革项目。

PART 1 设计篇 第1章 Web前端设计概论 1.1 Web前端的概念 1.2 Web应用类型 1.2.1 网站、网页 1.2.2 Web App和混合式App 1.2.3 基于微信的Web应用 1.2.4 其他游戏和互动类Web应用 1.3 Web媒介特点 1.3.1 跨平台性 1.3.2 融合多元信息形态 1.3.3 动态交互性 1.3.4 分布式信息 1.4 Web发展趋势 1.5 Web前端设计范畴 第2章 Web设计模式 2.1 不同终端的设计模式 2.1.1 PC端 2.1.2 移动端 2.1.3 PC端与移动端的对比 2.1.4 其他终端 2.2 Web元素 2.3 跨终端设计 2.3.1 响应式设计 2.3.2 智能系统设计 第3章 Web设计研究 3.1 Web设计理论 3.1.1 设计思维 3.1.2 用户体验要素 3.2 设计研究的意义 3.3 设计研究的方法 3.3.1 用户研究 3.3.2 竞品分析（同类、现有解决方案分析） 第4章 Web设计过程 4.1 信息架构的概念 4.2 交互设计的概念 4.3 信息与交互的关系 4.4 设计方法与工具 4.4.1 信息架构设计要素 4.4.2 信息分类方式 4.4.3 层级式任务分析 4.5 Web组织结构 4.5.1 单一模式 4.5.2 混合模式 第5章 Web设计表达 5.1 原型的概念 5.2 低保真原型 5.3 高保真原型 5.4 多模态原型 5.5 感知设计 5.5.1 视觉 5.5.2 听觉 5.5.3 触觉 5.5.4 嗅觉 5.5.5 味觉 5.6 多模态交互 PART 2 技术篇 第6章 Web设计技术——结构 6.1 基本的Web标准 6.2 HTML与Web结构 6.3 HTML5基本语法 6.3.1 HTML标签 6.3.2 HTML5文档基本结构 6.4 HTML5元素 6.4.1 页面布局元素 6.4.2 文本元素 6.4.3 超链接 6.4.4 图像、音视频元素 6.4.5 列表 6.4.6 表格和表单 第7章 Web设计技术——表现 7.1 CSS简介 7.2 CSS基本语法 7.3 CSS选择器 7.3.1 基本选择器 7.3.2 复合选择器 7.4 CSS优先级 7.5 CSS颜色 7.6 CSS常用属性 7.6.1 文本相关属性 7.6.2 图像相关属性 7.6.3 列表相关属性 第8章 Web设计技术——布局 8.1 布局基础 8.1.1 元素显示类型 8.1.2 盒模型 8.2 CSS定位方式 8.2.1 浮动定位 8.2.2 绝对定位 8.2.3 相对定位 8.3 常见布局 8.3.1 一栏式布局 8.3.2 两栏式布局 8.3.3 三栏式布局 第9章 跨终端Web设计技术——弹性布局 9.1 弹性布局的概念 9.2 弹性盒模型 9.3 弹性盒基本属性 9.4 弹性盒对齐属性 9.5 弹性盒布局案例 9.5.1 水平垂直居中元素 9.5.2 圣杯布局 第10章 跨终端Web设计技术——响应式设计 10.1 响应式设计的概念 10.2 响应式设计模式 10.3 媒体查询 10.3.1 基本语法 10.3.2 媒体查询实例 10.4 响应式框架 10.4.1 Bootstrap介绍 10.4.2 Bootstrap栅格系统 10.4.3 Bootstrap布局案例 10.4.4 Bootstrap基本组件 参考文献