《前端交互设计》课程教学大纲 课程编号：013089 课程名称（中/英文）：网页设计Front-end design 课程类型，樟块误 总学时：48 讲课学时：32 实验学时：16 学分：3 适用对象： 先修课程： 后续课程： 开课单位：机根工程学院 一、课程性质和教学目标 本课程的性质和教学目标是：对产品前期界面I研究、设计流行趋势分析：设定产品的整体视 觉风格和UI设计（界面和图标）：参与体验设计、流程设计的制定和优化：网站℃、B、客户端 等产品的I设计：掌握DIV+CSS、TWL5等前端开发，PC端移动端网页布局，能够完成从设计到 前端代码编写。 二、教学基本要求 通过本课程的学习，使学生能够解决产品界面与交互功能的实现，学习以T5、CSS3、 JavaScript等技术为平台的互联网产品交互功能，培养掌握响应式布局框架、Bootstrap等最新的 JS框架的设计人才，处理及解决PC端及移动端网站或ap等应用的交互问题。 三、教学内容及要求 (一)前端交互设计基础 1.用户体验、交互设计、1设计 2.用户体验与交互设计基本原则介绍 3.交互细节案例介绍 4.交互设计所需要技能 (二)Dreamweaver网页设计/HTL5 l.Dreamweaver界面介绍与操作基础 2."eb历史与简单页面制作 3。超级链接基础与制作 4.图片基础与简单操作 5.表格基础 6.Web界面布局
《前端交互设计》课程教学大纲 课程编号: 013089 课程名称（中／英文）： 网页设计 Front-end design 课程类型: 模块课 总 学 时：48 讲课学时：32 实验学时：16 学 分：3 适用对象: 先修课程： 后续课程： 开课单位：机械工程学院 一、课程性质和教学目标 本课程的性质和教学目标是：对产品前期界面 UI 研究、设计流行趋势分析；设定产品的整体视 觉风格和 UI 设计（界面和图标）；参与体验设计、流程设计的制定和优化；网站 PC、WEB、客户端 等产品的 UI 设计；掌握 DIV+CSS、HTML5 等前端开发，PC 端移动端网页布局，能够完成从设计到 前端代码编写。 二、教学基本要求 通过本课程的学习,使学生能够解决产品界面与交互功能的实现，学习以 HTML5、CSS3、 JavaScript 等技术为平台的互联网产品交互功能，培养掌握响应式布局框架、Bootstrap 等最新的 JS 框架的设计人才，处理及解决 PC 端及移动端网站或 app 等应用的交互问题。 三、教学内容及要求 （一）前端交互设计基础 1. 用户体验、交互设计、UI 设计 2. 用户体验与交互设计基本原则介绍 3. 交互细节案例介绍 4. 交互设计所需要技能 （二）Dreamweaver 网页设计/HTML5 1. Dreamweaver 界面介绍与操作基础 2. Web 历史与简单页面制作 3. 超级链接基础与制作 4. 图片基础与简单操作 5. 表格基础 6. Web 界面布局
7.Div中标签嵌套 8.层的属性概念与设置 9.Div的定位与属性设置 10.框架的简单应用 11.CSs基础 12.CSS文件类型与权限 13.CSS语法基础 14.CSS属性设置 15.CSS样式解析 16.CSS样式解析与简单案例 I7.Dreamweaver中的动态行为 18.表单与表单控件 19.表单控件 20.表单验证 2L.Dreamweaver模板与站点管理 22.eb页面搭建 (三)晋级的CSS3 1.CSS3新特性 2.CSS3新的框架模型-F1ex 3.CsS3互动过渡-transition 4.CSS3帧动画-keyframes 5.CSS32D转换-transform 6.CSS33D转换-transfor 7.HTM5中CSS3与SVG 8.HTM5中CSS3媒体查询 9.mM5中CSS3拟物化 10.HmML5中CSS3小图标 (四)WebAPP设计与实现
7. Div 中标签嵌套 8. 层的属性概念与设置 9. Div 的定位与属性设置 10. 框架的简单应用 11. CSS 基础 12. CSS 文件类型与权限 13. CSS 语法基础 14. CSS 属性设置 15. CSS 样式解析 16. CSS 样式解析与简单案例 17. Dreamweaver 中的动态行为 18. 表单与表单控件 19. 表单控件 20. 表单验证 21. Dreamweaver 模板与站点管理 22. Web 页面搭建 （三）晋级的 CSS3 1. CSS3 新特性 2. CSS3 新的框架模型-Flex 3. CSS3 互动过渡-transition 4. CSS3 帧动画-keyframes 5. CSS3 2D 转换-transform 6. CSS3 3D 转换-transform 7. HTML5 中 CSS3 与 SVG 8. HTML5 中 CSS3 媒体查询 9. HTML5 中 CSS3 拟物化 10. HTML5 中 CSS3 小图标 （四）WebAPP 设计与实现
1.走进神奇的黑ebAPP世界 2.通用尺寸设置 3.WebAPP调试工具的使用 4.WebAPP的布局方式 5.WebAPP屏幕方向与分辨率 6.WebAPP中的触屏实现 7.WebAPP中转场动画实现 8.微信站点的实现8：12 9.微信浏览器的局限性17：27 (五)自适应b结构界面 1.自适应设计的介绍与实现方法 2.自适应结构的两种设置 3。移动端的适应性配置 4.标准屏与高密度屏幕的1元素 5。媒体查询中的元素设置 教学手段：讲解，案例分析，讨论，评讲。 五、各教学环节学时分配 讲课 习题课 讨论课 实验 其他 合计 前端交互设计基 6 8 础 Dreamweaver风 页设计HTML5 8 10 晋级的CSS3 6 2 NebAPP设计与 6 8 实现
1. 走进神奇的 WebAPP 世界 2. 通用 UI 尺寸设置 3. WebAPP 调试工具的使用 4. WebAPP 的布局方式 5. WebAPP 屏幕方向与分辨率 6. WebAPP 中的触屏实现 7. WebAPP 中转场动画实现 8. 微信站点的实现 8:12 9. 微信浏览器的局限性 17:27 （五）自适应 Web 结构界面 1. 自适应设计的介绍与实现方法 2. 自适应结构的两种设置 3. 移动端的适应性配置 4. 标准屏与高密度屏幕的 UI 元素 5. 媒体查询中的元素设置 教学手段：讲解，案例分析，讨论，评讲。 五、各教学环节学时分配 讲课 习题课 讨论课 实验 其他 合计 前端交互设计基 础 6 2 8 Dreamweaver 网 页设计/HTML5 8 2 10 晋级的 CSS3 6 2 8 WebAPP 设计与 实现 6 2 8
自适应Web结构 界面 6 合计 32 16 48 六、考核及成绩评定方式 本门课程最终成绩以最后作业作为评分标准 七、教材和参考书目 教材：《ITML CSS设计与构建网站》，Duckett:杜伟：柴晓伟：涂曙光编著，清华大学出版社， 2015年09月. 参考书：《JavaScript jQuery交互式eb前端开发》，Duckett:杜伟；柴晓伟：涂曙光编著，清华 大学出版社，2015年09月。 八、说明 无 大纲制订人：余露露 大纲审定人： 制订日期：
自适应 Web 结构 界面 6 2 8 合计 32 16 48 六、考核及成绩评定方式 本门课程最终成绩以最后作业作为评分标准。 七、教材和参考书目 教 材：《HTML CSS 设计与构建网站》，Duckett;杜伟;柴晓伟;涂曙光编著，清华大学出版社， 2015 年 09 月。 参考书：《JavaScript jQuery 交互式 Web 前端开发》，Duckett;杜伟;柴晓伟;涂曙光编著，清华 大学出版社，2015 年 09 月。 八、说明 无 大纲制订人：余露露 大纲审定人： 制订日期：
