《前端设计与开发》高职全套教学课件.pptx

模块1Web基础知识;模块1Web基础知识;“寻找家乡记忆”网站制作准备;任务描述;1.1.1认识网页;1.1.2网页与网站;PowerPoint演示文稿;PowerPoint演示文稿;1.1.3网页的基本构成元;2.图像;PowerPoint演示文稿;1.1.4网站建设流程;1.分析客户需求;2.规划站点;3.搜集素材;4.页面设计;PowerPoint演示文稿;PowerPoint演示文稿;1.1.5网页的设计基础;PowerPoint演示文稿;2.网页设计的色彩搭配;3.网页设计要点;1.HTML5概述;1.HTML5概述;2.常用开发工具及安装;PowerPoint演示文稿;任务实施;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;PowerPoint演示文稿;任务验证;谢谢;模块2HTML5语言基础;制作“校史馆参观需知”网页;任务描述;2.1.1HTML5文档;2.html/html;4.body/body;1.标题标签;2.段落标签;3.换行标签;4.水平线标签;5.字体样式标签;PowerPoint演示文稿;PowerPoint演示文稿;2.1.3序列标签;1.无序列表;2.有序列表;3.自定义列表;任务规划;任务实施;制作“家乡美食及制作流程展示”;任务描述;2.2.1图像类型及图像标;PowerPoint演示文稿;2.图像标签;PowerPoint演示文稿;2.2.2路径分类;1.相对文件路径;PowerPoint演示文稿;2.2.3链接标签;2.2.4链接的分类;任务规划;任务实施;谢谢;模块3HTML5中新增的标;制作“古都花城洛阳代表性古迹”;任务描述;3.1.1语义化标签;HTML5语义化标签;1.header标签;2.nav标签;3.section标签;4.article标签;5.article标签;6.footer标签;7.figure标签;8.figcaption标签;3.1.2分组标签;任务规划;任务实施;任务实施;制作“数字图书馆”网页;任务描述;3.2.1页面交互标签1;2.meter标签;details标签/summa;3.2.2全局属性;1.contenteditab;2.class属性;3.data-*属性;4.dir属性;5.draggable属性;6.dropzone属性;7.hidden属性;8.id属性;9.spellcheck属性;10.style属性;11.translate属性;任务规划;任务实施;谢谢;模块4CSS基础;制作“美文赏析”网页;任务描述;4.1.1CSS简介;4.1.2CSS的基本语法;4.1.3CSS基本属性;1.字体属性;2.文本属性;3.背景属性;4.边框属性;5.列表属性;6.尺寸属性;4.1.4CSS样式分类;1.内联式;2.嵌入式;任务规划;任务实施;任务实施;制作“大学生身高体重标准表”网;任务描述;4.2.1id选择器;4.2.1标签选择器和类选;PowerPoint演示文稿;4.2.3伪类选择器;PowerPoint演示文稿;PowerPoint演示文稿;4.2.4表格;PowerPoint演示文稿;2.设置表格边框;3.设置表格间距;4.设置表格标题;任务规划;任务实施;任务实施;制作“名人故事”网页;任务描述;4.3.1复合选择器;1.后代选择器;2.子选择器;3.并集选择器;4.3.2通配符选择器;任务规划;任务实施;任务实施;谢谢;模块5盒子模型及应用;制作“学习日用百科”网页;任务描述;5.1.1盒子模型的概念;PowerPoint演示文稿;PowerPoint演示文稿;5.1.2边框的设置;1.边框样式border-st;2.边框宽度border-wi;3．边框颜色border-co;5.1.3内边距和外边距的;1.内边距;2.外边距margin;任务规划;任务实施;任务实施;制作网页导航条;任务描述;5.2.1元素的类型和转换;5.2.1元素的类型和转换;5.2.2Flex布局的用;5.2.3overflow;5.2.4浮动的应用及清除;1.浮动的应用;2.清除浮动;任务规划;任务实施;任务实施;制作“地域特产推介”网页;任务描述;5.3.1元素的定位和