【网页设计】
【Web Design】
一、基本信息
课程代码：【2050100】
课程学分：【3】
面向专业：【软件服务外包】
课程性质：【系级选修课，专业限选课】
开课院系：信息技术学院数字媒体系
使用教材：主教材【疯狂html 5/css 3/javascript讲义李刚电子工业出版社2012.5第1版】
辅助教材【HTML5+CSS3网页设计案例教程姬莉霞科学出版社2013.8第1版】
参考教材【Bootstrap用户手册：设计响应式网站 J.Spurlock人民邮电出版社2013.9 第1版】
先修课程：【数据库原理2050114 (4); Java程序设计(双语)2050010 (3)】
二、课程简介
网页设计课程是软件服务外包专业，数字媒体技术专业实践类专业限选课程，是学生了解网页制作，设计，运维过程的入门课程。本课程是一门以实验为主的实践课程。课程中除介绍网页与浏览的核心，及网页设计的基本方法与工具外，也将不断引入较为领先的设计思路与制作方法。
课程重点在与理解前端应用中网页设计的基本原理与方法。从通过案例演示HTML，CSS与JavaScript这三者是如何有机结合编制网页页面的内容开始，进而展开网页前端设计的构架模式与各自构架思路。另外，从服务端与客户端的协作角度，实践浏览器发送请求并获取页面的过程，并从而理解服务器释义过程对前端设计带来的影响。虽然课程并不强调后台的设计与制作，但本课程的难点是结合先修课程中对数据库应用的方法实现前后台的贯通，并以此实现网页前端设计的初衷。
三、选课建议
本课程适合软件服务外包二年级第一学期及数字媒体技术专业大二大三学生选修。课程学习基础要求包括对数据库原理的初步理解。课程中网页前端构架部分建议具备一定的程序设计基础将有助于本课程的设计实践。
四、课程与培养学生能力的关联性
自主学习 | 表达沟通 | 专业能力 | 尽责抗压 | 协同创新 | 服务关爱 | 信息应用 | 国际视野 | ||||
软件开发 | 系统运维 | 系统设计 | 技术文档撰写 | 系统测试 | |||||||
| | | | | | | | | |||
此处简要写明学生通过本课程的学习所要达到的业务目标，包括知识目标、能力目标和情感目标。
目标1: 通过小组合作，培养专业能力。通过本课程第一阶段覆盖前三个单元，建议4人一组以熟悉前端语言、构建前端开发环境为目的，提交一份包括各语言、框架及工具的分析报告。汇报对课程中演练的样例代码的理解以及小组对前端开发环境搭建的选择及理由，此阶段中小组合作能力以及分析汇报的方式也作为学习目标予以记录。
目标2: 通过对国外源码及文档分析，培养信息应用及创新能力。第二阶段中小组成员各自选择一个主题演练第4第5单元的内容，并完善该主题的前端设计。在此基础上通过搜索学习网络源码文档，对现有前端框架予以创造性的扩展。并在此基础上，提交一份综合设计报告。
六、课程内容
单元1：浏览器、超文本与超链接
本单元通过演示性的实验，使学生知道浏览器是如何将HTML文本渲染为网页的，并在此过程中理解浏览器渲染的过程及样式的作用，根据演示仿写CSS代码运用对类的继承，分析HTML与CSS的关系。本单元的重点是通过样例知道一些基本的HTML标签以及类与伪类的写法，并由此介绍JavaScript中DOM的概念，理解综合针对这三类指向DOM的方法，评价这三种方法的异同及适用场合，做出一个分析的表格。本单元的难点之一是通过比较本单元中介绍几种主流浏览器，比较分析各浏览器对HTML与CSS渲染的异同。
单元2：前端开发环境及前后端的关系
本单元通过验证性的实验，知道前台开发的工具，理解前后台开发之间的关系。本单元的重点：通过比较工具之间的异同综合分析工具的必要性，选择最有必要的工具构成前端开发环境，理解前端开发的目的。最后，本单元的难点：通过运用所选工具，实现课程中所演示的样例，评价各工具在样例运行中的作用。
注：本单元结束将提交基于前端开发环境的基本框架。
单元3：前端应用与快速原型开发
本单元通过知道前端开发的目的，理解基于用户端应用与服务端应用的不同之处。
本单元的重点为：以验证性方式实践基于用户端的网页原型开发。分析用户端开发的流程，设计开发时间，评价开发周期及可行性。
本单元的难点为：以演示性方式理解基于服务端的前端开发，理解前端请求及数据获取的基本方法。
注：本单元结束将提交课程前三个单元所涉及的所有分析报告并以汇报方式综合说明。
单元4：网页排版、表单与网格系统
本单元重点为：通过运用前端构建的开发环境，实践并设计网页排版、表单制作的方法。
本单元的难点为：通过综合前端原型框架，理解网格系统。
单元5：菜单、按钮及导航
本单元重点为：通过运用前端构建的开发环境，实践并设计菜单、按钮及导航的制作方法。
本单元的难点为：综合运用前端框架，并综合jQuery，bootstrap等框架实现交互式导航。
单元6：前端框架的扩展与深入
本单元重点为：导入样例数据，并完善前端设计。
本单元的难点为：选择性扩展前端系统，并运用express，angular，jade等框架设计交互式前端。
注：本单元结束将提交课程综合设计报告。
七、课内实验名称及基本要求
序号 | 实验名称 | 主要内容 | 实验 时数 | 实验类型 | 备注 |
1 | 浏览器、超文本与超链接 | 根据演示实现一个样例网页在HTML浏览器中渲染的效果 | 4 | 演示型 | |
2 | 前端开发环境及前后端的关系 | 以小组方式共同实现前端开发环境的搭建，并复制虚拟环境 | 8 | 验证型 | |
3 | 前端应用与快速原型开发 | 以小组方式汇报分析结果，并演示在本地服务器及流量器中基于样例的快速原型 | 12 | 设计型 | |
4 | 网页排版、表单与网格系统 | 根据命题设计网页排版、表单与网格系统 | 10 | 设计型 | |
5 | 菜单、按钮及导航 | 根据命题设计菜单、按钮及导航 | 10 | 设计型 | |
6 | 前端框架的扩展与深入 | 综合运用前端开发环境，扩展前端应用的基本开发方法。 | 4 | 验证型 |
总评构成（1+X） | （1） | （X1、X2、X3……） |
评价方式 | 个人项目报告 （含工作现场评估及自我评估） | X1：前端开发环境15% X2：小组调查与分析报告30% X3：小组研究汇报15% |
1与X两项所占比例% | 40% | 60% |
撰写：郝振华 系主任审核：矫桂娥
注：教学大纲电子版公布在本学院课程网站上，并发送到教务处存档。
