Vamos a utilizar las imágenes y también parte del documento html que se generó en el proceso de creación correspondiente a la parte de PSP X. Por tanto, vamos a tener la precaución de colocar todo ello en la carpeta que ahora vamos a utilizar para maquetar nuestro documento.

Primeramente vamos a crear la página que se verá dentro del marco iframe. Por tanto abriremos una página nueva, le pondremos como color de fondo el color Hex={00,00,24} o lo que es lo mismo #000024. Cambiaremos también el color de las barras de Scroll, para ello puedes seguir este sencillisimo tutorial realizado para dreamweaver pero que es igualmente aplicable en este editor. El color de la barra tendrá que hacer juego con la página por tanto como base le pondréis el mismo color de fondo. Añadís un texto de prueba y guardamos como indice.html.

Hechos estos preliminares, vamos a confeccionar el index de nuestro layout.

1.- Abrimos una página nueva. La inundamos del color #000024 y añadimos el script para colorear la barra de scroll que hemos hecho ya para el índice.

2.- Como detalles adicionales modificamos el título de la página y podemos añadir sonido si es nuestro gusto.

3.- Insertamos una tabla con una fila y dos columnas. Modificamos la tabla así:

Hacemos clic en cada celda de la tabla con el botón derecho del ratón, propiedades de celda y modificamos el ancho de la celda al 50% y guardamos la página en la misma carpeta donde tenemos las imagenes.

Llega ahora el momento de abrir en el frontpage el documento html que se creó en el PSP X. Vamos a la vista de código y señalamos para copiar todo lo comprendido entre las etiquetas <!-- Begin Table --> y <!-- End Table -->

Continuamos ahora en el documento con la tabla. Hacemos clic en la celda derecha para marcarla y vamos a la vista de código.

Vamos a la vista de código y justo donde esta el cursor parpadeando (fijaros en la imagen inferior) pegamos el código que hemos copiado del anterior documento.

Si ahora vamos a vista de diseño, esto es lo que tendremos en este momento:

Ya tenemos casi el 50% del trabajo realizado. Vamos ahora a incluir el Iframe en la celda izquierda de la tabla. Clic en ella por tanto con el botón izquierdo del ratón para señalarla. En el menú elegimos Insertar - Marco flotante.

Como vemos en la siguiente imagen, se ha añadido el marco flotante o iframe y nos da dos opciones: Establecer página inicial y Nueva página. Elegiremos la primera.

Y en la ventana emergente buscaremos el documento indice.html que habíamos creado en un comienzo.

La página se verá ahora así:

Si hacemos clic en las esquinas con el ratón, aparecen los nodos de deformación, bien podemos tirar de ellos hasta ajustar el marco a nuestro gusto o bien hacemos clic con el botón derecho del ratón y elegimos en la ventana emergente, propiedades de marco flotante y modificamos los valores marcados en esta imagen:

Ya casi terminamos, tendremos que tener creados tantos documentos html como opciones de menú haya, en este caso estrellas. Para probar la página yo he creado solo 2 con textos diferentes y he alternado los hipervínculos. Vamos a ver como se hace eso.

Clic en la primera estrella. Clic en el icono de hipervínculo y en la ventana emergente buscamos indice.html, de modo que la estrella primera siempre nos llevará a este documento. Clic en Marco de destino y en la ventana emergente elegimos I1 que será el nombre del iframe (es el que trae por defecto si no lo hemos cambiado nosotros) y aceptamos. Repetimos esta operación con todas las estrellas.

Y en principio, nuestro documento html ya estará maquetado. Ahora solo falta que vosotros pongáis de vuestra cosecha y hagáis con el layout una bonita página web con vuestros propios contenidos. Espero que el tutorial os haya resultado fácil y entretenido. Gracias por llegar hasta este punto conmigo. Déjame ver tu resultado en el foro de Frontpage. ¿De acuerdo?