《网页设计课程第3章.ppt》由会员分享，可在线阅读，更多相关《网页设计课程第3章.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、计算机与通信学院网页设计实例教程网页设计实例教程第第3 3章章 图片图片第三章图片第三章图片网页中支持的图像文件格式网页中支持的图像文件格式图象文件格式有多种，如图象文件格式有多种，如BMPBMP、JPEGJPEG、TGATGA、GIFGIF、PNGPNG等，但在等，但在webweb页中通常使用的只有页中通常使用的只有3 3种种JPEGJPEG格式格式：用于摄影或连续色调图象的高级格式，包含数百万：用于摄影或连续色调图象的高级格式，包含数百万种颜色种颜色,适合用于网页中较大尺寸的适合用于网页中较大尺寸的真彩色图片真彩色图片，是一种有，是一种有损压缩的格式；损压缩的格式；GIFGIF格式格式：图
2、形交换格式：图形交换格式,一般用于较小尺寸的图片，是一种无一般用于较小尺寸的图片，是一种无损压缩的格式，文件最多使用损压缩的格式，文件最多使用256256种颜色，适合显示色调不种颜色，适合显示色调不连续或具有大面积单一色彩的图象，如导航条、按钮、图标连续或具有大面积单一色彩的图象，如导航条、按钮、图标或其它具有统一色彩和色调的图象或其它具有统一色彩和色调的图象.gif.gif格式的特点是可以格式的特点是可以实现实现gifgif动画动画，和，和gifgif全透明的图像全透明的图像；PNGPNG格式格式：可移植网络图形格式，具有较大的灵活性，文件较：可移植网络图形格式，具有较大的灵活性，文件较小，
3、对于几乎任何类型的小，对于几乎任何类型的WebWeb图形都适合，但图形都适合，但IE4.0IE4.0或更高版或更高版本只能支持部分本只能支持部分PNGPNG图象的显示图象的显示第三章图片第三章图片图像标记图像标记图像标记：将图形文件嵌入到网页文档中的当前位置说明：网页中插入图像有两种方法，一是插入一个元素，二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大，现在更推荐将图像都作为背景嵌入。如果图像是通过元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片。第三章图片第三章图片标记的常见属性标记的常见属性是一个行内元素，插入
4、是一个行内元素，插入元素不会导致任何换行。下面元素不会导致任何换行。下面是是标记的常见属性：标记的常见属性：img的属性含义src图片文件的url地址alt当图片无法显示时显示的替换文字title鼠标停留在图片上时显示的说明文字align图片的对齐方式，默认为基线对齐，即图片的下边缘和文字的下边缘对齐，值有top，bottom(默认)，middle，right,leftwidth、height图片在网页中的宽和高第三章图片第三章图片例例1 1：图像的插入：图像的插入图像标记示例图像标记示例第三章图片第三章图片例例2:2:图片的大小控制图片的大小控制图片的大小控制图片的大小控制img src=p
5、ic/01.jpg img src=pic/02.jpg img src=pic/03.jpg 第三章图片第三章图片例例2:2:图片的大小控制图片的大小控制说明说明:WidthWidth控制图片的宽度控制图片的宽度,height,height控制图片的高度控制图片的高度,当图片当图片只设置了其中一个属性只设置了其中一个属性(如只设置了如只设置了width)width)时时,图片的高图片的高度就以图片原始的长宽比表示度就以图片原始的长宽比表示语法结构语法结构:img width=nm%img height=nm%N N为数值为数值,单位像素单位像素,m,m代表代表0 0到到100100的数的数,
6、即即0%0%到到100%,100%,图片图片将以相对于当前窗口的大小显示将以相对于当前窗口的大小显示第三章图片第三章图片例例3:3:图片的边框设置图片的边框设置图片的边框图片的边框img src=pic/04.jpg width=80 height=60 img src=pic/04.jpg width=120 height=100 img src=pic/04.jpg width=160 height=140 说明说明:,n:,n为数值为数值,0,0到到99,99,单位像素单位像素第三章图片第三章图片 图片的左右区域图片的左右区域图片的水平间隔图片的水平间隔此图水平空白区域为此图水平空白区域
7、为3030此图水平空白区域为此图水平空白区域为6060此图水平空白区域为此图水平空白区域为8080说明说明:hspace:hspace属性控制图片左右两边的空白区域属性控制图片左右两边的空白区域,hspace=n,nhspace=n,n为数值为数值,单位像单位像素素例例4 4 图片与文字的结合图片与文字的结合第三章图片第三章图片 图片的上下区域图片的上下区域图片的垂直间隔图片的垂直间隔此图垂直空白区域为此图垂直空白区域为3030此图垂直空白区域为此图垂直空白区域为2020此图垂直空白区域为此图垂直空白区域为1010说明说明:vspace:vspace属性控制图片上下两边的空白区域属性控制图片上
8、下两边的空白区域,vspace=n,n,vspace=n,n为数值为数值,单位单位像素像素第三章图片第三章图片 图片和文字的位置关系图片和文字的位置关系浏览器默认显示样式浏览器默认显示样式文字居左显示文字居左显示文字居右显示文字居右显示说明说明:默认情况下默认情况下,图片和文字的显示按照组件输入的先后图片和文字的显示按照组件输入的先后,文字只显示文字只显示在图片的两侧在图片的两侧,并且居于图片基线的下方并且居于图片基线的下方第三章图片第三章图片 图片相对文字基线对齐图片相对文字基线对齐img src=pic/05.jpg height=150 图片图片55img src=pic/06.jpg
9、height=150 align=center图片图片66img src=pic/07.jpg height=150 图片图片7 7说明说明:align:align属性控制了图片和文字的相对位置属性控制了图片和文字的相对位置图象和文字的对齐图象和文字的对齐AlignAlign属性值属性值:top(:top(上对齐上对齐),middle(),middle(居中对齐居中对齐),bottom(),bottom(下对齐下对齐)图象在页面中的对齐图象在页面中的对齐AlignAlign属性值属性值:left(:left(左对齐左对齐)right()right(右对齐）右对齐）第三章图片第三章图片 例例:图
10、片居左显示图片居左显示图片居左显示图片居左显示文字显示文字显示第三章图片第三章图片 例例:图片居右显示图片居右显示图片居右显示图片居右显示文字居左显示文字居左显示第三章图片第三章图片 图片居中显示图片居中显示并不能在所有浏览器中产生效果并不能在所有浏览器中产生效果,若要将图片居中若要将图片居中,则要将该则要将该段所有内容居中段所有内容居中.图片居中显示图片居中显示文字显示文字显示第三章图片第三章图片图片居中显示图片居中显示图片与文字均居中显示图片与文字均居中显示第三章图片第三章图片 例例:文字代替图片的显示文字代替图片的显示有时浏览器不能显示指定的图片有时浏览器不能显示指定的图片,可以让浏览器
11、显示一段文字说明该图片可以让浏览器显示一段文字说明该图片,这是利用这是利用altalt属性完成的属性完成的文字代替图片文字代替图片img src=pic/05.jpg width=40%文字代替图片文字代替图片第三章图片第三章图片 图片从右向左滚动图片从右向左滚动marquee align=center bgcolor=yellowvspace=1 loop=-1 图片的滚动图片的滚动第三章图片第三章图片无法显示图片？无法显示图片？标记显示图片时经常无法显示图片标记显示图片时经常无法显示图片原因：原因：路径错误路径错误文件名，特别是扩展名错误文件名，特别是扩展名错误第三章图片第三章图片路径问题
12、路径问题HTMLHTML超文本标记语言能够利用超文本标记语言能够利用URLURL，将不同格式、不同，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链属性、不同位置的各种网络资源，用统一的方式互相链接起来。接起来。常见的文件路径有两种：常见的文件路径有两种：相对路径相对路径:以要引用的文件所在的位置为参考点而建立以要引用的文件所在的位置为参考点而建立起来的路径起来的路径,所以所以,当不同的网页以相对路径引用同一个当不同的网页以相对路径引用同一个文件时文件时,所使用的路径是不一样的所使用的路径是不一样的绝对路径绝对路径:以服务器的硬盘架构以及所在的根目录为参以服务器的硬盘架构以及所
13、在的根目录为参考点建立起来的路径考点建立起来的路径,所以所以,当不同的文件以绝对路径引当不同的文件以绝对路径引用一个文件时用一个文件时,其路径是一样的其路径是一样的第三章图片第三章图片绝对路径绝对路径绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分：一个传输协议（如一个传输协议（如HTTP协议）协议）网络域名或者服务器网络域名或者服务器IP地址地址网站结构的目录树网站结构的目录树文件名（文本、图片、音频和视频等）文件名（文本、图片、音频和视频等）这些部分就构成了一个完整的绝对路径，例如：http:/index.htm/C|/Documents and Settings/x
14、ueyan/桌面桌面/html_example/03/image/pp12.gif第三章图片第三章图片相对路径相对路径 相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它相对路径就是指由这个文件所在的位置引起的跟其它文件文件(或文件夹或文件夹)的路径关系，也就是自己相对于目标的路径关系，也就是自己相对于目标的位置。的位置。第三章图片第三章图片各种相对路径各种相对路径 总结归纳起来，对于各种相对路径主要有三种情况。总结归纳起来，对于各种相对路径主要有三种情况。（
15、1）当前目录：当前目录：src=”*.jpg”如果源文件和引用文件在同一个目录里，如果源文件和引用文件在同一个目录里，直接写引用直接写引用文件名即可文件名即可。（2）当前目录上一层：当前目录上一层：src=”./*.jpg”./表示源文件所在目录的上一级目录表示源文件所在目录的上一级目录，././表示源文件表示源文件当前目录的上一级目录的上一级目录。当前目录的上一级目录的上一级目录。（3）下级目录：下级目录：src=”*/*.jpg”引用下级目录的文件，引用下级目录的文件，直接写下级目录文件的路径直接写下级目录文件的路径即即可，其中可，其中*代表具体的文件名或者目录名。代表具体的文件名或者目录
16、名。第三章图片第三章图片C:C:aaaabbbbPhoto.gif (3)Photo.gif (3)Photo.gif (1)Photo.gif (1)Index.htmIndex.htmccccPhoto.gif (2)Photo.gif (2)Photo.gif (4)Photo.gif (4)(1)(2)(3)(4)第三章图片第三章图片Web页中使用图像的原则页中使用图像的原则简洁（确保文件较小）简洁（确保文件较小）明快（控制图像的数量和质量）明快（控制图像的数量和质量）图片的意义：取决于表达和被理解两方面图片的意义：取决于表达和被理解两方面图片的难度：尽可能易于理解图片的难度：尽可能易
17、于理解合理使用动画合理使用动画精心搭配精心搭配图片的颜色、格式以及与周围网页元素在颜色、位置的搭配上都要精心配图片的颜色、格式以及与周围网页元素在颜色、位置的搭配上都要精心配置，才能和谐置，才能和谐取决于设计者的审美和艺术水平，可参考其它网站取决于设计者的审美和艺术水平，可参考其它网站return第三章图片第三章图片利用利用Dreamweaver设置图片设置图片插入图像打开网页，将光标移到将要插入图像的位置。打开网页，将光标移到将要插入图像的位置。插入图片插入图片 在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直接拖曳插入直接拖曳插入“常用常用”面板中的插入图像按
18、钮至页面的光标处。面板中的插入图像按钮至页面的光标处。选择选择Dreamweaver主菜单中的主菜单中的“插入插入”|“图像图像”命令。命令。打开打开“选择图像源选择图像源”对话框对话框Dreamweaver询问是否要将文件拷贝到网站目录下询问是否要将文件拷贝到网站目录下 为了文件的整体为了文件的整体性，选择性，选择“是是”相当于插入相当于插入第三章图片第三章图片利用利用Dreamweaver设置图片设置图片图片属性指定图像的宽和高指定图像的宽和高图像的边框图像的边框 设置图像周围的空白设置图像周围的空白图像的对齐图像的对齐 第三章图片第三章图片图片使用技巧图片使用技巧不要大量使用无意义及大型
19、的图形必须依据必须依据HTML文件、图形文件的大小，考虑传输速率、延迟时间、网络交文件、图形文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与使用端的软硬件条件，估算通状况，以及服务端与使用端的软硬件条件，估算HomePage 的传输与显示的传输与显示时间时间 网页背景图片尽量使用背景色而非背景图片尽量使用背景色而非背景图片背景图片颜色要浅淡背景图片颜色要浅淡 若为深色背景图片则要提亮字体颜色若为深色背景图片则要提亮字体颜色背景色和字体将会先于背景图片被下载背景色和字体将会先于背景图片被下载。因此对于暗色背景图片亮色字体的。因此对于暗色背景图片亮色字体的网页，要选择暗色背景色衬底网页，要选择暗色背景色衬底第三章图片第三章图片习题习题2图片排列方式图片排列方式图片图片5图片图片6图片图片7图片图片11图片图片12图片图片13第三章图片第三章图片习题习题3（1 1）（2 2）第三章图片第三章图片Question&AnswerFireworks