网页设计与制作全能一本通 教学大纲

PAGEPAGE6《网页设计与制作全能一本通HTML5+CSS3+JavaScript（微课版）》教学大纲课程介绍：HTML5是HTML的最新版本，HTML5应用开发生态和CSS3与JavaScript紧密结合，是目前最流行的应用开发技术之一。学习HTML5、CSS3和JavaScript开发后，不仅可以开发出能在多种设备上运行的程序，还可以实现媲美原生应用的能力。同时HTML5应用开发技术简洁直观，容易上手，适合初学者学习。本书内容分为三大部分，第一部分讲解技术的基础，第二部分讲解高级应用技巧，第三部分则根据实战项目引导学生掌握实际的HTML5网页设计和开发技能。培训目标：认识HTML5——网页用户界面的载体学习HTML5的标签——网页的基本元素学习和认识CSS3——网页格式控制学习和认识JavaScript——网页浏览器端程序开发掌握HTML5应用开发工具——高效应用开发学习和认识node.js——现代化前端开发的基础学习和认识前端开发框架——借助框架快速开发高质量应用学习页面加载原理——资源加载管理学习JavaScript事件模型——动态与交互学习时间：60学时。培训内容：项目一、HTML5基础——HTML5简介了解HTML5的历史和发展。掌握HTML5的基本概念。了解HTML5，CSS3和JavaScript的关系项目二、熟悉开发与运行环境——学习VisualStudioCode、常用浏览器，了解Dreamweaver了解VisualStduioCode软件的操作界面。掌握在浏览器中打开HTML5文件的方法。掌握通过HTTP服务器打开HTML5文件的方法。了解包括Dreamwaver等多种网页开发工具的优缺点。安装和使用浏览器。通过HTTP服务器访问HTML文档任务1.1创建第一个HTML5页面了解HTML文档的基本格式。了解HTML中几个常用的标签。用浏览器打开本地HTML文档。在浏览器查看HTML文档源码。任务1.2使用HTML5创建个人简历使用HTML5标签创建章节和段落使用HTML5完成简单的排版任务1.3使用代码托管平台发布HTML5页面到互联网创建本地代码仓库注册代码托管平台账户推送代码到远端仓库开通静态页面托管服务项目二、学习HTML5的标签——网页的基本元素HTML5文档由相互嵌套的HTML元素定义。一个HTML元素由一个开始标签和一个结束标签构成，开始标签和结束标签被称为HTML标签，也被称为HTML标记标签。为了更好的构建互联网应用，HTML5新增了结构标签、多媒体标签等新的标签类型。任务2.1制作HTML5相册创建页面基本布局使用多媒体标签显示图片控制图片大小使用锚标签实现点击查看原图功能项目三、HTML5中的对象——HTML5与JavaScript间的桥梁HTML5文档由标签的嵌套组合而成。浏览器解析HTML5文档以后，除了生成可视的界面与用户交互，还会生成被称为文档对象模型（DOM）的对象系统方便HTML文档与程序设计语言的交互。任务3.1开发显示浏览器信息的HTML5程序通过JavaScript代码获取浏览器信息通过JavaScript代码在页面上显示内容任务3.2HTML5小游戏2048：自动适应屏幕大小适应屏幕大小问题的介绍2048游戏介绍通过JavaScript获取屏幕大小并判断屏幕比例窗口大小与页面布局任务3.3HTML5小游戏2048：绘制方格学习使用SVG标签使用SVG标签绘制图形获取URL中的参数项目四、学习和掌握JavaScript基础——网页中的程序设计语言JavaScript是一种计算机程序设计语言，与标记语言不同，程序设计语言通常用来描述算法逻辑。如在HTML5开发中，通常使用JavaScript描述用户的输入应该如何被处理。例如，前一章的2048小游戏，需要规定如用户在屏幕滑动时，程序该怎样计算出方格合并后的结果，怎样更新屏幕上方格中的数字。任务4.1开发HTML5计算器计算机功能设计与界面布局按钮事件的处理实现计算功能任务4.22048小游戏实现逻辑在方格内绘制数字在空白格子随机放置数字合并数字的操作处理用户输入项目五、学习和掌握CSS3——样式、布局与动态效果CSS是层叠样式表，用于渲染网页、展示制定的样式，例如，为文字设置大小、颜色、字体等，还可以为文本改变布局，甚至可以设计一些动态效果，来提高网页的可阅读性。任务5.1使用CSS3制作动态导航菜单静态菜单框架使用CSS3美化菜单使用CSS3给菜单添加动态效果任务5.2制作狮立地板网页1.通过对任务的引入和设计理念的讲解，使读者掌握制作狮立地板网页的设计思路。2.通过对任务知识的讲解，熟练掌握软件中相关工具的使用方法。3.通过具体的任务实施，掌握制作狮立地板网页的方法和技巧。项目六、HTML5页面加载——深入了解HTML5页面加载原理页面加载是浏览器解析HTML5文件，构建DOM树，计算元素位置，获取需要的资源，最终渲染显示的过程。HTML5文档是文本文件，但可以引用多种资源，页面加载的过程除了解析和计算，还需要获取所需要的资源。本章将继续深入浏览器加载HTML5页面的细节。任务6.1动态加载的HTML5相册使用JavaScript动态生成IMG标签实现动态显示图片点击出发图片加载项目七、JavaScript高级应用——“现代化”前端开发从Node.js——一个HTML5之外的JavaScript运行环境讲起。Node.js是一个用来执行JavaScript的软件，Node.js的出现和发展促进JavaScript从浏览器环境逐渐走向服务器程序、桌面应用甚至物联网等嵌入式设备程序开发。任务7.1生成二维码的HTML5应用创建npm包并安装webpack安装和使用qrcode包使用qrcode包生成二维码发布HTML5应用任务7.2制作足球运动网页1.通过对任务的引入和设计理念的讲解，使读者掌握制作足球运动网页的设计思路。2.通过对任务知识的讲解，熟练掌握软件中相关工具的使用方法。3.通过具体的任务实施，掌握制作足球运动网页的方法和技巧。项目八、使用前端框架——提高开发效率框架是用来提高开发效率的工具，一个框架通常包含预先定义好的通用代码，开发应用时，可引入框架中的代码作为基础。框架也常会定义一些开发规范，使用框架开发需要遵循特定规范。任务8.1HTML5英汉词典准备词典数据通过包管理器创建项目在HTML5应用获取词典数据实现查词逻辑通过中文查询英文单词英文单词的模糊匹配项目九、综合实训——HTML5扫雷游戏本章将使用HTML5开发扫雷游戏，扫雷游戏曾是Windows操作系统自带的游戏之一，操作简单，可玩性高，风靡一时。本章主要涉及到的知识点有：使用SVG绘制游戏界面使用事件托管使用class组织代码支持触摸事件任务9.1扫雷游戏的设计游戏规则和游戏玩法游戏界面绘制任务9.2扫雷游戏开发表示和保存游戏状态计算提示数字处理用户操作判断过关条件任务9.3使用class组织代码学习JavaScript中的面向对象优化：确保第一次操作不会触雷项目十、综合实训——开发通过二维码传输文件的应用项目七实现了把用户输入的文字转换成二维码的简单应用。那里使用的二维码是名为QRCode（QuickResponseCode），是最常见的二维码之一。很多应用都可以通过扫描二维码获取信息。事实上借助二维码，不仅可以传输文字信息，还可以传输包括图片，音频在内的任何文件，但对于较大文件需要采用特殊处理，例如本章将开发一种把大文件转换成多个二维码并通过屏幕传输的技术。本章主要涉及到的知识点有：使用QRCode编码信息开发可以扫描QRCode的应用开发可以读取文件的HTML5应用使用HTML5应用处理文件使用HTML5通过二进制数据生成和下载文件任