Microsoft Expression Web - 快速指南

Microsoft Expression Web - 概述

Microsoft Expression Web 是一款功能齐全的专业工具，用于设计、开发和发布符合 Web 标准的功能丰富的网站。您可以使用 Expression Web 创建网页和网站，以便您在计算机和托管帐户之间传输文件。

Expression Web 可以使用 HTML5、CSS 3、ASP.NET、PHP、JavaScript、XML+XSLT 和 XHTML 来设计和开发网页。

Expression Web 4 需要 .NET Framework 4.0 和 Silverlight 4.0 才能安装和运行。

Microsoft Expression Web - 历史

Microsoft Expression Web - 历史 Microsoft 于 2006 年 5 月 14 日发布了 Expression Web 的第一个社区技术预览版 (CTP)。

Microsoft Expression Web 4于 2010 年 6 月 7 日发布。

它添加了 HTML 插件选项以及对基于 Web 的功能的访问，用于在无法安装在用户系统上的浏览器（例如 Mac OS X 或 Linux 浏览器）上测试页面。
它还提供了 SEO 检查器，您可以使用它根据最佳实践分析已创建的网站，以获得尽可能高的搜索引擎排名。

表达式 Web 服务包

Expression Web 服务包 Expression Web 4 Service Pack 1 于 2011 年 3 月发布，并添加了对 HTML5 和 CSS IntelliSense 的支持。

Expression Web 4 Service Pack 2 于 2011 年 7 月发布。它修复了许多问题并引入了新功能，例如 -

jQuery IntelliSense 支持
用于管理片段的面板
交互式快照面板
代码视图中的注释/取消注释功能，以及
工作区和工具栏自定义。

2012年12月，微软宣布Expression Studio将不再是一个独立的产品。Expression Blend正在集成到 Visual Studio 中，而Expression Web和Expression Design现在将成为免费产品。

系统要求

要使用 Microsoft Expression Web 创建网站，您的计算机应满足以下要求 -

您应该至少拥有带有 Service Pack 3 的 Windows XP 或最新操作系统。
您应该拥有一台配备 1 GHz 或更快处理器的 PC。
您的 PC 应具有 1 GB 或更多 RAM。
您的 PC 应具有 2 GB 或更多可用硬盘空间。
您应该拥有 .NET Framework 4.0 和 Silverlight 4.0。
您的 PC 应支持 Microsoft DirectX® 9.0 显卡。
您应该有 DVD 兼容驱动器。
您应该拥有 1024 × 768 或更高分辨率的 24 位颜色显示器。
某些产品功能需要 Firefox 3.0 或更高版本、Internet Explorer 8。因此您应该拥有相同的版本。

实际要求和产品功能可能会因您的系统配置和操作系统而异。

环境设置

Microsoft 提供免费版本的 Microsoft Expression Web，可以从https://www.microsoft.com/en-pk/download/details.aspx?id=36179下载

安装

步骤 1 - 在安装 Expression Web 之前，您需要安装 .NET Framework 4.0。

步骤 2 - 下载完成后，运行安装程序。将显示以下对话框。

步骤 3 - 单击“接受”按钮。

步骤 4 - 选择是单选按钮，然后单击下一步。

步骤 5 - 您也可以选择其他位置进行安装。选择位置并单击“安装”按钮。

安装过程开始。

安装完成后，您将看到以下对话框。

步骤 6 - 单击“完成”继续。

Microsoft Expression Web - 新网站

在上一章中，我们已经安装了 Microsoft Expression Web，现在我们准备开始使用它。在本章中，我们将学习如何从头开始创建一个新网站。

创建网站

要创建新网站，请打开 Microsoft Expression Web。

接下来，您需要按照下面给出的步骤进行操作。

步骤 1 - 选择站点 → 新站点...菜单选项。

步骤 2 - 它将打开以下对话框，您可以从中创建或导入不同类型的网站。

步骤 3 - 为了简单起见，我们选择General → One Page Site。

指定位置，或者您可以浏览到要创建新网站的位置。
在名称字段中输入您的网站名称，然后单击“确定”。

步骤 4 - 将创建一个名为default.htm的新网页。让我们右键单击该文件并单击“重命名”选项，将其重命名为index.html 。

步骤 5 - Expression Web 中使用的默认文档类型是 -

<!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">

只需切换到代码视图即可看到它。

您可以从Tools → Page Editor Options → Authoring更改文档类型。

步骤 6 - 现在，让我们在body标签内添加<h1>标签和一些文本，如以下代码所示。

<!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> 
         This my first Web page 
      </h1> 
   </body> 
</html>

步骤 7 - 要在浏览器中查看我们的网页，请转到“文件”菜单并选择“在浏览器中预览”→“任何浏览器”，例如 Internet Explorer。

它将在 Internet Explorer 中打开我们的网站。

Microsoft Expression Web - 空白网页

由于我们已经创建了网站，现在我们需要创建主页。在上一章中，我们创建了一个单页网站，当时我们的主页是由 Expression Web 自动创建的。因此，如果您创建了一个空白网站，那么您将需要为您的网站创建一个主页。

Microsoft Expression Web 可以创建以下类型的页面 -

超文本标记语言
ASPX
ASP
PHP
CSS
母版页
动态网页模板
JavaScript
XML
文本文件

在本章中，我们将创建一个 HTML 页面及其相应的样式表。

创建空白页

要创建空白页面，您只需转到“文件”菜单并选择“新建”→“页面...”菜单选项。

在新对话框中，您可以创建不同类型的空白页面，例如 HTML 页面、ASPX 页面、CSS 页面等，然后单击“确定”。

正如您在此处看到的，Microsoft Expression Web 已添加默认代码。

<!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" /> 
      <title>Untitled 1</title> 
   </head>  

   <body> 
      <h1> 
         This is a blank web page 
      </h1> 
   </body> 
</html>

如您所见，新创建的页面的文件名为Untitled_1.html或Untitled_1.htm。您需要按 Ctrl + S 保存页面并指定名称。

由于我们的网站已经包含一个index.html页面，因此我们不需要另一个页面。但是，如果您创建了一个空网站，请将此页面命名为index.html。

要在浏览器中查看您的网页，请转到“文件”菜单，然后选择“在浏览器中预览”→“任何浏览器”，例如 Internet Explorer。

创建 CSS 页面

让我们逐步引导您完成创建 CSS 页面的过程。

步骤 1 - 要创建 CSS 页面，请转到“文件”菜单并选择“新建”→“页面...”菜单选项。

步骤 2 - 选择常规 → CSS并单击确定。

步骤 3 - 保存页面并输入样式表的名称。

步骤 4 - 单击“保存”按钮。

步骤 5 - 现在，让我们转到 index.html 页面。

步骤 6 - 在管理样式面板中，单击附加样式表。

步骤 7 - 浏览到样式表，然后从“附加到”中选择当前页面，从“附加为”中选择链接，然后单击确定。

步骤 8 - 现在，您将看到 index.html 页面中自动添加了一个新行。

<link href = "sample.css" rel = "stylesheet" type = "text/css" />

步骤 9 - body元素定义文档的主体。要设置<body>标签的样式，我们需要创建一个新样式。首先，在设计视图中选择正文标签，然后单击“应用样式”面板或“管理样式”面板中的“新建样式...”，这将打开“新建样式”对话框。

在这里，您可以为您的风格定义不同的选项。第一步是从选择器下拉列表中选择正文，然后从“定义于”下拉列表中选择现有样式表。

步骤 10 - 从 URL 中选择example.css文件。左侧有一个类别列表，如字体、背景等，当前字体突出显示。根据您的要求设置字体相关信息，如上面的屏幕截图所示，然后单击“确定”。

步骤 11 - 现在您可以在设计视图中看到背景颜色和字体已更改为我们选择的内容。现在，如果您打开sample.css 文件，您将看到所有信息都自动存储在CSS 文件中。

让我们在浏览器中预览我们的网页。您将观察到该样式是从 CSS 文件应用的。

Microsoft Expression Web - 网页布局

在本章中，我们将介绍网页的基本布局。在创建网页布局之前，我们需要考虑我们的内容，然后设计我们想要如何呈现该内容，因为它将在我们的网站上可见。

如何呈现我们的内容，以便我们的观众找到我们的网站，然后留下来查看，这取决于我们。布局可能包括顶部的公司徽标或横幅、导航菜单、可能包含多个列的内容区域以及页面底部的页脚。

以前，开发人员使用表格来实现这种外观。表格创建了一组用于创建行和列的框。现在，网页设计师使用<div>来形成框，并使用 CSS 将这些框放置在页面上。

<div> 标签

以下是 <div> 标签的一些功能。

<div> 标签定义 HTML 文档中的分区或部分，并且可以轻松管理、设置样式和操作这些分区或部分。
它用于对块元素进行分组，以使用 CSS 格式化它们。
浏览器通常在 div 元素之前和之后放置一个换行符。
<div> 标签是块级元素。
<div> 标签可以包含几乎任何其他元素。
<div> 标签不能位于 <p> 标签内。

例子

让我们看一个简单的示例，在该示例中我们将使用 <div> </div> 标签来创建各种框和样式规则。

步骤 1 - 打开 Expression Web，然后打开我们在上一章中创建的index.html页面。

步骤 2 - 如上面的屏幕截图所示，默认情况下代码视图突出显示。您可以在代码视图或设计视图中工作，但您也可以看到拆分视图，它将同时打开代码视图和设计视图。因此，让我们选择“拆分视图”选项。

步骤 3 - body元素定义文档的主体。要设置 <body> 标签的样式，我们需要创建一个新样式。首先在设计视图中选择正文标签，然后单击“应用样式”面板中的“新建样式... ”，这将打开“新建样式”对话框。在这里，您可以为您的风格定义不同的选项。

步骤 4 - 第一步是从选择器下拉列表中选择正文，然后从“定义于”下拉列表中选择现有样式表。从 URL 中，选择我们在上一章中创建的 CSS 文件。

左侧有字体、背景等类别列表，并且当前字体突出显示。根据您的要求设置字体相关信息，如上面的屏幕截图所示。

步骤 5 - 选择您想要的背景颜色。您还可以使用浏览器按钮选择背景图像。完成背景后，如果需要，可以定义边框。

步骤 6 - 让我们选择边框的双线选项，并从下拉列表中选择宽度和颜色。完成样式后，单击“确定”。

步骤 7 - 现在您可以在设计视图中看到背景颜色已更改为我们选择的颜色。如果打开sample.css 文件，您将看到所有信息都自动存储在CSS 文件中。

步骤 8 -再次转到index.html页面，然后将<div>从“工具箱”面板拖放到打开的页面上。

步骤 9 - 在代码视图上方，您将看到<body>和<div>标签，单击<div>标签，然后在“应用样式”面板中单击“新样式...”。这将打开“新建样式”对话框。

在选择器字段中输入“#container”。哈希标记 # 是一个 ID 选择器。从“定义于”下拉列表中，选择现有样式表并选中“将新样式应用于文档选择”选项。转到背景类别。

步骤 10 - 选择背景颜色，让我们选择白色，然后转到框类别。

步骤 11 - 定义填充和边距，然后转到位置类别

步骤 12 - 将宽度设置为 90%。但是，不要指定高度，因为我们希望容器在输入内容时展开。单击“确定”按钮。

同样，让我们为页眉、顶部导航、左侧导航、主要内容和页脚添加样式。

样本.css

