Sesión 3a2.- Definir páginas + apartados + menús.


| página base | página base + menú principal | página menú principal + logo + enlaces | diseño menú principal | páginas navegables |


En las sesiones 1 y 2 (búsquedas de recursos y preparación de materiales) hemos recopilado para nuestro ejemplo guía los siguientes materiales:

- Para el menú principal = [ menu1 - menu1x ] [ menu2 - menu2x ] [ menu3 - menu3x ] [ menu4 - menu4x ] [ menu5 - menu5x ] [ menu6 - menu6x ]

- CSS para estilo link-s; al descomprimir - site-link-codigo.zip - encontraréis dos ficheros:

El primero contiene lo mostrador abajo y debe estar copiado tal y como se ha descargado en la carpeta de trabajo en la cual desarrollamos nuestra actividad. El segundo contiene lo que también se muestra abajo y es un código que ha de copiarse entre -HEAD- y -/HEAD- como detallaremos más adelante.

-SITE.CSS-

   

-SITE-LINK.HTM-

   

En la sesión 3a1 vimos el código básico para una página web...volver arriba...

...a partir del cual comenzaremos nuestro desarrollo web. En primer lugar nos situamos en nuestra carpeta de trabajo y definimos la página web que será la base de todas las demás. Su Menú principal contará con los apartados : Presentación - Información - Actividades - Fuentes . Para ello insertamos en el código básico anterior, entre -<BODY>-y-</BODY>- , una tabla de cuatro columnas y cuatro filas encabezando cada columna con el icono elegido para cada opción, así...

Página base con tabla 4x4 e iconos menú principal:volver arriba...

   

...cuyo resultado es [ este ]. Seguimos poniendo en cada opción del menú principal su correspondiente sección y activamos nuestro modelo de estilo CSS para resaltar links (enlaces o vínculos). Colocamos entre -<HEAD>-y-</HEAD>- el código SITE-LINK.HTM indicado arriba y dejamos en nuestra carpeta de trabajo el fichero SITE.CSS tal como está o modificado si alguien así lo desea. También insertamos una línea en la parte alta de la tabla con una sola columna en la cual ponemos el logo de nuestra actividad y un texto introductorio ajustado al contenido que vamos a trabajar. El texto de cada apartado le enlazamos de momento a esta página principal que llamaremos -pagina1.htm- (en los nombres de ficheros -mejor con minúsculas- no conviene poner acentos, ñ_s...etc.) para que se ejecute en el mismo marco. El código quedaría así...

Página base con tabla 4x4 e iconos menú principal + logo + enlaces página principal:volver arriba...

   

...cuyo resultado es [ este ]. Este será el cuerpo principal de las páginas en las cuales pondremos nuestros contenidos, recursos y actividades bajo el esquema general ya trazado y que estamos grabando con el nombre -PAGINA1.HTM - . Tenemos cuatro páginas de trabajo ( Presentación - Información - Actividades - Fuentes ) para las cuales grabaremos ( - pagina1.htm - pagina2.htm - pagina3.htm - pagina4.htm - ) activando un efecto ON-OFF (activo - inactivo) con el juego de iconos que previamente hemos preparado. Para ello seguimos estos pasos:

1.- Grabamos la misma página principal 4 veces con 4 nombres distintos: PAGINA1.HTM - PAGINA2.HTM - PAGINA3.HTM - PAGINA4.HTM  ( Presentación - Información - Actividades - Fuentes ).

2.- En la página 1 cambiamos los enlaces del menú principal que tenemos apuntando a PAGINA1.HTM por el que les corresponde; páginas 1, 2, 3, y 4  (atención = mantener apertura en el mismo marco -_self-).

3.- En la página 1 tenemos enlazadas las cuatro páginas en el apartado anterior y hacemos los mismos enlaces (mismo marco) para los cuatro iconos del menú principal (en propiedades imagen señalamos el texto correspondiente para que aparezca cuando pasamos el ratón por encima ( Presentación - Información - Actividades - Fuentes ).

4.- Esta página 1 que ya tenemos definida y enlazada debidamente la guardamos de nuevo 4 veces con el nombre de nuestras cuatro páginas de trabajo; PAGINA1.HTM - PAGINA2.HTM - PAGINA3.HTM - PAGINA4.HTM  ( Presentación - Información - Actividades - Fuentes ).

Las cuatro páginas quedarán [ así ] de momento, cuyo código HTM será...

Diseño menú principal:volver arriba...

   

5.- Hacemos la diferenciación de cada página utilizando los iconos on-off , activo-inactivo. Para ello cargamos cada página y borramos el enlace que tiene a sí misma substituyendo el icono activo por su alternativo inactivo. Es decir, en la página 1 borramos los enlaces a la página 1 (ya la tenemos cargada) y cambiamos el icono del menú 1 activo por su alternativo inactivo. El texto del enlace a la página activa quitado anteriormente se puede resaltar en rojo para destacar que ya está cargada. Lo mismo hacemos en las demás páginas (2, 3 y 4).

PÁGINAS NAVEGABLES:volver arriba...

Con todo ello realizado, la navegación web por las cuatro páginas de trabajo será [ así ] , siendo los códigos de las 4 páginas de trabajo como siguen:


-PÁGINA1.HTM-: [ ver ]

   


-PÁGINA2.HTM-: [ ver ]

   


-PÁGINA3.HTM-: [ ver ]

   


-PÁGINA4.HTM-: [ ver ]

   


Los componentes de nuestras páginas de trabajo según este ejemplo son: