《信息交互界面设计与编程》课程教学大纲

1、信息交互界面设计与编程教学大纲课程代码174248课程名称信息交互界面设计与编程英文名称Information interactive interface design and programming课程类别学科基础课课程性质必修学时总学时：64上机学时：0实验学时：0实践学时：0实创学时：16学分4开课学期第四学期开课单位设计学院适用专业交互设计、工业设计、产品设计授课语言中文授课先修课程工业设计概论、工程训练毕业要求（专业培养能力）本课程对学生达到如下毕业要求有如下贡献：1.工程知识：掌握扎实的基础知识、专业基本原理、方法和手段，能够将数学、自然科学、本专业基础知识和专业知识用于解决复杂工

2、程问题，并接触和掌握造型材料、表面技术、成形工艺和数字化知识，为解决企业机械工程实际复杂问题打下知识基础。2.问题分析：能够应用数学、自然科学、本专业基本原理、方法和手段和工业设计知识，识别、表达、并通过文献研究分析工业产品制造性中的复杂问题，以获得有效结论。3.设计/开发解决方案：能够设计针对工业产品复杂问题的解决方案，设计满足特定需求的造型材料、表面技术或工艺流程，并能够在设计环节中体现创新意识，考虑社会、健康、安全、法律、文化以及环境等因素。4.研究：能够基于科学原理并采用科学方法对工业产品复杂问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论。5.使用现代工具

3、：能够针对工业产品复杂问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，包括对工业产品复杂问题的预测与模拟，并能够理解其局限性。课程培养学生的能力（教学目标）完成课程后，学生将具备以下能力：（1）掌握信息交互界面设计的基本原理和基本知识，培养学生发现问题、解决问题的基本能力。1、2（2掌握信息交互界面编程概念，并逐步在设计过程中应用这些先进技术，从而能将精力集中于创意和构思，高效地开展创新活动。3、5课程简介课程是工业设计的专业基础课，也是交互设计专业学生的一门必修课，通过本课程学习，使学生具备PC网站和手机端网站整体策划、建设、维护和管理的基本知识，能熟练运用网页制作软件和

4、编程语言进行网站的创建、布局和编辑，熟悉网站美工创作、动画设计与制作，能够根据相关主题进行网站设计和制作。教学内容与学时分配（一）Html基本概念与基本标记 4学时1. Html基本概念2. Html基本标记head、title、meta、body3. 文字段落标记（二）Html使用图像与列表4学时1. 插入图像2. 图像的超链接3. 有序列表4. 无序列表（三）使用表格4学时1. 创建表格2. 表格基本属性3. 表格的边框4. 表格背景 5. 表格的属性（四）建立超链接及添加多媒体4学时1. 超链接的基本知识2. 内部链接3. 锚点链接4. 外部链接5. 设置滚动效果6. 插入多媒

5、体（五）使用框架结构 4学时1. 框架的基本概念2. 设置框架集的属性frameset 3. 设置窗口属性frame4. 浮动框架iframe5. 创建框架链接（六）使用CSS样式表8学时1. CSS的基本概念2. 字体属性 3. 颜色和背景属性4. 段落属性5. 边框属性6. 定位属性7. 列表属性8. 光标属性cursor9. 滤镜属性（七）Web标准与CSS网页布局 4学时1. Web标准与CSS布局2. DIV+CSS布局网页 3. 使用CSS设计网站导航栏4. 使用CSS设计表单样式5. 字体及段落样式设计6. 使用CSS设计图片样式7. 使用CSS控制

6、链接样式（八）JavaScript脚本基础 4学时1. JavaScript简介2. JavaScript基本语法 3. JavaScript的事件（九）Java特效 4学时1. 时间特效2. 图像特效  3. 窗口特效（十）Dreamweaver编辑HTML 4学时1. Dreamweaver的基本操作界面2. 使用文本3. 插入图像4. 插入多媒体5. 设置链接6. 布局网页（十一）Android App简介 4学时1.创建Android仿真器2. 在仿真器上执行Android App3. Android Studio的操作环境（十二）Android程序设计基

7、础 4学时1. Android App的主角：ActMty2. Android程序的设计流程 3.认识Activity的基本程序逻辑4. 组件的布局与属性设置（十三）Android App界面设计 4学时1. View与ViewGroup（Layout）：组件与布局2. 使用LinearLayout建立画面布局3. 使用weight属性控制组件的宽高4. 通过属性美化外观5. 以程序设置组件的外观属性（十四）用户界面的基本组件 4学时1. 多选一的单选按钮2. 可复选的复选框3. 显示图像的ImageView（十五）高级UI组件：Spinner与ListView 4学时1. Spin

