《HTML5移动Web设计与开发》课程大纲

蓝鸥北京HTML5开发课程大纲HTML5课程体系介绍简介课程优势是使用OS X 10.11操作系统，hbuilder开发环境，采用FCBS教学模式，强化了响应式web应用开发，微信公众平台开发，跨平台混合应用开发，融入实战项目开发，并且增加了企业常用技术、全栈开发技术(PHP后台开发、高性能nodejs+scoket.io)。

增强学员综合能力，项目阶段强化项目流程，严抓代码质量，强化协同开发，以企业标准完成项目。

课程介绍课程体系1、基础语言（html5+css3）html5+css3语言是html5程序开发的基础开发语言，是进行html5程序开发的必备能力。

通过这个阶段学习，学生将掌握html5开发的基础语言，具备基本的，理解代码的能力，并掌握以下能力：（1）熟练使用OS X操作系统、sublime和hbuilder开发工具（2）熟练掌握程序开发工作中的基础技术、常用概念（3）熟练使用HTML5+CSS3编写跨平台的响应式页面（4）页面兼容桌面端主流浏览器、移动端的安卓、ios及微信2.javascript+jqueryjavascript阶段将要学习html5程序开发的用户交互内容，通过这个阶段学习，学生将具备使用javascript来编写用户与页面之间的交互效果、动画及游戏开发，并掌握以下能力：（1）熟练掌握javascript的基础语法，来实现对页面中内容的操作（2）熟练使用javascript来完成动画效果的开发制作（3）熟练使用javascript中的dom来对html结构进行增删改查（4）熟练掌握javascript中的触屏事件及设备事件完成触屏应用的开发（5）熟练使用javascript中的cavnas来开发跨平台游戏（6）熟练掌握javascript中的面向对象语法并运用在项目中3、前后台交互(php+mysql,ajax)在前后台交互开发阶段主要学习内容包括：后台语言php、数据库mysql、及异步交互技术ajax，跨域数据交互jsonp，通过本阶段学习，学生将具备基础的后台开发能力，并掌握以下能力：（1）熟练掌握php语言的语法及跟js的异同点（2）熟练使用php中的文件操作方法对文件进行操作（3）熟练使用sql语句对数据库进行增删改查（4）熟练掌握php+mysql编写供前端使用的接口(api)（5）熟练使用ajax跟后台进行数据交互，并编写前端效果（6）熟练使用jsonp进行跨域数据交互4、微信公众平台开发本阶段将讲解微信公众平台开发中的：微信公众平台接口开发、微信JSSDK 的使用、微信开发者工具、SAE中数据库及stroage的开发技术，通过本阶段学习，学生将掌握在微信平台中的微信邀请函、轻应用、小游戏、微商城、微网站的开发。

一、课程说明《网页设计与制作（HTML5）》课程标准课程名称网页设计与制作（HTML5）标准简称Web 前端适用专业计算机应用技术修读学期第三学期制订时间2018-08课程代码课程学时72 课程学分 2课程类型 B 类课程性质必修课课程类别专业核心课先修课程计算机文化基础、Photoshop后续课程对应职业资格证或内容Web 前端工程师合作开发企业无执笔人合作者无审核人制（修）定日期2018-08注：1.课程类型（单一选项）：A类（纯理论课）/B类（理论＋实践）/C类（纯实践课）2.课程性质（单一选项）：必修课/专业选修课/公共选修课3.课程类别（单一选项）：公共基础课/专业基础课/专业核心课4.合作者：须是行业企业人员，如果没有，则填无二、课程定位《网页设计与制作（HTML5）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、JavaScript语言、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

三、设计思路课程设计理念：明确必要的理论知识的生化与知识层面的拓展，不局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

160四、课程培养目标1.专业能力（1）通过《网页设计与制作（HTML5）》课程的学习，掌握Sublime 编程工具的使用和网页设计的思路。

《html5移动web开发(第2版)》课程标准下载温馨提示：该文档是我店铺精心编制而成，希望大家下载以后，能够帮助大家解决实际的问题。

