主人公小部件

  • 此功能与对齐 公共事务品牌使用指南.
  • 大(高清晰度)影像,可能导致性能问题,并可能导致其他网站可能错误。如果你上传自己的照片,以使用widget的英雄,尽量只上传有1MB或更小的文件大小的照片。
  • 对于照片/影像的最佳实践(如何裁剪图像,使他们正确地显示在主人公小部件),请参阅 图像的形状和大小.

讲述了主人公小部件

英雄形象布局允许网站建设者加全宽度图像跨越您的皇冠体育网站或登陆页面顶部的文本(和可选的视频和链接)。样式和布局匹配伯克利网页和新闻网站的新设计。

重要笔记:

  • 部件的英雄只会工作在皇冠体育网站和“着陆页”内容类型! 不要与其它内容类型使用。
  • 也许你添加一个新的英雄小部件通知后临时显示的问题。如果发生这种情况,打你的浏览器窗口中点击“刷新”应该可以解决这个问题。 ESTA显示问题将不会显示任何人访问您的网站。如果浏览器刷新后的任何显示问题仍然存在,请发送电子邮件 web-platform@berkeley.edu

添加一个品牌的“英雄”窗口小部件,请按照这些指令。

创建一个登陆页面或添加到您的皇冠体育网站

创建一个新的着陆页(如果您要添加到您的皇冠体育网站,请跳过此步骤,并参阅“改变布局”的信息)。为达到最佳显示,我们建议取消选中“显示面包屑”和“显示页面标题。”您也可以选择页面添加到菜单(如果是这样,添加一个“菜单链接标题”,并选择父项)。

从这里,您可以选择在“自定义此页,”你应该看到一个英雄的区域(见“新增的小工具英雄”,下同)。如果你不这样做,选择“更改布局”,在页面的底部,然后选择下拉“英雄布局”:

选择英雄布局中的一个,然后点击保存。注:无论哪种布局您选择,将会有在页面顶部的英雄区。其他布局区域将提供该地区的英雄下方。

加入英雄小部件

点击“自定义此页”,在页面的底部,然后单击区域主人公的“加号”按钮,添加一个新的widget。

从“添加现有内容”区域中,选择“品牌伯克利”。

对于“英雄形象”,单击“添加”。

主人公小部件被设计为显示在区域英雄;他们不应该被加入到其他地区。另外,其它类型的窗口小部件的不被设计为显示在区域英雄。放置部件划分成多个区域无法正常显示不适当月。

配置英雄

在内容设置,选择所需的布局,配色方案和图像(任 选择股票的照片从图书馆或 上传新照片)酌情提供图像信用,添加主英雄文本(必需),在文本中添加辅助线(可选的“文本框”,“登陆”和“视频分割”),并添加链接(可选)。如果您选择了“视频分割”选项,您还需要包括YouTube或VIMEO视频。

在“文本框”,“登陆”和“视频分割”英雄文字显示在背景影像中的英雄的所有选项。 “形象只有”选项只显示图像由于没有文字。当您使用“唯一的图像”选项,您仍然需要在“文本”字段,这将成为该图像的替代文本输入文字。

笔记:

  • “文本”字段将是小部件,它覆盖了英雄的文本。如果你选择“作为网页标题文本”,则文本将是您的目标网页的标题添加了什么。也许你需要为了看到这段文字出现在保存窗口小部件,打“保存”,在页面的底部后,点击刷新。
  • 如果你的英雄将包含一个链接窗口小部件,您必须添加替代文字在上传图像!
  • 为了避免使用倍增的小图像的英雄的小部件(原件扩大超出了其大小的图像时,会显示它),这将导致图像模糊看,回避。以考虑在大显示器的全宽度的图像,我们建议至少1200像素宽和450像素高。

全页面宽度与内容区域宽度

默认情况下,窗口小部件英雄将填补浏览器窗口的整个宽度,因为它在网页上大学伯克利分校, http://www.berkeley.edu.

如果需要的话,网站建设者可以调节英雄小工具,使他们只需填写页面的内容区域的宽度(这种风格是在伯克利新闻网页使用, http://newscenter.berkeley.edu)。要做到这一点,配置窗口小部件并点击英雄救后,点击在该地区的英雄刷图标(您可能需要单击“自定义此页”第一)你的英雄小部件上面:

然后,在“样式设置”,选择“默认样式区域”,然后单击“下一步”:

点击“保存”,在页面底部的完成工作。继续之前,重新加载页面,你之前既节省了您的更改通知后,可能会在浏览器中显示窗口的一些问题。

实例英雄

着陆“伯克利蓝”配色方案英雄例如:

文本框例如用“伯克利蓝”配色方案:

视频分开布置以“伯克利蓝”配色方案:

只有图像布局示例:

照片

有照片从库中的可根据需要在网站上使用的公共事务。这些照片被裁剪的尺寸如下:

  • 1200像素宽×450像素高
  • 800像素宽×450像素高

这些尺寸在文件的名称指出。对照片的最佳实践的详细信息,请参阅 图像的形状和大小.

这些照片使用方法:上传你的英雄照片时,浏览到“库”选项卡,然后通过“照片”的过滤器。

需要选择从照片中选择一张照片,并与英雄配置的其余部分继续。

如果你想查看的所有照片大图(来帮助你确定你想使用哪一个),请确保您登录,然后访问http:// [yoursite] .berkeley.edu /媒体标签/股票的照片。

图片来源

确保提供图像的信用,如果你使用的是由其他人创建一个图片或影像(并确保你有使用图片或影像的权限)。

所提供的照片,照片文件名包括摄影师的名字。当使用股票照片从提供的库,适当摄影师添加到“图片来源”字段:

  • 基冈豪泽
  • 埃琳娜朱科娃
  • 胡尔达·纳尔逊