如何在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格式支持动画效果,因此非常适合展示简单的动画或动态效果。
❓问:如何优化图片以提高网页加载速度?
- 答:你可以通过压缩图片大小、使用合适的文件类型、减少不必要的图像细节等方法来优化图片以提高网页加载速度。可以使用专业的图片编辑工具或压缩工具来进行优化。
❓问:像素是什么?对于网页中的图片有什么影响?
- 答:像素是图像的最小单位,用于衡量图像的分辨率和显示质量。网页中的图片的像素数量越高,图像的清晰度和细节就越好,但同时也会增加文件大小和加载时间。
🌐 资源链接