文档下载后可定制随意修改，请根据实际需要进行相应的调整和使用，谢谢!并且，本店铺为大家提供各种各样类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，如想了解不同资料格式和写法，敬请关注!Download tips: This document is carefully compiled by the editor. I hope that after you download them, they can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!In addition, our shop provides you with various types of practical materials, such as educational essays, diary appreciation, sentence excerpts, ancient poems, classic articles, topic composition, work summary, word parsing, copy excerpts, other materials and so on, want to know different data formats and writing methods, please pay attention!HTML5移动web开发是当今互联网领域中的一个热门话题，作为一门前沿的技术课程，其标准对于学习者来说至关重要。

基于HTML5技术的移动Web前端设计与开发一、本文概述随着移动互联网的迅猛发展，移动设备的普及和应用场景的多样化使得移动Web前端设计与开发的重要性日益凸显。

作为新一代Web 技术标准的HTML5，以其丰富的API、强大的跨平台兼容性和良好的用户体验，成为移动Web前端开发的理想选择。

本文旨在探讨基于HTML5技术的移动Web前端设计与开发的相关理论与实践，包括HTML5的核心技术特点、移动Web前端的设计原则、开发流程、性能优化等方面，以期为广大Web前端开发者提供一份全面、深入的参考指南。

在本文中，我们将首先介绍HTML5技术的核心特点和优势，阐述其为何成为移动Web前端开发的理想选择。

接着，我们将从用户体验的角度出发，探讨移动Web前端的设计原则，包括界面设计、交互设计、响应式设计等方面。

然后，我们将详细介绍基于HTML5技术的移动Web前端开发流程，包括项目准备、页面布局、功能实现、性能优化等步骤。

我们还将分享一些实用的开发技巧和经验，帮助开发者提高开发效率和产品质量。

我们将对移动Web前端的发展趋势进行展望，探讨HTML5在未来移动Web前端开发中的潜力和挑战。

通过本文的阅读，相信读者能够对基于HTML5技术的移动Web前端设计与开发有一个全面、深入的了解，为未来的开发工作提供有力的支持和指导。

二、HTML5基础知识HTML5，全称HyperText Markup Language 5，是构成网页标准语言HTML的最新版本。

它是互联网的新一代标准，被设计为可以在互联网上的各种设备和平台上运行，无论是PC、笔记本、平板电脑还是手机。

HTML5的出现，使得Web前端设计与开发工作更加便捷，也为移动Web应用的发展打开了新的大门。

HTML5引入了许多新的元素和API，如<video>和<audio>元素，使得开发者可以在网页上直接嵌入音频和视频内容，无需依赖第三方插件如Flash。

《HTML5网页设计》课程设计教学大纲二、课程设计简介网站规划与网页设计是计算机科学与技术专业、数字媒体专业的一门专业基础课，也是WEB程序设计和移动软件开发的基础，是网站的前端开发技术。

课程设计则是教学中必不可少的重要环节。

通过课程设计，学生可以更进一步了解网站和APP应用的设计思想及实现方法,从而达到锻炼学生理论与实践相结合的能力。

三、课程性质在各个行业都用到网站；开设本课程就是使学生较全面地掌握网站的规划和网站前端开发编程及网页设计，为WEB软件开发课程提供必要的基础，提高解决实际问题的能力。

四、课程教学目的通过该课程学习，学生应能掌握网站相关基本概念、网站工作原理、网站规划目标、规划内容及工作，辨析各种技术特点，并能合理运用相关技术、工具与方法开发、构建Web站点和手机APP应用，能进一步拓展知识范围、适应新技术发展。

课程设计培养综合网站与程序设计方法分析和解决实际问题的能力。

使学生在程序设计方法及上机操作等基本技能和科学作风方面受到比较系统的、严格的训练。

同时提高技术文档写作能力。

五、课程设计教学内容及按排课程设计的时间为16学时，一般按排在17~18周上课。

要求学生在老师的指导下，在实验室和业余时间完成规定的项目，并提供课程设计文档，及能完成要求功能的程序代码。

具体时间按排：程序设计1~11学时，设计报告 2~4学时。

课程设计的具体内容：（根据教学情况而定，仅供参考）甜点坊订购系统实战使用jQuery Mobile并利用local Storage来做订单的暂存。

网站架构如下：完成移动设计网站后，再用相关技术打包封装成APP应用。

