Autor Tema: Tutorial creación página web con frames y tablas.  (Leído 41283 veces)

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Tutorial creación página web con frames y tablas.
« en: 23 de Marzo de 2006, 12:12:01 am »
Introducción y creación del index.

No vamos a entrar en explicaciones muy técnicas , intentaremos ver la forma de realizar una web simple con frames y tablas , a partir de aquí cada uno puede ir experimentando y probando cosas , lo vamos a ver en código HTML (Hyper Text Markup Language) que es la base de la creación de páginas web.

Hablando claro , los frames son divisiones que se usan en la  web de tal forma que cuando accedemos a una nueva página dentro de ésta solo recargamos el frame que incorpora el nuevo contenido ; así lo que vamos a ver es como crear una web en tres partes , lo que sería la cabecera , un menú lateral y la parte donde iría el cuerpo de la página y que sería la única que se actualizaría al cargar un contenido.

Las tablas nos servirían para hacer divisiones dentro de los frames , por ejemplo para colocar imágenes dentro.

Quizás la parte más complicada sea la de tener que crear una página por frame además del index , en el código de este último incluiríamos la llamada a las otras páginas ... los frames.

En el ejemplo que vamos a ver he decidido hacer tres frames , uno en la parte superior para el encabezado de página  y dos más debajo de este , el menú lateral y el espacio sobrante para el contenido.

Hay que aprender algo de HTML para conocer las etiquetas y su funcionamiento , además de sus posibilidades , aquí sólo veremos las que vamos a usar.

Creación del index.

Abrimos el programa que usemos de creación de páginas web o mismamente con el bloc de notas.

Escribimos lo siguiente:

Código: [Seleccionar]
<html>
<head>
<title>Mi p&aacute;gina web</title>
<head>
<frameset rows="20%,*" border="0" frameborder="0" framespacing="0">
<frame src="encabezado.html">
<frameset cols="20%,*,5%" border="0" frameborder="0" framespacing="0">
<frame src="menu.html">
<frame src="cuerpo.html" name="contenedor">
</frameset>
</frameset>
</html>

Véamos que es cada cosa:

La etiqueta <html> abre el documento e indica que la página que estamos creando está (estará) en HTML ... esta etiqueta abre el documento y lo cierra al final , las etiquetas se cierran con la barra inclinada , de este modo </html>.

La etiqueta <head> es el encabezado del documento , en ella se incluyen otra etiquetas como <title> o las meta tags (las meta las veremos en otro artículo) , se cierra ante de empezar con el cuerpo del documento .. </head>

En la etiqueta <title> pondríamos el título de la página web y cerraríamos a continuación con </title>.

Aquí no habría etiqueta <body> como en una página HTML normal , después del HEAD pasaríamos directamente a los frames.

<frameset rows="20%,*" border="0" frameborder="0" y framespacing="0">

Cuando declaramos la etiqueta frameset rows hablamos de filas , he puesto dos filas en el ejemplo divididas por porcentaje  , la primera fila es la de arriba y le asigno un espacio del 20% de la página que se mostrará en pantalla ... separamos los espacios asignados con comas y a la segunda fila le asigno el resto de espacio con un asterisco para que ocupe todo el espacio disponible.

Se puede asignar por píxeles , por ejemplo - rows="200,600" , pero entonces la página no se vería bien a distintas resoluciones de pantalla.

Dentro de esta etiqueta tenemos más datos :

border="0" - indica el grosor del borde en píxeles para todo el frameset, en el ejemplo 0.
frameborder="0" - sirve para mostrar o no el borde de los frames , se aplica yes para mostrarlo y no ó 0 para no mostrarlo.
framespacing="0" - determina la anchura de la línea de separación de los bordes , como no quiero mostrar esos bordes también le he puesto 0.

La siguiente etiqueta que vemos es frame src="encabezado.html" ... frame src hace la llamada a la página que va a ocupar el encabezado de la web , para ser original la he llamado encabezado.html

Ahora configuramos la fila de debajo , <frameset cols="20%,*,5%" border="0" frameborder="0" framespacing="0">

frameset cols divide la página en columnas , al igual que con las filas lo ideal es hacerlo en porcentaje , 20% para la fila de la izquierda donde va a ir el menú , 5% para la fila de la derecha , donde no vamos a poner nada , pero podríamos creando una nueva página , por ejemplo otro menú ... y el asterisco en el centro para que el cuerpo de la página acoja todo el espacio restante.

border , frameborder y framespacing los hemos visto hace un momento , exactamente igual aquí.

Vemos ahora <frame src="menu.html"> y  <frame src="cuerpo.html" name="contenedor"> , habíamos dicho que en la parte de la derecha no íbamos a poner nada , por eso no hay un tercer frame src.

La primera hace referencia al menu (menu.html) y la segunda al cuerpo de la página (cuerpo.html) , ésta última lleva un añadido , name="contenedor"  , éste añadido lo que hace nombrar el espacio para identificarlo y poder abrir ahí los enlaces que queramos de nuestro menú .... ver la creación del menú para entenderlo mejor.