以下是添加所有上述样式后，sample.css style-sheet中的代码。

body { 
   font-family: Calibri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: solid medium #006600;  
   border-bottom: solid medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px solid #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-align: center;  
 }

索引.html

以下是添加所有 <div> 标签后 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" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"></div> 
         <div id = "left-nav"></div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body> 
</html>

输出

设计视图中的页面布局将如以下屏幕截图所示。

Microsoft Expression Web - HTML 布局

在本章中，我们将学习另一种设计页面布局的方法。在上一章中，我们使用样式表将样式应用于页眉、页脚等。但是您也可以在 HTML 页面本身中指定样式，而无需使用额外的样式表。

这不是设计布局的推荐方法，但是为了理解目的，我们将在这里介绍这种技术。尝试按照下面给出的步骤进行操作。

步骤 1 - 让我们添加一个 HTML 页面并将其命名为layoutdemo.html

步骤 2 - 现在从工具箱添加<div> 标签。

步骤 3 - 在“应用样式”面板中，单击“新样式...”

步骤 4 - 当您从“定义于”下拉列表中选择当前页面选项时，样式将保存在同一 HTML 页面中。设置页面的字体，然后转到背景类别。

步骤 5 - 设置背景颜色。您还可以设置“边框”、“框”和“位置”类别，然后单击“确定”。

布局演示.html

您可以看到样式已添加到同一个 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" /> 
      <title>Untitled 1</title> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitalize; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <div id = "container"></div> 
   </body> 
</html>

同样，您可以添加其他样式，如页眉、页脚、主要内容等，如上所示。

水平导航

在本章中，我们将学习如何向网站添加水平导航或菜单项。

步骤 1 - 要创建菜单项或水平导航，让我们在包含菜单项列表的 index.html 文件中的<div id = “top-nav”>中添加以下代码。

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步骤 2 - 这是顶部菜单的简单项目符号列表。要创建超链接，请转到设计视图或代码视图。

步骤 3 - 选择要用作超链接的项目，然后按 Ctrl + K。

步骤 4 - 单击屏幕提示...按钮。

步骤 5 - 输入您想要作为屏幕提示的文本，然后单击“确定”。

步骤 6 - 在要显示的文本字段中，输入Home并选择 index.html 文件，然后单击确定。

步骤 7 - 同样，添加其他菜单项的超链接，如以下代码所示。

<!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" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
         <div id = "left-nav"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

步骤 8 - 要设置顶部导航的样式，请转到“管理样式”面板。

步骤 9 - 右键单击“#top-nav”并选择修改样式。选择“边框”类别并将宽度更改为细。

步骤 10 - 选择框类别并取消选中填充“全部相同”，然后在顶部和底部字段中输入 10。

步骤 11 - 转到职位类别。

步骤 12 - 从高度字段中删除 50 ，然后单击“确定”。从“应用样式”面板中，单击“新建样式...”

步骤 13 -在选择器字段中输入#top-nav ul ，然后从“定义于”下拉列表中选择现有样式表。在“块”类别中，从测试对齐字段中选择中心，然后转到“列表”类别。

步骤 14 -从列表样式类型字段中选择“无” ，然后单击“确定”。

步骤 15 - 再次从“应用样式”面板中，单击“新建样式...”，在“选择器”字段中输入#top-nav ul li 。然后从“定义于”下拉列表中选择现有样式表，然后转到布局类别。

步骤 16 -从显示字段中选择内联，然后单击确定。

步骤 17 - 转到应用样式面板，单击新建样式...在选择器字段中输入#top-nav ul li a ，然后从“定义于”下拉列表中选择现有样式表，然后选择白色作为字体颜色。

步骤 18 - 转到背景类别。

步骤 19 - 选择绿色作为背景颜色并转到“盒子”类别。

步骤 20 - 设置填充值并单击“确定”。

