Beruflich Dokumente
Kultur Dokumente
5
Grado
Secundaria
I N D I C E
198
9
8 Marcos
207
I. E. P.
GUIA DE APRENDIZAJE N° 07
C
G
Tema: Introducción a las Tablas.
Contenidos:
PE
VIR
EN LU
G
A
DE G UAD Creación de tablas.
1975 Modificar tablas.
Componentes de las tablas
Las tablas están formadas por tres componentes básicos: filas (que organizan el espacio
horizontal), columnas (organizan el espacio vertical) y celdas (que son los contenedores
que se originan en las intersecciones de las filas y las columnas). Éste es un ejemplo de
tabla en Frontpage:
Como puedes ver, este tipo de estructura de tabla es muy similar a las que presentan
programas de hojas de cálculo (como Microsoft Excel) o de bases de datos (como
Microsoft Access).
Algunas consideraciones
Observa este ejemplo:
Dentro de cada una de las celdas puedes insertar texto o imágenes. Además, Frontpage
te permite de forma sencilla insertar y eliminar filas y columnas, dividir y combinar y
eliminar celdas, modificar las propiedades de tabla o de celdas y copiar y pegar celdas.
__________________________________________
Crear tablas
Con el uso de las tablas se pueden solventar las limitaciones que tiene el lenguaje
HTML con la ubicación de los elementos en la página. Todas las opciones que te
permitirán definir y modificar una tabla se encuentran en el Menú Tabla.
Procedimiento
Para crear una tabla, elige Menú Tabla > Insertar > Tabla. Te aparecerá un cuadro de
diálogo con las opciones que ofrece Frontpage para crear la tabla.
En esta parte debes introducir el número de filas y de columnas que tendrá la tabla. No
te preocupes si después de creada, te das cuenta de que necesitas más filas o columnas,
ya que Frontpage te permite insertar y eliminar filas y columnas.
2. Alineación
En este menú emergente puedes definir la posición que tendrá la tabla en la página.
Tienes cuatro posibles opciones: izquierda, centro, derecha o justificada.
3. Ancho de la tabla
Introduce una medida y elige si se expresa en píxeles o en porcentaje (100% ocupa todo
el ancho de la ventana del explorador).
Introduce la medida en píxeles del borde de la tabla. Si introduces el valor ‘0’, la tabla
tendrá un borde invisible.
Es el espacio que quedará entre los bordes de las celdas y su contenido. Introduce una
medida en píxeles.
Es el espacio que habrá alrededor de cada celda para separarla de las demás. Introduce
una medida en píxeles.
Esto es todo lo que Frontpage necesita saber para crear una tabla. Ahora ya puedes
empezar a introducir texto o imágenes en sus celdas de la misma forma que ya hemos
visto en lecciones anteriores. Siempre podrás modificar las propiedades de la tabla
después de haberla creado, ya que normalmente necesitarás añadir alguna fila o
columna, o combinar celdas, para que la tabla quede como quieras.
_________________________________________
__________________________________________
Crear una tabla
PRÁCTICA
2. Elige Menú Tabla > Insertar > Tabla. Rellena los campos del cuadro de diálogo con estos
valores: Filas: 4, Columnas: 2; Alineación: Predeterminado; Tamaño del borde: 0; Margen de
las celdas: 0; Espacio entre celdas: 3, Ancho de la tabla: 60%. Haz clic en Aceptar.
Modificar tablas
Cambiar las propiedades de una tabla
Para modificar una tabla, primeramente debes situar el cursor en cualquier celda de la
tabla. Después elige Menú Tabla > Propiedades > Tabla, o bien elige Propiedades de
tabla del menú contextual. Te aparecerá un cuadro de diálogo como éste. Vamos a ver
las opciones que te da.
Ésta siempre se considera con respecto a la página. Tienes cuatro opciones en el menú
desplegable: izquierda, derecha, centrada o justificada.
2. Flotante
En este menú desplegable debes especificar si quieres que el texto que existe alrededor
de la tabla fluya a la izquierda o a la derecha de la tabla. Para que el texto no fluya
alrededor de la tabla, selecciona Predeterminado.
3. Margen de celdas
Es el espacio que quedará entre los bordes de las celdas y su contenido. Introduce una
medida en píxeles.
8. Fondo
Puedes elegir un color de fondo o una imagen de fondo.
Cambiar las propiedades de una celda
Una vez has definido las celdas que quieres modificar, elige Menú Tabla > Propiedades
> Celda, o bien elige Propiedades de celda del menú contextual. Te aparecerá un cuadro
de diálogo como éste:
Como puedes ver, existen algunas opciones que son las mismas que se utilizan para
modificar una tabla, pero que en este caso sólo tendrán incidencia sobre las celdas
seleccionadas. Otras opciones son exclusivas de las celdas. Vamos a verlas:
1. Alineación vertical
El contenido de una celda tiene varias posibilidades de alineación sobre el eje vertical:
superior, medio, línea de base e inferior.
En Menú Tabla > Insertar dispones de diversas opciones para modificar la tabla. La
opción Título coloca un título a la tabla seleccionada. Puedes modificar la posición del
título en Menú Tabla > Propiedades > Título. La opción Celda inserta una celda en la
posición donde esté el cursor. Mediante la opción Tabla insertarás una tabla dentro de
otra. Con la opción Filas o columnas te aparecerá un cuadro de diálogo como el de
abajo, donde deberás especificar el número de filas/columnas que necesites y la
posición en la que las quieres que se agreguen (por encima o por debajo de la posición
en la que estás).
_______
PRACTICA
Modificar una tabla
Mediante las opciones del Menú Tabla se puede modificar cualquier tabla creada hasta
que se ajuste a tus necesidades. En este ejercicio modificaremos la tabla que creaste en
el ejercicio anterior.
Desarrollo
1. Abre la página discografia.htm de tu sitio. Vamos a
comenzar por insertar una nueva fila arriba de la tabla.
Para ello, sitúa el cursor en una de las dos celdas
superiores y elige Menú Tabla > Insertar > Filas o
columnas. En el cuadro de diálogo que te aparece
selecciona ‘Filas’ escribe 1 en el campo ‘Número de
filas’. La ubicación debe ser por encima de la selección.
3. El tercer paso es arrastrar la línea de separación entre columnas hacia la izquierda, de forma
que las imágenes de los discos ocupen completamente sus celdas.
4. Por último, elige Menú Tabla > Propiedades > Tabla. Los cambios que introduzcas en el
cuadro de diálogo que te aparece afectarán a toda la tabla. Introduce un valor de 1 en el campo
‘Tamaño’ del borde y elige un color de fondo naranja claro. Haz clic en Aceptar.
Resultado
Tu nueva tabla, gracias a las modificaciones introducidas, tiene un aspecto más estético
y funcional. Previsualiza cómo se verá en Internet en la pestaña de Vista Previa. Guarda
los cambios.
Comprobación
Marca lo correcto:
ANIMAL CARACTERÍSTICA
I. E. P.
GUIA DE APRENDIZAJE N° 08
C
G
Tema: Marcos.
Contenidos:
PE
VIR
LU
EN
G
DE G UAD
A Introducción a los marcos.
1975 Crear una página de marcos.
Puedes ver cómo al crear una página de marcos, la ventana se subdivide en diversas
zonas o marcos, que albergan, cada uno, una página distinta. Puedes hacer que el marco
de la izquierda, que contiene en menú de las secciones del sitio, se mantenga en todas
las páginas que componen el sitio, de forma que no tendrás que volver a componer el
menú para cada una de ellas. Solamente cambiará el marco de la derecha, que contiene
el contenido de cada sección del sitio.
Debes tener en cuenta que las páginas de marcos no incluyen ningún contenido visible,
son sólo contenedores que especifican qué páginas se mostrarán en ellos y cómo lo
harán. Cuando se hace clic en el hipervínculo de una página que se muestra en un
marco, la página a la que señala dicho hipervínculo suele mostrarse en otro marco,
llamado marco de destino. En el ejemplo anterior, al hacer clic sobre ‘Mis relatos’ del
marco de la izquierda, aparece la página correspondiente ‘Mis relatos’ en el marco de la
derecha.
Por lo tanto, podemos decir que una página compuesta con marcos posee dos elementos
distintos. Por una parte tenemos la estructura de marcos, que es la división de la página
en distintos contenedores o zonas. A esto lo llamamos ‘página de marcos’. Y por otra
parte tenemos las páginas
que se mostrarán en esos marcos definidos. Son dos cosas distintas y no hay que
confundirlas. Podemos utilizar el símil de un libro: una cosa es el soporte (el tamaño del
papel) y otra el contenido (el texto que aparece en el papel).
En el ejemplo anterior, lo que el usuario percibe como una sola página web con dos
marcos, en realidad está formado por tres archivos independientes: el archivo de
conjunto de marcos y dos archivos que albergan el contenido que aparece dentro de
cada marco.
__________________________________________
____________________
Crear una página de marcos
Como hemos visto, una página de marcos define la estructura de una serie de
marcos en una página. Esto incluye información sobre el número de marcos que
deben mostrarse por página, el tamaño de los marcos, el origen de la página
cargada en un marco y otras propiedades.
Puedes ver que existen diferentes estructuras de marcos. Si seleccionas cualquiera verás
su apariencia en la Vista previa y una breve descripción. Solamente tienes que elegir la
que más se aproxime a lo que quieres conseguir. Por ejemplo, si lo que quieres es crear
una página de marcos para mostrar una página de menú y una página de contenidos,
elegirás la plantilla ‘Contenido’. Ahora Frontpage te muestra la página de marcos que
has elegido. Puedes ver que solamente se trata de la estructura.
Una vez tengas creada la página de marcos y las páginas que se alojarán en ellos debes
guardarla. Ya sabes que debes guardar todos los elementos por separado: por una parte,
la página de marcos, y por otra, tantas páginas como marcos tenga. Normalmente, la
página de marcos será la página inicial de tu sitio, por tanto debes nombrarla como
index.htm. También puedes guardar cada página de un marco, seleccionando dicho
marco y eligiendo Menú Marcos > Guardar página como.
PRACTICA
2. Te aparece la nueva página de marcos. Haz clic en el botón ‘Nueva página’ del marco
de la izquierda. Aquí vamos a introducir los elementos de menú, que serán Biografía,
Discografía y Fotografías. Si quieres puedes utilizar el mismo diseño de botones
activables que ya hicimos en el ejercicio correspondiente a la lección 3.3.
3. Ahora haz clic en el botón ‘Establecer página principal’ del marco de la derecha y
selecciona la página index.htm. Como en esta página están todavía los elementos de
menú que creamos en un ejercicio anterior, bórralos, pues a partir de ahora aparecerán
en el marco de la izquierda. La página debe quedar así:
Resultado
4. El último paso es guardar todas las páginas. Por una parte la página que contiene los
marcos y por otra las dos páginas que están anidadas en la página de marcos. Para ello
haz clic en Guardar. Primero deberás guardar la página que contiene el menú; llámala
menu.htm. Después, guarda la página que está contenida en el marco de la derecha;
llámala principal.htm. Finalmente, guarda la página de marcos; llámala index.htm y
sustituye a la antigua.
conjunto de marcos si los cambios van a afectar a todos los marcos de la página. En el
siguiente ejemplo está seleccionado el margen superior.
Vamos a detenernos con mayor atención en la última de las opciones de este menú, que
controla las propiedades de un marco seleccionado.
1. Nombre
En este campo pondrás el nombre con el que designas al marco seleccionado. No debes
confundir el nombre del marco con el nombre del archivo de página. Son dos cosas
distintas que no tienen porqué tener el mismo nombre.
2. Página inicial
Es la página que has definido para que se aloje en el marco seleccionado. Su nombre es
el nombre del archivo.
3. Tamaño del marco
Desde aquí puedes controlar de forma precisa el tamaño de los marcos. Tienes los
parámetros ‘Ancho’ o ‘Alto’. Puedes cambiar uno u otro dependiendo de si el marco es
vertical u horizontal. Tienes tres unidades de medida posibles: píxeles, porcentaje de la
ventana o relativo a los demás marcos. Si eliges delimitarlo relativamente con un valor
de 1 todos los marcos tendrán el mismo ancho o alto, mientras que un valor relativo 1
en un marco y 4 en otro hará que este último sea 4 veces más ancho o alto que el
primero.
4. Márgenes
Cuando se ve una página de marcos en un explorador, la distancia entre el borde de un
marco y el borde de la página mostrada dentro de dicho marco se denomina margen de
marco. En estos campos puedes establecer el número de píxeles que definirán los
márgenes de un marco.
5. De tamaño ajustable en el explorador
Si seleccionas esta opción, el visitante de tu página podrá modificar el tamaño de los
marcos haciendo clic y arrastrando el borde del marco.
6. Mostrar barras de desplazamiento
Es conveniente que elijas la opción ‘Si es necesario’ del menú desplegable. Ello
permitirá que el explorador introduzca barras de desplazamiento si el contenido del
marco no es totalmente visible en la ventana.
7. Página de marcos
Si haces clic sobre este botón podrás modificar el espaciado del marco (el número de
píxeles que existe entre marco y marco) y elegir si quieres que se muestren los bordes
del marco en el explorador o no.
__________________________________________
PRACTICA
1. Selecciona el texto que va a hacer de enlace y elige Menú Insertar > Hipervínculo.
3. Elige el marco de destino en el que se verá la página. Para ello, haz clic sobre el
botón con un lápiz del campo ‘Marco destino’. Te aparecerá un cuadro de diálogo como
éste:
4. Para designar el marco de destino seleccionado como predeterminado para todos los
hipervínculos de la página, activa la casilla de verificación Establecer como valor
predeterminado
de página. Las páginas señaladas por los hipervínculos en la página actual se abrirán
automáticamente en el marco de destino especificado.
__________________________________________
___
PRÁCTICA
Mostrar una página en un marco
En este ejercicio vamos a hacer que al hacer clic sobre los vínculos del marco de la
izquierda, las páginas correspondientes se carguen en el marco derecho.
Desarrollo
2. Selecciona el primer botón activable del marco de la izquierda y elige ‘Propiedades
del botón activable’ del menú contextual. Los botones ya tienen un vínculo establecido
(se hizo al crearlos). Por ello, lo que vamos a hacer ahora es definir dónde queremos que
se muestre la página vinculada. Haz clic en el botón Examinar del cuadro de diálogo.
3. Haz clic en el botón con un lápiz del campo ‘Marco destino’. Te aparecerá un nuevo
cuadro de diálogo para que selecciones el marco en el que deseas cargar la página.
Selecciona el marco derecho. Haz clic en Aceptar en todos los cuadros de diálogo que
tengas abiertos.
4. Repite los pasos 2 y 3 para establecer el marco de destino de los demás vínculos del
menú de la izquierda.
Resultado
Puedes comprobar que has realizado todos los pasos correctamente en la pestaña de
Vista previa. Guarda los cambios.
Comprobación
1. ¿De cuántos archivos html se compone una página con tres marcos?
Uno
Tres
Cuatro
3. ¿Puedes crear una página de marcos sin antes haber creado las páginas que se
verán en ellos?
No
Sí
Solamente si la página de marcos tiene dos marcos
10. ¿Qué nombre recibe el marco en el que se mostrará una página vinculada?
Marco de destino
Marco final
Marco secundario