jueves, 23 de diciembre de 2010

Frames con XHTML

Hace unos días mi hija empezó a hacer cosas en el mundo del diseño Web y de momento tropezo con un pequeño problema.
Y si quiero ampliar el menú que pasa?
Tengo que reescribir 500 paginas?
Si ya se que hay plantillas (templates). Y que con Ps y Dw se pueden crear y que además las venden y regalan por la web. Pero cuando uno empieza a aprender algo, desde mi punto de vista es mejor hacerlo desde abajo y sigo pensando que es mejor hacer la primera web con un editor que con una aplicación.
Por otro lado es interesante aprender lo que se puede hacer con html y después ir incorporando javascript, php y otras cosas.
Bueno solo comentar, que se lo justo de HTML y nada de CSS, así que si alguien quiere aportar algo que lo haga. 
Bueno no me enrollo mas, a lo que vamos.

El siguiente ejemplo de frames genera una pantalla como esta:


La definición del documento principal (index.html) seria la siguiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE>frames en XHTML</HTML>
 </HEAD>
 
 <!-- Como podeis ver los tags <body> brillan -->
 <!-- por su ausencia -->
 
 <FRAMESET COLS="20%, 80%">
 <FRAME SRC="menu.html">
 <FRAME SRC="contenido.html" NAME="ventana_contenido">
 </FRAMESET>
 </HTML>

Bien ya tenemos el index.html hemos definido 2 columnas 20% y 80%, también podríamos haber definido una fija de 150 px y otra con "*" que seria el resto de la pantalla. Bien el siguiente codigo sera el del menú con las opciones, si alguna vez añadiéramos alguna opción mas no haría falta modificar otro archivo tan solo este. A este lo voy a llamar menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
   <title>Contenido</title>
</head>
<body>

<h3> Menu </h3> 
<ul> 
  <li> <a href="/op1.html" target="ventana_contenido"> 
                        Opción 1 </a> 
  <li> <a href="/op2.html" target="ventana_contenido"> 
                        Opción 2 </a> 
  <li> <a href="/op3.html" target="ventana_contenido"> 
                        Opción 3 </a> 
 </ul> 

</body> 
</html>


como veis el target="ventana_contenido", se define en el codigo anterior. asi pues cuando clikemos en Opción 1 nos cargara op1.html en "ventana_contenido".
Y Por ultimo para entender mejor como va esto un pequeño código de lo que podría ser la ventana inicial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
   <title>Contenido</title>
</head>
<body>

<h3>Esto es un pequeño tutorial sobre el uso de:</h3>
</br>
<h3>Frames con XHTML. Dedicado a: Mi hija Sofía y</h3>
</br>
<h3>Todos los lectores de Ubuntu y Algo Mas</h3>

</body> 
</html>

Lo mejor es que bajes todos los archivos de:
http://wingedbox.com/downloads/7746-web001-rar.rar
Y entenderás mejor el funcionamiento.

Y desde el siguiente enlace puedes bajar parte del proyecto web de mi hija, que incluye css, cabeceras y mas cosas para que puedas comprobar la utilidad de esta etiqueta así como el funcionamiento en una web "completa".

Para terminar aquí os dejo una tabla con las etiquetas para la creación de frames




Documento Marco <FRAMESET></FRAMESET>
(en lugar de <BODY>)
altura en filas <FRAMESET
ROWS=*></FRAMESET>
(* = tamaño relativo)
anchura en columnas <FRAMESET
COLS=,,,></FRAMESET>
(píxel ó %)
anchura del borde <FRAMESET BORDER=?>  
borde <FRAMESET
FRAMEBORDER="yes|no">
 
color del borde <FRAMESET
BORDERCOLOR="#$$$$$$">
 
Definición del marco <FRAME> (contenido de cada uno de los recuadros)
documento que se debe mostrar <FRAME SRC="URL">
 
denominación del frame <FRAME
NAME="***"|_blank|_self|
_parent|_top>
 
anchura de los márgenes <FRAME MARGINWIDTH=?> (margen izquierdo y derecho)
altura de los márgenes <FRAME MARGINHEIGHT=?> (margen superior e inferior)
barra de desplazamiento o no <FRAME
SCROLLING="YES|NO|AUTO">
 
no redimensionable <FRAME NORESIZE>  
borde <FRAME
FRAMEBORDER="yes|no">
 
color del borde <FRAME
BORDERCOLOR="#$$$$$$">
 
contenido en ausencia de marco <NOFRAMES></NOFRAMES>
(para navegadores antiguos)

1 comentario:

  1. Dios! muchas gracias! =)
    Ahora solo quedara retocarla yu subirla a un servidor!

    graciaaaaaaaaaaaas!

    ResponderEliminar