Guardamos ésta página como index.html

Esto se conoce como frameset y el aspecto que presentará la página será el siguiente:



Crearemos también para ésta web varias carpetas , una carpeta llamada archivos , otra imagenes y por último una carpeta otros , usaremos estas carpetas para guardar el distinto contenido de la web.

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Re: Tutorial creación página web con frames y tablas.
« Respuesta #1 en: 23 de Marzo de 2006, 12:12:21 am »
Creación de las diferentes páginas y su asignación a cada frame.

Creamos el encabezado , en el ejemplo usaremos un logo que aparecerá en la parte superior de la web.

En el editor que estemos usando escribimos lo siguiente...

Código: [Seleccionar]
<p align="center"><img src="otros/logo.jpg">
La etiqueta <p> indica un párrafo nuevo , como ésta página no va a tener nada más no sería necesario indicar un párrafo nuevo , lo hacemos para completarlo con align="center" , que indica que lo que pongamos a continuación debe estar centrado en el frame , podemos alinear a la derecha o a la izquierda si queremos  , en esos casos habría que sustituir center por right (derecha) o left (izquierda)

Nuestra imágen que previamente habremos guardado en la carpeta otros se llama logo.jpg , con <img src ="otros/logo.jpg"> lo que hacemos en localizarla y ubicarla en su sitio.

La página la guardamos como encabezado.html

Creamos un documento nuevo y escribimos lo siguiente:

Código: [Seleccionar]
<p align="left"><a href="principal.html" target="contenedor">Principal</a>
<br><a href="imagenes.html" target="contenedor">Im&aacute;genes</a>
<br><a href="descargas.html" target="contenedor">Descargas</a>
<br><a href="enlaces.html" target="contenedor">Enlaces</a>
<br><a href="index.html" target="_top">Index</a>

Ésta es la página que hará de menú  , en este caso ajustamos el texto a la izquierda.

<a href=""> sirve para colocar un enlace , dentro de las comillas va la dirección de la página que queremos enlazar , en nuestro caso como son enlaces internos simplemente ponemos el nombre , ya que se encuentran todos dentro del mismo directorio raiz. Si esas páginas estuviesen dentro de alguna carpeta habría que añadir el nombre de la carpeta y separarlo del nombre de la página con la barra inclinada , por ejemplo <a href="carpeta/pagina.html">.

Dentro de esta etiqueta vemos el atributo target ,  este atributo indica donde debe abrirse el enlace.

_self abriría la página en donde nos encontramos.
_blank abriría la página en una nueva ventana.
_top sirve para abrir la página a pantalla completa , esto viene bien para cuando el enlace es a una página externa , ya que si no se abriría dentro de uno de nuestros frames y no quedaría nada bien.
contenedor es lo que vimos antes , al haber nombrado el cuerpo de la página como contenedor cualquier enlace al que asignemos este atributo se abrirá ahí.

La etiqueta se cierra con </a> .. y entre la etiqueta de apertura y la de cierre ponemos el nombre que se visualizará en pantalla.

He seleccionado _top en el enlace al index para que recargue la página completa , los demás se abrirán en el cuerpo de la web.

En el menú tenemos :

Principal : por poner algo , esta es una página que he creado con contenido  , evidentemente cada uno pone lo que quiera ... luego la veremos más en profundidad.
Imágenes : una página con varias imágenes de ejemplo.
Descargas : ésta página contiene un par de enlaces de muestra para descargar software.
Enlaces : La típica página donde uno pone los enlaces de las páginas de los amigos o enlaces de interés ... nosotros hemos como ejemplo el segundo caso.
Index : Para volver al principio de la web , a la página de bienvenida.

Guardamos esta como menu.html

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Re: Tutorial creación página web con frames y tablas.
« Respuesta #2 en: 23 de Marzo de 2006, 12:12:44 am »
Crear una página.

Aquí no vamos a ver todo el código de la página de ejemplo porque sería muy extenso , veremos algunas etiquetas y su funcionamiento.

<hX></h> Donde la X sería un número del 1 al 7 , indica el tamaño de la letra , la usaremos para resaltar una parte del texto o para poner un título dentro del contenido de la página , en el ejemplo el título está en <h3>

<p> Recordamos que ésta indicaba un nuevo párrafo y que no necesita cierre.
<br> Indica un salto de línea , tampoco necesita cierre.
<b> El texto escrito aparece en negrita y se cierra con </b>
<i> El texto aparece en itálica y se cierra con </i>
<u> Para subrayar el texto , se cierra con </u>
<s> Para escribir texto tachado , se cierra con </s>

Viendo algunos códigos fuente se pueden ver cosas como &aacute; o &ntilde; ... estos carecteres extraños se utilizan para poner tildes a las palabras o escribir letras o símbolos de tal forma que se visualicen correctamente en el navegador independiente de la nacionalidad del visitante.

Así &aacute; sería una A tildada ( á ) ... cambiando la primera A por cualquier otra vocal conseguiríamos esa vocal con tilde , en caso de mayúsculas simplemente la pondríamos en mayúsculas (&Aacute;) .. &ntilde; es el equivalente a la ñ.