步骤 21 - 现在让我们再次转到“应用样式”面板并单击“新样式”。在选择器字段中输入#topnav ul li a:hover ，然后从“定义于”下拉列表中选择现有样式表，然后选择黑色作为字体颜色。

步骤 22 - 现在转到背景类别。

步骤 23 - 当鼠标悬停在菜单项上时选择菜单选项的背景颜色并转到“边框”类别。

步骤 24 - 选择边框样式、宽度和颜色，然后单击“确定”。要检查其外观，请转到“文件”菜单并选择“在浏览器中预览”。

当您将鼠标悬停在任何菜单项上时，它将更改背景和字体颜色。

垂直导航

在本章中，我们将学习如何向网站添加垂直导航或菜单项。让我们一步一步来。

步骤 1 - 要创建菜单项或垂直导航，我们在包含菜单项列表的 index.html 文件中的<div id = “left-nav”>中添加以下代码。

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步骤 2 - 这是顶部菜单的简单项目符号列表。要创建超链接，请转到设计视图或代码视图。

步骤 3 - 选择要用作超链接的项目，然后按 Ctrl + K。

步骤 4 - 单击屏幕提示...按钮。输入您想要作为屏幕提示的文本，然后单击“确定”。

步骤 5 - 在要显示的文本字段中，输入Home并选择 index.html 文件，然后单击确定。

在此阶段，我们的 index.html 页面如下所示 -

步骤 6 - 为其他菜单项添加更多超链接，如以下代码所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

步骤 7 - 要设置顶部导航的样式，请转到“管理样式”面板。右键单击#left-nav并选择修改样式...

步骤 8 - 在字体大小字段中输入值 0.9，然后从字体大小旁边的下拉列表中选择em ，然后转到 Box 类别。

步骤 9 - 检查填充“全部相同”，然后在顶部字段中输入 5，然后单击“确定”。从“应用样式”面板中，单击“新建样式...”

步骤 10 -在选择器字段中输入#left-nav ul 。从“定义于”下拉列表中选择现有样式表，然后在“列表”类别中，从“列表样式类型”字段中选择“无”，然后单击“确定”。

步骤 11 - 再次从“应用样式”面板中单击“新建样式”。取消选中填充“全部相同”。在底部字段中输入 0.2，然后单击“确定”。

步骤 12 -在选择器字段中输入#left-nav ul li ，然后从“定义于”下拉列表中选择现有样式表，然后转到框类别。

步骤 13 - 转到“应用样式”面板并单击“新建样式”。

步骤 14 -在选择器字段中输入#left-nav ul li a ，然后从“定义于”下拉列表中选择现有样式表，然后选择白色作为字体颜色。

步骤 15 - 转到背景类别。选择颜色作为背景颜色

步骤 16 - 转到Box类别并设置填充值。

步骤 17 - 转到布局类别。从显示下拉列表中选择块，然后单击“确定”。

步骤 18 - 现在让我们再次转到“应用样式”面板并单击“新建样式”。在选择器字段中输入#left-nav ul li a:hover ，然后从“定义于”下拉列表中选择现有样式表。选择黑色作为字体颜色。

步骤 19 - 现在转到背景类别。当鼠标悬停在菜单项上时，选择菜单选项的背景颜色，然后单击“确定”。

步骤 20 - 要检查它的外观，请转到“文件”菜单并在浏览器中选择“预览”。

当您将鼠标悬停在任何菜单项上时，它将更改其背景和字体颜色。

Microsoft Expression Web - 验证页面

在本章中，我们将学习如何确保 HTML 和 CSS 代码都有效。Microsoft Expression Web 提供了多种方法来检查网页是否有代码错误以及与特定 HTML 和 CSS 架构不兼容的代码。

状态栏和代码视图会提醒您单个页面中的代码错误和不兼容性，而兼容性任务窗格会列出一个或多个页面或整个网站中的所有代码错误和不兼容性。
Expression Web 通过使用基于页面中 DocType 声明的文档架构来识别不兼容的代码。
如果页面不包含 DocType 声明或 DocType 无法识别，Expression Web 将使用辅助架构。

