如何在Dreamweaver中添加图像到您的网站 - 虚拟人物

视频: 零基础html5+div+css+js网页开发教程第031期鼠标悬停图片效果 2024

将图像添加到您的网页看起来似乎有点神奇，因为Dreamweaver的过程非常简单。 Web图形的挑战不是将它们添加到您的页面，而是创建在浏览器的浏览器中快速加载的漂亮的图像。

您需要其他程序（如Photoshop，Photoshop Elements或Fireworks）来创建，转换，编辑和优化图像。优化图像会缩小文件大小，因此图像下载速度更快。 Dreamweaver提供了一些基本的图像编辑工具，但主要是使用Dreamweaver在图像上插入和定位图像。

<！ Dreamweaver使您可以轻松地将图像放置在网页上，并提供了多种方法：

单击“通用插入”面板中的图像图标，然后使用“插入图像”对话框选择图像。

在“文件”面板中，单击图像名称并将其拖到您想要图像显示的页面上。
使用插入菜单。
如果您没有经过网页优化的JPEG，GIF或PNG图像，您可以下载已经优化过的免费图像。

<！ - 2 - >

要使用“插入”菜单在网页上放置图像，请按照以下说明操作：

打开现有页面或创建并保存新页面。

将光标放在要在页面上插入图像的位置。
您可以将图像插入到新空白文件的左上角，并且可以将图像插入到网页中的标签和元素中，但是不能将图像放在页面中间而不使用其他HTML标签或CSS格式来定位它。

选择插入→图像→图像。
出现选择图像源对话框。

浏览以找到您要插入的图像。
根据您的计算机系统，可以在以不同的方式插入图像时预览图像。以下是三个常用选项：

在装有Windows XP的PC上，从“查找范围”字段右侧的“查看”菜单下拉列表中选择缩略图，以显示任何打开文件夹中所有图像的缩略图版本。您还可以在对话框的最右侧查看任何选定图像的单个预览。
- 在装有Windows Vista或Windows 7 的PC上，从查看菜单中的查看菜单下拉列表中选择图标选项（小图标，中图标，大图标或特大图标）字段显示所有打开的文件夹中所有图像的缩略图版本。您还可以在对话框的最右侧查看任何选定图像的单个预览。
- 在Mac上， 选择对话框左上方的查看列选项。您可以在对话框的最右侧查看任何选定图像的单个预览。
- 信用：Casey Stoll的照片 要插入图像，请双击图像名称或单击一下，然后单击确定。
  
  如果将图像插入到页面中，并且该图像未保存在本地站点文件夹中，Dreamweaver会提示您提供一个警告对话框，并提供将该图像复制到本地站点文件夹。许多设计师在本地站点文件夹内创建一个名为
图像

的子文件夹，在该文件夹中将所有图像存储在其站点中，但是如果您愿意，可以在多个子文件夹中组织图像。选择网页上的图像以查看和编辑图像属性。选择图像时，图像选项将自动显示在页面底部的属性检查器中。
图片来源：Casey Stoll照片

将图像文件插入页面时，实际上并没有将图像的副本添加到页面;你创建一个对图像的引用。底层代码看起来很像从一个页面到另一个页面的链接的代码。

图像引用和链接都包含文件的名称和从该页面到该文件的路径。本质上，您正在创建一个Web浏览器的指令，当它显示页面时找到图像。