响应式Web设计教学课件

前端2022/02响应式Web设计开学第一课

01.认识前端03.课程目标02.教材简介CONTENTSTopic.01认识前端前端的工作内容决定了它在用户体验日渐重要的互联网+时代不可或缺的位置。1.1前端的发展历程互联网发展早期，尚无前端工程师概念；2005年，前端工程师被行业认可；2010年，移动时代，前端工程师地位越发重要；新思想、新设计、新模式、新工具、新平台。1.2前端涉及的内容看得见的，能感知的；界面布局、交互效果、页面加载速度等；用户在客户端上浏览web；浏览器解析、处理、渲染相关文件呈现。1.3前端的工作职责Web前端开发主要针对的是PC端开发任务；而Android开发、iOS开发和各种小程序主要针对的是移动端开发。现在的前端不完全就是网页设计，早年的网页设计主要是以图片和文字为主，用户使用网站的行为也以浏览为主。而现在的前端开发使得现代网页更加美观，交互效果显著，功能更加强大。所以现在的前端开发，运用到的知识面更加广泛，难度也更大。总的来讲，前端就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。1.4前端的技能要求在前端的开发的页面布局中，HTML定义元素，CSS对其修饰，再通过JS实现相应的效果和交互。尤其是作为前端最重要的编程语言JS，在最近几年里不论是代码量还是关注数都稳居Github平台热门编程语言榜。目前互联网行业对前端需求量持续增加，前端程序员薪水在行业里面处于较领先的位置。前端领域发展很快，各种新技术新思想不断涌现，这是一个好现象。但是前端发展太快也带来一些问题，比如有人会感到困惑技术迭代这么快，刚刚学会某种新技术就过时了怎么办？其实还是那句话，前端工程师首先是软件工程师，基础是最重要的，如果基础不扎实，一切应用技能就都是“浮云”。而HTML、CSS、JS就是前端的基本功，数学、算法、数据结构、操作系统和编译原理也是前端必备的。前端工程师使用HTML、CSS、JS等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。随着互联网行业的持续发展，移动互联网业务不断发展壮大，海量的平台开发工作形成了巨大的人才缺口，尤其是Web前端、移动端HTML5开发人才尤为紧缺。随着互联网行业竞争的不断加剧，企业平台开始做界面友好性和操作方便性方面加大开发力度，Web开发人员的地位在业内也开始迅速提高。1.5当前形势Topic.02教材简介2.1什么是响应式Web早年设计Web时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsivewebdesign，RWD），RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想。2.2为什么要学习响应式Web一名合格的Web开发工程师需要具备一定的综合素质才能胜任企业日益负责、多变的工作要求。这些素质包括：熟知页面布局、熟练样式美化、掌握JavaScript基础、属性bootstrap响应式布局设计，以及能用HTML5+CSS3开发出绚丽多彩的移动端交互效果和界面适应不同屏幕的功能。2.3章节简介这一阶段学习完，你们能初步掌握HTML5和CSS3的基本开发技术，也就是能照着设计开发静态网页。第一章，主要认识HTML5和CSS3。要求很简单，就是照着代码出项目，看看这俩东西都能干点啥。第二章，主打文字主题。要求同学们能够解读关键性代码。第三章，图文主题，技术上包括CSS3阴影、圆角和动画效果等。2.3章节简介本阶段的学习，你们应该能够使用HTML5中提供的API快速开发Web页面。第四章，学习H5的表单。这个东西的存在帮助了开发人员省去大段的js验证代码，要好好学习哟。第五章，画布。这个是H5的新加的元素。第六章，音频和视频。如果你是一个音乐发烧友或者爱看电影的年轻人，可以认真研究，争取来个私人订制播放器。2.3章节简介本章的学习，主要是进一步了解响应式Web设计的特点。第七章，响应式Web设计。这个是我们里程碑式的内容。实现自己制作的网页在各种设备的屏幕上任意切换，怎么样，是不是很有成就感呢？2.3章节简介Bootstrap开发神器第八章与第九章，bootstrap。Bootstrap是响应式Web开发神器，它能够帮助我们快速搭建响应式网站。（非常重要、非常实用，一定一定要搞定它！！！）Topic.03课程目标3.1章节知识目标第一章HTML5+CSS3初体验1.了解HTML5和CSS3优势2.掌握HTML5的基本语法和语义化标签3.熟悉CSS的基础知识4.掌握CSS3边框、背景、阴影和渐变的设置3.1章节知识目标第二章CSS3文本与图标1.熟悉HTML5中常用文本标签的含义2.掌握CSS3文本样式属性的使用3.了解CSS3中的@font-face属性4.掌握font-awesome字体图标库的使用5.掌握CSS3用户界面属性的使用6.掌握软文推广页面的制作过程3.1章节知识目标第三章CSS3过渡、变形与动画1.掌握CSS3过渡2.掌握transition的子属性3.掌握CSS3变形以及CSS3动画4.掌握摇晃的桃子的实现过程3.1章节知识目标第四章HTML5表单的应用1.掌握form表单的使用2.掌握<input>标签的使用3.掌握HTML5表单新特性4.掌握调查问卷页面的实现过程5.掌握登录注册页面的实现过程3.1章节知识目标第五章HTML5画布1.掌握JavaScript的基础知识2.掌握Canvas绘图的基本步骤3.掌握Canvas常用方法的使用3.1章节知识目标第六章视频和音频1.了解JavaScript运算符、分支结构和循环结构的使用2.掌握视频和音频的基本使用3.掌握音频、视频对象常用的方法、属性和事件3.1章节知识目标第七章响应式Web设计1.了解视口的概念2.掌握媒体查询的实现3.掌握百分比布局的使用4.了解栅格系统的概念5.掌握使用媒体查询实现响应式布局6.掌握弹性盒布局及其常用属性的使用3.1章节知识目标第八章Bootstrap（上）1.了解Bootstrap的概念2.掌握Bootstrap的下载和环境安装3.掌握Bootstrap布局容器的使用4.掌握Flex弹性布局的使用5.掌握Bootstrap表单、按钮和分页组件的使用6.熟悉Bootstrap辅助样式的使用3.1章节知识目标第九章Bootstrap（下）1.掌握Bootstrap导航、导航栏和卡片组件的使用2.了解后台管理系统的整体结构3.掌握后台管理系统具体代码的实现3.2技能目标1.能够熟练使用CSS3结合HTML5实现网页布局；2.熟练使用文档对象模型和事件驱动，能够很好地实现交互操作；3.熟练使用bootstrap中的对象，实现网页的动态效果；4.熟练使用bootstrap对表单、表格和事件进行操作；5.熟练使用bootstrap与JavaScript进行网页异步交互；6.学会事件驱动的程序设计思想，熟练使用JavaScript中的对象实现网页特效；7.熟练使用JavaScript第三方插件；8.网页设计布局合理，色彩搭配合理，网页操作便捷；9.设计过程中充分考虑浏览器的兼容性等问题，并能给予适当处理。3.3学习要点HTML5的语义化结构标签；@font-face规则多列布局模块（Multi-columnLayoutModule）Web字体图标CSS3圆角边框、过渡和变形CSS3动画HTML5新增