Web前端开发-全套PPT课件.pptx

Web前端开发;What？;线上平台;成绩构成;任务1 搭建开发环境;网页文件的创建和保存;;;;;2. Web的工作原理; 静态网页：标准的HTML文件，采用HTML（超本文标记语言）编写，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。;3. Web的类型;3. Web的类型;;案例描述：1. 安装网页编辑软件 2. 安装浏览器;案例描述：1. 创建和管理站点 2. 创建和保存HTML5文档;01; 用记事本软件编写并保存以下代码，将其后缀名“.txt”改为“.html”，用谷歌浏览器浏览网页效果。;;任务2 文字与段落排版;学习目标;;实战演练——制作科技馆参观须 知页面;1. HTML5文档格式;;;;;;示例：文字修饰综合范例;;;;;示例：换行标签应用案例;;示例：水平线标签应用案例;;示例：无序列表应用案例;;示例：有序列表应用案例;案例描述：设计并制作科技馆参观须知页面，网页效果如下。;案例描述：设计并制作“我家菜馆”点菜单页面，网页效果如下。;01;设计并制作古诗欣赏网页，效果如图所示。;;任务3 图像和超链接;锚点标签;;实战演练——制作网页技术介绍页面;强化训练——制作“文章故事网”页面;1. 图像标签;;;2. 绝对路径和相对路径;;;示例：在网页中插入超链接;;示例：在网页中插入锚点链接;案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。;案例描述：设计并制作“文章故事网”页面，网页效果如下。;01;设计并制作旅游景点网页面，效果如图所示。;;任务4 结构标签和分组标签;;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务5 页面交互标签、层次语义标签和全局属性;;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;实战演练;实战演练;强化训练;强化训练;任务小???;课后实训;;任务6 标记选择器和类选择器;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务7 链接伪类和CSS样式面板;;;任务目标;任务目标;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务8 id选择器、伪选择器和表格样式;;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务9 复合选择器、通配符选择器;学习目标;;知识回顾;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;实战演练;强化训练;任务小结;课后实训;;任务10 盒子模型及应用;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务11 元素的浮动;学习目标;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务12 元素的定位;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务13 阴影与渐变属性;学习目标;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;style type=text/css div { width: 200px; height: 200px;