前端设计与开发 课件全套 李保安 模块1--9 Web基础知识 --- 综合实战.pptx

模块1Web基础知识;“寻找家乡记忆”网站制作准备;任务描述;1.1.1认识网页;;动态网页的特点;网页是网站的组成部分，网站由多个网页集合而成，如新浪网含新闻、财经等多板块，每个板块有多网页;1.1.3网页的基本构成元素;2.图像;;1.1.4网站建设流程;1.分析客户需求;2.规划站点;3.搜集素材;4.页面设计;;1.1.5网页的设计基础;;2.网页设计的色彩搭配;3.网页设计要点;1.HTML5概述;HTML（HypertextMarkupLanguage，超文本标记语言）是Internet上用于编写网页的主要语言。

HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。可以用任何文本编辑器（如Windows系统中的“记事本”程序）打开，查看其中的HTML源代码。查看网页内容必须使用网页浏览器，浏览器的主要作用就是解释超文本文件中的代码，将单调乏味的代码显示为丰富多彩的内容。

HTML的语法非常简单，它采用简洁明了的语法命令，通过对各种标记、元素、属性、对象等进行设置，建立图形、音频、视频等多媒体信息及其他超文本的链接。;2.常用开发工具及安装;;任务实施;2.网页文档的创建与保存;网页文档的保存;3.网站的运行;4.更换VSCode主题颜色;任务验证;谢谢;模块2HTML5语言基础;制作“校史馆参观需知”网页;任务描述;2.1.1HTML5文档格式;2.html/html标签;4.body/body标签;;2.段落标签;3.换行标签;4.水平线标签;5.字体样式标签;;斜体作用;在编写文档、构建网页或进行数据分析时，列表提供了一种清晰且结构化的方式来展示一系列的项目。无论是有序列表（其中每一项都按照特定的顺序排列并通常由数字引导），还是无序列表（其中的内容不分先后，只通过符号或图标来分隔条目），都是使信息条理化的关键元素。HTML支持有序列表、无序列表和自定义列表。;1.无序列表;2.有序列表;3.自定义列表;任务规划;任务实施;制作“家乡美食及制作流程展示”网页;任务描述;2.2.1图像类型及图像标签;GIF是Web常用的图像格式，擅长存储线条、图标，支持动态、透明和交织图像，压缩后最多支持256色;2.图像标签;;1.相对文件路径;;2.2.3链接标签;;任务规划;任务实施;谢谢;模块3HTML5中新增的标签及属性;制作“古都花城洛阳代表性古迹”网页;任务描述;3.1.1语义化标签;HTML5语义化标签;1.header标签;2.nav标签;3.section标签;;;6.footer标签;7.figure标签;;;任务规划;任务实施;任务实施;制作“数字图书馆”网页;任务描述;3.2.1页面交互标签

1.progress标签;;details标签/summary标签;3.2.2全局属性;1.contenteditable属性（HTML5新属性）;;3.data-*属性;4.dir属性;5.draggable属性;;;8.id属性;9.spellcheck属性;10.style属性;11.translate属性;任务规划;任务实施;谢谢;模块4CSS基础;制作“美文赏析”网页;任务描述;;;;1.字体属性;2.文本属性;3.背景属性;4.边框属性;5.列表属性;6.尺寸属性;4.1.4CSS样式分类;1.内联式;2.嵌入式;任务规划;任务实施;任务实施;制作“大学生身高体重标准表”网页;任务描述;4.2.1id选择器;;;4.2.3伪类选择器;4.2.4表格;;2.设置表格边框;3.设置表格间距;4.设置表格标题;任务规划;任务实施;任务实施;制作“名人故事”网页;任务描述;;1.后代选择器;2.子选择器;3.并集选择器;4.3.2通配符选择器;任务规划;任务实施;任务实施;谢谢;模块5盒子模型及应用;制作“学习日用百科”网页;任务描述;5.1.1盒子模型的概念;01;;;1.边框样式border-style;2.边框宽度border-width;3．边框颜色border-color;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元素的定位和偏移;5.3.2静态定位和相对定位;1.静态定位;2.相对定位;;1.绝对定位;固定定位是绝对