Microsoft Expression Web - 图像

网页中大量使用图像，使它们看起来有趣并提供更好的用户体验。在本章中，我们将学习如何向网站添加图像。像往常一样，我们一步步来详细了解一下过程。

步骤 1 - 要开始添加图像，让我们创建一个新的单页网站并将 default.html 文件的名称更改为 index.html。

默认 HTML

步骤 2 - 现在我们需要将图像包含到网站中，以便我们可以在网页中使用这些图像。让我们创建一个新文件夹。在文件夹列表中，右键单击网站名称。

网站名称

步骤 3 - 目前，此文件夹中没有图像。要在此文件夹中添加图像，只需从硬盘驱动器中选择并拖动图像，然后将其放在图像文件夹上即可。

添加图片

您将看到图像已添加到网站图像文件夹中，如以下屏幕截图所示。

图片文件夹

步骤 4 - 现在这些图像已包含在您的网站中，但网页中没有使用这些图像。在网页中添加图像的一种简单方法是将图像从图像文件夹中拖放到要在网页中添加图像的代码视图中。

假设我们要在标题下方添加图像。当您放下图像并释放鼠标按钮时，它将显示以下对话框。

辅助功能属性

您可以在此处指定替代文本和详细说明。然后单击“确定”并保存网页。现在您可以看到<img>标签添加了图像的备用名称和来源。

图片标签

步骤 5 - 按照相同的过程添加第二个图像及其备用名称和来源。

现在index.html文件将显示如下 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html>

步骤 6 -图片属性对话框使您可以访问最常用的图片属性。双击图像时，将显示图片属性框。

图片属性

在 Expression Web 中，图片属性对话框有两个选项卡：“常规”和“外观”。

以下是“常规”选项卡上的可用选项。

  • 图片- 它包含图形图像的文件夹/文件名。

  • 替代文本- 键入在下载图形、找不到图形或网站访问者将指针移到图形上时要为图片显示的文本。如果您的查看者正在使用屏幕阅读器，则该文本也将被屏幕阅读器使用。

  • 长描述- 有时几句话可能不足以描述您的形象。图表和图形是示例。单击“浏览”选择包含图片详细说明的文件。

  • 位置- 如果您想将图像链接到网页或更大的图像，请在此处插入超链接。

  • 目标框架- 如果当前页面是框架页面，则此选项指示链接应显示在哪个框架中，或者您可以选择在新窗口中打开图像或页面。

外观选项卡上提供以下选项。

外观选项卡

  • 环绕样式- 指定图片在页面中的浮动方式，例如“无”、“左”或“右”。

  • 布局- 在此部分中，您可以设置对齐方式、边框厚度、水平和垂直边距。

  • 大小- Expression Web 根据图片的实际尺寸自动设置图像的宽度和高度属性。不要通过更改这些尺寸来调整图像大小，而是使用图形编辑器调整图像大小。

步骤 7 - 现在，让我们在浏览器中预览网页；它将显示以下输出。

网页