作业DEMO：http://nodiseal.github.com/gaoxiao-homework-demo/our-photo.html 

完成后请以小组为单位提交到[email protected]，注明学校、班级、小组成员、分工等信息，代码可以附件压缩包或者github地址形式均可


 作业与成绩的关系

最终成绩由基础作业、综合大作业组成。各部分所占比例如下：

1）上课参与程度与出勤率：15%

2）基础作业：65%。主要考核对课程中基础知识的掌握程度、问题解决能力。

3）综合大作业：20%。主要考核对课程所有知识的综合利用能力，发掘同学的自主学习和创新能力。



一、作业目标一个基础作业，一个综合作业。


1. 基础作业

引导学生理解网页的数据与MVC（结构、展现、交互）概念，应用HTML、CSS、JS实现一个简单的页面，掌握基础。

要素：以基础知识为主；覆盖较多常用知识点；易于实现；贴近实际。



2. 综合作业

鼓励学生综合应用各课程中的前端知识，利用现有的基础库和API，构建一个相对复杂的页面或前端应用。

要素：融汇贯通；学习、思考、多动手; 桌面PC、无线都可涉及



二、基础作业部分

1. 作业要求

     ＊ 实现一个遵循W3C标准的简单网页（不要求兼容IE低端版本）



     ＊ UI风格请自行设计

     ＊ 代码按合理的方式组织和存放

     ＊ 请沿用头部、中部内容区、尾部的整体结构

     ＊ 有要清晰的导航菜单,主体内容要求多媒体混合展现

     ＊ 有一定的用户交互和响应效果(例如表单验证、Tab切换）

     ＊ 请用原生JS实现交互，不得依赖第三方基础库

     ＊ 充分利用学到的基础知识，发挥自己的动手能力

     ＊【提交时间】最后一节课（第五节）API课前上交


建议可以围绕特定事物的展现，如：我们常用的软件或APP、我们拍摄的照片、我们喜欢的书等等



2. 作业DEMO

概述

     a. 以现在流行的图片浏览为主题，页面能迅速出来较好的效果，也更贴近现实

     b. 有清晰的头尾、中部内容整体布局，引导学生关注整体结构的意义

     c. 页面融合前面标注到的页面元素和效果

     d. 提供可容易实现的JS原生的交互效果

涉及技术点：

     -- 页面布局及HTML语义化

     -- 表单、表单验证

     -- Tab导航和分类信息

     -- JS内置对象使用、函数及复用

     -- 鼠标、键盘事件处理

     -- JS操作DOM、浏览器对象使用（url、userAgent）

     -- 浮动、定位

     -- 背景、文字修饰

     -- 多媒体（图片）利用等

     -- 实体字符

     -- 部分CSS3的效果

     （等）



三、综合作业

1. 作业要求

     a. 实现基于WEB的功能页面或应用，具有较完整的使用体验；也可以是相关的前端开发工具。



     b. 要充分利用学到的知识，发挥团队的想像力


     c. 如能针对手机浏览器实现无线特有的交互和功能，可加分

     d. 【提交时间】最后一节课（第五节课）后，3周内前上交


可参考类型：





* 综合浏览：App推荐(百度应用）、图片浏览（图片搜索、云相册、贴吧图片）、微博浏览页面

* 应用：音乐播放器（Ting）、地图（百度地图）、曲线图表（百度统计）

* 创意实现：网页游戏

* 流行站点：美丽说、蘑菇街

* 工具/技术深度利用：前端开发工具、某种技术的DEMO综合演示



鼓励，针对手机也能进行浏览和功能使用，可以对功能进行裁剪调整或优化

鼓励，参考现有流行站点的功能和风格（但请注明来源、参考的功能、思想）

鼓励，利用提供的库或框架进行开发辅助，也可以利用其他开源的产品（注明参考来源）



2. 作业可利用技术举例



【组件化开发】UI组件、模块化

【多媒体】图片、视频、音乐、3D效果等

【HTML5】设备API、CSS3等

【第三方API】地图、编辑器、微博API等、分享API等

【基础库利用】Tangram/zepto, Magic/GMU

【前后端交互】表单、Ajax、动态数据、历史控制

【为手机优化】针对手机进行优化效果--PC, 无线



3. DEMO举例



     具有一定导航作用的，图片展现页面