Asignatura: Elaboracin de Sitios web

Unidad II: Sitios web con Marcos

MARCOS
Un conjunto de marcos, contiene informacin sobre la cantidad de marcos que habr en la pgina, el tamao,
etc. Este conjunto, solo muestra la informacin, para mostrar los marcos.
Un marco una zona o rea de una pgina HTML, cada marco aloja una pgina web, que puede ser trabajada de
forma independiente.
Ejemplo para que lo vean ms claro:

Aqu vemos una pgina dividida en 3 marcos, es decir, 4 pginas HTML independientes.
Untitled document: s la pgina que contiene los 3 marcos.
Marco superior: Suele usarse, para poner el logo, cabeceras, etc...
Marco lateral: Sulen usarse, para insertar los botnes de men, etc...
Marco central: Contiene el contenido o destino del marco lateral, etc...
Para crear marcos, lo podemos hacer de dos formas distintas, pero primero vamos a hacer que sus bordes sean
1

visibles, eso nos facilitar la localizacin de los mismos, y trabajaremos mejor, para ello nos vamos a Ver >
Ayudas visuales > Bordes de marco

* Arrastrando desde los bordes superior o izquierdo (justo en el borde donde terminan las reglas) hacia el centro
del documento.

* Desde el panel de insertar > Diseo (Si no lo tenemos visible, lo hacemos desde Ventana > Insertar )

Es muy sencillo, tan solo en el desplegable, elegimos o bien uno de los conjuntos de marcos prediseados, o
bien los vamos elegiendo uno a uno segn queramos que formen nuestra pgina, si nos equivocamos o
queremos eliminar algn marco de nuestra pgina tan solo debemos arrastrarlo hacia el borde del mismo.

Vamos a crear una pgina con marcos, para verlo de forma prctica y trabajarlos juntos.
2

Abrimos un nuevo documento de HTML.

Y creamos los marcos, tal y como se v en la siguiente captura:

Ahora nos aseguramos de que la paleta de marcos est activada, para ello nos vamos a Ventana > Marcos

Activamos el Marco superior, en la paleta de marcos y ponemos nuestra imagen de logo y centramos, le damos
a la pgina el color de fondo #7BAB2D
Ahora activamos el Marco central, y ponemos nuestra imagen "Index" incluida en el material, tambin le damos
color de fondo #7BAB2D

Ahora vamos a activar el marco lateral, le damos a la pgina color de fondo #7BAB2D
Creamos una tabla:

Ahora vamos a configurar las celdas con dos colores #568000 y el color #669900 alternativamente en las celdas
de nuestra tabla, a la cabecera le damos el color #496C00
Ahora solo tenemos que darle los valores que nos interese, y adaptarla a nuestro marco.
Ahora activamos el marco inferior, le damos color de fondo a la pgina #7BAB2D e introducimos el banner del
foro enlazado, y pondremos los crditos de cada cual.
Podemos modificar algunas propiedades de los marcos desde la paleta propiedades, por ejemplo podemos darle
un borde y un color al mismo, darle una anchura y altura determinados, una cosa muy interesante es poder eligir
si vamos a poner o no barra de desplazamiento.

Ahora vamos a guardar nuestra pgina y los marcos que la componen, podemos hacerlo uno a uno Guardar
marco como o podemos guardar todo el conjunto de marcos para eso seleccionamos todo el conjunto de marcos
desde la paleta de marcos y hacemos Guardar conjunto de marcos como le damos un nombre, ya sabeis que si
va a ser la pgina principal de vuestra pgina web, debe llamarse index.
Para que nuestras pginas se vean en el marco central, tenemos que redireccionarlas al mismo, para ello, a la
hora de enlazar, ahora aparecen varias opciones ms con los nombres de nuestros marcos, en el destino que
podemos darle, en este caso, para que nos salgan en la ventana central, elegiremos como destino mainFrame
Nuestra pgina debera quedar as:

TRABAJANDO CON LOS MARCOS

Vamos a ver distintas formas de trabajar con marcos, la manera de insertar pginas ya confeccionadas dentro de
unos marcos especificos.
Primero vamos a abrir un nuevo documento de HTML, y creamos los marcos necesarios para que nos quede as:

Ahora vamos a insertar en cada uno de nuestros marcos, la pgina correspondiente al mismo, para ello nos
vamos a Archivo > Abrir en marco
Vamos a seguir un orden, el primero que vamos a vincular, es la cabecera, para ello, nos vamos a la ventan de
marcos y seleccionamos la cabecera (topframe), ahora nos vamos a Archivo > Abrir en marco

Seleccionamos el archivo LogoCabecera.html de la carpeta de material que te hemos proporcionado al principio

del tutorial.
Ahora vamos a desplazar el marco hacia abajo, para que as quede bien colocadito nuestro logo, para ello
aunque podemos hacerlo arrastrndolo hacia abajo, nosotros lo vamos a hacer de forma ms precisa, usando la
ventana de propiedades:
5