当您创建网站并在其页面上工作时，您应该养成验证页面的习惯。Microsoft Expression Web 具有多种工具，在验证网页时非常有用。Expression web 中有两个非常有用的选项，因此让我们转到“工具”菜单并选择“页面编辑器选项”。

常规选项卡提供两个选项 -

突出显示无效的 HTML - 选中此选项后，它将以特定的配色方案显示无效的 HTML，并在黄色背景上以红色文本默认显示。
突出显示不兼容的 HTML - 选中此选项后，它将在与 HTML 标准不兼容的代码下方显示波浪下划线。

状态栏

当当前打开的网页包含代码错误时，您会看到“检测到代码错误”图标（在以下屏幕截图中突出显示）。

假设您忘记了 </div> 标签中的符号“>” -

<div id = "footer"></div>

在这种情况下，程序窗口底部的状态栏会显示“检测到代码错误”图标。

当您从下拉菜单中选择“转到错误”时，它将带您到存在错误的行，您可以轻松修复语法。

当页面包含与指定 DocType 不兼容的代码时，状态栏会显示“检测到 HTML 不兼容”图标。

假设您使用“hre”而不是“href”作为超链接，这是一个错误。

<li><a href = "index.html" title = "Site Home Page">Home</a></li>

状态栏显示“检测到 HTML 不兼容性”图标，如以下屏幕截图所示。

当您从下拉菜单中选择“转到错误”时，它将带您到存在错误的行，您可以轻松修复语法。

兼容性报告

兼容性报告检查页面和 CSS 文件是否存在代码错误以及与您指定的 DocType 和 CSS 架构不兼容的代码。您可以生成仅检查特定文件或整个网站的报告。

步骤 1 - 要生成兼容性报告，请转到工具菜单并单击兼容性报告...选项。

步骤 2 - 兼容性检查器对话框提供了不同的选项来仅检查站点中的特定文件，打开这些文件或在文件夹列表任务窗格或网站视图中选择它们。根据要求选择选项，然后单击“检查”按钮。

步骤 3 - 兼容性任务窗格打开，报告生成的状态显示在任务窗格的底部。双击任何行，它将带您到存在错误的位置。

动态网页模板

动态 Web 模板是基于 HTML 的网页主副本，您可以创建它来包含设置、格式和页面元素，例如文本、图形、页面布局、样式和可修改的网页区域。

当您将动态 Web 模板附加到网站中的页面时，该模板将定义这些页面的布局。您可以在网站中使用任意数量的动态 Web 模板，并且可以将动态 Web 模板附加到任意数量的页面。

通过使用动态 Web 模板，您可以创建共享相同布局的 HTML 页面。除了提供共享布局之外，您还可以使模板中的某些区域可供编辑，同时防止更改该模板中的其他区域。

这意味着您可以允许其他人添加和编辑内容，但仍保留页面布局和模板本身。

对动态 Web 模板的需求

网站设计最重要的概念是保持网站一致的外观和感觉，使用动态网页模板您可以实现这一目标。动态网页模板提供 -

基本页面，例如站点地图、联系方式、关于和搜索页面。访问者应该能够从网站上的任何页面访问您的主页。
整个网站的导航一致。
整个网站的外观保持一致。

创建动态网页模板

要创建动态 Web 模板 (DWT)，请从空 HTML 页面开始并将其另存为*.dwt 文件。让我们一步步来了解更多。

步骤 1 - 打开 index.html 文件并选择“文件”→“另存为...”菜单选项，这将打开“另存为”对话框。

从保存类型下拉列表中选择动态 Web 模板 (*.dwt)，并将文件名从索引更改为 master.dwt，然后单击保存按钮。