8、ner选单组件2. ListView列表框3. 在程序中变更Spinner的显示选项实验教学（包括上机学时、实验学时、实践学时、实创学时）实验0学时,实践0学时，实创学时：16教学方法课程教学以课堂教学、课外作业、综合讨论、网络以及授课教师的科研项目于积累等共同实施。考核方式平时成绩及课程设计各占50%。教材及参考书主要参考资料：1JavaScript宝典 Danny Goodman（美），电子工业出版社，2009年2HTML5程序设计Peter Lubbers 等著；柳靖等译，人民邮电出版社，2012年3 HTML5触摸界面设计与开发，美 Stephen，Woods 著；覃介右，谷岳译，人民

9、邮电出版社，2014年4 Android APP开发入门:使用Android Studio环境施威铭著，机械工业出版社，20165移动Web开发从入门到精通. 王翠萍. 中国铁道出版社. 2016Information Interactive Interface Design and Programming SyllabusCourse Code174248Course TitleInformation Interactive Interface Design and ProgrammingEnglish TitleInformationInteractive Interface Design

10、 and ProgrammingCourse CategoryBasic coursesCourse NatureCompulsorycoursesCredit HoursTotal: 64 Computer: 0 Experiment: 0 Practice: 0 Practical innovation: 16Credit4SemesterFourth SemesterInstituteSchool of DesignProgram OrientedInteraction design, industrial design and product designTeaching Langua

11、geTeaching in ChinesePrerequisitesConcept of industrial design and engineering training IStudent Outcomes (Special Training Ability)This course contributes to student outcomes as follows: 1. Engineering knowledge: master the basic knowledge, professional basic principles, methods and means to be abl

12、e to apply mathematics, natural science, basic knowledge and expertise of this major to solve complicatedly engineering problems, and contact and master the modelling materials, surface technology, formation process and digital knowledge to lay knowledge foundation for solving actual complex problem

13、s of machinery project of enterprise.(2) Problem analysis: apply the basic principles, methods and means of the mathematics, natural science and the major as well as knowledge related to the industrial design to identify, express and obtain effective solutions through complicated problems in the lit

14、erature research and analysis design product.3. Design/development solution: capable of designing the solution aiming at the complex problems of industrial products, designing the modeling materials, surface technology or process flow meeting the specific demands, embodying innovation awareness in t

15、he design link, and considering society, health, safety, law, culture, environment, etc.4. Research: research the complex problems of the industrial products based on the scientific principle and scientific method, including design experiment, analysis and interpretation data, obtaining rational and

16、 effective conclusion by comprehensive information.5. Use modern tools: capable of developing, selecting and using proper technology, resource, modern project tool and information technology tool aiming at the complex problems of the industrial product, including predicating and simulating the compl

17、ex problems of the industrial product as well as understanding the boundedness.Course for Students' Ability Development (Teaching Objectives)After the courses, students will have the following capabilities:(1) Master the basic principles and knowledge of information interactive interface design,

