|
|
|
|
|
|
|
|
- Presentación
- Creación de páginas en modo "Responsive (zonificación y diseños)
- ¿Cómo crear páginas utilizando el modo zonificación?
- "Modo "Responsive (zonificación y diseños): reference tamaño de las páginas
- Creando y manejando las áreas de diseño en el editor
- Presentación
- Creando áreas de diseño
- Menú contextual del área de diseño
- Ventana description del área de diseño
- Semántica associated con un área de presentación (pestaña "Detalles")
Editar las páginas...: Modo responsive (Zonificación y maquetación)
"Responsive (zoning and layouts)" es el modo de edición de Default Page. Este modo de edición le permite fácilmente manipular páginas en el editor. Hay muchas características en este modo: - generación optimizada de Page.
- capacidad para establecer un tamaño reference Page,
- capacidad para definir las áreas de diseño,
- anclajes intuitivos control, etc
- anclajes (sitios aptos para móviles),
- ...
Creación de páginas en modo "Responsive (zonificación y diseños) ¿Cómo crear páginas utilizando el modo zonificación? Por Default, todas las páginas se generan utilizando el modo "Responsive (zonificación y diseños). Puede elegir este modo en la ventana de la página description: - Abrir la ventana Page description ("description" en el menú contextual del Page).
- En la pestaña "General", seleccione la opción "Responsive (zoning y layouts)".
- Validar.
Las ventajas de esta modalidad son: - diseños coherentes de Page en el editor y en tiempo de ejecución.
- la capacidad de manipular libremente los controles.
- código claro y sencillo.
"Modo "Responsive (zonificación y diseños): reference tamaño de las páginas Al editar una Page en modo "Responsive (zoning and layouts)", puede set el tamaño de la Page: - redimensionando directamente la Page con el ratón.
- especificando el tamaño de Page en la barra de estado del editor:
Los mandos se sitúan en relación a la Page y a su tamaño definido en el editor. Utilizar un tamaño reference para el Page sirve para: - mostrar automáticamente barras de desplazamiento si es necesario cuando la Page se visualiza en un navegador específico (visualización en el navegador de un iPhone, por ejemplo).
- manejar las anclas.
Creando y manejando las áreas de diseño en el editor Presentación El modo "Responsive (zonificación y maquetación)" facilita la edición de Page mediante el uso de "zonas de maquetación".. Estas zonas de disposición permiten, por ejemplo, definir la arquitectura Page: cabecera, pie de página, ... Estas áreas de diseño están claramente representadas y pueden ser fácilmente manejadas en el editor. Por ejemplo, al aumentar la altura del área de la cabecera, automáticamente se moverán las áreas de diseño debajo de ella: Page cuerpo y pie. Creando áreas de diseño Hay dos métodos para crear áreas de diseño. - Método 1:
- En la pestaña "Creación", en el grupo "Contenedores", despliegue "Zoning":
- Para crear un área horizontal, haga clic en "Dividir horizontalmente".
- Para crear una zona vertical, haga clic en "Dividir verticalmente"..
- Para crear una subdivisión horizontal, haga clic en "Subdividir horizontalmente".
- Para crear una subdivisión vertical, haga clic en "Subdividir verticalmente".
- El cursor se convierte en un lápiz.
- Haga clic en la Page donde desee crear el área. Si es necesario, las áreas pueden ser redimensionadas y desplazadas.
- Método 2:
- En la pestaña "Página", en el grupo "Edición", despliegue "Zoning":
- Para crear un área horizontal, haga clic en "Dividir horizontalmente".
- Para crear una zona vertical, haga clic en "Dividir verticalmente"..
- Para crear una subdivisión horizontal, haga clic en "Subdividir horizontalmente".
- Para crear una subdivisión vertical, haga clic en "Subdividir verticalmente".
- El cursor se convierte en un lápiz.
- Haga clic en la Page donde desee crear el área. Si es necesario, las áreas pueden ser redimensionadas y desplazadas.
Observaciones: - La opción "Dividir" divide un área de diseño existente en dos áreas separadas.
- La opción "Subdividir" crea dos áreas nuevas, pero mantiene el área original. Esto significa que habrá tres áreas después de utilizar esta opción: la zona original, y las dos nuevas zonas que ahora contiene.
- Puede crear áreas de diseño:
- en las plantillas Page s y Page,
- en las páginas emergentes,
- en "contenedores": celdas, supercontrol s, loopers, plantillas control, ...
- No se pueden crear áreas en páginas internas.
Menú contextual del área de diseño El menú contextual de un área de diseño permite realizar varias operaciones: - Haga clic en el área de diseño. El área seleccionada queda resaltada.
- Haga clic con el botón derecho del ratón en el área. El menú contextual se abre: Este menú le permite:
- Abra la ventana description del área de diseño.
- Anclar el área de diseño.
- Dividir el área de diseño vertical u horizontalmente.
Observación: Para eliminar el área de diseño, basta con pulsar la tecla Supr. Los controles contenidos en un área de diseño se conservan cuando se elimina el área. Ventana description del área de diseño Se puede acceder a la ventana description del área de diseño a través del menú contextual. Esta ventana contiene las siguientes secciones: - Pestaña "General": Esta pestaña le permite especificar el nombre del área de diseño, y enumera los controles que contiene.
- Pestaña " UI ": Esta pestaña permite definir las opciones de los anclajes del área de diseño, el modo de anclaje y la gestión de los planos.
- pestaña "Detalles": Esta pestaña permite especificar los elementos semánticos associated con el área de diseño.
- Pestaña "Estilo": Esta pestaña permite definir las opciones de alineación y desbordamiento del área de presentación, su fondo Image y su borde. Estas opciones evitan el uso de una célula.
Semántica associated con un área de presentación (pestaña "Detalles") WEBDEV le da la posibilidad de asociar una semántica HTML 5 específica con cada área de diseño. Esta información es opcional y se utiliza principalmente para mejorar el SEO (Search Engine Optimization). Esta información también puede utilizarse para mejorar la accesibilidad de un sitio (por ejemplo, un sitio sabrá el título de la Page y podrá ampliarlo en modo "accesibilidad").. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|