《移动Web开发技术基础》教学大纲2015

《Web前端设计基础》教学大纲适用专业:计算机科学与技术、软件工程、物联网课程类别：非学位课，专业基础课课程学时:51学时（周2+1学时）课程编号：9051404课程学分：3学分一、课程性质《Web前端设计基础》课程是计算机科学与技术、软件工程、物联网工程专业的一门专业基础课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3以及JavaScript脚本语言的相关知识，通过这门课程的教学,不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础.二、课程教学目标与基本要求本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训,培养学生具备设计实现Web客户端页面的初步能力.本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页;熟练掌握CSS3对网页进行布局和修饰的基本方法；掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。

三、课程内容其中标记★为难点第一部分第1章 HTML 5简介1.1 HTML历史与HTML 51。

2 HTML 5的优势1.3 HTML 5的基本结构和语法变化1.4 本章小结第2章 HTML 5的常用元素与属性2.1 HTML 5保留的常用元素2。

2 HTML 5新增的通用属性2.3 HTML 5新增的常用元素2。

4 HTML 5头部和元信息2.5 HTML 5新增的拖放API2.6 本章小结第3章 HTML 5表单相关元素和属性3。

《Web开发基础》课程教学大纲（审定稿）第一部分大纲说明一、课程的性质和任务《Web开发基础》是国家开放大学移动应用开发专业（大专）的统设必修课。

主要内容包括：HTML5基础知识、CSS3基础知识、CSS3高级动画、Less、Bootstrap响应式网页开发。

学习完本课程后，学生应该对Web开发基础知识有一个整体的概念，并初步掌握PC端和移动端Web开发的方法与技术。

二、先修课程要求学生在学习本课程之前应当具有计算机网络和程序设计的基础知识。

三、课程的任务1．掌握：HTML5基础知识，能够快速完成各种网页内容和结构的搭建；CSS3基础知识，能够为网页内容添加样式，美化网页效果；CSS3高级和动画技巧，能够编写各种网页动画效果；LESS语法，能够使用预编译的LESS语法简化CSS的开发；Bootstrap响应式网页开发，能够设计支持移动端设备响应式的网页效果。

2．理解：CSS3选择器语法，能够顺利查找到要修改的元素；CSS3变换和帧动画原理, 能够根据需求设计动画效果；LESS语法，能够使用LESS编写动态样式；响应式网页设计，能够利用媒体查询和栅格系统，设计适合移动设备的网页效果。

3．了解：第三方animate.css动画库，利用现有动画库，简化动画效果设计；Bootstrap 公共样式和组件，利用Bootstrap快速定义丰富的用户体验功能。

四、教学基本要求由于本课程具有很强的实践性，按照课程的教学任务，在知识结构学习方面应以重点讲授有关PC端网页设计与开发；响应式网页开发；移动端Web应用开发为主。

在能力结构培养方面以Web页面内容设计，样式设计，响应式和移动Web网页设计为重点。

本课程的教学环节包括：课堂讲授、网络学习、实验、考试等。

在教学方法上应采用多媒体教学系统进行启发式教学，培养学生思考问题、分析问题和解决问题的能力；同时引导学生通过上机完成实验巩固所学知识与掌握实际操作能力。

五、教学要求的层次1．掌握：要求学生能够全面掌握所学内容和方法，并能够初步进行分析、设计和制作。

《移动WEB前端开发》配套教学教案第11讲课时内容盒子模型授课时间90分钟课时 2教学目标☑理解盒子模型及相关CSS属性设置方法☑掌握块元素和行内元素的区别教学重点☑熟练使用盒子模型布局页面☑熟练设置CSS属性教学难点设置CSS属性教学设计1．教学思路：通过制作“阅读西游”页面的布局，促使学生熟悉CSS盒子模型的相关知识，能够灵活使用盒子模型进行页面布局。

2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。

教学内容演示案例引入新课：网页布局是CSS的核心技术。

在本课中，我们将主要利用<div>标签完成对“阅读西游”页面的布局。

案例效果知识讲解：具体可结合本项目的PPT课件进行配合讲解。

页面布局经常用到盒子模型和标准流文档，在接下来的两节课中，我们将会详细介绍这两方面内容。

1．盒子模型盒子模型是CSS控制页面时的重要工具，是在网页设计中经常用到的一种思维模型。

一个盒子中主要的属性有5个：宽度（width）、高度（height）、内边距（padding）、外边距（margin）、边框（border）。

元素的总宽度计算公式是：总元素的宽度=宽度（width）+左填充（padding-left）+右填充（padding-right）+左边框（border-left）+右边框（border-right）+左边距（margin-left）+右边距（margin-right）。

元素的总高度最终计算公式是：总元素的高度=高度（height）+顶部填充（padding-top）+底部填充（padding-bottom）+上边框（border-top）+下边框（border-right）+上边距（margin-top）+下边距（margin-bottom）。

1）宽度和高度width和height用于定义模型的宽度和高度。

2）内边距内边距padding指的是内容与边框之间的距离，例如：对块元素div设置padding属性：div{padding：-2px 2px 0px 2px;}div中的内容距离盒子边框的距离分别是：上边距-2px、右边距2px、下边距0px、左边距2px。