18、 and cultivate the basic capability for students to find out and solve problems. 1、2(2 Master the concept of information interactive interface programming and apply the advanced technologies in the design process gradually , concentrate the energy in the creation and concept so as to develop the inn

19、ovation activity effectively. 3、5Course DescriptionThe course is a specialized core course of industrial design and a compulsory course for students of interactive design major. Through this course, students will enjoy the basic knowledge of overall planning, building, maintenance and management of

20、PC website and mobile phone website. Students can be familiar with the use of website to develop software and programming language for creation, layout and editing of the website, as well as the site art designing creation, animation design and production so that they can carry out the website desig

21、n and production in accordance with relevant themes.Distribution of Teaching Contents and Class Hours(I) Basic concept and basic tags of Html 4 class hours1. Basic concept of Html2. Basic tags of Html include head, title, meta and body3. Text paragraph tags(II) Html using images and list 4 class hou

22、rs1. Inserting Images2. Image Hyperlink3. Ordered List4. Unordered List(III) Use the table 4 class hours1. Create Table2. Basic property of table 3. Table border4. Table background5. Table property(IV) Establish hyperlinks and add multimedia 4 class hours1. Basic knowledge of the hyperlink2. Interna

23、l links3. Anchor link4. External links5. Set scrolling effect6. Insert multimedia(V) Use frame structure 4 class hours1. Basic concept of frame2. Set the property of the frameset3. Set the window property frame4. Floating frame iframe5. Create framework link(VI) Use CSS style sheet 8 class hours1. B

24、asic concept of CSS2. Font property3. Color and background property4. Paragraph Properties5. Border Properties6. Positioning property7. List Property8. Cursor property cursor9. Filter Properties(VII) Web standards and CSS page layout 4 class hours1. Web standards and CSS layout 2. DIV+CSS layout pag

25、e 3. Use CSS to design the website navigation bar4. Use CSS to design the form style5. Font and paragraph style design6. Use CSS to design image style7.Use CSS to control the link style(8) JavaScript script basics 4 class hours1. Brief Introduction to JavaScript2. Basic grammar of JavaScript 3. Java

26、Script events(IX) special effects of Java 4 class hours1. Special effects of time 2. Special effects of image3. Special effects of window(X) Dreamweaver edits HTML 4 class hours1. Basic operation interface of Dreamweaver 2. Use texts3. Inserting Images4. Insert multimedia5. Set Link6. Layout web pag

27、e(XI) Introduction to Android App 4 class hours1.Create an Android emulator2.Perform Android App on the emulator3.Operating environment of Android Studio (12) Android programming baics 4 class hours1.The leading role of the Android App: ActMty2. Design process of Android program3.Understand the basi

28、c program logic of Activity4.Component layout and property settings(XIII) Android App interface design 4 class hours1.View and ViewGroup (Layout): component and layout2.Use LinearLayout to create a screen layout3.Use weight property to control the width / height of the component4.Beautify the appear

29、ance through the property5.Set the appearance property of the component through program(XIV) Basic components of the user interface 4 class hours1.Radio button in 1-out-of-m2.Available check box3.ImageView demonstrating images(XV) Advanced UI components: Spinner and ListView4 class hours1.Spinner se

30、lects a single component2.ListView list box3.Change the display options for Spinner in the programExperimental teaching (including computer class hours, experimental class hours, practice class hours, practical innovation class hours)Experiment: 0 Practice: 0 Actual creation: 16 Teaching MethodCours

31、e teaching is through cooperation of classroom teaching, extracurricular homework, comprehensive discussion , network and teacher's accumulated research project.Examination MethodOrdinary achievement and course design account for 50% respectivelyTeaching Materials and Reference BooksMain referen

32、ce data recommended:1 JavaScript, Danny Goodman (US), Electronic Industry Press, 20092 HTML5 Programming, by Peter Lubbers etc.; translated by Liu Jing, People's Posts and Telecommunications Press, 20123 HTML5 Touch Interface Design and Development, by US Stephen and Woods ; translated by Tan Ji

33、eyou and GuYue, People's Posts and Telecommunications Press, 20144 Android APP Development Introduction: the Use of Android Studio Environment, Shi Weiming, Machinery Industry Press, 20165 Mobile Web Development from Introduction to Proficiency. Wang Cuiping. China Railway Press. 2016信息交互界面设计与编程

34、实创教学大纲课程代码174248课程名称信息交互界面设计与编程英文名称课程类别学科基础课课程性质必修学时总学时：64上机学时：0实验学时：0实践学时：0 实创学时：16学分1开课学期第四学期开课单位设计学院适用专业交互设计、工业设计、产品设计授课语言中文授课先修课程工业设计概论、工程训练毕业要求（专业培养能力）本课程对学生达到如下毕业要求有如下贡献：1.工程知识：掌握扎实的基础知识、专业基本原理、方法和手段，能够将数学、自然科学、本专业基础知识和专业知识用于解决复杂工程问题，并接触和掌握造型材料、表面技术、成形工艺和数字化知识，为解决企业机械工程实际复杂问题打下知识基础。2.问题分析：能够应用

35、数学、自然科学、本专业基本原理、方法和手段和工业设计知识，识别、表达、并通过文献研究分析工业产品制造性中的复杂问题，以获得有效结论。3.设计/开发解决方案：能够设计针对工业产品复杂问题的解决方案，设计满足特定需求的造型材料、表面技术或工艺流程，并能够在设计环节中体现创新意识，考虑社会、健康、安全、法律、文化以及环境等因素。4.研究：能够基于科学原理并采用科学方法对工业产品复杂问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论。5.使用现代工具：能够针对工业产品复杂问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，包括对工业产品复杂问题的预测与模拟，并

36、能够理解其局限性。课程培养学生的能力（教学目标）完成课程后，学生将具备以下能力：（1）掌握信息交互界面设计的基本原理和基本知识，培养学生发现问题、解决问题的基本能力。1、2（2掌握信息交互界面编程概念，并逐步在设计过程中应用这些先进技术，从而能将精力集中于创意和构思，高效地开展创新活动。3、5课程简介课程是工业设计的专业基础课，也是交互设计专业学生的一门必修课，通过本课程学习，使学生具备PC网站和手机端网站整体策划、建设、维护和管理的基本知识，能熟练运用网页制作软件和编程语言进行网站的创建、布局和编辑，熟悉网站美工创作、动画设计与制作，能够根据相关主题进行网站设计和制作。主要仪器设备与软件计算

37、机，Dreamweaver软件，Android Studio软件实创报告实验0学时,实践0学时，实创16学时考核方式平时成绩及课程设计各占50%。教材、实创指导书及教学参考书目主要参考资料：1JavaScript宝典 Danny Goodman（美），电子工业出版社，2009年2HTML5程序设计Peter Lubbers 等著；柳靖等译，人民邮电出版社，2012年3 HTML5触摸界面设计与开发，美 Stephen，Woods 著；覃介右，谷岳译，人民邮电出版社，2014年4 Android APP开发入门:使用Android Studio环境施威铭著，机械工业出版社，20165移动Web开

38、发从入门到精通. 王翠萍. 中国铁道出版社. 201612信息交互界面设计与编程实创教学内容与学时分配实创项目编号实创项目名称实验学时实创内容提要实创类型实创要求每组人数主要仪器设备与软件1Html使用图像与列表2插入图像、图像的超链接、插入列表及列表的配置等设计性必做4计算机，Dreamweaver2建立超链接及添加多媒体2内部及外部超链接、添加多媒体音乐、flash等设计性必做4计算机，Dreamweaver3使用框架结构2设置框架集的属性、设置窗口属性、浮动框架设计性必做4计算机，Dreamweaver4使用CSS样式表2CSS的结构、属性配置设计性必做4计算机，Dreamweaver5

39、Web标准与CSS网页布局4Web标准与CSS布局、DIV+CSS布局网页、样式控制设计性必做4计算机，Dreamweaver6Android App界面设计4组件与布局、属性控制组件设计性必做4计算机，Android StudioInformation Interactive Interface Design and Programming SyllabusCourse Code174248Course TitleInformation Interactive Interface Design and ProgrammingEnglish TitleInformation Interacti

40、ve Interface Design and ProgrammingCourse CategoryBasic coursesCourse NatureCompulsoryClasses hoursTotal: 64 Computer: 0 Experiment: 0 Practice: 0 Practical innovation: 16Credit1SemesterFourth SemesterInstituteSchool of DesignProgram OrientedInteraction design, industrial design and product designTe

41、aching LanguageTeaching in ChinesePrerequisitesConcept of industrial design and engineering training IStudent Outcomes (Special Training Ability)This course contributes to student outcomes as follows: 1. Engineering knowledge: master the basic knowledge, professional basic principles, methods and me

42、ans to be able to apply mathematics, natural science, basic knowledge and expertise of this major to solve complicatedly engineering problems, and contact and master the modelling materials, surface technology, formation process and digital knowledge to lay knowledge foundation for solving actual co

43、mplex problems of machinery project of enterprise.(2) Problem analysis: apply the basic principles, methods and means of the mathematics, natural science and the major as well as knowledge related to the industrial design to identify, express and obtain effective solutions through complicated proble

44、ms in the literature research and analysis design product.3. Design/development solution: capable of designing the solution aiming at the complex problems of industrial products, designing the modeling materials, surface technology or process flow meeting the specific demands, embodying innovation a

45、wareness in the design link, and considering society, health, safety, law, culture, environment, etc.4. Research: research the complex problems of the industrial products based on the scientific principle and scientific method, including design experiment, analysis and interpretation data, obtaining

46、 rational and effective conclusion by comprehensive information.5. Use modern tools: capable of developing, selecting and using proper technology, resource, modern project tool and information technology tool aiming at the complex problems of the industrial product, including predicating and simulat

47、ing the complex problems of the industrial product as well as understanding the boundedness.Course for Students' Ability Development (Teaching Objectives)After the courses, students will have the following capabilities:(1) Master the basic principles and knowledge of information interactive inte

48、rface design, and cultivate the basic capability for students to find out and solve problems. 1、2(2 Master the concept of information interactive interface programming and apply the advanced technologies in the design process gradually , concentrate the energy in the creation and concept so as to de

49、velop the innovation activity effectively. 3、5Course DescriptionThe course is a specialized core course of industrial design and a compulsory course for students of interactive design major. Through this course, students will enjoy the basic knowledge of overall planning, building, maintenance and m

50、anagement of PC website and mobile phone website. Students can be familiar with the use of website to develop software and programming language for creation, layout and editing of the website, as well as the site art designing creation, animation design and production so that they can carry out the

51、website design and production in accordance with relevant themes.Main Equipment and SoftwareComputer, Dreamweaver software, Android Studio softwareActual creation ReportExpriment: 0 Practice: 0 Actual creation: 16Examination MethodOrdinary achievement and course design account for 50% respectivelyTeaching materials, actual creation guide books and reference books of teachingMain reference data recommended