标准实例教程.pptx

19.1 图片19.1.1 网页的图片格式19.1.2 插入图片19.1.3 添加图片的提示文字alt19.1.4 设置图片的宽度和高度width/height19.1.5 设置图片边框border19.1.6 设置图片对齐方式align19.1.7 设置图片的间距hspase/vspase19.1.8 设置图片链接19.1.9 设置图片热区链接第1页/共118页19.1.1 网页的图片格式1GIF格式2JPEG格式3PNG格式第2页/共118页19.1.2 插入图片基本语法第3页/共118页19.1.2 插入图片语法说明 img标记的作用就是插入图片，该标记含有多个属性，其中src属性为必要属性，其他属性将在后面几节内容中逐个介绍。src属性用来指定图片文件所在的路径，这个路径可以是相对路径，也可以是绝对路径。第4页/共118页19.1.2 插入图片实例代码第5页/共118页19.1.2 插入图片网页效果第6页/共118页19.1.3 添加图片的提示文字alt基本语法第7页/共118页19.1.3 添加图片的提示文字alt语法说明 alt属性的提示文字可以是中文也可以是英文。第8页/共118页19.1.3 添加图片的提示文字alt实例代码第9页/共118页19.1.3 添加图片的提示文字alt网页效果第10页/共118页19.1.4 设置图片的宽度和高度width/height基本语法第11页/共118页19.1.4 设置图片的宽度和高度width/height语法说明 图片高度和宽度的单位可以是像素，也可以是百分比。如果在使用的宽度和高度属性中，只设置了宽度或高度中的一个属性，那么另一个属性会按原始图片宽高等比例显示。但是如果两个属性没有按原始大小的缩放比例设置，图片很可能变形。第12页/共118页19.1.4 设置图片的宽度和高度width/height实例代码第13页/共118页19.1.4 设置图片的宽度和高度width/height接上页第14页/共118页19.1.4 设置图片的宽度和高度width/height网页效果第15页/共118页19.1.5 设置图片边框border基本语法第16页/共118页19.1.5 设置图片边框border语法说明 value为边框线的宽度，用数字表示，单位为像素。第17页/共118页19.1.5 设置图片边框border实例代码第18页/共118页19.1.5 设置图片边框border接上页第19页/共118页19.1.5 设置图片边框border网页效果第20页/共118页19.1.6 设置图片对齐方式align基本语法第21页/共118页19.1.6 设置图片对齐方式align语法说明第22页/共118页19.1.6 设置图片对齐方式align实例代码第23页/共118页19.1.6 设置图片对齐方式align接上页第24页/共118页19.1.6 设置图片对齐方式align网页效果第25页/共118页19.1.7 设置图片的间距hspase/vspase基本语法第26页/共118页19.1.7 设置图片的间距hspase/vspase语法说明 hspace调整的是图片左右两边的空白距离，vspace调整的是图片上下两边的空白距离。水平间距和垂直间距都是用数字表示的，并且单位都是像素。第27页/共118页19.1.7 设置图片的间距hspase/vspase实例代码第28页/共118页19.1.7 设置图片的间距hspase/vspase网页效果第29页/共118页19.1.7 设置图片的间距hspase/vspase实例代码第30页/共118页19.1.7 设置图片的间距hspase/vspase接上页第31页/共118页19.1.7 设置图片的间距hspase/vspase网页效果第32页/共118页19.1.7 设置图片的间距hspase/vspase效果说明从图19-8的效果中可以看到图片的上下都存在一个空白距离，这个距离是由vspace值决定的，vspace的值越大，这个空白距离越大。如果不设置hspace和vspace两个属性的值，浏览器将显示图片和文字靠近的效果。第33页/共118页19.1.8 设置图片链接基本语法第34页/共118页19.1.8 设置图片链接语法说明 href属性是用来设置图片的链接地址URL，target属性用来设置目标窗口的打开方式，包含有4个属性值，具体内容可参照第6章。img标记中还可以添加其他的属性，如height、hspace、border等。第35页/共118页19.1.8 设置图片链接实例代码第36页/共118页19.1.8 设置图片链接网页效果第37页/共118页19.1.8 设置图片链接效果说明通过单击图19-9中的图片链接，就可以打开图19-10来查看第二张图片。提示文字在图中没有显示出来，因为它只有在图片不能显示时才会起作用。同时，还发现在图19-9中的图片有一个边框，这是因为给图片建立链接以后，浏览器自动就要给图片加一个边框，很像给文字建立链接时自动加的下划线。第38页/共118页19.1.9 设置图片热区链接基本语法第39页/共118页19.1.9 设置图片热区链接基本语法 热区图像及热区链接属性的定义如下：第40页/共118页19.1.9 设置图片热区链接语法说明 标记用来插入图片和引用映射图片名称，即用usemap属性来引用在标记中所定义的映射图片名称，并且要在名称前加上#号。标记只有一个name属性，用来定义映射图片的名称。标记有三个属性，shape属性、coords属性和href属性。shape属性用来定义热区的形状，又有3个属性值，具体取值见表19-2。coords属性用来定义热区的坐标，不同的形状其coords属性的设置方式也不同，具体可以参见表19-3。href属性，用来定义超链接的目标地址。表19-2表19-3第41页/共118页19.1.9 设置图片热区链接表19-2 shape属性取值说明返回第42页/共118页19.1.9 设置图片热区链接表19-2 shape属性取值说明返回第43页/共118页19.1.9 设置图片热区链接网页效果第44页/共118页19.1.9 设置图片热区链接效果说明图19-11中手形所在的矩形区域就是定义好的热区链接。通过单击该区域即可链接到代码中所定义的链接地址19-1-8-2.html。第45页/共118页19.2 滚动文字19.2.1 添加滚动文字marquee19.2.2 滚动文字背景颜色bgcolor19.2.3 设置滚动方向direction19.2.4 设置滚动方式behavior19.2.5 设置滚动速度scrollamount19.2.6 设置滚动延迟scrolldelay19.2.7 设置滚动范围width/height19.2.8 设置滚动空白空间hspace/vspace19.2.9 设置滚动循环loop第46页/共118页19.2.1 添加滚动文字marquee基本语法滚动文字第47页/共118页19.2.1 添加滚动文字marquee语法说明 将要添加滚动效果的文字放到标记之间，同时也可以设置文字的字体、大小和颜色。第48页/共118页19.2.1 添加滚动文字marquee实例代码第49页/共118页19.2.1 添加滚动文字marquee网页效果第50页/共118页19.2.1 添加滚动文字marquee效果说明图19-12中的滚动文字字体为隶书，字号为5像素，同时滚动方式是由浏览器的右边向左边滚动。第51页/共118页19.2.2 滚动文字背景颜色bgcolor基本语法滚动文字第52页/共118页19.2.2 滚动文字背景颜色bgcolor语法说明 文字背景颜色使用十六进制颜色代码。第53页/共118页19.2.2 滚动文字背景颜色bgcolor实例代码第54页/共118页19.2.2 滚动文字背景颜色bgcolor网页效果第55页/共118页19.2.2 滚动文字背景颜色bgcolor效果说明在图19-13中，滚动文字的背景颜色设置为淡蓝色，其中背景颜色要覆盖整个滚动文字会滚动过的区域，所以看上去是和文字相等宽度的颜色带。第56页/共118页19.2.3 设置滚动方向direction基本语法滚动文字第57页/共118页19.2.3 设置滚动方向direction语法说明第58页/共118页19.2.3 设置滚动方向direction实例代码第59页/共118页19.2.3 设置滚动方向direction网页效果第60页/共118页19.2.3 设置滚动方向direction效果说明图19-14和图19-15都是实例代码19-2-3.html运行的结果，只不过图截取的运行阶段不同。但是，通过两个图的对比，很明显可以看出滚动的文字是在向上滚动。第61页/共118页19.2.4 设置滚动方式behavior基本语法滚动文字第62页/共118页19.2.4 设置滚动方式behavior语法说明第63页/共118页19.2.4 设置滚动方式behavior实例代码第64页/共118页19.2.4 设置滚动方式behavior接上页第65页/共118页19.2.4 设置滚动方式behavior网页效果第66页/共118页19.2.4 设置滚动方式behavior效果说明图19-16、图19-17和图19-18三幅图都是在文字滚动过程中捕捉到的效果，其中图19-16是滚动一开始的效果，三组文字虽然滚动方式不一样，但是都在向左滚动；到了图19-17时，第一组文字滚动一次完成，停止在浏览器左边，而第二组文字则开始转向右边滚动，第三组文字还在继续向左边滚动；图19-18时，第一组文字依然停止不动，第二和第三组文字则一起在向左滚动。第67页/共118页19.2.5 设置滚动速度scrollamount基本语法滚动文字第68页/共118页19.2.5 设置滚动速度scrollamount实例代码第69页/共118页19.2.5 设置滚动速度scrollamount接上页第70页/共118页19.2.5 设置滚动速度scrollamount网页效果第71页/共118页19.2.5 设置滚动速度scrollamount效果说明图19-19中很像哥弟三个在赛跑，大哥速度为每步20像素，二哥的速度为每步10像素，三弟的速度为每步5像素。比赛刚开始几步，老大就喊“我是最快的”，老二有压力了也忙说“我是三个中的第二名”，小三比较乖，只好抱歉说“不好意思”。第72页/共118页19.2.6 设置滚动延迟scrolldelay基本语法滚动文字第73页/共118页19.2.6 设置滚动延迟scrolldelay语法说明 延迟时间是以毫秒为单位的，毫秒就是千分之一秒。这个延迟时间设置得越小，滚动得越快，延迟时间设置得如果过大，还会出现走走歇歇的效果。第74页/共118页19.2.6 设置滚动延迟scrolldelay实例代码第75页/共118页19.2.6 设置滚动延迟scrolldelay接上页第76页/共118页19.2.6 设置滚动延迟scrolldelay网页效果第77页/共118页19.2.6 设置滚动延迟scrolldelay效果说明从图19-20的文字内容就可以理解，延迟时间设置的越小，其滚动文字的速度则相对越快，没有停顿；而延迟时间设置的越大，就是走走歇歇的感觉。而且在实际应用过程中，延迟时间和滚动速度要一起设置，这样效果会更加明显。第78页/共118页19.2.7 设置滚动范围width/height基本语法滚动文字第79页/共118页19.2.7 设置滚动范围width/height实例代码第80页/共118页19.2.7 设置滚动范围width/height语法说明滚动文字第81页/共118页19.2.7 设置滚动范围width/height接上页第82页/共118页19.2.7 设置滚动范围width/height网页效果第83页/共118页19.2.7 设置滚动范围width/height 效果说明图19-21中，很明显可以看出两个背景范围的宽度和高度都是不同的，而滚动文字也只能在这两个范围内滚动。第84页/共118页19.2.8 设置滚动空白空间hspace/vspace基本语法滚动文字第85页/共118页19.2.8 设置滚动空白空间hspace/vspace语法说明 水平范围和垂直范围也是用数字表示，单位均为像素。第86页/共118页19.2.8 设置滚动空白空间hspace/vspace 实例代码第87页/共118页19.2.8 设置滚动空白空间hspace/vspace 接上页第88页/共118页19.2.8 设置滚动空白空间hspace/vspace 网页效果 第89页/共118页19.2.8 设置滚动空白空间hspace/vspace 效果说明图19-22中，为了使滚动文字空白空间更明显，所以将滚动文字都放到了水平线内。水平线和滚动文字背景之间的空白为垂直空白空间，滚动文字背景和浏览器边框之间空白为水平空白空间。第90页/共118页19.2.9 设置滚动循环loop 基本语法滚动文字第91页/共118页19.2.9 设置滚动循环loop 语法说明 循环次数直接用数字表示，数字是多少就表示要循环多少次。第92页/共118页19.2.9 设置滚动循环loop 实例代码第93页/共118页19.2.9 设置滚动循环loop 接上页第94页/共118页19.2.9 设置滚动循环loop 网页效果第95页/共118页19.2.9 设置滚动循环loop 效果说明图19-23是滚动文字在3次循环过程中的图，而图19-24是3次循环结束后的效果，即文字停留在了浏览器的左边。因为在实例19-2-9的代码中定义的滚动方式为交替滚动，所以最后停留在了浏览器内，如果定义滚动方式为其他方式，循环结束后，文字将不会出现在浏览器内，读者也可自己试验。第96页/共118页19.3 插入多媒体文件 基本语法第97页/共118页19.3 插入多媒体文件 语法说明 src属性用来指定插入的多媒体文件地址或多媒体文件名，同时文件一定要加上后缀名。width属性用来设置多媒体文件的宽度，height属性用来设置多媒体文件的高度，都是用数字表示，单位为像素。autostart属性用来设置多媒体文件的自动播放，有两个取值true和false，true表示在打开网页时自动播放多媒体文件；false是默认值，表示打开网页时不自动播放。loop属性用来设置多媒体文件的循环播放，只有两个取值true和false，、true表示多媒体文件将无限循环播放；false表格多媒体文件只播放一次，false为默认值。第98页/共118页19.3 插入多媒体文件19.3.1 插入flash动画19.3.2 插入音频19.3.3 插入视频第99页/共118页19.3.1 插入flash动画实例代码第100页/共118页19.3.1 插入flash动画网页效果第101页/共118页19.3.1 插入flash动画效果说明图19-25是两个小球在自由跳动的flash动画，完整效果可参看光盘文件HTML1919-3-1.swf。第102页/共118页19.3.2 插入音频实例代码第103页/共118页19.3.2 插入音频网页效果 第104页/共118页19.3.2 插入音频效果说明图19-26是运行实例19-3-2.html代码的结果，自动会显示音乐播放器，同时音乐“中国人.mp3”也将自动播放。如果没有设置多媒体音乐为自动播放时，播放器就会显示一个播放按钮，只要单击该播放按钮即可播放多媒体音乐。第105页/共118页19.3.3 插入视频实例代码第106页/共118页19.3.3 插入视频网页效果第107页/共118页19.4 添加背景音乐基本语法第108页/共118页19.4 添加背景音乐语法说明 src属性用来指定背景音乐文件的地址或音乐文件名，而且音乐文件要加上后缀。loop属性用来指定音乐播放的次数，用数字表示。如果设置loop=3，则背景音乐播放3遍后自动停止；如果想设置为无限循环播放的话，可以设置loop=-1即可。第109页/共118页19.4 添加背景音乐实例代码第110页/共118页19.4 添加背景音乐接上页第111页/共118页19.4 添加背景音乐网页效果第112页/共118页19.4 添加背景音乐效果说明 图19-28为插入背景音乐的网页，只要一打开网页，背景音乐“明月几时有.mp3”就会开始播放，但是播放5次后自动停止，因为设置的循环次数为5。第113页/共118页19.5 小实例综合设置图片和多媒体实例代码第114页/共118页19.5 小实例综合设置图片和多媒体接上页第115页/共118页19.5 小实例综合设置图片和多媒体网页效果第116页/共118页19.5 小实例综合设置图片和多媒体效果说明图19-29的效果图中综合应用到了图片插入标记和图片的对齐属性align，以及多媒体中插入背景音乐标记，还有滚动文字插入标记和多个滚动文字的属性，如滚动文字的背景颜色、滚动范围、滚动方向及滚动延迟等。这些标记和属性都是以后要经常用到的，特别是向上滚动的文字会经常用到滚动栏目中。第117页/共118页感谢您的观看！第118页/共118页