如何声明固定网站元数据
用户评价: / 6
好 
作者:深圳网页制作   
周五, 2011年 08月 05日 17:06
  • 针对安装的元数据
    • application-name
    • msapplication-tooltip
    • msapplication-starturl
    • msapplication-window
  • 运行时元数据
    • msapplication-navbutton-color
    • msapplication-task
    • msapplication-task-separator
  • 汇总
  • 更多示例
    • Bing.com
    • BeautyoftheWeb.com
    • Facebook.com

针对安装的元数据

以下 meta 元素控制如何在“开始”菜单和 Windows 7 任务栏上创建固定网站快捷方式。 所有这些元素都是可选的,但强烈建议使用。

安装元数据元素仅在用户固定网站时使用。 此后,对这些值的更改将不会对固定网站造成任何影响。 因此,以下 meta 元素有时候被称为“安装时”值:

 

  • application-name
  • msapplication-tooltip
  • msapplication-starturl
  • msapplication-window

注意  Windows Internet Explorer 9 会在启动固定网站时从该网站的起始 URL 读取其余的元数据。

application-name

"application-name" 元数据定义固定网站应用程序实例的名称。 当光标悬停在 Windows 7 任务栏的固定网站按钮上时,此名称将出现在工具提示中。 应用程序名称还将附加到固定网站应用程序实例的窗口标题中。

<meta name="application-name" content="Channel 9 Audio Player" />


如果缺少此元素,则改为使用文档 title

msapplication-tooltip

"msapplication-tooltip" 元数据提供其他工具提示文本,当光标悬停在 Windows 的“开始”菜单中或桌面上的固定网站快捷方式上时,将会出现这些文本。

<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />


msapplication-starturl

"msapplication-starturl" 元数据包含应用程序的根 URL。 起始 URL 可以是完全限定或相对于当前文档的。 只允许 HTTP 和 HTTPS 协议。 如果缺少此元素,则改为使用当前页的地址。

<meta name="msapplication-starturl" content="./" />


"msapplication-starturl" 元数据创建您的网站的公共入口点。 当存在此元数据时,固定网站会启动起始 URL 而不是最初拖动到任务栏的页面。 更重要的是,起始页中声明的运行时元数据将在每次启动网站时重新定义导航按钮颜色和静态跳转列表任务。

作为 "msapplication-starturl" 使用方法的示例,我们来考虑一个能提供多种类型的计算器仿真程序的网站: 一种类型具有标准布局,另一种类型具有科学布局,还有一种类型具有统计功能。 如果没有起始 URL,用户可能只将科学计算器固定到任务栏,从而无法轻松地访问集合中的其他计算器。 通过添加起始 URL,网站开发人员可以声明网站的公共入口点。

<meta name="msapplication-starturl" content="./CalculatorHome.html" />


通过将安装时元数据添加到仿真程序页面,网站开发人员可控制用户访问网站的方式。 通过在起始页中添加跳转列表元数据,网站开发人员可以更轻松地控制用户选择要使用的计算器样式的方式。 有关详细信息,请参阅向跳转列表添加任务。

处理服务器重定向

如果您的起始 URL 重定向到其他网页,请确保声明提供给客户端的网页中的所有运行时元数据。 如果服务器重定向到新路径,则您的起始 URL 必须包括该路径和结尾反斜杠 (/)。

例如,如果 "http://contoso.com/" 重定向到 "http://www.contoso.com/Home/",则起始 URL 必须包括新路径和结尾反斜杠,如下所示:

<meta name="msapplication-starturl" content="http://www.contoso.com/Home/" />
OR
<meta name="msapplication-starturl" content="/Home/" />


msapplication-window

"msapplication-window" 元数据设置固定网站首次启动时的初始窗口大小。 但是,如果用户调整了窗口大小,则再次启动固定网站时,该网站将保留新的尺寸。

<meta name="msapplication-window" content="width=1024;height=768" />


下表说明了构成 meta 元素的 content 特性的两个部分。 这两个部分都是必需的,且必须用分号隔开。

部分说明
宽度以像素为单位的窗口宽度。 最小值为 800。
高度以像素为单位的窗口高度。 最小值为 600。

 

运行时元数据

与安装时值不同,在用户每次启动固定网站时将读取以下元数据。 因此,网站开发人员可使用这些值不断修改用户体验。 控制对这些值的更改的最佳方法是在固定网站的起始 URL 中定义它们。

 

  • msapplication-navbutton-color
  • msapplication-task
  • msapplication-task-separator

注意  这些元素也是可选的。

msapplication-navbutton-color

"msapplication-navbutton-color" 元数据定义固定网站浏览器窗口中的“后退”“前进”按钮的自定义颜色。 任何命名颜色或十六进制颜色值均有效。

<meta name="msapplication-navbutton-color" content="#FF3300" />


如果没有此 meta 元素,则默认颜色将基于网站图标(即,favicon)的调色板。 若要了解如何为您的网站选择自定义图标,请参阅自定义网站图标。

msapplication-task

与其他网站元数据一样,可使用 meta 元素定义静态任务。 下一个任务向跳转列表添加任务说明了如何执行此操作。

msapplication-task-separator

将此元素放在各个任务之间,以便在跳转列表菜单中放置一条分隔线。 如果有多条分隔线,则必须通过声明 content="[unique value]" 使每条分隔线都具有唯一性。

汇总

此处是 Channel9 Podcast Player 示例应用程序使用的基本固定网站元数据。

<meta name="application-name" content="Channel 9 Audio Player" />
<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
<meta name="msapplication-starturl" content="./" />


更多示例

为了帮助您理解如何在自己的网站上实现这些基本功能,这一部分提供了其他一些添加了固定网站元数据来增强 Internet Explorer 9 中的用户体验的网站示例。

Bing.com

<meta content="Bing" name="application-name" />
<meta content="Bing" name="msapplication-tooltip" />
<meta content="width=1024;height=768" name="msapplication-window" />
<meta content="/" name="msapplication-starturl" />


BeautyoftheWeb.com

<meta name="application-name" content="Beauty Of The Web" />
<meta name="msapplication-tooltip" content="Start the Beauty Of The Web" />
<meta name="msapplication-starturl" content="http://www.beautyoftheweb.com/" />
<meta name="msapplication-navbutton-color" content="#5f6dbd" />


Facebook.com


<meta name="application-name" content="Facebook"/>
<meta name="msapplication-tooltip" content="Start the Facebook App"/>
<meta name="msapplication-starturl" content="/"/>
<meta name="msapplication-window" content="width=800;height=600"/>


 

评论信息

分享到: