Web前端开发项目化教程

第一阶段 网站的前期准备

任务1 “叮当网上书店”项目需求分析

1.1 任务描述

1.2 相关知识

1.2.1 什么是Web标准

1.2.2 Web标准的历史

1.2.3 Web标准的构成

1.2.4 网站项目需求分析的流程

1.3 任务实现

1.3.1 页面级设计需求

1.3.2 网站功能级的需求

1.4 任务拓展

1.5 任务小结

1.6 能力评估

任务2 “叮当网上书店”前台版面设计稿

2.1 任务描述

2.2 相关知识

2.2.1 网站常用的布局结构

2.2.2 网站常用的页面版式

2.3 任务实现

2.3.1 “叮当网上书店”首页版面设计稿

2.3.2 “叮当网上书店”登录页版面设计稿

2.3.3 “叮当网上书店”图书分类页版面设计稿

2.3.4 “叮当网上书店”购物车页版面设计稿

2.4 任务拓展

2.4.1 “叮当网上书店”注册页版面设计稿

2.4.2 “叮当网上书店”图书详细页版面设计

2.5 任务小结

2.6 能力评估

任务3 “叮当网上书店”图片素材设计

3.1 任务描述

3.2 相关知识

3.2.1 Photoshop工作环境

3.2.2 像素与分辨率

3.2.3 位图和矢量图

3.2.4 图像的颜色模式

3.2.5 图像的格式

3.2.6 图层

3.2.7 Photoshop常用工具

3.2.8 参考线

3.2.9 Photoshop与GIF动画

3.2.10 蒙版

3.3 任务实施

3.3.1 “叮当网上书店”Logo制作

3.3.2 “购买”按钮图片制作

3.3.3 头部高级搜索按钮背景的制作

3.3.4 导航按钮背景图片制作

3.3.5 分类导航条背景的制作

3.3.6 GIF动画设计制作

3.3.7 蒙版Banner图制作

3.4 任务拓展

3.5 任务小结

3.6 能力评估

第二阶段 网站的结构架设

任务4“叮当网上书店”项目建站

4.1 任务描述

4.2 相关知识

4.2.1 DreamweaverCS6工作环境

4.2.2 什么是XHTML

4.2.3 XHTML文件结构

4.2.4 DTD文件

……

任务5“叮当网上书店”页面框架结构

任务6“叮当网上书店”首页总体结构

任务7“叮当网上书店”购物车页整体结构

第三阶段 网站的效果设计

任务8“叮当网上书店”页面布局与定位

任务9“叮当网上书店”首页navlink区样式

任务10“叮当网上书店”首页search区样式

任务11“叮当网上书店”首页main_center区样式

任务12“叮当网上书店”购物车页样式

第四阶段 网站的人机交互

任务13“叮当网上书店”表单验证交互

参考文献

　　《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》以Web前端开发的岗位需求和行业开发规范为基础，以电子商务网站“叮当网上书店”为导入项目，按照“项目导入，任务驱动”的教学模式，基于岗位的工作过程精心组织和安排教学内容。
　　《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》内容由4个任务阶段组成：网站的前期准备、网站的结构架设、网站的效果设计和网站的人机交互。
　　《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》的重点在于采用XHTML、CSS和jQuery等前端技术进行网站的开发、设计，《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》的难点在于浏览器的兼容性设计。
　　《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》将Web前端开发技术的知识和技能有机地融入各个任务中，读者通过项目任务的逐步实施，在学中做，在做中学。
　　《Web前端开发项目化教程/高职高专“工作过程导向”新理念教材·计算机系列》可作为高职高专院校相关专业的教材，也可作为网站设计师、Web前端开发工程师、UI设计工程师等网站设计与开发人员的参考书。