步骤 2 - 现在，您将看到文件夹列表中创建了一个新文件 master.dwt。让我们创建一个新的 HTML 文件并将其命名为index_2.html。让我们打开 master.dwt 文件，并在设计视图或代码视图中右键单击主要内容的 <div> 标记内部。

步骤 3 - 从菜单中选择“管理可编辑区域...”，这将打开“可编辑区域”对话框。

步骤 4 - 在区域名称中，输入可编辑区域的名称，然后单击添加。如果需要，请重复添加其他可编辑区域。

步骤 5 - 添加所有可编辑区域后，单击“关闭”。现在转到index_2.html 文件并在文件夹列表中选择它。

步骤 6 - 转到“格式”菜单并选择“动态 Web 模板”→“附加动态 Web 模板... ”，这将打开“附加动态 Web 模板”对话框。

步骤 7 - 选择动态 Web 模板，这里是 master.dwt 文件，然后单击“打开”按钮。您将收到一条警告消息。单击“是”。

步骤 8 - 您可以看到相同的模板应用于index_2.html 文件。同样，您可以将相同的模板添加到网站中任意数量的 HTML 页面中。

步骤 9 - 在此页面上，您只能编辑主要内容部分。如果将鼠标移至其他部分，您将看到该部分不可编辑，并且鼠标光标也变为红十字圆圈。

步骤 10 - 要查看其外观，请转到“文件”菜单并在浏览器中选择“预览”。

Microsoft Expression Web - 搜索页面

在本章中，我们将学习如何向网站添加搜索选项或搜索框。如果它是一个大型网站，那么您将需要在网站中设置一个搜索框，以便用户可以轻松找到任何数据。有许多免费的可用，例如 Windows Live、Google 等。

Windows 实时搜索

以下步骤向您展示如何将 Windows Live 搜索框添加到您的网页，然后将搜索表单设置为搜索整个 Web 或仅搜索您的网站。

步骤 1 - 创建一个新的 HTML 页面并将其命名为SearchPage。

步骤 2 - 转到“格式”菜单并选择“动态 Web 模板”→“附加动态 Web 模板...”选项。选择 master.dwt 文件并单击“打开”按钮。

步骤 3 - 让我们在可编辑区域中添加以下代码。

<form method = "get" action = "http://search.live.com/results.aspx"> 
   <input type = "hidden" name = "cp" value = "1252"/> 
   <input type = "hidden" name = "FORM" value = "FREESS"/> 
   <table style = "background-color: #ffffff;"> 
      <tr> 
         <td>
            <a href = "http://search.live.com/"> 
               <img src = "http://search.live.com/s/affillogoLive.gif" 
                  style = "border:0px;" alt = "Live Search"/> 
            </a> 
         </td> 
         <td> 
            <input type = "text" name = "q" size = "30" /> 
            <input type = "submit" value = "Search Site"/> 
            <input type = "hidden" name = "q1" 
               value = "site:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

步骤 4 - 保存页面。转到“文件”菜单并选择“在浏览器中预览”。

步骤 5 - 您将在网页中看到 Windows Live Search。让我们在搜索中输入一些内容，然后单击“搜索站点”按钮

步骤 6 - 如您所见，它将在网络上搜索。如果您想将搜索限制为仅您的网站，则必须使用以下名称指定您的网站域，而不是https://www.microsoft.com/expression

<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>

步骤 7 - 同样，您可以通过在可编辑区域中添加以下代码来添加 Google 搜索选项。

<form method = "get" action = "http://www.google.com/search"> 
   <div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto"> 
      <table border = "0" cellpadding = "0"> 
         <tr> 
            <td class = "center"> 
               <input type = "text" name = "q" size = "25" maxlength = "255" value = "" /> 
               <input type = "submit" value = "Google Search" /> 
            </td> 
         </tr> 
         <tr> 
            <td align = "center" style = "font-size: 75%"> 
               <input type = "checkbox" name = "sitesearch" 
                  value = " http://www.microsoft.com/expression" checked = "checked" /> 
               Only search this website<br /> 
            </td> 
         </tr> 
      </table> 
   </div> 