移动web企业级开发教材第一章：移动Web开发简介1.1 什么是移动Web开发移动Web开发是指为移动设备（如手机、平板电脑等）进行网页开发的一种技术，目的是为了适应移动设备的尺寸和操作特点，提供更加贴近用户体验的网页服务。

1.2 移动Web开发的特点1.2.1 多设备兼容性：不同的移动设备有不同的屏幕尺寸和分辨率，移动web开发需要考虑不同设备的兼容性。

1.2.2 触屏操作：移动设备多采用触屏操作，需要考虑用户的触摸操作和手势识别。

1.2.3 网络环境：移动设备经常处于无线网络环境下，网速和稳定性不如PC端，需要考虑网络环境对网页加载的影响。

1.3 移动Web开发的技术要求1.3.1 HTML5：作为移动Web开发的基础，HTML5支持多媒体、离线存储等功能，适合移动设备的特点。

1.3.2 CSS3：CSS3提供了更多的样式选择器和动画效果，可以实现更加丰富的界面交互。

1.3.3 JavaScript：JavaScript是实现网页交互的核心技术，可以通过框架和库来简化开发。

1.3.4 移动Web框架：Bootstrap、jQuery Mobile等框架可以快速地实现移动Web页面的响应式开发和交互效果。

第二章：移动Web开发环境搭建2.1 移动Web开发工具2.1.1 编辑工具：Sublime Text、VS Code等编辑器可以支持HTML、CSS、JavaScript的编写。

2.1.2 调试工具：Chrome浏览器的开发者工具可以调试网页，在PC端和移动端进行模拟。

2.1.3 框架库：引入Bootstrap、jQuery等框架和库，可以快速地搭建移动Web页面。

2.2 移动Web开发的调试2.2.1 模拟器：Android Studio、Xcode等开发工具自带的模拟器可以模拟移动设备环境。

2.2.2 浏览器调试：使用Chrome、Firefox等浏览器的开发者工具进行移动Web页面的调试。

《移动Web开发技术基础》教学大纲一、课程名称移动Web开发技术基础Foundation of Mobile Web Programming二、学时与学分80学时（理论48、实验32）、4学分三、适用专业非计算机专业本科生四、参考教材1.《JavaScript前端开发实用技术教程》，岳学军，人民邮电出版社，2014. 92.（HTML5程序设计》,Peter Lubbers等，人民邮电出版社，2012.53.《HTML5与CSS3权威指南（第2版）》,陆凌牛，机械工业出版社，2013.3五、课程的内容和目的本课程作为非计算机专业本科通识课程，是一门理论和实践紧密结合的实用课程，内容包括讣算机基础部分和程序设计部分。

汁算机基础部分涵盖计算机软硬件组成、数制表示、操作系统、多媒体原理和网络基础知识。

程序设计部分为Web开发技术：HTML技术、CSS技术、Javascript语言、AJAX技术、HTML5新技术及HTML5 API。

使学生掌握网站询端开发技术和开发移动端单页Web应用的基本原则、方法和步骤，从而使学生具有扎实的Web开发理论基础和较强的实践动手开发能力。

本课程的主要目的是使学生了解计算机基础知识、Web开发技术, 具备HTML5语言的编程能力。

基木要求1.了解计算机基础知识。

2.了解操作系统的作用及分类3.了解多媒体基础知识4.了解网络基础知识，掌握网络基本应用及网络信息的获取方法5.理解Web工作原理，了解Web技术基础。

6.熟练掌握超文本标记语言HTML文档的结构、常用文档元素的含义和基本使用方法。

7.理解样式表语言CSS的基本概念和作用，掌握CSS的基本语法和使用方法。

8.掌握脚本语言JavaScript的基本概念和语法，掌握JavaScript对常用HTML文档元素的操作方法；了解文档对象模型DOM的基本概念和作用。

9.了解 HTML3 新标签及 HTML5 API10.了解主要动态网页技术的基本概念。

《移动WEB开发实践》课程名称：移动WEB开发实践课程编号：1103034108学分及学时：4学分72学时（其中理论学时36学时）适用专业：网络工程开课学期：第5学期开课部门：计算机与互联网学院先修课程：网站建设与管理，数据库原理，数据结构考核要求：考试使用教材及主要参考书：教材：《程序设计教程》郑阿奇主编机械工业出版社参考书：《程序设计教程》尚俊杰主编，清华大学出版社《计算机软件技术基础（第二版）》麦中凡高等教育出版社《软件开发技术基础》赵英良仇国巍机械工业出版社一、课程性质和任务《移动WEB开发实践》为本专业的有关网络程序设计的较高级内容。

本课程将介绍WEB系统开发的基础模式、方法，采用ASP. NET技术结合语言进行介绍，涉及程序所用的开发工具和运行环境、程序设计基础和的程序设计基础、数据库访问、三层架构开发等有关内容。

二、课程教学目的和要求通过本课程的学习，使学生掌握开发程序的基础知识和基本方法，对网络程序设计有一个全面的认识和了解，并能够独立自主开发小型网络应用程序。

