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

1、上一讲回顾上一讲回顾设置文本属性设置文本属性uCSSCSS模式用于设定文字本身格式模式用于设定文字本身格式 uHTML HTML 模式用于设定文字段落格式模式用于设定文字段落格式为文字添加移动属性为文字添加移动属性u本讲主要内容本讲主要内容网页图像的网页图像的使用使用添加图片添加图片编辑编辑图片图片图文混排图文混排鼠标鼠标经过图像的添加经过图像的添加制作滚动制作滚动图片图片一、一、网页网页图像图像的使用的使用如果网页中满是密密麻麻的文字，无论有多精彩如果网页中满是密密麻麻的文字，无论有多精彩的内容也会令人望之却步！所以的内容也会令人望之却步！所以图片图片的加注在网的加注在网页设计中占了相当地位

2、，没有页设计中占了相当地位，没有图片图片来相辅，网站来相辅，网站就算不上完美。就算不上完美。 在保证画质的前提下尽可能使图片的数据量小一些，在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。这样有利用户快速的浏览我们的网页。 插入图片前先把网页保存一下，以免图片丢失插入图片前先把网页保存一下，以免图片丢失 图片要放在网页的同一个目录或子目录下图片要放在网页的同一个目录或子目录下 网页、图片文件名只能是英文或数字不能用中文网页、图片文件名只能是英文或数字不能用中文1 1、使用图片的原则、使用图片的原则.GIF.GIF格式格式特点：特点：它的图片数据量小，可以带有动画

3、信息，且可它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持以透明背景显示，但最高只支持256256种颜色。种颜色。用途：用途：大量用于网站的图标大量用于网站的图标LogoLogo、广告条、广告条BannerBanner及网及网页背景图像。但由于受到颜色的页背景图像。但由于受到颜色的限制限制，不适合用于照，不适合用于照片级的网页图像。片级的网页图像。2 2、网页中常用的图片格式网页中常用的图片格式.JPEG/.JPG.JPEG/.JPG格式格式特点：特点：可以高效地压缩图片的数据量。使图片文件变可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。小的同时基本不

4、丢失颜色画质。用途：用途：通常用于显示照片等颜色丰富的精美图像。通常用于显示照片等颜色丰富的精美图像。2 2、网页中常用的图片格式网页中常用的图片格式借助互联网查询借助互联网查询.JPEG/.JPG.JPEG/.JPG格式格式有何区别？有何区别？两种格式之间可以如何进行转换？两种格式之间可以如何进行转换？.PNG.PNG格式格式特点：特点：是一种逐步流行的网络图像格式。既融合了是一种逐步流行的网络图像格式。既融合了GIFGIF能做成透明背景的特点，又具有能做成透明背景的特点，又具有JPEGJPEG处理精美图处理精美图像的优点。像的优点。用途：用途：常用于制作网页效果图。常用于制作网页效果图。2

5、 2、网页中常用的图片格式网页中常用的图片格式网上下载或购买素材光盘网上下载或购买素材光盘照相机、摄像机、手机照相机、摄像机、手机具有一定绘画水平的用户，可自己绘制具有一定绘画水平的用户，可自己绘制扫描仪扫描图片扫描仪扫描图片从电脑显示屏抓取图像从电脑显示屏抓取图像3 3、图片的获取、图片的获取用用Print ScreenPrint Screen键直接抓取键直接抓取1 1截取全屏幕画面截取全屏幕画面操作步骤：操作步骤：屏幕上出现所需抓取的图像屏幕上出现所需抓取的图像按下键盘上的按下键盘上的Print Screen SysRp(Print Screen SysRp(屏幕打印屏幕打印) )键，键，

6、则图像被保存到了则图像被保存到了WindowsWindows剪贴板中。剪贴板中。启动画图或启动画图或PhotoshopPhotoshop等软件。等软件。执行执行“Ctrl+V”Ctrl+V”组合键，把图片粘贴到软件中。组合键，把图片粘贴到软件中。保存图片。保存图片。2 2截取当前活动窗口截取当前活动窗口 操作步骤：操作步骤：按住按住Print ScreenPrint Screen的的同时按下同时按下AltAlt键键粘贴、保存图片。粘贴、保存图片。借助软件进行截图借助软件进行截图QQQQ截图截图SnagItSnagItSnagItSnagIt主界面主界面用用SnagItSnagIt抓取图像的基本

7、操作抓取图像的基本操作 确保要捕获的内容所在页面处于确保要捕获的内容所在页面处于激活激活状态状态 选择一个选择一个“捕获方案捕获方案” 单击单击“捕获捕获”按钮按钮 点击点击 “ “完成完成”按钮按钮 选择保存的文件格式，对所捕获的图像进行保存选择保存的文件格式，对所捕获的图像进行保存捕获方案的选取捕获方案的选取范围范围以鼠标所选以鼠标所选择的区域为择的区域为保存的对象保存的对象窗口：窗口：只对出现在屏幕上的窗口中的对象进行捕获只对出现在屏幕上的窗口中的对象进行捕获 全屏幕全屏幕滚动窗口滚动窗口以滚动窗口中的内容为标准范以滚动窗口中的内容为标准范围捕获区域图像围捕获区域图像WebWeb页（保留

