第5讲 添加图片与图文混排

上一讲回顾设置文本属性CSS模式用于设定文字本身格式HTML模式用于设定文字段落格式为文字添加移动属性<marquee>本讲主要内容网页图像的使用添加图片编辑图片图文混排鼠标经过图像的添加制作滚动图片一、网页图像的使用如果网页中满是密密麻麻的文字，无论有多精彩的内容也会令人望之却步！所以图片的加注在网页设计中占了相当地位，没有图片来相辅，网站就算不上完美。在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。插入图片前先把网页保存一下，以免图片丢失图片要放在网页的同一个目录或子目录下网页、图片文件名只能是英文或数字不能用中文1、使用图片的原则.GIF格式特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的限制，不适合用于照片级的网页图像。2、网页中常用的图片格式.JPEG/.JPG格式特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。用途：通常用于显示照片等颜色丰富的精美图像。2、网页中常用的图片格式实践任务1借助互联网查询.JPEG/.JPG格式有何区别？两种格式之间可以如何进行转换？.PNG格式特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。用途：常用于制作网页效果图。2、网页中常用的图片格式网上下载或购买素材光盘照相机、摄像机、手机具有一定绘画水平的用户，可自己绘制扫描仪扫描图片从电脑显示屏抓取图像3、图片的获取用PrintScreen键直接抓取〈1〉截取全屏幕画面操作步骤：①屏幕上出现所需抓取的图像②按下键盘上的PrintScreenSysRp(屏幕打印)键，则图像被保存到了Windows剪贴板中。③启动画图或Photoshop等软件。④执行“Ctrl+V”组合键，把图片粘贴到软件中。⑤保存图片。〈2〉截取当前活动窗口操作步骤：①按住PrintScreen的同时按下Alt键②粘贴、保存图片。借助软件进行截图QQ截图SnagItSnagIt主界面用SnagIt抓取图像的基本操作确保要捕获的内容所在页面处于激活状态选择一个“捕获方案”单击“捕获”按钮点击“完成”按钮选择保存的文件格式，对所捕获的图像进行保存捕获方案的选取范围以鼠标所选择的区域为保存的对象窗口：只对出现在屏幕上的窗口中的对象进行捕获全屏幕滚动窗口以滚动窗口中的内容为标准范围捕获区域图像Web页（保留链接）以滚动窗口中的内容为标准范围捕获区域图像，并保留其中的超链接保存为*.mht文件对象只对出现在屏幕中的图标进行捕获菜单的时间延迟捕获10秒钟内操作的菜单窗口文字捕获一个窗口内的所有文字部分实践任务2借助snagit练习采用不同捕获方案截取图片返回方法1：利用菜单(插入→图像)方法2：利用工具栏(插入面板→常用→图像)123二、插入图片<img>标记在HTML文档中，引用图片必须用<img>标记。基本语法：<imgsrc=“url”>语法解释：

src的属性值为所引用的图片的URL地址。

src属性是必须的。

url可以是绝对地址，也可以是相对地址。属性功能说明srcwidthheighthspacevspacealignborderalt指定图片源，即图片的URL路径指定图片的显示宽度指定图片的显示高度指定图片的水平间距指定图片的垂直间距指定图片的对齐方式指定图片的边框大小显示图片的说明文字<img>标记包含的其他属性：原因：正确认识替换文本的功能当图片不能显示时，鼠标经过图片时会显示替换文字的内容；当图片可以显示时，鼠标经过图片时，替换文字就不会显示出来了。设计时存在的问题：

鼠标经过图片时图片上的替换文本不显示强制为图片添加提示文字解决办法：为图片添加title属性用法如下：

<imgsrc=“1.jpg”title=“提示文字">设定网页背景图片选按属性面板页面属性钮或选按菜单栏修改\页面属性，开启对话框进行操作：提示：可以设置重复属性来设置背景显示区域回顾返回选中图片，打开图片属性面板图像的数据量给图片编号，以便区分以像素为单位修改图片的尺寸输入数值为图片添加边框重设大小按钮三、使用Dreamweaver编辑图片1、调整图片大小方法1：目视调整图片大小选取图片后，将鼠标指针移至图片对象右下角的缩放控点，当呈时，按Shift键不放再拖曳该缩放控点即可以正比例调整影像大小。方法2：在图片属性面板中输入详细设置值注意：缩放影像时，过于放大影像会导致失真。存在的问题：

图片的尺寸变小了，但占用的存储空间没有变化解决办法：更新图片调整尺寸后的数据量在选取图片的状态下，于属性面板设重新取样。重新取样1234注意：原始图片将根据设置调整2、图片的裁切选取图片后，选按属性面板裁切将鼠标移至裁切框的任一控点上，呈现裁切箭头按住鼠标左键不放拖拽裁切范围按回车键或双击鼠标完成裁切动作

注意：原始图片将根据设置调整3、调整图片的亮度和对比当图片太暗或太亮时，在选取图片的状态下，于属性面板选按亮度和对比钮，开启亮度/对比对话框调整。4、图片的锐利化锐利化会增加对象边缘四周的像素对比，并增加影像的清晰度或模糊度。5、为图片添加不同颜色的边框使用“Border”属性直接设置边框的宽度拖动鼠标选择图片对象（注意不是点击选中）使用css模式设定颜色6、借助第三方软件编辑图片返回预备知识：设定图片的对齐方式12注意：图片属性面板中的对齐设置表示的是在一行中图形和文本的对齐方式（即：垂直方向）四、图文混排设计要求：图片和段落一起水平居中解决办法：在css样式中设定图片的对齐方式首先将鼠标放在在段落的最左边进入css模式，选中居中，图片将居中显示图文混排实例设计要求：图片左对齐；垂直边距和水平边距为20；段落间距为4512添加文字段落光标定位在段首插入图片3选中图片在图片属性面板中设置对齐4选中图片在图片属性面板设置图片垂直边距和水平边距5选中段落，以图片大小为基准，设定段落的间距6在「印象师大」网站站点中添加jianjie01.html网页，实现文字和图片的图文混排。要求:添加三个段落（每个段落都有标题，样式为“标题1”）添加水平线将三个段落分隔开将三张图片分别插入在文字段落中，图片靠右对齐,并为每幅图片添加提示文字效果如图所示提交时间：本次课实践任务3实践任务3效果图移除Word产生的无关HTML程序代码是否常遇到需要将Word制作的内容转成网页型态？但该文档在Dreamweaver中开启时，却夹带Word中不必要的HTML程序代码，可以移除Word所产生的无关HTML程序代码，让网页完整呈现。小窍门1.在Dreamweaver中开启先前在Word中转存成网页的档案。2.选按菜单栏命令\清理WordHTML开启对话框进行相关设定即可。返回要求：将一个已经进行图文混排处理的word文档转存为网页格式，借助Dreamweaver删除冗余代码。提交形式：word原文档、消除冗余代码后的网页文档提交时间：本次课实践任务4“插入”“图像对象”“鼠标经过图像”实例五、鼠标经过更换图像在「印象师大」网站站点中添加jianjie02.html网页，实现文字和图片的图文混排。要求:添加四个文字段落添加水平线将标题与段落隔开将2个鼠标经过图像分别插入在文字段落中，图片1靠右对齐,图片2靠左对齐，并为每幅图片添加提示文字效果如图所示提交时间：本次课实践任务5实践任务5效果图返回思路：把滚动字幕中的文字改为图片即可<marquee><