记事本 Note APP 实战记事本这一类软件是许多智能手机必装的软件之一，必备需求有新增、修改、查询、和删除，具体可以参考智能机的软件，数据库采用 WEBSQL，完成专用的记事本。

此APP应用的界面可参考智能机的软件。

此项目关键是使用 jQuery mobile ，打包生成APP应用。

《HTML5与微网站开发》课程标准一、课程概述1.课程性质《HTML5与微网站开发》是移动互联应用技术专业针对移动互联应用开发企业的Web 前端开发岗位，经过对企业岗位典型工作任务的调研和分析后，归纳总结出来的为适应具备Web前端开发能力要求而设置的一门专业核心课程。

2.课程任务《HTML5与微网站开发》课程通过与Web前端开发相关的实际项目学习，增强学生对专业Web前端开发知识运用的认识，让他们熟练掌握流式布局的方法，熟练掌握视口概念、媒体查询方法、栅格系统的原理及应用方法，熟练掌握弹性布局的方法，熟悉Bootstrap前端框架的使用方法，从而满足企业相应岗位的职业能力需求。

3.课程要求通过理实一体的课程学习，培养学生Web前端开发方面的岗位职业能力，养成良好的职业道德、职业素养、法律意识，养成质量意识、环保意识、安全意识、信息素养、工匠精神、创新精神，养成勇于奋斗、乐观向上，能够进行有效的人际沟通和协作，与社会、自然和谐共处，具有职业生涯规划的意识，具有较强的集体意识和团队合作精神，为从事Web前端开发岗位打下坚实的基础。

二、教学目标1.知识目标（1）掌握HTML5音频与视频处理技术；（2）掌握HTML5拖曳技术；（3）掌握HTML5Canvas绘制图形技术；（4）了解HTML5Web存储技术；（5）熟悉移动端页面布局和常用事件；（6）掌握视口概念；（7）掌握流式布局技术；（8）掌握媒体查询技术；（9）掌握响应式布局技术；（10）掌握响应式布局中栅格系统原理；（11）掌握Flex弹性布局技术；（12）掌握微网站开发的技术。

2.能力目标（1）能使用HTML5音频与视频技术处理音视频；（2）能使用HTML5拖曳方法拖曳文件；（3）能使用HTML5Canvas绘制图形；（4）能设置视口；（5）能进行流式布局；（6）会使用媒体查询技术；（7）能进行响应式布局；（8）能在网页布局中使用栅格系统；（9）能使用Flex弹性布局技术；（10）能开发简单的微网站。

《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。

二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。

三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。

◆理解HTML、CSS和JavaScript的功能和作用。

◆熟悉Dreamweaver工具的基本操作。

学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。

课程代码：5112006网页设计基础Fundamentals of Web Design学分：3 总学时：64 理论学时：40 实验学时: 24一、课程教学目标《网页设计基础》是软件工程专业的一门专业必修课程，涉及HTML标记、CSS样式、网页布局、JavaScript编程基础及事件处理等内容。

通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史和使用方法，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业门户、电商类网站，为以后前端系列课程的学习打好基础。

随着web3.0时代的到来，网络代表的端技术、跨端技术、可视化、端智能将成为未来人机交互的主宰。

JavaScript语言做为Web开发的基础，伴随着整个互联网的快速发展和传播，深度挖掘课程中所蕴含的思想价值和精神内涵，科学合理拓展本课程的广度、深度和温度，增加本课程的知识性、人文性，提升课程的引领性、时代性和开放性，培养既有先进技术又有正确价值观的从业人员也是本课程教学的重要目标。

二、课程基本要求通过本课程的学习，使学生达到如下知识和技能两方面目标：（一）知识要求：1．了解和理解网页、网站的概念。

2．掌握HTML的基本语法。

3．掌握网站制作流程。

4．熟练掌握用Dreamweaver工具软件制作网页的基本方法。

5．掌握CSS的概念和和CSS的基本语法和盒子模型及选择器6．掌握CSS+DIV布局、美化网站。

