第7章设置页面中的图像重点.pptx

第7章 设置页面中的图像 一个网站内容的知识性、实用性再高，如果只有文字内容，肯定会让人感到枯燥无味，尤其是在如今，对视觉设计要求越来越高，网站往往需要使用图片来装饰页面的外表，本章的重点是讲解网站设计制作中如何对图片进行控制，让读者掌握在网页中控制图像的方法和技巧，并能对各种图像进行熟练的操作。 本章的主要内容主要包括怎样使用CSS样式对图像进行控制，包括图像的边框、缩放、对齐方式等，而且还通过网站页面实例对页面布局制作方法进行讲解。 7.1 图像样式控制 使用HTml可以直接调整图片的很多属性，但是众多的代码使页面的修改工作变得麻烦。因此使用CSS对页面上的图片统一管理是非常必要的。除此之外，还可以实现一些在HTML中无法实现的特殊效果，本小节为读者讲解使用CSS样式控制图像的方法。 7.1.1 图像边框 在CSS中可以通过border属性为图片添加边框，并且可以调整边框的粗细、样式以及颜色等，在我们学习这些内容之前，首先要了解怎样通过boder属性控制样式。 设置图片边框 7.1.2 图像定位 在页面中插入图片后，总是需要对图片的位置进行设置，图片定位主要通过CSS样式中的margin属性进行外边距控制来实现定位的效果。 7.1.3图像缩放 CSS控制图片的缩放与HTML一样，也是通过width和height两个属性来实现的，可以通过为这两个属性设置为相对数值或绝对数值达到图片缩放的效果，下面的CSS样式代码是通过绝对数值来控制图片缩放的方法。 7.1.4图像对齐方式 当图片和文字同时出现在页面上的时候，图片的对齐方式是非常重要的，将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。图像的对齐方式分为水平对齐和垂直对齐两种。 7.2 图文混排 在网站中经常会出现一些图片和文字混合排列在一起的排版方式，从而更好的突出网站的主题信息，这种排版方式就称为：“图文混排”。图文混排与之前所讲的设置段落样式的方法一样，都是通过对不同属性进行设置而实现的一种特殊的排版效果，接下来将会为读者介绍的是设置图文混排的方法。 7.2.1 文本混排 7.2.2 设置混排间距 7.3 CSS 3.0中边框的新增属性 在CSS中新增加了4种控制边框（border）的新属性，分别是border-image、border-radius、Box-shadow和border-color，下面分别对这4种新增边框控制属性进行简单的介绍。 7.3.1 border-image 7.3.2 border-radius 7.3.3 border-color 7.3.4 box-shadow 7.3.5 使用CSS3.0实现图像滑过动画效果 7.4 课堂练习 本实例通过一个饮品展示页面的制作，向读者介绍使用DIV+CSS对页面进行布局的制作方法和技巧。对于任何一个网页而言，文字和图像都是页面中不可缺少的重要元素，页面中图像的控制也是非常重要的，通过CSS样式对图像进行设置，可以使图像在网页中更加美观，最终效果下如图所示。 7.3.1 设计分析 7.3.2 制作步骤 源文件位置：光盘/素材/第7章/7-4.html 视频位置：光盘/视频/第7章/7-4.swf 7.5 课堂讨论 本章节向读者讲解了如何设置页面中的图像，掌握了如何在页面中设置图像可以为网页制作添加更多的元素，使得页面更及丰富、美观。 7.5.1 问题1——使用图像时需要注意什么 选择合适的图像格式。在网页中常用的图像格式是GIF、JPEG和PNG格式，JPEG格式对于大型图片的压缩率比较高，而GIF格式更适合小图像或是小的动画。对于同样内容的4KB以下的图像文件，GIF格式比JPEG格式效果更好。 控制网页中的图像。在网页中不要使用过多的图像文件，因为每下载一个图像文件，浏览器都将向Web服务器请求一次连接，所以图像文件越多意味着页面下载的时间越长，所以图像文件的大小和数量对于网页的下载是很重要的。在制作网页时，可以将多个小的图像合并成一个图像减少图像的下载数量，提高网页的浏览速度。 7.5.2 问题2——在网页插入图像时，可以不设置宽度和高度属性吗 当然可以，在网页中插入图像时，可以只设置图像的路径地址，在浏览器中预览该网页时，浏览器会按照该图像的原始尺寸在网页中显示图像。如果在网页中需要控制所插入的图像大小尺寸，则必须在img标签中设置宽度和高度属性。 7.6 课后练习 制作产品展示页面 本章学习了如何设置页面中的图像，使得简单的页面变得多元化，变得更加吸引浏览者的眼球，接下来通过完成课后练习来进一步掌握页面背景图像的设置。 源文件位置：光盘\ 素材\第7章\7-6.html 视频位置：光盘\ 视频\第7章