Aula Macedonia

Artículos Varios

Artículo realizado por
David García "Gato".

Marcos para páginas Web

Hay mucha gente que tiene una página web en Internet y le encantaría poner todo tipo de chorraditas que la hagan más atractivas. El problema es que para hacer todas esas cosas se necesita o tener unos conocimientos importantes de HTML, Java y otros lenguajes similares, o tener un programa de edición de páginas web que cuesta una pasta. Voy a ver si puedo ayudar a todos aquellos que no poseen ni dinero ni conocimientos para hacer todos esos efectos especiales y voy a empezar explicando la forma de dividir su página en marcos (frames en ingles) sin necesidad de comprarse un caro programita o ir a un curso acelerado de HTML.

Aquí podrás encontrar el código HTML que creará los 8 tipos de marcos que, creo yo, más pueden interesarte. No te asustes al oír eso de "código html". Es MUY sencillo el usarlo correctamente y hacer tu página web un poco más flipante. Solo vas a necesitar una serie de herramientas que, estoy seguro, ya tendrás. Necesitas:

2.- El Bloc de Notas del Windows. O cualquier programa que edite texto, como el Edit del MS-DOS.

3.- Este sencillo manual :-)

¿Cómo se configura el marco?

La división de la página en marcos o frames no es más que una página pequeña que lee otras simultáneamente creándose así las divisiones. De éste modo tendremos dos páginas, o tres, o cuatro, leídas a la vez, mostrándose en diferentes posiciones.

Al crear la división de la pantalla debemos especificar el ancho de cada marco y los enlaces de cada uno a qué marco afectan. El ancho, largo, y grosor de las líneas de separación se especifican modificando una serie de valores que SIEMPRE están en el apartado frameset. En la tabla inferior verás para qué sirve cada valor:

Indica el "ancho" de un marco vertical (columna) <frameset cols="valor,*">

Indica el "ancho" de un marco horizontal (fila) <frameset rows="valor,*">

Con framespacing="X" se define el grosor de las barras de separación de los marcos. Ejemplo: <frameset framespacing="2" cols="valor,*">

Si al definir un marco ponemos, por ejemplo: <frameset framespacing="0" border="false" frameborder="0" rows="valor,valor"> no aparecerá línea separadora de los marcos. Esto lo indican los comandos border="false" y frameborder="0". El comando framespacing="0" define la separación entre los marcos. Usalo solo si deseas que existan una serie de pixels que separen un marco de otro.

Si al definir un marco ponemos, por ejemplo: <frame name="izquierda" scrolling="no" noresize target="superiord" src="fijo.htm">

scrolling="no"

noresize

que no se pueda modificar el ancho prefijado. Puedes usarlos por separado.

Donde pone "valor" es el ancho/largo de nuestro nuevo marco. Si lo ponemos como valor% indicará el tamaño respecto al 100% de la ventana completa. El valor * es comodín y le indicará al navegador que use el resto de la ventana, sea como sea el tamaño fijado del otro marco. Todos los marcos que aquí puedes encontrar tienen unos valores por defecto, que tú puedes modificar para ajustarlos a la página que le asignes.

¿Cómo se crea y edita la página de los marcos?

La cosa es muy sencilla y nada tiene que fallar si sigues los siguientes pasos. Recuerda que SOLO debes modificar de las secuencias de código HTML aquellas partes escritas en azul y negro. Estos son los pasos a seguir:

Abre el Bloc de Notas del Windows y copia directamente el código HTML que aparece en el tipo de marco que te gusta.

Modifica el nombre de las páginas que aparecen en cada marco por el de las tuyas. Los nombres que aparecen por defecto indican qué función tendrán en la página con marcos. De este modo "fija.htm" dice que será la página que hará la función de menú y modificará el aspecto de la "movil.htm". En Macedonia Magazine tenemos un marco fijo, el izquierdo, y uno móvil, el derecho. También puede que el nombre sea "derecha.htm", "izquierda.htm", "superior.htm", etc, según la posición del marco y su función.

Graba esta nueva página web como "nombre.htm" o "nombre.html". Si deseas que la página se cargue directamente con los frames llama al archivo como "index.htm" o "index.html".

