Dreamweaver网页设计之：网页中的图片_第1页
Dreamweaver网页设计之：网页中的图片_第2页
Dreamweaver网页设计之：网页中的图片_第3页
Dreamweaver网页设计之：网页中的图片_第4页
Dreamweaver网页设计之：网页中的图片_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

2023/7/15网页中的图片第三章网页设计与制作Dreamweaver网页设计之：网页中的图片全文共52页，当前为第1页。2023/7/152本章要求主要内容：了解网页中图片的主要格式掌握与图片相关的HTML标签掌握用Dreamweaver插入图片，并能调整图片的相关参数主要目的：学会使用HTML语言插入图片掌握在Dreamweaver中修改图片尺寸的方法。能够创建网站相册Dreamweaver网页设计之：网页中的图片全文共52页，当前为第2页。2023/7/153本章内容与图片相关的HTML标签

3.2实践与练习：修改图片大小

3.4使用Dreamweaver

8插入图片

3.3网页中的图片格式3.1实践与练习：对齐图像

3.5小结

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第3页。2023/7/154第3章网页中的图片图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第4页。2023/7/1553.1网页中的图片格式Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但最常用的网页图片为JPEG、GIF两种图像格式。为了保证浏览者下载网页的速度，常使用JPEG和GIF这两种压缩格式的图像。GIF文件JPEG文件PNG文件Dreamweaver网页设计之：网页中的图片全文共52页，当前为第5页。2023/7/1563.1网页中的图片格式目前在网页上使用的图片格式主要是GIF和JPG两种。GIF格式即为图像交换格式。GIF格式只支持256色以内的图像，且采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件；同时它支持透明色，可以使图像浮现在背景之上；其为交换格式，在浏览器下载整张图片之前，用户就可以看到该图像，所以在网页制作中首选的图片格式为GIF。JPG格式为静态图像压缩标准格式。它为摄影图片提供了一种标准的有损耗压缩方案。在保存时能够将人眼无法分辨的资料删除,以节省存储空间,但这些被删除的资料无法在解压时还原。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第6页。2023/7/1573.1网页中的图片格式在网页中使用图像时应该注意的几个问题1．网页的图像文件要小2．控制网页中图像的数量和质量3．在网页中恰到好处地添加动画Dreamweaver网页设计之：网页中的图片全文共52页，当前为第7页。2023/7/1583.2与图片相关的HTML标签1、插入图片

<img>标签的作用就是插入图片，其中属性“src”是该标签的必要属性，该属性指定导入图片的导入位置和名称。注意：导入的图片与HTML文件是出于同一目录下的，如果不处于同一目录下，可以采用设置路径的方式来导入。关于路径的概念在下一章中进行介绍。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第8页。2023/7/1593.2与图片相关的HTML标签【例】在网页中插入图片示例<html><head><title>图片的插入</title></head><body>

<imgsrc=01.jpg></body></html>Dreamweaver网页设计之：网页中的图片全文共52页，当前为第9页。2023/7/15103.2与图片相关的HTML标签图片的插入Dreamweaver网页设计之：网页中的图片全文共52页，当前为第10页。2023/7/15113.2与图片相关的HTML标签

2、图片标签属性的应用“width”“height”“border”“alt”Dreamweaver网页设计之：网页中的图片全文共52页，当前为第11页。2023/7/15123.2与图片相关的HTML标签①“width”和“height”属性控制图片大小依靠“width”和“height”属性：“width”属性控制图片的宽度，“height”属性控制图片的高度。当图片只设置了其中一个属性的时候，另一个属性就自动依照原始图片的两个属性值的比例变化。如图片原始大小为80*60，当只设置了该图片的显示宽度为160，高度将自动以？来显示。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第12页。2023/7/15133.2与图片相关的HTML标签“width”和“height”属性宽度和高度的语法结构：<imgwidth=n>或<imgheight=n><imgwidth=m%>或<imgwidth=m%>其中，n代表一个数值，单位为像素，

m代表0～100的数，即m%的取值范围为0%～m%，图片将以相对于当前窗口大小的百分比来表示。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第13页。2023/7/15143.2与图片相关的HTML标签【例】图片大小控制示例<html><head><title>图片的大小控制</title></head><body><imgsrc=01.jpg><imgsrc=01.jpgheight=100><imgsrc=01.jpgwidth=100><imgsrc=01.jpgheight=150width=200><imgsrc=01.jpgheight=50%><imgsrc=01.jpgwidth=50%></body></html>Dreamweaver网页设计之：网页中的图片全文共52页，当前为第14页。2023/7/15153.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第15页。2023/7/1516②Border属性主要是用来给图片的周围加上指定粗细的边框。语法结构：<imgborder=n>其中，n为一个数值，单位为像素。3.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第16页。2023/7/1517【例】图片边框设置示例<html><head><title>图片的边框</title></head><body><imgsrc=01.jpgwidth=80height=60border=6><imgsrc=01.jpgwidth=120height=100border=4><imgsrc=01.jpgwidth=160height=140border=2></body></html>

