设计与设计器

注意

本文介绍如何基于经典UI创建网站。 Adobe建议如开发AEM Sites快速入门中所述，为您的网站使用最新的AEM技术。

设计器用于使用AEM中的经典UI为您的网站创建设计。

注意

有关Web辅助功能的详细信息，请参阅AEM和Web辅助功能指导原则。

使用Designer

可以在工具选项卡的designs部分定义您的设计：

screen_shot_2012-02-01at30237pm

您可以在此处创建存储设计所需的结构，然后上传所需的级联样式表和图像。

设计存储在/apps/<your-project>下。使用jcr:content节点的cq:designPath属性指定要用于网站的设计的路径。

chlimage_1-74

注意

在设计模式下对页面所做的所有更改将保留在站点的设计节点下，并自动应用于具有相同设计的所有页面。

要实现您的设计，您需要：

CSS — 层叠样式表定义页面上特定区域的格式。

图像 — 用于背景、按钮等功能的任何图像。

在开发网站时，强烈建议在/apps/<your-project>下存储图像和CSS文件，这样您就可以根据当前设计引用您的资源，如以下代码片断所述。

<%= currentDesign.getPath() + "/static/img/icon.gif %>

上例优惠具有以下几个优点：

组件的外观根据每个站点使用不同的设计路径而有所不同。
只需将设计路径指向站点根部的不同节点（从design/v1到design/v2.），即可轻松地重新设计网站
/etc/designs 并且 /content 是浏览器看到的唯一一个外部URL，用于保护您的外部用户对树下的内容感到 /apps 好奇。上述URL优势还有助于您的系统管理员设置更好的安全性，因为您将资产的曝光限制在几个不同的位置。