7. 掌握JavaScript基础8. 掌握JavaScript对象10. 掌握JavaScript事件处理（二）能力要求1.能够熟练的运用Dreamweaver、Sublime、Vscode等网页编辑工具；2.能熟练的运用各类HTML标签完成页面的结构；3.能熟练的运用CSS完成页面美化；4.运用CSS和DIV完成页面布局的能力；5.运用JavaScript完成表单验证、事件处理等；6.运用所学的网页设计课程的理论知识，进行实际网站开发的能力；三、教材与参考书目1.主要使用教材范伊红,黄彩霞,李连民等.基于HTML5的网页设计及应用. 北京：电子邮电出版社,2022.2.2.主要参考书(1)前言科技温谦. HTML5+CSS3+JavaScript Web开发案例教程.北京：人民邮电出版社，2022.5.(2)赵丰年. 网页设计与制作（HTML5+CSS3+JavaScript）.北京：人民邮电出版社，2020.7.(3)黑马程序员. JavaScript前端开发案例教程.北京：人民邮电出版社，2022.5.四、课程主要内容第1章网页设计概述教学主要内容：网页的前生与今世：互联网和网页的诞生、网页的发展、网站和网页；WWW、URL、HTTP、Web、W3C等网页相关术语；网页的尺寸、网页的布局和设计流程等基本知识。

《网页设计与制作（HTML5）》课程教学大纲课程代码适用专业计算机信息管理课程类型职业技能课学分数 4学时数64第一部分总纲一、课程性质、教学目的1．课程性质本课程是计算机信息管理专业的职业技能课。

课程主要针对行业企业在网络媒体方面的网页设计与制作员、网站开发与管理员岗位。

通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

培养学生具有诚实、守信，善于沟通和合作的团队合作能力，为从事网络媒体网页制作工作奠定良好的基础。

2．教学目的通过本课程的学习，学生可以在网络公司、软件公司、广告公司，企事业单位的制作部、技术部、信息部、网络中心等部门，担任网页设计师、网站编辑、B/S模式软件界面设计师、网站维护员等职务，从事静态网站制作、网站内容制作与维护、动态网站界面设计与制作、B/S模式软件界面设计与制作项目工作。

3．前导课程与后续课程前导课程：无后续课程：网络程序设计、移动互联网软件开发、毕业综合实践。

二、推荐教材及主要参考资料1. 传智播客高教产品研发部，《HTML5+CSS3网页设计基础教程》，人民邮电出版社，2016年3月。

2. 方锦明，《网页设计与制作》，中国科学技术出版社，2007年1月。

3. 郭子明，《网页设计与制作技能案例教程》，印刷工业出版社，2011年9月。

三、大纲执行说明1.总学时64学时，理论32学时，实践32学时；2．如无特殊情况，应严格按照教学大纲的时间、内容、课时要求及有关规定执行，如遇特殊情况，可作适当调整。

第二部分理论教学一、教学基本要求通过学习《网页设计与制作（HTML5）》这门课程，使学生掌握网页设计和制作的基本技能，能够制作企事业单位的静态网站，具备网站的策划、设计和制作能力。

具体教学要求如下：1.熟悉HTML5基本语法，掌握HTML5语法新特性。

2.掌握HTML5相关标记及属性，能够制作简单的网页页面。

HTML5网页设计教学大纲HTML5是HTML的最新版本，它独特的语义赋予网页更好的意义和结构；本地存储让基于HTML5开发的网页APP拥有更短的启动，更快的联网；内嵌的本地数据库，加速了搜索功能；Canvas及CSS3的动画功能，带来炫酷的效果。

Audio、Video等多媒体支持功能、跨平台及自适应设计…HTML5为你打造全新的网页设计体验。

课程概述《HTML5网页设计》是一门实践性较强的课程，因此，本课程在教授过程中，融入了460个案例，４个项目，通过视频教学、在线答疑、自主学习等方式让大家看得懂、学得会、做得出。

在内容编排上，本教程的教学紧密结合深入学习ＨＴＭＬ５技术的先后过程，从ＨＴＭＬ5的基本概念开始，带领大家逐步深入学习各种应用技术，侧重实践技能，使用简单易懂的实际案例进行分析和操作指导，使学习过程简明轻松，操作过程有章可循。