8、链接）页（保留链接）以滚动窗口中的内容为标准范围捕获区域图像，并保留其中的以滚动窗口中的内容为标准范围捕获区域图像，并保留其中的超链接超链接保存为保存为* *.mht.mht文件文件对象对象只对出现在屏幕中的图标进行捕获只对出现在屏幕中的图标进行捕获菜单的时间延迟菜单的时间延迟捕获捕获1010秒钟内操作的菜单秒钟内操作的菜单窗口文字窗口文字捕获一个窗口内的所有文字部分捕获一个窗口内的所有文字部分借助借助snagitsnagit练习采用不同捕获方案截取图片练习采用不同捕获方案截取图片返回返回方法方法1 1：利用菜单：利用菜单( (插入插入图像图像) )方法方法2 2：利用工具栏：利用工具栏( (

9、插入面板插入面板常用常用图像图像) )1 12 23 3二、插入图片二、插入图片标记标记在在HTMLHTML文档中，引用图片必须用文档中，引用图片必须用标记。标记。基本语法：基本语法：语法解释：语法解释： srcsrc的属性值为所引用的图片的的属性值为所引用的图片的URLURL地址。地址。 src src属性是必须的。属性是必须的。 url url可以是绝对地址，也可以是可以是绝对地址，也可以是相对地址相对地址。属性属性功能说明功能说明srcsrcwidthwidthheightheighthspacehspacevspacevspacealignalignborderborderaltalt

10、指定图片源，即图片的指定图片源，即图片的URLURL路径路径指定图片的显示宽度指定图片的显示宽度指定图片的显示高度指定图片的显示高度指定图片的水平间距指定图片的水平间距指定图片的垂直间距指定图片的垂直间距指定图片的对齐方式指定图片的对齐方式指定图片的边框大小指定图片的边框大小显示图片的说明文字显示图片的说明文字标记包含的其他属性：标记包含的其他属性：原因：正确认识替换文本的功能原因：正确认识替换文本的功能 当当图片不能显示图片不能显示时，鼠标经过图片时会时，鼠标经过图片时会显示替显示替换文字换文字的内容；的内容； 当当图片可以显示图片可以显示时，鼠标经过图片时，时，鼠标经过图片时，替换文替换文

11、字就不会显示字就不会显示出来了。出来了。设计时存在的问题：设计时存在的问题：鼠标经过图片时图片上的替换文本不显示鼠标经过图片时图片上的替换文本不显示强制为图片添加提示文字强制为图片添加提示文字解决办法：解决办法：为图片添加为图片添加titletitle属性属性用法如下：用法如下： 设定网页背景设定网页背景图片图片选按选按属性属性面板面板页面属性页面属性钮钮或选按菜单栏或选按菜单栏 修改修改 页面页面属性，开启对话框进行操属性，开启对话框进行操作：作：提示：提示：可以设置可以设置重复重复属属性来设置背景显示区域性来设置背景显示区域返回返回选中图片，打开图片属性面板选中图片，打开图片属性面板图像的

12、图像的数据量数据量给图片编号，给图片编号，以便区分以便区分以像素为单位修以像素为单位修改图片的尺寸改图片的尺寸输入数值为图输入数值为图片添加边框片添加边框重设大小重设大小按钮按钮三、使用三、使用DreamweaverDreamweaver编辑图片编辑图片1 1、调整调整图片图片大小大小方法方法1 1：目视调整图片大小目视调整图片大小选取选取图片图片后，将鼠标指针移至后，将鼠标指针移至图片图片对对象右下角的缩放控点，当呈象右下角的缩放控点，当呈 时，按时，按 Shift Shift 键不放再拖曳该缩放控点即可键不放再拖曳该缩放控点即可以正比例调整影像大小。以正比例调整影像大小。方法方法2 2：在

13、图片属性面板中输入详细设在图片属性面板中输入详细设置值置值注意注意：缩放影像时，过于放大影像会缩放影像时，过于放大影像会导致失真。导致失真。存在的问题：存在的问题：图片的尺寸变小了，但占用的存储空间没有变化图片的尺寸变小了，但占用的存储空间没有变化解决办法：更新图片调整尺寸后的数据量解决办法：更新图片调整尺寸后的数据量在选取在选取图片图片的状态下，于的状态下，于 属性属性 面板设重新取样。面板设重新取样。重新重新取样取样1 12 23 34 4注意：注意：原始图片将根据设置调整原始图片将根据设置调整2 2、图片的、图片的裁切裁切选取选取图片图片后，选按后，选按 属性属性 面板面板 裁切裁切将鼠

