项目一 第一阶段 任务7 添加宣传图片-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够说出适合在网页中使用的图片格式。 能够分辨和应用网页中的图片绝对路径和相对路径。 能够为D清单网页正确添加图片并设置属性。 任务目标 任务7 添加宣传图片 本次任务要求在任务6基础上为D清单网页添加宣传图片。完成后的效果图如图1-7所示。 任务描述 图1-7 添加宣传图片后的网页效果截图 任务7 添加宣传图片 要添加D清单网页宣传图片，需要： 学习常见的网页图片格式； 学习并比较HTML图片的绝对路径和相对路径，并正确使用； 合理运用图像的属性。 管理网站图片文件并在页面中添加代码以实现在D清单网页中添加宣传图片。 任务分析 任务7 添加宣传图片 任务分析 图1-7-1 D清单网页宣传图片分析 分析D清单效果图可知宣传图片所在位置，如图1-7-1所示。 任务7 添加宣传图片 知识与技能准备 各类网站中的图片不计其数，使用主要有三种常用格式的图片，分别是GIF、JPEG、PNG格式。 1、图像格式 图片格式 扩展名 透明性 动画 压缩 使用场景 GIF .gif 全透明、全不透明 支持 无损 只有256种颜色，适合对颜色要求不高的图形 JPEG .jpeg或.jpg 不支持 不支持 有损 适合web上面的摄影图片和数字照相机中的图片 PNG .png 支持alpha透明 不支持 有损 适用于颜色数量较少的图像，Android 资源推荐使用 表1-7-1三种图片格式对比 知识与技能准备 网页中需要插入图片，可以使用<img>标签进行添加，<img>标签是个单标签，一般需要搭配src属性来实现图片的链接，并且以右斜线“/”结束。具体格式为： 2、图片标签<img> <img src=”图片文件的地址” /> 知识与技能准备 在上面的图片标签格式中，src参数用来设置图片文件的地址路径，该路径可以是绝对路径，也可以是相对路径。 3、绝对路径和相对路径 3.1绝对路径 绝对路径是指文件在磁盘上真正存在的路径。例如：“ps.jpg”这个图片存放在D盘的images文件夹下，那么该图片的真正存放路径为：“D:\images\ps.jpg”。此时，如果要采用绝对路径进行链接，则链接的语句为： <img src=” D:\images\ps.jpg” /> 知识与技能准备 3.2相对路径 <img src=” ps.jpg” /> 图1-7-2 相对路径-目标图片文件在网页的下N级路径 图1-7-3 相对路径-目标图片文件在网页的上N级路径 <img src=”images/bg/ps.jpg” /> <img src=”../../ps.jpg” /> （1）目标图片文件和网页在同个路径下 链接的地址可直接写出图片的名称。如：网页index.html和图片ps.jpg放在同一个文件夹下，则网页链接图片的语句为： （2）目标图片文件在网页的下N级路径 链接的地址为从网页文件开始到目标图片文件的路径。如图1-7-2所示，目标图片“ps.jpg”在网页文件“index.html”的下2级路径，路径为：”images/bg/ps.jpg” ，其网页链接图片的语句为： （3）目标图片文件在网页的上N级路径 链接的地址为从网页文件开始，每返回一级用一个“../”表示，返回N级则用N个“../”。如图1-7-3所示，目标图片“ps.jpg”在网页文件“index.html”的上2级路径，路径为“../../ps.j