Una vez listo guardamos la página con el nombre que queramos , en éste ejemplo principal.html

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Re: Tutorial creación página web con frames y tablas.
« Respuesta #3 en: 23 de Marzo de 2006, 12:13:04 am »
Página de Enlaces.

En esta página simplemente pondremos el código correspondiente a las webs que queremos enlazar.

Por ejemplo:

Código: [Seleccionar]
<p><a href="http://www.daboweb.com">Daboweb</a> ; Seguridad inform&aacute;tica , foros , comunidad.
<p><a href="http://www.destroyerweb.com" target="_blank">Destroyerweb</a> ; Manuales , tutoriales , guias , antivirus online.
<p><a href="http://www.windowsfacil.com" target="_blank">Windowsfacil</a> ; aprende Windows , p&aacute;gina de manuales para principiantes.
<p><a href="http://www.dv-d.com" target="_self" title="DV-D">Daboweb Video Digital</a> ; Manuales de Video Digital.

Vemos las etiquetas <p> antes de cada enlace para que aparezcan en párrafos distintos , también podríamos usar <br> para saltos de línea.

El funcionamiento de las etiquetas es igual que en el menú  , donde pusimos los enlaces internos a las distintas páginas de nuestro sitio.

Vemos que en el enlace a Daboweb no hay asignado un target , eso hará que la página se abra dentro del frame.

Destroyerweb y Windowsfácil se abrirían en ventanas nuevas por el target _blank.

Y Daboweb Video Digital abriría en el mismo frame por el atributo _self , además vemos que hay otro atributo adicional , title="" , dentro de las comillas ponemos una breve descripción del enlace que visitaríamos al pinchar y que sería visible al situar el cursor del ratón encima.

Esta página la guardamos como enlaces.html

La página de descargas funciona exactamente igual que esta de enlaces.

En el caso de tener un archivo alojado en tu servidor que quieras que se decargue la gente tendrías que incluir la ruta .. por ejemplo <a href="descargas/archivo.extension" title="click para descargar">descarga loquesea</a>.

La crearíamos y la guardaríamos como descargas.html

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Re: Tutorial creación página web con frames y tablas.
« Respuesta #4 en: 23 de Marzo de 2006, 12:13:32 am »
Página con imágenes , trabajando con tablas.

Ahora veremos un poco más de miga , en esta página incluiremos algunas imágenes pero las vamos a meter dentro de una tabla para que queden ordenaditas.

Para crear marcos usamos el siguiente código.

Código: [Seleccionar]
<p align="center"><table border="1">
<tr>
   <td><img src="imagenes/yami.jpg" title="Yami Yugi"></td>
   <td><img src="imagenes/kaiba.jpg" title="Seto Kaiba"></td>
</tr>
<tr>
   <td><img src="imagenes/joey.jpg" title="Joey Wheeler"></td>
   <td><img src="imagenes/tea.jpg" title="Tea Gardner"></td>
</tr>

El del principio ya lo hemos visto anteriormente , sirve para centrar la tabla , con <table border="1"> indicamos un borde de 1 píxel.

La etiqueta para las imágenes también la vimos anteriormente , aquí observamos que las imágenes están subidas a la carpeta de imágenes , el añadido title sirve para colocar un texto , al situar el ratón encima de la imágen podremos leer el texto y saber que estamos viendo.

La etiqueta <tr> indica una fila mientras que <td> indica las celdas , tenemos dos filas y dos celdas , ambas etiquetas se cierran , </td> y </tr> , debemos cerrar una celda antes de abrir otra y lo mismo con las filas.

Esta la guardamos como imagenes.html

Desconectado Liamngls

  • Administrator
  • *
  • Mensajes: 15645
    • Manuales-e
Re: Tutorial creación página web con frames y tablas.
« Respuesta #5 en: 23 de Marzo de 2006, 12:13:59 am »
Consideraciones.

Debemos cerrar las etiquetas  que requieran cierre en el mismo orden que han sido abiertas.

Las páginas con frames no son indexadas correctamente por los buscadores , algo muy a tener en cuenta a la hora de trabajar con frames.

El código html es muy extenso , es recomendable buscar un buen tutorial donde aprender más sobre el código html , cambiar la fuente de texto , el color de fondo de la página o tabla , etc

Revisa siempre que has puesto bien las etiquetas , las comillas , los atributos , un error en el código descolocará todo el trabajo realizado y encontrarlo se puede hacer tedioso , usa en todo caso un buen editor que coloree el código y te resultará bastante más sencillo.

Esta página de muestra es solo orientativa , para dar una base sobre la que trabajar , cada uno puede usar los nombres que quiera , incluir tablas en páginas de texto , imágenes entre párrafos , etc.

Puedes ver la página de ejemplo pinchando aquí :-)

 

Aviso Legal | Política de Privacidad | Política de Cookies

el contenido de la web se rige bajo licencia
Creative Commons License