Cuando nos encargan el diseño de un sitio web, lo habitual es dar los primeros pasos sobre el papel o algún programa de diseño gráfico de nuestra elección: Photoshop, Corel, Fireworks etc. Estos bocetos de nuestro sitio web se llaman maquetas y pueden contener un número indeterminado de elementos requeridos por nuestro cliente. Lo habitual es presentar esta maqueta para la aprobación del cliente y si hay que hacer cambios pues se hacen sobre la maqueta hasta dar con el producto final. Bien, lo que aquí vamos a tratar no es la parte de diseño en si, yo os presento aquí una maqueta de una empresa ficticia: Flores Amanda. Nuestro trabajo consistirá en transformar esta maqueta en una web activa.

En la carpeta de materiales están todos los elementos necesarios para trabajar ya clasificados en carpetas. Lo que debes hacer es descomprimir el archivo en algún lugar de tu pc y copiar y pegar la carpeta floristeria en tu sitio Dreamweaver.

La maqueta la desglosamos en las imágenes que veis en la imagen superior. Un logotipo principal, los colores básicos que cubrirán las tablas, una cabecera de tabla y un pie.

Bien, el primer paso consistirá en crear un documento nuevo index.html dentro de la carpeta floristería, que será la página de inicio de nuestra floristería ficticia. Recuerda que debes poner el título a la página, esto es algo ya estudiado de modo que prescindiremos de los detalles.

Configuraremos también las propiedades de página según capturas:

Bien, ahora vamos a proceder a distribuir las tablas. Primeramente crearemos una tabla de 1 fila x 1 columna y de un ancho de 706 píxeles. En el inspector de propiedades aplicamos alineación centro y color de fondo negro.

Para poder trabajar más cómodamente con las tablas (si ya sé que esto os lo tenia que haber comentado en tutoriales anteriores), iremos a la pestaña de Diseño en la barra Insertar, y haremos clic en el botón Ampliada. Esta opción de tablas expandidas es una función que añade temporalmente relleno y espaciado de celdas y aumenta los bordes para así simplificar la edición.

Añadiremos las siguientes tablas (centrando cada una de ellas en el inspector de propiedades:

Para volver al modo standar de edición de tablas clic en el botón standar de la pestaña Diseño. Las tablas se verán ahora así:

MODO EXPANDIDO

MODO STANDAR

Vamos ahora a formatear las tablas. Clic en el interior de la primera tabla para seleccionarla y en el inspector de propiedades poner 130 px de alto. (Ver imagen) Clic en la segunda tabla y poner 30 px de alto.

Clic en la tercera tabla, dentro de la primera celda y darle un valor de ancho de celda de 140 píxeles. Repetir y hacer clic en la segunda celda y aplicarle un ancho de 560 píxeles y en la altura ponemos 450 pixeles.

Para finalizar de formatear las tablas clic en la 4ª tabla y darle un alto de 25 píxeles.

Vamos a ver ahora una opción interesante y nueva para nosotros. Vamos a insertar un marcador de posición de imagen.

Un marcador de posición de imagen es un gráfico que se utiliza hasta que el gráfico definitivo está listo para su incorporación a la página Web. Puede resultar útil al crear el diseño de página, pues permite colocar una imagen en una página antes de crear la imagen. Podemos insertarlo desde la barra de insertar icono de imagen, abrimos el desplegable y seleccionamos Marcador de posición de imagen. Otra forma es a través del menú de opciones Insertar - Objetos de imagen - Marcador de posición de imagen.

Configuramos la ventana emergente como sigue:

El texto alternativo es una descripción textual de una imagen en una página Web. Forma parte del código HTML y no se muestra en la página. Es importante proporcionar texto alternativo para la mayoría de sus imágenes, con el fin de ofrecer la información proporcionada por la imagen a los visitantes del sitio que utilicen lectores de pantalla o navegadores que sólo admiten texto. Esto es lo que tenemos:

Para finalizar esta primera parte, vamos a colorear las tablas que quedan. Haremos clic en la tercera tabla, celda de la izquierda y como color de fondo en el inspector de propiedades añadiremos color1.jpg. En la celda de la derecha pondremos color2.jpg, guardamos nuestra página como parte1.html y así se verá en el navegador:

Mi página Web