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.

Podemos dividir estos diseños en dos grandes grupos, diseños de maquetación fija o de maquetación líquida (las que pone como flotantes).

En la previsualización de la derecha, los diseños fijos, de tamaño en píxeles se representan con un candado. En cambio, los diseños líquidos aparecen con un muelle.

Básicamente, para cada grupo de diseño, podemos elegir si queremos una única columna principal central, columnas a los lados, pie o encabezado.

Hay que tener en cuenta que esto generará gran cantidad de estilos CSS. Por defecto se añadirá al head de la página, pero en el desplegable Diseño CSS en podemos elegir si colocarlo en una hoja nueva, o en una existente.

Al elegir un diseño u otro, llegaremos se mostrará de forma parecida a este, en tonos verdes-marrones si el diseño es fijo, o azulado si es elástico.

Partiendo de esta página, podemos modificarla como 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: Ver el videotutorial 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: Ver el videotutorial Modificaremos cada elemento hasta conseguir la maqutación que nos interesa para el sitio.

Parte 3: Ver el videotutorial 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: Ver el videotutorial Para acabar, crearemos las últimas páginas, mostrando tablas con información, un formulario de contacto, y una presentación de imágenes embebida.

• Ejercicio propuesto la Unidad 18 • Prueba evaluativa de la Unidad 18
Pág. 18.8

Atrás  Inicio  Adelante