3.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第17页。2023/7/15183.2与图片相关的HTML标签图片的边框Dreamweaver网页设计之：网页中的图片全文共52页，当前为第18页。2023/7/1519③alt属性“alt”属性用来设置代替图片的文字，其属性值设置的是在图片不能显示时转而显示的文字。3.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第19页。2023/7/1520【例】图片替代文字设置示例<html><head><title>文字代替图片</title></head><body><imgsrc=01.jpgalt=两只小熊><br>

文字代替图片

</body></html>3.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第20页。2023/7/15213.2与图片相关的HTML标签正常显示图片无法显示，文字代替图片Dreamweaver网页设计之：网页中的图片全文共52页，当前为第21页。2023/7/15223.2与图片相关的HTML标签测试时可能会发现浏览器不会不显示图片，那是因为图片就在本地计算机中，可以先关闭浏览器中显示图片的功能。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第22页。2023/7/1523取消显示图片3.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第23页。2023/7/15243.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第24页。2023/7/15253.2与图片相关的HTML标签Dreamweaver网页设计之：网页中的图片全文共52页，当前为第25页。2023/7/15263.3使用Dreamweaver

8插入图片将文本光标移到要插入图片的地方,选择“插入”菜单中的“图像”命令，在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行“相对于”下拉框，选择“文档”为与文档的相对路径，另一个选项是与根目录的相对路径，通常选择“文档”。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第26页。2023/7/1527设置图片属性3.3使用Dreamweaver

8插入图片插入图像后，在“属性”面板中显示该图像的属性。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第27页。2023/7/1528给图片添加文字说明当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。为了让浏览者在不能正常图片显示时也能了解图片的信息，常为网页的图像设置“替换”属性。

“替换文本”的作用是当发布站点之后，因为网速或者其他因素造成图片不能很快显示时，替换的文本内容就可以优先显示出来，以减少浏览者因长时间等待图片而产生的疲倦感。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第28页。2023/7/1529插入图像占位符在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver提供的“图像占位符”功能，可满足上述需求。 在网页中插入图像占位符的具体操作步骤如下。 （1）在文档窗口中，将插入点放置在要插入占位符图形的位置。 （2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框。 选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。 选择“插入记录>图像对象>图像占位符”命令。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第29页。2023/7/1530插入鼠标经过图像鼠标经过图像是指在浏览器中查看网页时，当鼠标指针经过该图像时显示另外一幅图像的动态图像效果。插入鼠标经过图像需要准备两幅图像。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第30页。2023/7/1531插入导航条选择【插入】|【图像对象】|【导航条】命令，或者单击【插入】工具栏【常规】类别中的【图像】按钮，从弹出的下拉菜单中选择【导航条】命令，弹出【插入导航条】命令，根据需要设置其中的选项，即可创建导航条。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第31页。2023/7/1532【插入导航条】对话框Dreamweaver网页设计之：网页中的图片全文共52页，当前为第32页。2023/7/1533插入FLASH选择【插入】|【媒体对象】|【FLASH】命令。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第33页。2023/7/15343.4实践与练习：修改图片大小本练习的目的是掌握在Dreamweaver8中修改图片尺寸的方法和“重新取样”按钮的功能。Dreamweaver网页设计之：网页中的图片全文共52页，当前为第34页。2023/7/1535预览效果Dreamweaver网页设计之：网页中的图片全文共52页，当前为第35页。2023/7/1536输入文字Dreamweaver网页设计之：网页中的图片全文共52页，当前为第36页。2023/7/1537提示框

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第37页。2023/7/1538将图片放置到站点目录下

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第38页。2023/7/1539设置替换文本Dreamweaver网页设计之：网页中的图片全文共52页，当前为第39页。2023/7/1540插入图片

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第40页。2023/7/1541当前图片的尺寸

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第41页。2023/7/1542在属性面板中修改图片的尺寸

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第42页。2023/7/1543恢复原始尺寸

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第43页。2023/7/1544缩小后的图片效果

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第44页。2023/7/1545直接修改图片的尺寸

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第45页。2023/7/1546启用“重新取样”功能

Dreamweaver网页设计之：网页中的图片全文共52页，当前为第46页。2023/7/1547有关提示信息的对

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论