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

18.10. Maquetación prediseñada en Dreamweaver

Como habrás observado, al crear un nuevo documento de Dreaweaver podemos partir de una maquetación prediseñada. Hay dos diseños de maquetación fija cuando seleccionamos el menú Archivo, opción Nuevo y en el cuadro de diálogo hacemos clic en Pagina en blanco y HTML en Tipo de página.

 

Como puedes ver en la imagen, en la opción Diseño CSS en, podemos dejar el código CSS que le corresponde en la sección Head de la propia página, o bien, crear una nueva hoja de estilos CSS adjunta de la que debemos definir el nombre o, finalmente, vincularlo a algún archivo .css existente.

 

Alternativamente también podemos comenzar utilizando una plantilla de diseños adaptable, tipo responsive, si en ese mismo cuadro de diálogo seleccionamos Plantilla de inicio, como puede verse en la siguiente imagen.

En este último caso, como se trata de diseños a partir de plantillas, Dreamweaver nos solicita que grabemos la nueva página con un nombre y que aceptemos la asignación de la hoja u hojas de estilo CSS que cada una tiene. Es decir, en este caso no existe la posibilidad de dejar el código CSS en la sección head de la página.

En el caso de uno de los diseños fijos, obtendremos una página como ésta.

Partiendo de esta página, podemos modificarla con nuestros contenidos y estilo.

Si accedes su código fuente, verás que tiene incluidos una gran cantidad de comentarios. En ellos se explica por qué se ha puesto tal propiedad, o cosas que podemos cambiar. Una vez acabada nuestra página, deberíamos borrar estos comentarios.

En los videotutoriales que encontrarás en el siguiente apartado, podrás ver cómo empleamos una de estas plantillas para maquetar nuestro sitio web.

18.11. Videotutoriales. Creando un sitio web completo

Con lo que hemos visto hasta ahora en el curso, ya podemos crear un sitio web completo.

Puedes ver un cómo creamos este sitio web en los siguientes videotutoriales:

Parte 1: Definiremos un nuevo sitio web, y comenzaremos creando la maquetación general del sitio, personalizando una de las plantillas prediseñadas de Dreamweaver.

Parte 2: Modificaremos cada elemento hasta conseguir la maqutación que nos interesa para el sitio.

Parte 3: Una vez completada la maquetación, la convertiremos en una plantilla en la que basaremos todas nuestras futuras páginas. En una de las páginas, usaremos comportamientos de javascript para alterar algunos elementos, como las imágenes.

Parte 4: Para acabar, crearemos las últimas páginas, mostrando tablas con información, un formulario de contacto, y una presentación de imágenes embebida.