如何在Dreamweaver CC 2018中添加图片
目录 📚
- 如何将图片添加到网站目录中
- 如何将图片添加到网页中
- 添加Logo的首要步骤
- 创建Logo容器
- 在网站目录中保存图像文件
- 将图像文件放置到网页中
- 使用CSS调整图像大小
- CSS层级结构和图像属性
- 如何定义Logo的高度
- 文件类型的差异：PNG和JPEG的比较
🌐 第一步：如何将图片添加到网站目录中
在这个视频里，我们将学习如何将一张图片添加到你的网站目录中，并将其添加到网页中。我们的重点将是如何添加一个Logo图片，所以我们将从页眉(header)开始操作。首先，让我们删除一些初始的虚拟文本。在这里，我们按下回车键，为之后提供一些空间和缩进。然后，我们将为Logo创建一个容器，并在这个容器内工作。让我们先写个注释，表明这是Logo的容器。我们可以使用Ctrl+反斜杠键来注释，这样我们可以在代码中做一些标记，方便以后查找。接下来，我们会创建一个div容器，这是一个常见的元素，用于将各种内容包含在一个独立的区域中。我们给这个div一个类(class)，我们使用缩进快捷键Tab来添加类名，我们将这个类名设为"logo"。最后一步，很重要的一个小技巧是，在代码最后加上一个"end of a logo container"，这样以后如果需要重复使用这段代码，我们就知道它的开头和结尾了。
🖼️ 第二步：如何将图片添加到网页中
接下来，我们将保存一张图片到网站目录中。如果我们不将这些元素保存到本地目录中，有时可能会出现一些链接问题。而且，如果稍后你想将网站上线，这些图片可能无法正确显示。我已经预先搜索了一些虚拟的Logo图片，你可以选择任意一张。我将使用这张。我将这张图片保存到网站目录的images文件夹中，你可以使用任意名字，我将它命名为"logo"。然后，我们回到Dreamweaver编辑器，确保图片保存成功。我们右键点击文件夹，然后点击"刷新"，现在你可以看到在images文件夹中出现了"logo.png"的图片。接下来，我们将把这个图片放置到我们的网页中。我们返回到刚才创建的Logo容器，在缩进处插入一个img标签。img标签是图片标签的简写。现在有两个字段需要填写，一个是图片的来源(src)，类似于链接中的href属性，它告诉网页在哪里找到这张图片。另一个是alt属性，用于图片的替代文本，便于用户辅助访问和阅读。对于图片来源，我们将链接到刚才的logo图片。在替代文本中，我将输入"公司Logo"，如果这是一个真实的公司，你可能需要提供更详细的描述，以便给视觉障碍的用户更好的理解。当然，现在图片的大小肯定看起来很不对，接下来我们会利用CSS来调整它的大小。
💡 另外，你还可以按照下面的步骤添加更多的图片到网页中。
第三步：如何定义Logo的高度
在CSS样式表的底部，我们可以找到一个class为"logo"的div容器，在这个容器的内部放置了图片。我们可以使用CSS层级结构来调整图片的大小。首先，我们定义"logo"这个class，但这样定义的范围太大了，因为我们只想修改Logo容器内部的图片，而不想影响到所有图片。所以我们需要添加额外的选择器来更准确地定义需要修改的图片。我们可以在class后面跟上一个空格，然后加上"img"，这样就表示只选择Logo容器下的图片，而不选择其他的图片属性。我们来设置一下图片的高度，因为页眉的高度是已知的，所以我们可以将图片的高度设置为70像素，这样图片的高度就和页眉的高度一样了。保存修改，刷新页面，你会看到Logo图片的大小已经完美地适应了页眉的大小。
➕ 使用CSS可以更好地控制图片的大小和显示效果，让网页更加美观和专业。
文件类型的差异：PNG和JPEG的比较
接下来的视频中，我们将讨论不同文件类型的差异，特别是PNG和JPEG格式的图片。你可能已经注意到，刚才的Logo图片有一个白色的背景。我们将看到透明背景的PNG文件和有损压缩的JPEG文件之间的区别，并讨论在何时使用它们。
✅ PNG格式：
- 使用透明背景，可以无缝地与网页内容融合
- 保留了更多的图像细节和颜色信息
- 适合使用图标、Logo等需要透明背景的图片
❗ 注意：
- PNG文件通常会比JPEG文件占用更多磁盘空间
- 对于大型图像或指定文件大小的限制，最好选择JPEG格式
✅ JPEG格式：
- 使用有损压缩，可以在保持图像质量的同时减小文件大小
- 适合包含大量颜色和细节的照片或复杂图像
- 在需要快速加载网页时，JPEG格式是个不错的选择
❗ 注意：
- 如果需要透明背景，JPEG格式不适用
- 对于简单的图形，使用JPEG格式可能会导致图像质量的损失
选择合适的文件类型对于网页的加载速度和用户体验非常重要。根据不同的需求，我们可以选择适当的文件类型，以获得最佳的图像效果和文件大小。
FAQ常见问题解答
❓问：如何为图片选择合适的文件类型？
- 答：请根据所需的特性和使用场景选择合适的文件类型。如果需要透明背景或保留更多细节和颜色信息，请选择PNG格式。如果需要减小文件大小并快速加载网页，请选择JPEG格式。
❓问：为什么有时上传到网站的图片无法正确显示？
- 答：这可能是由于图片的链接问题导致的。为了确保正确显示图片，最好将图片保存到网站目录中，并通过本地链接来引用图片。
❓问：在哪些情况下可以使用CSS来调整图片大小？
- 答：你可以使用CSS来调整图片的大小和显示效果，例如设置图片的宽度、高度和位置等属性。可以通过修改图片的CSS样式来适应不同的页面布局和需求。
❓问：PNG和JPEG文件有什么区别？
- 答：PNG文件是一种无损压缩的图像格式，适用于需要透明背景和保留更多细节的图像。而JPEG文件是一种有损压缩的图像格式，适用于包含大量颜色和细节的照片或复杂图像。
❓问：哪种文件类型更适合网页中的图像？
- 答：这取决于具体的需求和使用场景。如果需要透明背景或更大的颜色深度，请选择PNG格式。如果需要减小文件大小并快速加载网页，请选择JPEG格式。
❓问：是否可以在同一个网页中使用不同文件类型的图片？
- 答：是的，你可以在同一个网页中使用不同的文件类型的图片。根据每个图片的具体需求，选择合适的文件类型，并根据需要进行相应的优化和调整。
❓问：是否可以在网页上使用动态的GIF图片？
- 答：是的，你可以在网页上使用动态的GIF图片。GIF格式支持动画效果，因此非常适合展示简单的动画或动态效果。
❓问：如何优化图片以提高网页加载速度？
- 答：你可以通过压缩图片大小、使用合适的文件类型、减少不必要的图像细节等方法来优化图片以提高网页加载速度。可以使用专业的图片编辑工具或压缩工具来进行优化。
❓问：像素是什么？对于网页中的图片有什么影响？
- 答：像素是图像的最小单位，用于衡量图像的分辨率和显示质量。网页中的图片的像素数量越高，图像的清晰度和细节就越好，但同时也会增加文件大小和加载时间。
🌐 资源链接
WHY YOU SHOULD CHOOSE Proseoai
