网页设计课程第3章.ppt

网页设计实例教程第3章图片,网页中支持的图像文件格式,图象文件格式有多种，如BMP、JPEG、TGA、GIF、PNG等，但在web页中通常使用的只有3种JPEG格式：用于摄影或连续色调图象的高级格式，包含数百万种颜色,适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式；GIF格式：图形交换格式,一般用于较小尺寸的图片，是一种无损压缩的格式，文件最多使用256种颜色，适合显示色调不连续或具有大面积单一色彩的图象，如导航条、按钮、图标或其它具有统一色彩和色调的图象.gif格式的特点是可以实现gif动画，和gif全透明的图像；PNG格式：可移植网络图形格式，具有较大的灵活性，文件较小，对于几乎任何类型的Web图形都适合，但IE4.0或更高版本只能支持部分PNG图象的显示,图像标记,图像标记：将图形文件嵌入到网页文档中的当前位置说明：网页中插入图像有两种方法，一是插入一个元素，二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大，现在更推荐将图像都作为背景嵌入。如果图像是通过元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片。,标记的常见属性,是一个行内元素，插入元素不会导致任何换行。下面是标记的常见属性：,例1：图像的插入,图像标记示例,例2:图片的大小控制,图片的大小控制,例2:图片的大小控制,说明:Width控制图片的宽度,height控制图片的高度,当图片只设置了其中一个属性(如只设置了width)时,图片的高度就以图片原始的长宽比表示语法结构:N为数值,单位像素,m代表0到100的数,即0%到100%,图片将以相对于当前窗口的大小显示,例3:图片的边框设置,图片的边框说明:,n为数值,0到99,单位像素,图片的左右区域图片的水平间隔此图水平空白区域为30此图水平空白区域为60此图水平空白区域为80说明:hspace属性控制图片左右两边的空白区域,hspace=n,n为数值,单位像素,例4图片与文字的结合,图片的上下区域图片的垂直间隔此图垂直空白区域为30此图垂直空白区域为20此图垂直空白区域为10说明:vspace属性控制图片上下两边的空白区域,vspace=n,n为数值,单位像素,图片和文字的位置关系浏览器默认显示样式文字居左显示文字居右显示说明:默认情况下,图片和文字的显示按照组件输入的先后,文字只显示在图片的两侧,并且居于图片基线的下方,图片相对文字基线对齐图片5图片6图片7说明:align属性控制了图片和文字的相对位置图象和文字的对齐Align属性值:top(上对齐),middle(居中对齐),bottom(下对齐)图象在页面中的对齐Align属性值:left(左对齐)right(右对齐）,例:图片居左显示图片居左显示文字显示,例:图片居右显示图片居右显示文字居左显示,图片居中显示并不能在所有浏览器中产生效果,若要将图片居中,则要将该段所有内容居中.图片居中显示文字显示,图片居中显示图片与文字均居中显示,例:文字代替图片的显示有时浏览器不能显示指定的图片,可以让浏览器显示一段文字说明该图片,这是利用alt属性完成的文字代替图片文字代替图片,图片从右向左滚动,图片的滚动,无法显示图片？,标记显示图片时经常无法显示图片原因：路径错误文件名，特别是扩展名错误,路径问题,HTML超文本标记语言能够利用URL，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链接起来。常见的文件路径有两种：相对路径:以要引用的文件所在的位置为参考点而建立起来的路径,所以,当不同的网页以相对路径引用同一个文件时,所使用的路径是不一样的绝对路径:以服务器的硬盘架构以及所在的根目录为参考点建立起来的路径,所以,当不同的文件以绝对路径引用一个文件时,其路径是一样的,绝对路径,绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分：一个传输协议（如HTTP协议）网络域名或者服务器IP地址网站结构的目录树文件名（文本、图片、音频和视频等）这些部分就构成了一个完整的绝对路径，例如：,相对路径,相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它文件(或文件夹)的路径关系，也就是自己相对于目标的位置。,各种相对路径,总结归纳起来，对于各种相对路径主要有三种情况。（1）当前目录：src=”*.jpg”如果源文件和引用文件在同一个目录里，直接写引用文件名即可。（2）当前目录上一层：src=”./*.jpg”./表示源文件所在目录的上一级目录，././表示源文件当前目录的上一级目录的上一级目录。（3）下级目录：src=”*/*.jpg”引用下级目录的文件，直接写下级目录文件的路径即可，其中*代表具体的文件名或者目录名。,C:,aa,bb,Photo.gif(3),Photo.gif(1),Index.htm,cc,Photo.gif(2),Photo.gif(4),(1)(2)(3)(4),Web页中使用图像的原则,简洁（确保文件较小）明快（控制图像的数量和质量）图片的意义：取决于表达和被理解两方面图片的难度：尽可能易于理解合理使用动画精心搭配图片的颜色、格式以及与周围网页元素在颜色、位置的搭配上都要精心配置，才能和谐取决于设计者的审美和艺术水平，可参考其它网站,return,利用Dreamweaver设置图片,插入图像打开网页，将光标移到将要插入图像的位置。插入图片在插入“常用”面板中，单击插入图像按钮。直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。选择Dreamweaver主菜单中的“插入”|“图像”命令。打开“选择图像源”对话框Dreamweaver询问是否要将文件拷贝到网站目录下为了文件的整体性，选择“是”相当于插入,利用Dreamweaver设置图片,图片属性指定图像的宽和高图像的边框设置图像周围的空白图像的对齐,图片使用技巧,不要大量使用无意义及大型的图形必须依据HTML文件、图形文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与使用端的软硬件条件，估算HomePage的传输与显示时间网页背景图片尽量使用背景色而非背景图片背景图