Métodos
Avanzados
/ Ejemplos Simples
Ejemplos Simples
(Simple Examples)
Comencemos aprendiendo cómo páginas que usan marcos son construídos primeramente al observar unos cuantos simples pero esquemáticos ejemplos. Mostraremos el código de HTML que se utiliza para crear el conjunto de marcos en cada caso y subir los archivos dentro de varios marcos. La mayoría de éste código se muestra en letra para separa notáblemente (azúl) blue el código del resto de la discusión. En algunos casos, porciones del HTML son mostradas en letra (rojo) red para enfatizar diferencias importantes en dos secciones de HTML que estamos comparando. También ilustraremos el conjunto de marcos que crea éste código al mostrarte los marcos en una ventana nueva del navegador que abrimos con Javascript.
No te confundas por nuestro uso de ventanas nuevas para ilustrar el conjunto de marcos. No necesitas usar una ventana nueva de navegador para usar marcos. Solo lo abrimos los conjuntos de ejemplos de marcos en ventanas nuevas aquí:
|
1) |
y así puedes observar simultáneamente el conjunto de marcos que crea el código, y |
|
2) |
para evitar la posibilidad de confusión que resultatría si fuecemos a abrir uno o mas conjuntos de marcos dentro de los marcos actualmente en uso por webTeacher. |
También nota que abrimos las nuevas ventanas con Javascript aquí en vez de con HTML simplemente porque deseamos que las ventanas nuevas tengan un mínimo de adornos de navegación (ningún punto teniendo botones ni menús adicionales interfiriendo) y porque queremos controlar el tamaño de las ventanas nuevas. Mas tarde hablaremos sobre cómo el tamaño de un conjunto de marcos se relaciona al tamaño de la ventana conteniéndo ese conjunto de marcos.
Conjuntos de Marcos Bien Simples - Dos Filas o
Dos Columnas
(Very Simple Frame Sets - Two Rows or Two
Columns)
Dos Filas - Vamos a considerar los marcos del Example 1.Este es un conjunto de marcos con dos filas: el marco superior toma hasta un 20% del espacio vertical disponible y el marco inferior toma hasta un 80% del espacio vertical disponible.
El código HTML usado para crear éste primer conjunto de marcos es:
|
<frameset rows="20%,80%">
|
Dos Columnas - Tal como en nuestro segundo ejemplo, aquí hay un conjunto de marcos con dos columnas: Example 2. El marco izquierdo toma hasta un 20% del espacio horizontal disponible, y e4l marco derecho toma hasta un 80% del espacio horizontal disponible.
El código HTML usado para crear éste segundo conjunto de marcos es:
|
<frameset cols="20%,80%">
|
El texto en rojo (red), como mensionamos nanteriorments, se usa aquí para indicar la única diferencia en el código HTML para éstos dos ejemplos.
Las cosas más importantes de reconocer en éstos ejemplos son:
El código para crear un conjunto de marcos está encerrado por la etiqueta frameset. <frameset> marca el comienzo del conjunto y </frameset> marca el final.
Debe existir al menos un atributo de ésta etiqueta para especificar la "geometría" del conjunto del marco. En ejemplo 1, el HTML indica que el conjunto de marcos consistirá de dos marcos de (filas) "row", ej., dos marcos con uno encima del otro. En el Ej. 2, el HTML indica que el conjunto de marcos consistirá de dos (columnas) de marcos "column" ej., con uno al lado del otro.El número de filas o columnas se indica por el número de valores que aparecen en la lista de columna-delimitada después de los atributos de o las (filas) rows or (columnas) cols de la etiqueta del conjunto de etiqueta.
Dentro de la etiqueta del conjunto de marcos existe una etiqueta de (marco) frame para cada marco del conjunto de marcos. Cada etiqueta de marco tiene un atributo src que especifica el archivo que va a ser subido dentro del marco. La primera etiqueta de marco va con el primer (mas superior o mas izquierda) marco en el conjunto. La próxima etiqueta va con el próximo (mas bajo o mas a la derecha) marco en el conjunto, etc.
El conjunto de marcos y las etiquetas de los marcos pueda que tengan atributos adicionales que te permitirán entallar aún mas un conjunto de marcos y/o codo del conjunto de marcos con funcionamiento aditional. Comenzamos nuestra discusión considerando los más mínimos atributos que éstas etiquetas deben de tener; vamos a otras características mas adetante.
En estos ejemplos file1.html y file2.html son archivos muy simples; cada uno solo tiene una pieza pequeña de texto sobre un color sólido de fondo:
|
|
Aquí está mostrado file1.html solo en una ventana, y aquí está file2.html mostrado solo. Escojimos éstos archivos simples para subirlos dentro del conjunto de marcos porque deseábamos enfatizar la estructura del conjunto de marcos y cómo creárlo, sin ningunos hechos obscurecidos con material particular en los archivos que están dentro de los dos marcos.
De hecho, puedes entrar en cualquier marco de archivo (aún un conjunto completo de marcos), cualquier archivo de imagen, o cualquier otro tipo de archivo mostrado enlínea en una págin a de la red. Por supuesto, las páginas pueden ser o archivos locales o de cualquier lugar en la red, entre tanto son especificadas con el pasillo local correcto o el URL.
Ejemplo 1 Reverso
Probablemente has adivinado que si deseamos intercambiar los marcos de nuestro primer
ejemplo, todo lo que necesitas hacer es invertir los valores en la lista asignada a rows(filas):
|
<frameset rows="80%,20%">
|
He aquí el conjunto del marco nuevo que éste código modificado creó: Example 3.
Empero, archivo file1.html está en un marco grande mientras que file2.html está en el marco pequeño. Y si deseamos intercambiar los archivos así como los dos marcos para obtener Example 3a, debe estar claro lo que debemos de hacer:
|
<frameset rows="80%,20%"> |