目录

基础篇

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

1.1任务描述

1.2相关知识

1.2.1什么是Web标准

1.2.2Web标准的历史

1.2.3Web标准的构成

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

1.3任务实施

1.3.1页面级设计需求

1.3.2网站功能级的需求

1.4任务拓展

1.5职业素养

1.6任务小结

1.7能力评估

任务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任务小结

2.7能力评估

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

3.1任务描述

3.2相关知识

3.2.1像素与分辨率

3.2.2位图和矢量图

3.2.3图像的颜色模式

3.2.4图像的格式

3.2.5图层

3.2.6蒙版

3.3任务实施

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

3.3.2“购买”按钮图片制作

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

3.3.4导航按钮背景图片制作

3.3.5分类导航条背景的制作

3.3.6GIF动画设计制作

3.3.7蒙版Banner图制作

3.4任务拓展

3.5职业素养

3.6任务小结

3.7能力评估

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

4.1任务描述

4.2相关知识

4.2.1什么是XHTML

4.2.2XHTML文件结构

4.2.3DTD文件

4.2.4XHTML编码规则

4.2.5头部标签head

4.3任务实施

4.3.1“叮当网上书店”项目建站

4.3.2“叮当网上书店”新建首页

4.4任务拓展

4.4.1SEO——让你的网站排名靠前

4.4.2用三个标签实现SEO

4.5职业素养

4.6任务小结

4.7能力评估

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

5.1任务描述

5.2相关知识

5.2.1div标签

5.2.2span标签

5.3任务实施

5.3.1“叮当网上书店”首页XHTML框架结构

5.3.2“叮当网上书店”购物车页XHTML框架结构

5.4任务拓展

5.4.1“叮当网上书店”登录页XHTML框架结构

5.4.2“叮当网上书店”注册页XHTML框架结构

5.4.3“叮当网上书店”图书分类页XHTML框架结构

5.4.4“叮当网上书店”图书详情页XHTML框架结构

5.5职业素养

5.6任务小结

5.7能力评估

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

6.1任务描述

6.2相关知识

6.2.1插入图片——img标签

6.2.2列表——ul、ol和li标签

6.2.3超链接——a标签

6.2.4表单类标签

6.2.5hn和p标签

6.3任务实施

6.3.1首页header区域XHTML模块结构

6.3.2首页search区域XHTML模块结构

6.3.3首页中间left区域XHTML模块结构

6.3.4首页中间right区域XHTML模块结构

6.3.5首页中间center区域XHTML模块结构

6.3.6首页footer区域XHTML模块结构

6.4任务拓展

6.4.1图书分类页XHTML总体结构

6.4.2图书详情页XHTML总体结构

6.4.3登录页XHTML总体结构

6.5职业素养

6.6任务小结

6.7能力评估

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

7.1任务描述

7.2相关知识

7.2.1table、tr、th和td标签

7.2.2thead、tbody和tfoot标签

7.3任务实施

7.3.1购物车主体部分整体结构

7.3.2标题shoppingtitle结构

7.3.3表头shoppingtabletop结构

7.3.4中间表格区shoppingtablecenter结构

7.3.5底部shoppingtablefooter结构

7.4任务拓展

7.4.1注册页XHTML总体结构

7.4.2登录页XHTML总体结构

7.5职业素养

7.6任务小结

7.7能力评估

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

8.1任务描述

8.2相关知识

8.2.1CSS样式表

8.2.2应用CSS到网页中

8.2.3盒子模型

8.2.4浮动布局

8.2.5定位布局

8.3任务实施

8.3.1首页布局与定位

8.3.2图书分类页布局与定位

8.3.3购物车页布局与定位

8.4任务拓展

8.5职业素养

8.6任务小结

8.7能力评估

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

9.1任务描述

9.2相关知识

9.2.1使用列表元素

9.2.2背景控制

9.2.3文本与段落样式

9.2.4超链接样式控制

9.3任务实施

9.3.1首页navlink区Logo图片样式

9.3.2首页navlink区导航菜单样式

9.3.3首页navlink区用户快速导航样式

9.4任务拓展

9.5职业素养

9.6任务小结

9.7能力评估

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

10.1任务描述

10.2相关知识

10.2.1圆角背景控制

10.2.2表单UI设计效果

10.3任务实施

10.3.1首页search区圆角背景样式

10.3.2首页search区表单设计样式