14、标移至裁切框的任一控点上，呈现裁切箭头将鼠标移至裁切框的任一控点上，呈现裁切箭头按住鼠标左键不放拖拽裁切范围按住鼠标左键不放拖拽裁切范围按回车键或双击鼠标完成裁切动作按回车键或双击鼠标完成裁切动作 注意：注意：原始图片将根据设置调整原始图片将根据设置调整3 3、调整图片的、调整图片的亮度和对比亮度和对比当当图片图片太暗或太亮时，在选取太暗或太亮时，在选取图片图片的状态下，于的状态下，于 属性属性 面板选按面板选按 亮度和对比亮度和对比 钮，开启钮，开启 亮度亮度/ /对比对话框调整。对比对话框调整。4 4、图片的、图片的锐利化锐利化锐利化会增加对象边缘四周的像素对比，并增加锐利化会增加对象边缘

15、四周的像素对比，并增加影像的清晰度或影像的清晰度或模糊模糊度。度。5 5、为图片添加不同颜色的边框、为图片添加不同颜色的边框1.1. 使用使用“Border”Border”属性直接设置边框的宽度属性直接设置边框的宽度 2.2. 拖动鼠标选择图片对象（注意不是点击选中）拖动鼠标选择图片对象（注意不是点击选中）3.3. 使用使用csscss模式设定颜色模式设定颜色6 6、借助第三方软件、借助第三方软件编辑编辑图片图片返回返回预备知识：设定图片的对齐方式预备知识：设定图片的对齐方式1 1 2 2注意：注意：图片属性面板中的对齐设置表示的是在一行中图图片属性面板中的对齐设置表示的是在一行中图形和文本的

16、对齐方式（即：垂直方向）形和文本的对齐方式（即：垂直方向）四、图文混排四、图文混排设计要求设计要求：图片和段落一起：图片和段落一起水平居中水平居中解决办法：在解决办法：在css样式中设定图片的对齐方式样式中设定图片的对齐方式首先将鼠标放在在段落的最左边首先将鼠标放在在段落的最左边进入进入css模式，选中居中，图片将居中显示模式，选中居中，图片将居中显示图文混排实例图文混排实例设计要求：设计要求：图片左对齐；垂直边距和水平边距为图片左对齐；垂直边距和水平边距为2020；段落间距为；段落间距为45451 12 2添加文字段落添加文字段落光标定位在段首光标定位在段首插入图片插入图片3 3选中图片选中

17、图片在图片属性面板中设置对齐在图片属性面板中设置对齐4 4选中图片选中图片在图片属性面板设置图片在图片属性面板设置图片垂直边距和水平边距垂直边距和水平边距5 5选中段落，以图片大小为基准，选中段落，以图片大小为基准，设定段落的间距设定段落的间距6 6在印象师大网站站点中添加在印象师大网站站点中添加jianjie01.htmljianjie01.html网页，实现网页，实现文字和图片的图文混排。要求文字和图片的图文混排。要求: :1.1. 添加三个段落（每个段落都有标题，样式为添加三个段落（每个段落都有标题，样式为“标题标题1 1”）2.2. 添加水平线将三个段落分隔开添加水平线将三个段落分隔开

18、3.3. 将将三张三张图片图片分别插入在文字段落中分别插入在文字段落中，图片，图片靠右对齐靠右对齐, ,并为每幅图片添加提示文字并为每幅图片添加提示文字效果如图所示效果如图所示提交时间：本次课提交时间：本次课移除移除WordWord产生的产生的无关无关HTMLHTML程序代码程序代码是否常遇到需要将是否常遇到需要将WordWord制作的内容转成网页型态？制作的内容转成网页型态？但该但该文档文档在在 Dreamweaver Dreamweaver 中开启时，却夹带中开启时，却夹带 Word Word 中不必要的中不必要的 HTML HTML 程序代码，程序代码，可以可以移除移除 Word Wor

19、d 所产生的所产生的无关无关 HTML HTML 程序代码，让网页完整呈现。程序代码，让网页完整呈现。1. 1. 在在 Dreamweaver Dreamweaver 中开启先前在中开启先前在 Word Word 中转存成中转存成网页的档案。网页的档案。2. 2. 选按菜单栏选按菜单栏 命令命令 清理清理 Word HTML Word HTML 开启对话框开启对话框进行相关设定即可。进行相关设定即可。返回返回要求：要求：将一个已经进行图文混排处理的将一个已经进行图文混排处理的wordword文档转存为文档转存为网页格式，借助网页格式，借助DreamweaverDreamweaver删除冗余代码。删除冗余代码。提交形式：提交形式：wordwo