Unidad 18. Diseño de página. Maquetación web (XII)


18.13. Plantillas multipantalla HTML5 de Dreamweaver CC

La versión CC de Dreamweaver incluye 5 plantillas muy especiales que pueden ser usadas en proyectos propios. No tienen las características de los archivos .dwt de las plantillas, es decir, no contienen zonas fijas y zonas editables, ni es necesario usar con ellas las herramientas del menú Modificar, Plantillas..

Simplemente, al momento de seleccionar alguna de ellas, Dreamweaver crea una copia de la plantilla y nos pide que la grabemos con un nombre específico. Lo que obtenemos es un archivo .html que podemos editar libremente para adaptarlo a nuestras necesidades.

¿Qué tienen de especial estas plantillas? Bueno, se trata en todos los casos de diseños llamados Responsive o diseños multipantalla. Los cuales están basados en consultas de medios de modo que se adaptan automáticamente a los diversos dispositivos que puede utilizar un usuario para consultar nuestro sitio: equipos de escritorio, móviles y tabletas. Esto implica que las distintas plantillas ya incluyen hojas de estilo CSS con el código necesario para su funcionamiento y en algunos casos algunas librerías javascript.

Para disponer de alguna de estas plantillas utilizamos el menú Archivo, opción Nuevo. Del cuadro de diálogo resultante, que ya hemos visto antes, seleccionamos la categoría Plantillas de inicio. Veremos una carpeta llamada Responsive Starters y en la sección Página de muestra, cinco plantillas: Acerca de la página, Cartera, Comercio electrónico, Correo electrónico y Entrada de blog.

Como ya mencionamos, al seleccionar una de las plantillas, Dreamweaver abre inmediatamente el cuadro de diálogo con el que debemos definir un nombre y una carpeta para la nueva página. Como ya hemos visto, es importante definir dicha página y crear una estructura adecuada de carpetas para configurar correctamente nuestro sitio, independientemente que lo hagamos a partir de estas plantillas.

Una vez que hemos grabado nuestro archivo con algún nombre, Dreamweaver nos advierte que es necesario adjuntar diversos archivos dependientes que le darán la funcionalidad multipantalla.

Después podremos editar la plantilla en el área de documento, ya sea en la vista Diseño o la vista En vivo, como en la siguiente imagen.

Una manera simple de hacerlo es sustituyendo las imágenes por otras personalizadas para nuestro sitio utilizando las medidas sugeridas en las imágenes en gris de la plantilla y lo mismo podemos hacer con el texto, las ligas, etcétera. Obviamente, también podríamos añadir nuevos elementos: capas HTML (que estudiaremos más adelante), imágenes, texto, etcétera.

Podemos probar el modo en que la página se adapta a las distintas pantallas utilizando la vista En vivo y luego pulsando en alguno de los iconos de la barra de estado .

Obviamente, podríamos a su vez crear a partir de un diseño de este tipo un archivo de plantilla .dwt, por lo que, de nueva cuentra, tendríamos que definir sus zonas editables, etcétera.

Lo importane a resaltar aquí es la facilidad con la que podemos crear una página web multipantalla gracias a las plantillas incorporadas en esta versión del programa.

 

• Ejercicio propuesto la Unidad 18 • Prueba evaluativa de la Unidad 18

Marzo-2015
Pág. 18.12
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.