Segundo video/artículo de la serie Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Crear la Plantilla de Dreamweaver para el sitio web.

En el segundo video de la serie te muestro como crear una plantilla de las zonas comunes de las páginas del sitio. Este es un sistema que a posteriori te va a ahorrar mucho tiempo y que minimiza los riesgos de producir “enlaces rotos” entre las páginas.

Si no has visto el primer video/artículo de la serie, visítalo en este enlace: Cómo desarrollar un sitio web paso a paso con HTML5 y CSS3

¿Qué es una plantilla de dreamweaver?

La plantilla es una página que se desarrolla con html y css cuya extensión es .dwt (Dreamweaver template). En ella se diseñan todos los elementos comunes a las páginas del sitio: cabecera de página, menú de navegación y pie de página son los más habituales.

En la plantilla dejamos preparadas las regiones editables necesarias para añadir los contenidos exclusivos de las páginas html que van a formar parte del sitio.

Una plantilla se puede crear a partir de un documento en blanco, pero es más práctico convertir una página existente en plantilla.

¿Cuáles son las ventajas de utilizar una plantilla?

La primera es que resulta muy útil para mantener el aspecto global de un sitio Web. Nos permite controlar el diseño de la página y los elementos que tienen que permanecer sin cambios.

La creación de páginas basadas en la plantilla es muy sencilla. Una vez creada la página a partir de una plantilla, sólo podrás modificar las regiones editables.

Podrás editar la plantilla siempre que quieras y los cambios se actualizarán en todas las páginas que estén basadas en ella. Piensa en el menú de navegación. Todas las páginas tienen que estar enlazadas entre sí. Sin plantilla supondría un trabajo adicional tener que ir creando enlaces en cada html. Esto aumenta el riesgo de cometer errores en las rutas, por lo que tendrías que tener especial cuidado en la revisión de cada enlace. Con la plantilla los enlaces que generemos en el archivo .dwt se actualizarán automáticamente en cada página html, reduciendo considerablemente el trabajo.

Dreamweaver como editor web

Verás que he utilizado Dreamweaver para desarrollar el sitio. Seguro que más de una vez has oído y/o leído que este es un programa pésimo, que genera código basura…, pero todo depende de cómo lo utilices. De hecho, hay elementos en este programa que pueden facilitarte enormemente el trabajo, como las plantillas que te muestro en el video.

A lo largo de los videos te darás cuenta de que todo el desarrollo lo realizo desde el código, igual que haría con cualquier otro editor web como Sublime, Coda, Notepad… Esto es clave para tener un código limpio y ordenado.

Por supuesto, puedes utilizar cualquier otro editor de código. Yo utilizo Dreamweaver porque pertenece al paquete de programas de diseño profesionales que ofertamos en nuestros cursos y su entorno de trabajo resulta familiar para aquellos que ya hayan visto al menos uno de estos programas.

A medida que tus conocimientos de código aumenten es probable y recomendable que pruebes otros editores y te decidas por el que mejor se adapte a tus necesidades como desarrollador.

De momento, te cuento algunas cosas buenas del editor Dreamweaver.

Elementos clave que debes conocer de Dreamweaver

1. Este editor fue uno de los primeros en tener un administrador de sitio. Desde la ventana Archivos podrás administrar la carpeta local para que las rutas entre las páginas y los archivos (imágenes, videos, sonidos, fuentes, css, js…) se puedan actualizar automáticamente. Además, podrás administrar los archivos remotos desde su propio FTP.
2. Está disponible para los sistemas operativos Windows y Mac.
3. Incluye soporte para varias tecnologías como JavaScript, CSS y lenguajes de escritura del lado del servidor.
4. Cuenta con dos modos de trabajo: vista diseño y vista código. Puedes cambiar fácilmente de un modo de visualización a otro, o elegir una visualización mixta. Este último sigue siendo muy práctico para los principiantes.
5. Cuenta con la capacidad de poder previsualizar con cualquier navegador que tengas instalado de una forma muy rápida.
6. Otra de las funcionalidades que ha implementado en las últimas versiones es la posibilidad de previsualizar para distintas resoluciones y dispositivos para trabajar las media query.
7. Por supuesto, permite la creación de plantillas personalizadas de páginas web.
8. Cuenta con herramientas de ayuda muy potentes para buscar y reemplazar código en un archivo concreto o en todo el sitio.
9. No se me puede olvidar la función de Autocompletado y las ayudas de código. Uno de los mayores retos a los que se enfrenta un estudiante de desarrollo web es la cantidad de etiquetas, atributos, propiedades css, selectores…que existen. Es imposible memorizar todo.

• Otra gran ayuda es que permite encontrar fácilmente el cierre correcto de las etiquetas.

? Tutorial Plantillas Web HTML5 con Dreamweaver CIPSA ESCUELA Lara Acebes

En el siguiente artículo os hablaré de los sistemas de estructura css. Veremos cómo han ido evolucionando hasta los actuales flex y grid e intentaré aclarar las dudas de cuando utilizar un sistema u otro.

Si estás interesado, visita nuestros cursos de Diseño y Desarrollo Web

A continuación, te avanzo el contenido de los próximos videos de la serie:

Video/artículo 3

• Contenido y estilos de la index o página de inicio. Iré mostrando como estructurar los contenidos con sistema flex y grid en función de lo que sea más apropiado en cada caso. Siempre pensando en los cambios de disposición de los elementos en la vista móvil.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Sistemas de estructura CSS – Flex y Grid (3/8)

Video/artículo 4

• Desarrollaré las páginas Productos y Marcas. Estas páginas comparten la estructura de la index, por lo que sólo necesitaré añadir estilos estéticos al contenido propio de cada página.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Optimizar la CSS (4/8)

Video/artículo 5

• En este video plantearé otra estructura grid para la página Nosotros.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: El contenido por delante del diseño. (5/8)

Video/artículo 6

• En la página Contacto nuevamente desarrollaré una estructura grid.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Formularios web. (6/8)

Video/artículo 7

• En este video me centraré en añadir efectos CSS3 de transición y animación.

Video/artículo 8

• En el último video generaré el media query para la adaptación al dispositivo móvil.