Tan solo tenemos que modificar el valor de la fila en si, como queremos un valor fijo, ese valor se lo vamos a
dar en pixeles, ya que si lo hiciramos con porcentaje o relativo, lo configuraramos de tal forma que ira en
relacin al tamao de la pgina web o al documento. Le vamos a dar un valor de 200 pixels.

Ahora vamos a fijarnos que en las propiedades de nuestro marco, sale configurado que no llevar barra de
desplazamiento, por defecto debera venir que no, pero no est de ms asegurarse, tambin podemos echar un
vistazo al resto de propiedades.
Ahora nos vamos al marco lateral izquierdo (leftFrame) y abrimos el archivo Menu.html, tal y como hemos
explicado con anterioridad, esta vez le vamos a dar un valor de 250 pixeles a la fila de nuestro marco. Tambin
nos aseguramos de que este marco no tenga barra de desplazamiento ni bordes.

Abrimos ahora el lateral derecho (rightFrame), abrimos el archivo Logolateral.html, y esta vez si que vamos a
darle un valor a la fila de nuestro marco relativo, configuramos as:

Y ahora arrastramos hacia el centro el borde de nuestro marco, hasta que tome el aspecto que nosotros
deseamos, ms o menos debera quedarnos as:

Abrimos ahora el archivo Creditos.html en el marco inferior (bottonframe), y configuramos la fila de nuestro
marco, con 175 pixels.
Ahora vamos a abrir el archivo Inicio.html en el marco interior (mainFrame), este marco, suele venir
predefinido con barra de desplazamiento, por lo que si nosotros no quisiramos que tuviese tendramos que
cambiarlo, en nuestro caso lo vamos a dejar as, con su barra de desplazamiento, y por norma general lo
haremos siempre as, porque es en la pgina donde ir, probablemente el contenido de nuestra web y por tanto
ser necesaria una barra de desplazamiento para poder mostrarlo al completo.
El resto de la pgina ya est configurada, los botones estn ya enlazados correctamente y he adjuntado una hoja
de estilos a nuestra web, que facilita el trabajo a la hora de modificaciones posteriores en la pgina, pero esto lo
veremos ms adelante bien a fondo.
MARCO FLOTANTE
Vamos a ver como crear un marco flotante con dreamweaver, aunque dreamweaver no dispone de una
herramienta especifica para crearlo y/o modificarlo, lo podemos hacer a travs del men insertar y luego
configurarlo a nuestro antojo desde el inspector de propiedades.
Abrimos la pgina html, que encontramos dentro de la carpeta del material.
Como vemos la pgina est formada por distintas imgenes, vamos a eliminar la imagen central ya que es ah
donde vamos a situar nuestro marco, para ello nos situamos encima de la imagen y damos click a suprimir:

Antes de eliminarla, nos fijaremos bien en las medidas de nuestra imagen.

Ahora le damos un color a nuestra pgina de acuerdo al fondo de nuestro diseo, en este caso #7E998A
Vamos a crear nuestro iframe, como ya hemos dicho anteriormente, dreamweaver, no tienen una herramienta
especfica de diseo, para crear un iframe, por lo que tenemos que crearlo directamente en el cdigo.
Ahora nos aseguramos que el cursor est en el recuadro donde estaba nuestra imagen, y nos vamos al men
Insertar > Html

Nos vamos ahora a la ventana de cdigo:

y buscamos ah la marca del editor:

Ah es donde debemos insertar nuestro cdigo del iframe, para ello, sin tocar nada de la pgina, nos vamos a
Insertar > Html > Iframe y seleccionamos marco flotante
Ya tenemos nuestro marco creado, ahora tan solo debemos modificarlo a nuestro gusto desde el inspector de
etiquetas.
Pasamos a la ventana de diseo y seleccionamos nuestro iframe:

Y con l seleccionado nos vamos a nuestro inspector de etiquetas:

Lo primero que haremos ser darle un nombre, para que ms adelante, podemos vincular nuestros archivos en
nuestro iframe.

Ahora configuramos nuestro iframe de la siguiente forma:

Align: La alineacin de nuestro iframe

Frameborder: Si queremos darle un borde especificamos aqu los pixeles que debe llevar es mismo.
Heigth: Altura que debe tener nuestro Iframe
Marginheight: Altura del margen del Iframe, si quisieramos darle un margen.
Marginwidth: Ancho del margen del Iframe.
Name: Nombre del Iframe
9

Scrolling: Si queremos que lleve barra desplazadora. Yo siempre pongo auto, para que solo se vea cuando la
pgina es superior al marco.
Src: Aqu seleccionamos desde el explorador de archivos, el documento que se abrir, al cargar la pgina por
primera vez.
Width: Ancho de nuestro Iframe
Con esto ya tenemos configurado nuestro iframe, para enlazar las pginas de nuesto men al iframe, tan solo
hay que darle como destino, el nombre de nuestro iframe que hayamos elegido, en mi caso Iframe, cuidado con
las mayusculas y minsculas que suelen ser la causa de muchos errores con los enlaces de los iframes.
Para terminar el ejercicio, debemos terminar la pgina y crear las restantes, hasta tener una web completa.

10