HTML5+CSS3网页设计与制作课件：添加宣传图片_第1页
HTML5+CSS3网页设计与制作课件：添加宣传图片_第2页
HTML5+CSS3网页设计与制作课件：添加宣传图片_第3页
HTML5+CSS3网页设计与制作课件：添加宣传图片_第4页
HTML5+CSS3网页设计与制作课件：添加宣传图片_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作添加宣传图片项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够说出适合在网页中使用的图片格式。能够分辨和应用网页中的图片绝对路径和相对路径。能够为D清单网页正确添加图片并设置属性。任务目标

添加宣传图片本次任务要求在基础上为D清单网页添加宣传图片。完成后的效果图如图1-7所示。任务描述图1-7添加宣传图片后的网页效果截图

添加宣传图片要添加D清单网页宣传图片，需要：学习常见的网页图片格式；学习并比较HTML图片的绝对路径和相对路径，并正确使用；合理运用图像的属性。管理网站图片文件并在页面中添加代码以实现在D清单网页中添加宣传图片。任务分析

添加宣传图片任务分析图1-7-1D清单网页宣传图片分析分析D清单效果图可知宣传图片所在位置，如图1-7-1所示。

添加宣传图片知识与技能准备各类网站中的图片不计其数，使用主要有三种常用格式的图片，分别是GIF、JPEG、PNG格式。1、图像格式图片格式扩展名透明性动画压缩使用场景GIF.gif全透明、全不透明支持无损只有256种颜色，适合对颜色要求不高的图形JPEG.jpeg或.jpg不支持不支持有损适合web上面的摄影图片和数字照相机中的图片PNG.png支持alpha透明不支持有损适用于颜色数量较少的图像，Android资源推荐使用表1-7-1三种图片格式对比知识与技能准备网页中需要插入图片，可以使用<img>标签进行添加，<img>标签是个单标签，一般需要搭配src属性来实现图片的链接，并且以右斜线“/”结束。具体格式为：2、图片标签<img><imgsrc=”图片文件的地址”/>知识与技能准备在上面的图片标签格式中，src参数用来设置图片文件的地址路径，该路径可以是绝对路径，也可以是相对路径。3、绝对路径和相对路径3.1绝对路径绝对路径是指文件在磁盘上真正存在的路径。例如：“ps.jpg”这个图片存放在D盘的images文件夹下，那么该图片的真正存放路径为：“D:\images\ps.jpg”。此时，如果要采用绝对路径进行链接，则链接的语句为：<imgsrc=”D:\images\ps.jpg”/>知识与技能准备3.2相对路径（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.jpg”，其网页链接图片的语句为：<imgsrc=”ps.jpg”/>图1-7-2相对路径-目标图片文件在网页的下N级路径图1-7-3相对路径-目标图片文件在网页的上N级路径<imgsrc=”images/bg/ps.jpg”/><imgsrc=”../../ps.jpg”/>课堂练习1-7-1请写出下列相对路径的地址文件和图片的绝对路径网页链接语句（相对路径）文件：d:\exam\html5\a1.html图片：d:\exam\html5\ps.jpg

文件：d:\exam\html5\a1.html图片：d:\exam\html5\images\ps.jpg

文件：d:\exam\html5\a1.html图片：d:\exam\ps.jpg

文件：d:\exam\html5\mac\a1.html图片：d:\exam\images\ps.jpg知识与技能准备（1）图片的大小（width属性和height属性）在网页中默认添加图片时，图片是原图尺寸。但在日常使用时，往往需要根据网页的需求来调整图片的大小。这时可通过width属性和height属性来设置图片的宽度和高度。其语法形式如下：4、图片的属性<imgsrc=”图片文件的地址”width=图片的宽度height=图片的高度/>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-7-2设置图片大小12<imgsrc="images/gg.jpg"width=”450”height=”300”/><imgsrc="images/gg.jpg"width=”180height=”120”/>显示效果如下：图1-7-4设置图片大小知识与技能准备（2）图片的说明（title属性）title属性是对图片的文字说明，由用户自己定义。如果把鼠标移动到图片上并停留，title属性的值就会以浮动的形式显示出来；在浏览器尚未完全读入图像时，在图像位置处会显示该文字说明。其语法形式如下：说明：不同浏览器title属性显示的效果可能略有不同。4、图片的属性<imgsrc=”图片文件的地址”title=”图片的说明”>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-7-3设置图片title属性1<imgsrc="gg.jpg"title="故宫的照片">当鼠标指针经过图片并稍作停留时，显示效果如下：图1-7-5添加图片title属性知识与技能准备（3）图片的替换文本（alt属性）在浏览器无法载入图像或图像失效时，替换文本属性会提示读者她们失去的信息。此时，浏览器将显示这个替换文本而不是图像。这样有助于网页开发者及时发现图片的问题，从而及时改正。为页面上的图像全部加上替换文本属性是个良好习惯，因为这样有助于更好的显示信息以及后期的维护。同时，从搜索引擎的角度上说，alt属性非常重要，alt属性的关键字内容将作为网页权重的一部分被计算入内。其语法形式如下：4、图片的属性<imgsrc=”图片文件的地址”alt=”图片的替换文本”>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-7-4设置图片替换文本1<imgsrc="gg1.jpg"title="故宫的照片"alt=这里有一张故宫的照片">上面的代码中，因图片名称gg.jpg不小心打错成gg1.jpg，导致图片链接失效，因此无法正常显示图片，取而代之的是图片的替代文本，如图1-7-6所示。图1-7-6添加图片的替换文本知识与技能准备网页中使用的图片不是越多越好，加载图片是需要时间的，过多的图片会导致网页响应时间过长从而影响阅读。例如：某个HTML文件包含二十个图像，那么为了正确显示这个页面，需要加载二十个文件，这将影响网页打开速度。所以我们需要：慎用图片。5、图片使用的注意事项任务实施1、打开完成的网页文件index.html所在目录，创建一个img名称的文件夹，截取效果图中的logo图片和宣传图片储存到该目录，分别命名为logo.png和gn1.png。2、打开网页文件index.html，完成logo图片的添加代码:3、找到内容代码对应位置完成宣传图片的添加：4、完成后运行页面，测试图片是否正常显示，如不能显示图片可重点检查图片的链接路径属性src。12345<header><ahref="#"class='logo'alt="LOGO"><imgsrc="img/logo.png"><

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论