Creación de marcos
El diseño profesional de una página web educativa implica definir adecuadamente la distribución de la información (textos, imágenes, sonidos, animaciones y videos) en el espacio de la pantalla, para ello, se requiere dividirla en secciones, cada sección tiene una función específica, por ejemplo se tiene la pantalla dividida en dos secciones rectangulares horizontalmente, la parte superior se ocupa para identificar la institución, la sección inferior es destinada a ubicar el índice y el contenido de la página web.
Al momento de dividir la pantalla en varias secciones, a cada una de ellas se debe asignar un nombre y colocarle un archivo web, tomando como referencia otro caso típico de dividir la pantalla en dos secciones verticales, la primera sección se le asigna el nombre de izquierda y se coloca el archivo web que contiene el índice de la página, continuando con la otra sección se define como derecha y ubicar en ella un archivo web de portada.
Un punto clave al dividir la pantalla en secciones consiste en observar que el archivo web que contiene la división en secciones de la pantalla, no tiene la etiqueta <body>, es decir, solamente se definen los marcos, sus nombres y los archivos web que se colocan en cada uno de ellos, por tal razón, éste archivo se abre cuando se accesa un sitio web y recibe el nombre de default.htm o index.htm
|
Metodología para crear los marcos |
A continuación se aplica la metodología de marcos para la división de la pantalla en secciones que permitan la distribución y visualización de las especialidades de la unidad académica de una manera eficiente en el navegador.
Actividad de aprendizaje 7 parte 1
Creación de marcos en una página web usando etiquetas html
Esta sección de la actividad de aprendizaje consiste en crear una división aplicando el tema de marcos (frameset), la columna de la izquierda ocupa 30% y la derecha 70%, esto con la finalidad de lograr una distribución y diseño del proyecto. La columna de la izquierda tiene al archivo indice.htm y en la derecha el archivo portada.htm, en la sección izquierda se indican las carreras que ofrece la escuela, además una presentación y un video de la unidad académica, al dar clic en una opción el contenido se observa en la sección derecha. La división de la pantalla en dos columnas por medio de la etiqueta (frameset), debe tener espaciamiento y borde entre los marcos.
El archivo que crea la división de la pantalla en dos columnas se llama default.htm, la primera columna ocupa el 30% de la pantalla, se asigna el nombre de izquierda, se indica que las barras de desplazamiento se coloquen automáticamente, no se permite que el usuario pueda modificar el tamaño del marco. La segunda columna tiene un tamaño 70% de la pantalla, con nombre derecha, las barras de desplazamiento se colocan automáticamente y no se permite cambiar el tamaño del marco (Help Adobe Dreamweaver, 2013).
En el video 58 se explica el procedimiento para crear un conjunto de marcos que divida la pantalla en dos columnas, en la sección izquierda se coloca el índice y en la derecha portada.
Video 58. Creación de marcos utilizando etiquetas html.
|
Creación de marcos en una página web usando etiquetas |
Al momento de probar el archivo indice.htm ubicado en la columna izquierda, al dar clic sobre un taller se debe observar el contenido de la especialidad en la sección derecha, para ello, hay que adecuar los vínculos en el archivo indice.htm como se indica en la siguiente sección.
Actividad de aprendizaje 7 parte 2
Direccionando los vínculos con el parámetro target
En esta parte de la actividad de aprendizaje se direccionan los enlaces de las especialidades para mostrar el contenido en el marco nombrado derecha, esta actualización se realiza en el archivo indice.htm, el procedimiento se describe en el video 59, cuando el usuario desee observar una especialidad dando clic sobre ella, el contenido de la carrera debe visualizarse en la columna derecha para ello se tiene que agregar el parámetro target="derecha" en cada uno de los vínculos del archivo indice.htm, así como en los enlaces del mapa de imagen.
Video 59. Direccionamiento de los vínculos del archivo indice.htm con el parámetro target.
|
Direccionando los vínculos con el parámetro target |