Un diseño define cómo se organiza el contenido en la página de un sitio. Diferentes diseños pueden contener un número distinto de espacios con nombre. Un espacio es una región que se extiende por el ancho de la página y que puede contener uno o más tipos de contenido.
Cada tema tiene varios diseños de página. Consulte Acerca de los temas.
Cuando se agrega una página a un sitio, se selecciona un diseño para utilizarlo con esa página. Cada diseño tiene áreas en la página (denominadas espacios) sobre las que puede arrastrar y soltar contenido. El contenido de esos espacios depende completamente de usted. Puede ser cualquier cosa, desde títulos, texto y divisores hasta contenido multimedia, galerías y redes sociales.
Un diseño contiene construcciones HTML válidas así como un marcador especial que el intérprete de Oracle Content Management reconoce. Un diseño debe empezar con una sentencia DOCTYPE que configure el explorador para representar la página en un modo compatible con los estándares; por ejemplo: <!DOCTYPE html> Esta sentencia la requieren determinados componentes para obtener los mejores resultados.
Este código de ejemplo muestra un diseño mínimo:
1 <!DOCTYPE html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 6 <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script> 7 <link rel="stylesheet" type="text/css" 8 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css"> 9 <link rel="stylesheet" type="text/css" 10 href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css"> 11 12 <!--$SCS_RENDER_INFO--> 13 <!--$SCS_SITE_HEADER--> 13 <!--$SCS_PAGE_HEADER--> 14 </head> 15 <body> 16 <div id="topNavigation"></div> 17 <div id="mainContentSlot" class="scs-slot scs-responsive"></div> 18 19 <script data-main="/_sitescloud/renderer/renderer.js" 20 src="/_sitescloud/renderer/require.js"></script> 21 <!--$SCS_SITE_FOOTER--> 22 </body> 23 </html>
Cuando se representa una página en el explorador, se amplían varios tokens.
[!--$SCS_THEME_NAME--]
Se amplía hasta el nombre del tema actualmente seleccionado para el sitio. El uso de este token permite que se copie el tema, porque las URL que utilizan este token harán referencia al tema actual.
[!--$SCS_DESIGN_NAME--]
Se amplía hasta el nombre del diseño actualmente seleccionado para el sitio. Permite que varios diseños puedan utilizar el diseño en el tema.
[!--$SCS_RENDER_INFO--]
Se amplía hasta una etiqueta de script que contiene la información de jerarquía de página y representación del componente de la página. Se debe situar en la sección de <cabecera> del diseño.
[!--$SCS_SITE_HEADER--]
Se amplía hasta el valor de cabecera del sitio que se especifica en el campo Cabecera de las propiedades de optimización del motor de búsqueda (SEO). Aquí se puede introducir el marcador de todo el sitio que desee colocar en todas las páginas. Consulte Definición de las propiedades del motor de búsqueda.
[!--$SCS_PAGE_HEADER--]
Se amplía hasta el valor de cabecera de la página que se encuentra en el campo Cabecera de página en las propiedades de Configuración de página de Site Builder. Aquí se puede introducir el marcador específico de la página que desee colocar en esta página.
[!--$SCS_SITE_FOOTER--]
Se amplía hasta el valor de pie de página del sitio que se encuentra en el campo Pie de página de las propiedades de optimización del motor de búsqueda (SEO). Aquí se puede introducir el marcador de todo el sitio que desee colocar en todas las páginas. Consulte Definición de las propiedades del motor de búsqueda.
Nota:
Los tokens también pueden utilizar el prefijo<!--$ y el sufijo --> como delimitadores en lugar de [!--$ y --].Cuando un sitio está en línea, se sustituyen los siguientes tokens del enlace por valores reales que tienen en cuenta el contexto en el que se están utilizando. Esto permite que el enlace funcione cuando se está editando un sitio y en el sitio publicado cuando este está en línea.
/_sitescloud/ se sustituye por /_sitesclouddelivery/
/_themes/ se sustituye por /_themesdelivery/
Los espacios son elementos DIV del diseño que tienen el valor "scs-slot" en el atributo de clase. Un espacio es el lugar donde los usuarios pueden agregar componentes para rellenar el contenido del sitio. Se pueden designar varios elementos DIV como espacios asignando el atributo de clase "scs-slot". Cada espacio debe tener un atributo id único.
Nota:
No se pueden anidar espacios, pero puede proporcionar la sugerencia de que se pueden anidar utilizando CSS para superponerlos. Si desea hacerlo, utilice un grupo de componentes o un diseño de sección. Consulte Crear un diseño de sección.Los espacios que tienen adicionalmente un valor de atributo de clase "scs-responsive" refrescarán su contenido cuando la ventanilla del explorador cambie la resolución. Esto permite que las ranuras se representen de forma ajustable para una pantalla de escritorio grande o un dispositivo móvil pequeño.
La etiqueta final <script> (línea 19 del ejemplo) carga el código de representación de Oracle Content Management. Este código es responsable de dibujar los componentes en la página y permite al código personalizado acceder a la API de representación. Sin esta etiqueta <script>, las páginas basadas en el diseño no las puede cambiar el creador de sitios.