sábado, 23 de noviembre de 2013

VIII. ORGANIZANDO CONTENIDO WEB

VIII. ORGANIZANDO CONTENIDO WEB

Una forma muy organizada para presentar una información que contiene grandes puntos a tratar, o un material educativo, etc., es mediante marcos e hipervínculos.

¿Que es un marco? Es una página que contiene otras páginas, y se unen para dar esa buena presentación.


8.1 MARCOS

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Un ejemplo de página html con marcos es ésta:

marcos

Que contiene todo el material visto en el curso "Computación Básica". (dirección web: http://vianey-neysmall.webcindario.com)

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. 

Por ejemplo:

El marco superior, es una página llamada "encabezado.html".
El marco izquierdo, es una página llamada "temas.html"
El marco derecho, es una página llamada "contenio.html"

El marco superior contiene datos de la dependencia ó lugar en donde se creó la página.

El marco izquierdo contiene los temas contenidos en el material publicado.

El marco derecho es una página en blanco en donde se mostrará la información que se le de clic del marco izquierdo.


8.1.1¿CÓMO CREAR UN MARCO?

ACTIVIDAD 8: Elige un tema a tratar en una página web y sigue los pasos que se muestran para crear un marco

1. Abrir un archivo nuevo HTML

html nuevo


2. Inserta un marco superior: "Insertar" --> "HTML" --> "Marcos" --> "Superior"

insertar marco


3. Escribe un nombre al marco superior

nombre marco


4. Inserta un marco a la izquierda: "Insertar" --> "HTML" --> "Marcos" --> "Izquierda"

marco izquierda


5. Escribe un nombre al marco izquierdo

nombre marco izquierdo


6. Guarda todas las páginas unidas: "Archivo" --> "Guardar todo".

guardar todo


7. Guárdalo con el nombre "index" (index.html es el nombre que debe llevar la página que unirá todas las páginas)

index


8. Ahora guarda el resto de las páginas unidas, el nombre de archivos HTML contenidos te los pedirá en seguida de guardar "index.html", y te indicará con con líneas punteadas, cual página se está guardando:

contenido

temas

encabezado


9. Da clic a uno de los bordes que separan las páginas, y especifica el ancho preferido

bordes



10. Al dar clic en cada página, se muestra su nombre HTML correspondiente:

tema 

tema 

tema


11. Ahora hay que escribir el título de cada página:

titulotitulo titulo


12. Ahora comenzar a editar las páginas (Marco superior, descripcion breve a tratar la página. Marco izquierdo temas que comprenderá la página)

editar

editar


13. Para tener más visibilidad en el marco izquierdo (temas), es necesario insertar una barra de desplazamiento.

Para ello, da clic sobre uno de los bordes que dividen las páginas, y da clic en "Dividir", para tener vista de diseño y cógido a la vez.

Ubica la línea que corresponde al marco izquierdo (temas), y cambia de Scrolling="No" , a Scrolling ="Si"

borde



De modo que la línea quede así:

codigo

Guarda cambios, actualiza o vuelve a cargar la página, y ahora se muestra la barra de desplazamiento, que ahora te permite ver todo el contenido.

desplazamiento

No hay comentarios:

Publicar un comentario