Carga en tu navegador habitual la página para ver el aspecto que tiene.

Desde el Bloc de Notas ve modificando los anchos, largos, etc. para ajustar los marcos a tus páginas tal y como he explicado antes.

Escribe el código HTML (como etiqueta HTML o editando la web con el bloc de notas) en la página fija cuando te lo indique. Suele ser la página que debe permanecer fija.

Graba el resultado final y disfruta de tus marcos.

Se supone que no debe haber ningún problema. De todas formas puedes preguntarme cualquier duda que tengas por correo electrónico.

Código HTML de las páginas de marcos

CONTENIDO

El marco izquierdo (fijo) varia al derecho (variable=movil).

HTML de la fija:
<base target="principal">

HTML de marco:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Titulo de la página</title>
</head>
<frameset framespacing="2" cols="150,*">
<frame name="contenido" target="principal" src="fija.htm">
<frame name="principal" src="movil.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

ENCABEZADO:

El marco superior (fijo) varia el inferior (variable=movil).

HTML de la fija:
<base target="principal">

HTML de marco:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Titulo de la página</title>
</head>
<frameset rows="64,*">
<frame name="encabezado" scrolling="no" noresize target="principal" src="fija.htm">
<frame name="principal" src="movil.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

PIE DE PÁGINA:

El marco inferior (fijo) varia el superior (variable=movil).

HTML de la fija:
<base target="principal">

HTML de marco:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Título de la página</title>
</head>
<frameset rows="*,64">
<frame name="principal" src="movil.htm">
<frame name="pie" scrolling="no" noresize target="principal" src="fijo.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

DIVISIÓN HORIZONTAL EN DOS PÁGINAS INDEPENDIENTES:

SIN NADA EN LAS DOS PÁGINAS

HTML de marco:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Título de la página</title>
</head>
<frameset rows="*,*">
<frame name="superior" src="superior.htm">
<frame name="inferior" src="inferior.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

DIVISIÓN VERTICAL EN DOS PÁGINAS INDEPENDIENTES:

SIN NADA EN LAS DOS PÁGINAS

HTML de marco:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Título de la página</title>
</head>
<frameset cols="*,*">
<frame name="izquierdo" src="Página_izquierda.htm">
<frame name="derecho" src="Página_derecha.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

JERARQUÍA ANUDADA:

A la derecha la fija con contenidos, que varía el marco superior más específico, éste varía la página grande.

HTML del fijo:
<base target="superiord">

HTML del superior:
<base target="inferiord">

HTML de marco

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Título de página</title>
</head>
<frameset cols="150,*">
<frame name="izquierda" scrolling="no" noresize target="superiord" src="fijo.htm">
<frameset rows="25%,*">
<frame name="superiord" target="inferiord" src="marco_superior.htm">
<frame name="inferiord" src="movil.htm">
</frameset>
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

JERARQUÍA INFERIOR:

El marco superior modifica al intermedio, más específico, que modifica a su vez al grande inferior.

HTML de la superior:
<base target="intermedio">

HTML del intermedio:
<base target="inferior">

HTML de marco

<frame name="intermedio" target="inferior" src="marco_intermedio.htm">
<frame name="inferior" src="movil.htm">
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

CONTENIDO Y TITULAR:

El titulo superior varía el marco izquierdo de contenidos, que varía la página grande.

HTML del título superior:

HTML izquierdo:
<base target="principal">

HTML de marco

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="David Garcia (Macedonia Magazine)">
<title>Título de la página</title>
</head>
<frameset rows="64,*">
<frame name="titular" scrolling="no" noresize target="contenido" src="título_superior.htm">
<frameset cols="150,*">
<frame name="contenido" target="principal" src="marco_izquierdo.htm">
<frame name="principal" src="movil.htm">
</frameset>
<noframes>
<body>
Esta página usa marcos, pero su explorador no los admite.
</body>
</noframes>
</frameset>
</html>

Bueno, creo que ha habido suficientes. Si te fijas un poco podrás comprender la sencilla mecánica para hacer marcos por ti mismo que se adapten a todas tus necesidades.

[Aula Macedonia]

[Artículos Varios]

AULA MACEDONIA

MACEDONIA Magazine