</form>

步骤 8 - 保存 HTML 页面，您将看到搜索框、搜索按钮、复选框和复选框标签。

步骤 9 - 要限制用户仅搜索您的网站，请选中该复选框并转到“标记属性”面板，并将“值”属性设置为您网站的 URL，例如https://www.microsoft.com/expression。

步骤 10 - 保存页面并在浏览器中预览。现在您将在网页中看到 Google 搜索选项。

Microsoft Expression Web - 图像

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

步骤 1 - 要开始添加图像，让我们创建一个新的单页网站并将 default.html 文件的名称更改为 index.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 - 现在，让我们在浏览器中预览网页；它将显示以下输出。

Microsoft Expression Web - 超链接

在本章中，我们将学习如何在网站中使用超链接。使网络变得如此广阔的原因之一是网页链接到其他网页的能力。几乎所有网页中都可以找到超链接或链接。

超链接还允许用户单击并转到不同的页面、页面内的某个位置、图像或整个 Internet 上的另一个位置。以下是超链接的一些重要特征 -

Expression Web 的超链接工具和选项使超链接的使用变得非常容易。
Expression Web 超链接视图和报告还使查找和修复损坏和不正确的链接变得非常容易。
超链接可以是一个单词、一组单词或一个图像，单击它们会将您带到一个新文档或当前文档中的某个位置。

锚标签

在 HTML 中，<a>标记（称为锚标记）用于创建到另一个文档的链接。锚点可以指向另一个 html 页面、图像、文本文档或 pdf 文件等。这是锚<a>标签的基本代码。

<a href = "url">Text to be displayed as link<a>

在<a>标签中，“href”属性用于寻址文档的链接，锚标签的开始和结束之间的单词将显示为超链接。
当您将光标移到网页中的链接上时，箭头会变成一只小手。
URL 是指定协议、Web 服务器和文件路径的地址。
URL 有两种类型：绝对 URL和相对URL 。绝对URL包含完整地址，而相对 URL 则缺少地址的一个或多个部分。但是，Web 浏览器会从包含 URL 的页面获取缺失的信息。

例子

让我们看一个简单的示例，其中我们将使用绝对URL和相对 URL。

步骤 1 - 首先，打开index.html页面并在主要内容部分添加以下行。

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

以下是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" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

步骤 2 - 让我们保存网页，您将在主要内容部分看到文本。

步骤 3 - 在设计视图中，右键单击 Google，然后从菜单中选择超链接...，这将打开“插入超链接”对话框。

步骤 4 - 在“地址”字段中，指定 Google 主页的 URL，然后单击“确定”。同样，在设计视图中右键单击 YouTube，然后选择“超链接...”

步骤 5 - 在“地址”字段中，指定 YouTube 主页的 URL，然后单击“确定”。现在，相对右键单击“主页 2”，然后从菜单中选择“超链接...”，这将打开“插入超链接”对话框。

步骤 6 - 对于相对路径，在地址字段中选择index_2.html，Expression Web 将从index.html 文件中获取剩余路径，因为这两个文件位于同一目录中。单击“确定”。

可以看出，这些单词现在带有下划线，这意味着创建了超链接。

步骤 7 - 默认字体颜色为蓝色，超链接的默认字体颜色也是蓝色。要更改超链接的默认颜色，请选择任何超链接，然后转到“格式”菜单，然后选择“背景... ”菜单选项。

您现在将看到以下对话框。

步骤 8 - 让我们将超链接颜色更改为绿色。

在下面的屏幕截图中，您将看到超链接颜色已更改为绿色。

步骤 9 - 现在让我们在浏览器中预览此网页。

如果您点击 Google 链接，它将引导您进入 Google 主页。