预览加载中，请您耐心等待几秒...

网页制作与开发教程第3章网页中的图片.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共50页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

与图片相关的HTML标签实践与练习：对齐图像图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。通过本章的学习，读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。3.1网页中的图片格式3.2与图片相关的HTML标签3.2.1插入图片【例3-1】在网页中插入图片示例 <html> <head> <title>图片的插入</title> </head> <body> <imgsrc=01.jpg> </body> </html>3.2.2图片标签属性的应用图3-2图片大小【例3-2】图片大小控制示例 <html> <head> <title>图片的大小控制</title> </head> <body> <imgsrc=01.jpgheight=100> <imgsrc=02.jpgwidth=100> <imgsrc=03.jpgheight=150width=200> </body> </html> 图3-3图片的边框设置【例3-3】图片边框设置示例 <html> <head> <title>图片的边框</title> </head> <body> <imgsrc=04.jpgwidth=80height=60border=6> <imgsrc=04.jpgwidth=120height=100border=4> <imgsrc=04.jpgwidth=160height=140border=2> </body> </html> 图3-4文字代替图片【例3-4】图片替代文字设置示例 <html> <head> <title>文字代替图片</title> </head> <body> <imgsrc=06.jpgalt=一朵花><br> 文字代替图片 </body> </html>图3-5取消显示图片3.3使用Dreamweaver8插入图片图3-6在段首插入一幅图片图3-7设置图片属性图3-8设定图片为左对齐3.4实践与练习：修改图片大小图3-9预览效果图3-10输入文字图3-11提示框图3-12将图片放置到站点目录下图3-13设置替换文本图3-14插入图片图3-15当前图片的尺寸图3-16在属性面板中修改图片的尺寸图3-17恢复原始尺寸图3-18缩小后的图片效果图3-19直接修改图片的尺寸图3-20启用“重新取样”功能图3-21有关提示信息的对话框图3-22“重新取样”后的图片图3-23居中对齐图片图3-24预览效果3.5实践与练习：对齐图像图3-25预览页面图3-26输入正文图3-27单击“图像”按钮图3-28设置辅助功能图3-29插入图片图3-30重新取样图片图3-31选择“左对齐”命令图3-32左对齐效果图3-33右对齐图片图3-34预览页面小结