Ha llegado el momento de añadir elementos activos a la web. Vamos a sustituir el marcador de posición de imagen por una imagen. Para ello hacemos doble clic sobre el marcador de imagen y en la ventana emergente buscamos la imagen logoprincipal.jpg y aceptamos.

Clic sobre la segunda tabla, en su interior, y desde el inspector de propiedades ponemos como fondo de tabla cabecera.jpg. Esto nos permitirá añadir contenido a esta tabla en un futuro, bien sea de texto o de pequeñas imágenes, cosa que si insertásemos la imagen en la tabla no podríamos hacer.

Repetimos el paso anterior pero para la tabla 4 e insertamos el gráfico pie.jpg. Nuestra página web ya va tomando forma:

Vamos ahora a añadir el iframe en la tabla 3 en su zona derecha. Esto ya lo hemos aprendido a hacer en un tutorial anterior de modo que sólo daré los valores de la etiqueta <iframe> en el inspector de etiquetas:

Eliminamos los retornos de carro que hayamos añadido antes, y hacemos clic en el iframe para seleccionarlo, y desde el inspector de propiedades hacemos clic en el botón de centrado para que quede en el centro del hueco reservado para él. Como anotación añadiré que en la carpeta de floristería están todos los html auxiliares que serían los hipotéticos hipervínculos de las distintas opciones que vamos a configurar porque ya se da por sabida esta parte, pero recordad que antes de crear el iframe en vuestros futuros sitios web, deberéis tener creadas con anterioridad las páginas que se visualizarán en el interior de este marco.

Añadiremos ahora el menú de navegación de la izquierda. En esta ocasión usaré una tabla para ubicarlo, y daré formato al texto en concreto. Más adelante, cuando sepamos usar las hojas de estilo esta parte cambiará un poco.

Clic en la celda de la izquierda (color anaranjado) y en el inspector de propiedades modificamos la alineación vertical:

Nota como el puntero del ratón se sitúa ahora en la parte superior izquierda de esta celda. Insertamos una tabla de 8 filas x 1 columna, 120 píxeles de ancho, la alineamos al centro y formatearemos las filas de la siguiente manera:

Fila 1 - 20 px de alto. Fila 2 - 40 px de alto. Resto de filas 5 px de alto.

Dejamos la primera fila libre, y a partir de la segunda añadimos el menú de opciones según maqueta.

A Productos le aplicamos formato de párrafo. Al resto de opciones le aplicamos estilo 2. (Ver imagen):

Se verá ahora así:

Vamos a añadir un hipervínculo a la primera opción, la seleccionamos para copiar y en el inspector de propiedades configuramos como sigue:

Mapa de Imágenes: Como paso final vamos a poner los hipervínculos en las opciones que figuran en la imagen de la cabecera de la web. Para ello necesitaremos activar si no lo está la opción mapa de imágenes - Ver - Ayudas visuales - Mapa de imágenes.

Si hacemos clic en la imagen del logotipo de la página veremos en el inspector de propiedades la opción de mapa de imagen, donde podremos seleccionar la forma que mejor nos convenga. En mi caso el rectángulo.

Proporcionamos un nombre al mapa de imágenes que vamos a crear, en este caso lo hemos llamado menu y hemos seleccionado la forma rectangular:

Trazamos un rectángulo en la primera opción del menú:

Vemos que el inspector de propiedades cambia y rellenamos como se ve en la imgen. Buscamos el html que corresponde a la opción ¿quien? y la apertura la redireccionaremos al iframe, de modo que en Destino ponemos el nombre del iframe, marco. Repetimos la misma operación para el resto de las opciones.

Las páginas de los enlaces ya están modificadas en cuanto al coloreado de la barra de scroll, sin embargo el de esta página, te lo dejo a tí y así probaremos que tal asimilas lo aprendido hasta ahora.

Guardamos nuestra página como index.html  dentro de la carpeta floristería y así se verá en el navegador:

Mi página Web