课程第1篇“基础知识”主要讲解初识HTML5、HTML5网页文档结构、HTML5与HTML4的区别等；第2篇“核心技术”主要讲解设计网页文本内容、网页列表与段落设计、HTML5网页中的图像、使用HTML5建立超链接、使用HTML5创建表单、使用HTML5创建表格、HTML5中的多媒体、使用HTML5绘制图形、HTML 5中的文件与拖放等；第3篇“高级应用”主要讲解获取地理位、Web通信新技术、数据存储技术、使用Web Worker处理线程、HTML5服务器发送事件、构建离线的Web应用等；第4篇“项目案例实战”主要讲解HTML5、CSS3和JavaScript的搭配应用案例，制作电子商务类网页，制作休闲娱乐类网页，制作企业门户类网页。

授课目标通过学习本课程，使学生能独立运用HTML5的理论知识，逐步形成运用HTML5的核心技术进行网页设计制作的能力。

课程大纲第1章初识HTML51.1HTML5简介1.2HTML5文件的编写方法第1章上机操作作业第2章.HTML5网页文档结构2.1Web标准2.2HTML5文档的基本结构2.3综合案例――制作符合W3C标准的网页上机练习：制作符合W3C标准的HTML5网页第3章HTML5与HTML4的区别3.1新增的主体结构元素3.2新增的非主体结构元素3.3新增其他常用元素3.4新增全局属性3.5新增的其他属性上机练习：使用新增标签制作网页阅读源代码，使用、等标签制作网页第4章. 设计网页文本的内容第1篇回顾总结与第2篇开篇介绍4.1标题文本4.2文字格式4.3 设置文本风格4.4设置文本的阴影4.5控制换行按样张要求完成上机作业----中国共产党第十九次全国代表大会（党的十九大）第5章网页列表与段落设计5.1网页文本列表设计5.2 制作嵌套的无序列表5.3 给嵌套的无序列表添加显示和隐藏效果5.4制作导航条5.5 制作图文混排的无序列表5.6 制作无序加有序列表5.7 创建自定义列表按样张要求完成作业1：模拟制作百度新闻footer（已附图片及文本资源）作业2：设计制作新闻早知道网页第6章HTML5网页中的图像6.1 网页中的图像6.2 在网页中插入图像6.3 网页图片的编辑6.4 将图片设置为网页背景6.5 制作图片滑动动画按样张要求制作“人民公安爱人民”主题的网页第7章使用HTML5建立超链接7.1网页超链接的概念7.2超链接的类型及URL7.3 创建锚点超链接7.4 创建图片热区超链接7.5 综合案例制作简易电子书网页第8章使用HTML5创建表单8.1认识表单8.2input表单元素的创建8.3input表单元素的属性8.4正则表达式制作用户注册页面第9章使用HTML5创建表格9.1 创建简易表格9-2表格的合并与拆分9.3 制作推荐表9.4 带标题与表头的表格9.5 结构化表格制作本章作业包括：1.购物商品清单表格制作（静态）2.公司2017年各部门各季度财务结算表（静态）第10章HTML5中的多媒体10.1 声音标签audio的基本属性及使用10.2 不同浏览器对不同声音格式的支持情况10.3 综合案例-带有背景音乐和动画的网页本次作业含3个题目，涉及audio标签和marquee标签第11章使用HTML5绘制图形11.1 什么是Canvas11.2 定义画布11.3 绘制直线段11-4使用路径绘制自定义形状11-5绘制圆和圆弧11-6绘制二次贝塞尔曲线11-7使用三次贝塞尔曲线制作水波动画11-8save与restore11-9综合案例作业视频-1作业视频-2作业视频-3作业视频-4canvas绘图与动画制作第12章使用CSS3绘制图形12.1使用css3绘制直线12.23绘制三角形和梯形12.3使用css3绘制多边形12.4绘制圆角矩形12.5绘制园和椭圆12.6制作圆摆动动画12.7制作水滴状标题装饰图12.8制作太极12.9制作心形12.10制作鸡蛋自主学习部分-css3渐变填充制图第12章第一次作业--我爱我的国第12章第二次作业--使用css3绘制小猪预备知识Javascript脚本语言、Photoshop图像处理及计算机基础相关知识。