HTML5+CSS3网站前台设计项目化教程

项目1概貌体验项目： 初识网站

1.1项目介绍

1.2搭建开发环境

1.2.1工作任务

1.2.2技术理论

1.2.3任务实施

1.2.4知识拓展

1.3认识网站与网页

1.3.1工作任务

1.3.2技术理论

1.3.3任务实施

1.3.4知识拓展

1.4编辑与调试

1.4.1工作任务

1.4.2任务实施

1.5发布与测试

1.5.1工作任务

1.5.2任务实施

1.5.3知识拓展

1.6技术要点

1.7项目进阶

1.8课外实践

项目2入门项目： 个人主页网站设计

2.1项目介绍

2.2知识准备

2.2.1HTML概述

2.2.2HTML5

2.2.3CSS概述

2.2.4CSS3

2.3网站规划与设计

2.4导航模块

2.5个人简介模块

2.6个人履历模块

2.7个人荣誉模块

2.8照片集模块

2.9作品集模块

2.10“与我联系”模块

2.11项目进阶

2.12课外实践

项目3进阶项目： 教育门户网站前台设计

3.1项目介绍

3.2知识准备

3.2.1Bootstrap样式框架

3.2.2JavaScript基础

3.3网站规划与设计

3.3.1网站设计需求

3.3.2网站风格定位

3.3.3网站结构布局

3.4学院首页

3.4.1标题区域设计

3.4.2导航区域设计

3.4.3巨屏区域设计

3.4.4图文区域1设计

3.4.5图文区域2设计

3.4.6图文区域3设计

3.4.7版权区域设计

3.5专业介绍页面

3.5.1标题区域设计

3.5.2图文区域设计

3.6“关于我们”页面

3.7最新资讯页面

3.7.1资讯区域设计

3.7.2侧边区域设计

3.8“联系我们”页面

3.8.1联系方式设计

3.8.2在线提问设计

3.9项目进阶

3.10课外实践

项目4提高项目： 移动新闻网站前台设计

4.1项目介绍

4.2知识准备

4.2.1JSON数据格式

4.2.2JQuery基础

4.2.3AJAX

4.3网站规划与设计

4.4新闻首页

4.5新闻列表模块

4.6新闻阅读模块

4.7项目进阶

4.8课外实践

项目5自主项目： 个人记账助手设计

5.1项目介绍

5.2知识准备

5.3网站规划与设计

5.3.1账目登记表单设计

5.3.2账目记录列表设计

5.3.3用户操作流程设计

5.4数据结构设计

5.4.1账目记录项

5.4.2账目记录列表

5.4.3账目编号

5.5系统编码实现

5.5.1初始化处理

5.5.2新增或修改消费记录

5.5.3删除消费记录

5.5.4清空消费记录

5.5.5用户体验改进

5.6项目进阶

5.7课外实践

项目6综合项目： 打地鼠游戏设计

6.1项目介绍

6.2系统功能分析

6.3设计用户界面

6.3.1网页布局

6.3.2地鼠图片引入

6.4系统编码实现

6.4.1初始化处理

6.4.2显示和隐藏地鼠函数

6.4.3敲击函数

6.4.4开始按钮处理事件

6.4.5结束按钮处理事件

6.4.6震动效果函数

6.4.7绑定事件处理函数

6.4.8最终实现代码

6.5项目进阶

6.6课外实践

参考文献

本书打破传统学科体系构建教材篇章的固有模式，以项目为载体，采用任务驱动的方式展开阐述，使读者可以在项目实践中学习理论与技术，构建知识体系。教材内容由6个项目组成，每个项目根据开发的路线分若干任务，项目任务之后还安排了“项目进阶”和“课外实践”以提示读者对项目进行创新改进，加强自主学习，拓展知识。 项目1为概貌体验项目，围绕一个体验网站的配置、调试、部署，介绍网页设计中的开发环境及工具、网页设计、调试的过程与方法、网站发布的操作步骤等，让读者对网站设计的相关技术有一个感性的认识； 项目2到项目6以递增的方式逐介绍网站前台设计的方法、技术和工具，使学习者在做中学、学中做，循序渐进地掌握网页设计的主要技术要点。项目2是一个单页面的个人主页设计，指导读者学习网页中基本元素的使用方法和CSS格式化网页元素的方法；项目3是一个较为完整的多页面静态网站，使用Bootstrap进行响应式网页设计，页面采用目前流行的扁平化风格，简洁大气； 项目4~项目6都是手机网页应用项目，充分体现了HTML5在移动应用开发方面的优势，这3个项目将带领读者由浅入深地体验JavaScript、jQuery、JSON格式数据、HTML5本地存储等新技术。 作为高职高专的网页设计教材，本书体系新颖、层次清晰，特别注重实用性和可读性，内容由浅入深，因而也适合对网页设计有兴趣的初学者、爱好者作为自学参考书。

《HTML5+CSS3网站前台设计项目化教程》采用项目化教学理念，以项目为载体，任务驱动，项目为序重新建构知识体系。全书由六个项目组成，项目一为概貌体验项目，项目二到项目六分别为入门项目、进阶项目、提高项目、自主项目和综合项目，以递增的方式逐任务地介绍前台设计的方法、技术和工具，其中也涵盖了移动端的开发新技术，使学习者在做中学，学中做。