四、课程教学中应注意的问题1、课程使用工具较多、涉及面广，教学形式以讲授方式为主+多媒体辅助+实验+网络教学平台进行答疑和讨论。

2、为加强实动手能力的培养，应充分重视实践性教学环节，课内学时保证机机时不少于10学时。

3、关键环节实现方面的技术问题可辅以课堂演示的形式。

考核形式：考查。

要求：平时成绩：40%，期末成绩：60%五、课程教学内容第一部分总体介绍本章对WEB系统开发进行总体介绍；重点掌握的开发工具和运行环境，并掌握新建一个的基本流程和建立应用程序的意义和方法。

学生要能够熟练搭建 的运行环境，并能够开发第一个简单的应用程序；重点：ASP. NET开发环境；IIS应用。

难点：ASP. NET开发环境。

第二部分 程序设计基础本章对程序设计语言进行总体介绍，包括基本数据类型，变量与常量，运算符与表达式，常用系统函数，复合数据类型，过程，流程控制以及类的应用等。

《移动WEB前端开发》配套教学教案第03讲课时内容深入了解“超文本”授课时间90分钟课时 2教学目标☑掌握HTML超链接的使用方法☑了解网站组织结构教学重点☑了解网站组织结构☑熟练掌握超链接的制作方法教学难点组织网站结构教学设计1．教学思路：通过分析“西游记”网站结构图，使学生熟悉网站组织结构的相关知识，能够利用超链接建立网站中各页面的联系。

2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。

教学内容演示案例引入新课：一个好的网站结构就如同一个人身体体质的好坏，好的网站结构更容易被搜寻引擎搜到，可以更快速地浏览更多页面，同时给浏览者更为合理、便捷的体验。

在本次课中，将对“西游记”网站进行站点初始化设置，设计网站结构，并以“西游首页”为例，介绍超链接效果。

案例效果知识讲解：具体可结合本项目的PPT课件进行配合讲解。

1．网站组织结构一个网站包含若干网页，网页内容包括文本、图片、视频、FLASH文件等，浏览者通过浏览器将网页下载到客户本地缓存，然后通过浏览器解析源码，在浏览器窗口显示出用户可以正常阅读的图片和文字。

组织网站的结构就是将这些页面合理的组织起来，使浏览者能够快捷方便的浏览网站。

1）物理结构网站物理结构指的是网站目录及所包含文件所存储的真实位置所表现出来的结构，物理结构一般包含两种不同的表现形式：扁平式物理结构和树形物理结构。

2）逻辑结构与网站的物理结构不同，网站的逻辑结构也称为链接结构，主要是指由网页内部链接所形成的逻辑结构，或者称为链接结构。

逻辑结构和物理结构的区别在于，逻辑结构由网站页面的相互链接关系决定，而物理结构由网站页面的物理存放地址决定。

2．超链接在HTML文件中，页面之间创建超链接的方法很简单，语法格式如下：。

《移动WEB前端开发》
配套教学教案
第09讲
课时内容继承和层叠授课时间90分钟课时 2
教学目标☑掌握CSS的继承性
☑掌握CSS的层叠性
☑能够确定CSS多种样式下的优先级
教学重点☑熟练使用CSS的继承性装饰页面☑熟练使用CSS的层叠性装饰页面
教学难点掌握CSS优先级
教学设计1．教学思路：通过制作index.html页面中的“新闻热点”版块，促使学生熟悉CSS继承和层叠的相关知识，能够使用CSS的继承性和层叠性灵活装饰页面。

2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。

教学内容
演示案例引入新课：
继承和层叠是CSS样式设计者提高工作效率、整合代码结构的两把利器。

在本案例中，以制作index.html中的“新闻热点”版块为例，介绍继承和层叠的使用方法。

案例效果
知识讲解：具体可结合本项目的PPT课件进行配合讲解。

CSS的继承性和层叠性是CSS层叠样式表的基本特性，使用这两种性质可以大大提高页面制作和后期维护效率。

使用CSS的继承性和层叠性，首先要熟悉CSS控制页面的方法，以及各个方法之间的优先级，这样才不会使样式效果混乱。

《移动WEB前端开发》
配套教学教案
第05讲
课时内容认识更多HTML标签授课时间90分钟课时 2
教学目标☑认识更多HTML标签
☑掌握HTML的文本控制标签☑掌握HTML的列表标签
教学重点☑文本控制标签☑列表标签
教学难点格式化标签
教学设计1．教学思路：通过制作“西游文学”页面，使学生熟悉HTML标签的相关知识，能够利用标签制作简单页面。

2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。

教学内容
演示案例引入新课：
本案例中，将会制作“西游文学”页面，以此为例，介绍HTML常用标签。

案例效果
知识讲解：具体可结合本项目的PPT课件进行配合讲解。

1．文本控制标签
文字在页面制作中占据重要位置，在HTML中，我们会用到一系列的文本控制标签。

1）标题标签
HTML提供了6个标题标签，分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。

其中，<h1> 定。