En el zip de materiales hay contenida una carpeta que se llama rollover, extrae esa carpeta y cópiala en tu sitio Dreamweaver al lado de las que ya tienes allí.

Lo primero que haremos será abrir un documento nuevo y modificar las propiedades de la página tal como se ve en la imagen:

Es importante que ajustéis los márgenes izquierdo, superior y derecho a 0. Seguidamente añadiremos una tabla que se componga de 1 fila y 3 columnas.

En la columna de la izquierda insertaremos la imagen principal del set. Observemos que los bordes de las columnas de la tabla se han desplazado a la derecha. Hacemos clic en el inmediato a la imagen, y sin soltar lo arrastramos hacia el borde de la imagen pegándolo a ella.

En la celda de la derecha, añadiremos una tabla que tendrá 4 filas y una columna:

Insertaremos en la fila 1 y en la fila 4 las imágenes que se muestran en la siguiente figura:

En las dos filas centrales añadiremos una tabla en cada una que tendrá 1 fila por 2 columnas.

La imagen se verá ahora así:

En las celdas de la derecha, vamos a añadir las imágenes que se muestran en las dos figuras siguientes y las alinearemos a la derecha. Ajustamos también los bordes de las tablas pegados a las  imágenes que acabamos de insertar.

En las celdas de la izquierda, insertamos una tabla de 5 filas y una columna en cada una.

Nuestro trabajo se verá ahora así:

Bien, la parte más difícil ya la hemos terminado, que es la distribución de tablas. Casi sois ya unos expertos-as :)

Vamos ahora a insertar las imágenes de sustitución que compondrán el menú. Situamos el puntero del ratón en la primera celda (fila 1) de la tabla superior y clic en el menú de opciones Insertar - Objetos de imagen - Imagen de sustitución:

En la ventana emergente, vamos a comenzar a rellenar con los datos de las imágenes. Para facilitar el trabajo he nombrado las imágenes con un número secuencial y un identificativo - on / off - de modo que en imagen original siempre colocaremos la imagen off y en la imagen de sustitución la imagen que tiene el mismo número pero que termine en on. Texto alternativo contendrá un texto de nuestra elección y que aparecerá cuando posemos el puntero del ratón sobre la imagen (ALT). Url puede contener un hipervínculo externo o interno.

Una vez hagamos clic en aceptar la imagen se verá alineada a la izquierda. En el inspector de propiedades la alinearemos a la derecha y haremos lo propio con todas las que vayamos añadiendo al conjunto.

Añadiremos una imagen más, la segunda para mostrarte cómo se pone un enlace interno (el anterior era externo) y para que veas que las imágenes van en orden numérico secuencial. Coloca tú el resto hasta completar la tabla.

Una vez hayas rellenado las tablas con todas las opciones, fíjate en la imagen del set. Es posible que haya un espacio en blanco en su parte superior. Es preciso eliminarlo porque este conjunto está diseñado para estar completamente pegado a los márgenes del navegador, de modo que situa el puntero del ratón a la derecha de la imagen y da un solo clic a la tecla Enter o Intro para introducir un retorno de carro y que la imagen suba ese espacio.

En el navegador se verá ahora así:

Para finalizar el maquetado añadiremos una tabla de 2 filas y 1 columna y el ancho en vez de a 100 como muestra la imagen lo colocamos a 80 %.

Insertamos las ultimas imágenes que nos quedan. En la fila superior insertamos la imagen set6imagen9.jpg y la alineamos a la izquierda.

En la fila inferior añadimos una tabla de 1 fila y 2 columnas. En la columna de la izquierda colocamos la imagen set6imagen10.jpg. Añadimos unos cuantos retornos de carro (tecla enter) para subirla en la tabla y que quede pegada a la imagen superior. No olvides pegar el borde de la celda situado mas a la derecha de la imagen al borde de la misma.

La celda de la derecha está reservada para texto de modo que puedes añadir una tabla central de 1fila x 1 columna con un ancho de un 80%. No olvides respetar los creditos y el logo del set, Tienes el logotipo en la carpeta, insertas la imagen y pones el hipervínculo hacia el foro.

Para rizar el rizo se me antojó a ultima hora modificar la tabla del segundo grupo de opciones, para añadir una fila más y en ella poner los créditos, es decir, para Gabrielle Rigon y una servidora. ¿Como se hace eso? Verás que sencillo, y así no se descuadrará el diseño. Clic en la tabla para seleccionarla:

En el inspector de propiedades vemos que en filas hay 5 pues es tan sencillo como poner 6

¡Ya está! podemos añadir el nombre de cada uno, en tamaño de encabezado 6 y con los hipervínculos respectivos sin alterar el diseño final en absoluto.

Ahora guardamos nuestra pagina Archivo - Guardar como y la nombras rollover.html, luego clic en F12 y la visualizamos en el navegador y esto es lo que veremos:

Mi página Web