10.4任务拓展

10.4.1首页main_left、main_right两侧样式

10.4.2首页main_right用户登录区样式

10.4.3用户注册页样式

10.4.4用户登录页样式

10.5职业素养

10.6任务小结

10.7能力评估

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

11.1任务描述

11.2相关知识

11.2.1CSS缩写

11.2.2CSS Hack技术

11.2.3ul的不同表现

11.2.4容器不扩展问题

11.3任务实施

11.3.1首页main_center区主编推荐区样式

11.3.2首页main_center区本月最新出版区样式

11.4任务拓展

11.4.1首页main_center区本周媒体热点区样式

11.4.2首页footer区样式

11.5职业素养

11.6任务小结

11.7能力评估

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

12.1任务描述

12.2相关知识

12.2.1细线表格

12.2.2表格隔行变色

12.3任务实施

12.3.1购物车页表格列表效果

12.3.2购物车页表格隔行变色效果

12.4任务拓展

12.4.1用户登录页样式

12.4.2用户注册页样式

12.5职业素养

12.6任务小结

12.7能力评估

进阶篇

任务13“叮当网上书店”移动端项目建站

13.1任务描述

13.2相关知识

13.2.1HBuilder X下载

13.2.2HBuilder X软件介绍

13.2.3HBuilder X软件

13.2.4HBuilder X软件的特点

13.2.5HTML 5语言

13.3任务实施

13.3.1HBuilder X项目建站

13.3.2HBuilder X新建项目首页

13.4任务拓展

13.4.1HBuilder X支持的项目运行说明

13.4.2HBuilder X常用的快捷键操作

13.4.3网络资源推荐

13.5职业素养

13.6任务小结

13.7能力评估

任务14“叮当网上书店”移动端首页设计与制作

14.1任务描述

14.2相关知识

14.2.1Bootstrap简介

14.2.2Bootstrap 4环境安装

14.2.3Flex弹性盒布局

14.2.4网格系统

14.2.5导航栏/Tabs

14.2.6轮播

14.3任务实施

14.3.1首页导航模块

14.3.2首页轮播模块

14.3.3首页Tabs商品展示模块

14.3.4首页底部版权模块

14.4任务拓展

14.4.1自适应广告位

14.4.2点击Top 10排行榜商品展示模块

14.5职业素养

14.6任务小结

14.7能力评估

任务15“叮当网上书店”移动端分类页设计与制作

15.1任务描述

15.2相关知识

15.3任务实施

15.3.1分类页总体布局与定位

15.3.2分类页选项卡切换效果

15.3.3分类页选项卡主内容区

15.4任务拓展

15.5职业素养

15.6任务小结

15.7能力评估

任务16“叮当网上书店”移动端详情页设计与制作

16.1任务描述

16.2相关知识

16.3任务实施

16.3.1顶部导航栏设计与制作

16.3.2导航目标区设计与制作

16.3.3底部导航条

16.4任务拓展

16.5职业素养

16.6任务小结

16.7能力评估

任务17“叮当网上书店”移动端购物车页设计与制作

17.1任务描述

17.2相关知识

17.3任务实施

17.3.1购物车顶部导航栏设计与制作

17.3.2购物车页主体模块设计与制作

17.3.3购物车页底部结算导航栏设计与制作

17.4任务拓展

17.5职业素养

17.6任务小结

17.7能力评估

任务18“叮当网上书店”移动端“我的”页设计与制作

18.1任务描述

18.2任务实施

18.2.1顶部用户状态区设计与制作

18.2.2我的订单区设计与制作

18.3任务拓展

18.4职业素养

18.5任务小结

18.6能力评估

交互篇

任务19“叮当网上书店”网站交互设计与制作

19.1任务描述

19.2相关知识

19.2.1jQuery简介

19.2.2jQuery的工作原理

19.2.3jQuery下载并安装

19.2.4jQuery基本知识

19.2.5jQuery选择器

19.2.6jQuery事件

19.2.7jQuery效果

19.2.8jQuery HTML

19.2.9jQuery遍历

19.2.10jQuery AJAX

19.3任务实施

19.3.1PC端注册页表单验证交互效果设计与制作

19.3.2移动端首页返回顶部交互效果设计与制作

19.3.3移动端购物车页交互效果设计与制作

19.4任务拓展

19.5职业素养

19.6任务小结

19.7能力评估

参考文献