Documente Academic
Documente Profesional
Documente Cultură
Grado
Grado
Secundaria
II N
N D
D II C
C EE
III BIMESTRE
Del 04 de Agosto 2008 al
7 UNIDAD
7
8 UNIDAD
10 de Octubre 2008
198
198
99
Marcos
20
20
77
GUIA DE APRENDIZAJE N 07
CG
1975
Las tablas estn formadas por tres componentes bsicos: 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 clculo (como Microsoft Excel) o de bases de datos (como
Microsoft Access).
Algunas consideraciones
Dentro de cada una de las celdas puedes insertar texto o imgenes. Adems, 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 ubicacin de los elementos en la pgina. Todas las opciones que te
permitirn 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
dilogo con las opciones que ofrece Frontpage para crear la tabla.
En esta parte debes introducir el nmero de filas y de columnas que tendr la tabla. No
te preocupes si despus de creada, te das cuenta de que necesitas ms filas o columnas,
ya que Frontpage te permite insertar y eliminar filas y columnas.
2. Alineacin
En este men emergente puedes definir la posicin que tendr la tabla en la pgina.
Tienes cuatro posibles opciones: izquierda, centro, derecha o justificada.
3. Ancho de la tabla
Introduce una medida y elige si se expresa en pxeles o en porcentaje (100% ocupa todo
el ancho de la ventana del explorador).
4. Tamao del borde
Introduce la medida en pxeles del borde de la tabla. Si introduces el valor 0, la tabla
tendr un borde invisible.
5. Margen de las celdas
Es el espacio que quedar entre los bordes de las celdas y su contenido. Introduce una
medida en pxeles.
6. Espacio entre celdas
Es el espacio que habr alrededor de cada celda para separarla de las dems. Introduce
una medida en pxeles.
Esto es todo lo que Frontpage necesita saber para crear una tabla. Ahora ya puedes
empezar a introducir texto o imgenes en sus celdas de la misma forma que ya hemos
visto en lecciones anteriores. Siempre podrs modificar las propiedades de la tabla
despus de haberla creado, ya que normalmente necesitars aadir alguna fila o
columna, o combinar celdas, para que la tabla quede como quieras.
_________________________________________
__________________________________________
PRCTICA
2. Elige Men Tabla > Insertar > Tabla. Rellena los campos del cuadro de dilogo con estos
valores: Filas: 4, Columnas: 2; Alineacin: Predeterminado; Tamao del borde: 0; Margen de las
celdas: 0; Espacio entre celdas: 3, Ancho de la tabla: 60%. Haz clic en Aceptar.
Resultado
A estas alturas, tu tabla debe quedar ms o menos como puedes ver en el ejemplo de
abajo. Es todava una tabla muy sencilla; en el siguiente ejercicio mejoraremos su
esttica hasta convertirla en una tabla atractiva. Guarda los cambios de la pgina
discografia.htm.
Modificar tablas
Para modificar una tabla, primeramente debes situar el cursor en cualquier celda de la
tabla. Despus elige Men Tabla > Propiedades > Tabla, o bien elige Propiedades de
tabla del men contextual. Te aparecer un cuadro de dilogo como ste. Vamos a ver
las opciones que te da.
sta siempre se considera con respecto a la pgina. 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 pxeles.
4. Espacio entre celdas
Es el espacio que habr alrededor de cada celda para separarla de las dems. Introduce
una medida en pxeles.
5. Especificar ancho y Especificar alto
Selecciona estas opciones si quieres que la tabla tenga un ancho y alto especficos. Las
medidas se expresan en pxeles o en porcentaje. Si las dejas sin seleccionar, el tamao
de la tabla se ajustar a su contenido.
6. Tamao de borde
Introduce la medida en pxeles del borde de la tabla. Si introduces el valor 0, la tabla
tendr un borde invisible.
7. Color del borde
Puedes establecer un color uniforme para los bordes de la tabla, eligiendo uno del men
desplegable Color. Para establecer un borde de dos colores para producir un efecto
tridimensional, seleccinalos en las listas Borde claro y Borde oscuro.
8. Fondo
Puedes elegir un color de fondo o una imagen de fondo.
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 dilogo como ste:
Como puedes ver, existen algunas opciones que son las mismas que se utilizan para
modificar una tabla, pero que en este caso slo tendrn incidencia sobre las celdas
seleccionadas. Otras opciones son exclusivas de las celdas. Vamos a verlas:
1. Alineacin vertical
El contenido de una celda tiene varias posibilidades de alineacin sobre el eje vertical:
superior, medio, lnea de base e inferior.
2. Nmero de filas y Nmero de columnas
Esta opcin convierte la celda en una celda de encabezado, que tendr ms nfasis o
importancia que las dems. De forma predeterminada, las celdas de encabezado
convierten el texto que contienen en negrita.
4. No ajustar
Si seleccionas esta opcin, impedirs que los exploradores ajusten el texto a las
dimensiones de la celda. Lo habitual es que si el texto de la celda excede de su ancho,
entonces este texto crea una nueva lnea dentro de la misma celda, incrementando su
altura. Pues bien, la opcin No ajustar aumenta el ancho de celda a medida que se
escribe, sin pasar a otra lnea.
Combinar, dividir e insertar
Para unir varias celdas que tengas seleccionadas solamente si son colindantes. Para ello
elige Men Tabla > Combinar celdas. Por su parte, la opcin Dividir celdas sirve para
dividir la celda que tengas seleccionada en varias columnas (divisin vertical) o filas
(divisin horizontal). Para ello, elige Men Tabla > Dividir celdas. Te aparecer un
cuadro de dilogo donde debes especificar el nmero de filas o de columnas en las que
las que se dividir la celda.
En Men Tabla > Insertar dispones de diversas opciones para modificar la tabla. La
opcin Ttulo coloca un ttulo a la tabla seleccionada. Puedes modificar la posicin del
ttulo en Men Tabla > Propiedades > Ttulo. La opcin Celda inserta una celda en la
posicin donde est el cursor. Mediante la opcin Tabla insertars una tabla dentro de
otra. Con la opcin Filas o columnas te aparecer un cuadro de dilogo como el de
abajo, donde debers especificar el nmero de filas/columnas que necesites y la
posicin en la que las quieres que se agreguen (por encima o por debajo de la posicin
en la que ests).
_ _ _ _ _ _ _
__________________________________________
PRACTICA
Desarrollo
Comprobacin
Marca lo correcto:
1. Cmo se llaman las divisiones horizontales de una tabla?
Filas
Columnas
Celdas
2. Para qu se utilizan las tablas en Frontpage?
Para hacer las pginas compatibles con todos los exploradores
Para evitar el uso de hipervnculos
Para organizar los elementos de la pgina
3. Puedes unir dos o ms celdas de una misma tabla?
No
S, si las celdas estn vacas
S, si las celdas son colindantes
Autoevaluacin
Escribe una V si es verdadero o una F si es falso.
1. Una tabla est formado por filas, columnas y celdas.
(
CARACTERSTICA
.. /.. /
2008
FECHA DE
REVISION
OBSERVACIONES
FIRMA
DEL
PROFESOR
FIRMA DEL
PP.FF O
APODERADO
GUIA DE APRENDIZAJE N 08
CG
1975
Tema: Marcos.
Contenidos:
Introduccin a los marcos.
Crear una pgina de marcos.
Al dividir una pgina en distintos marcos, lo que ests haciendo es crear diferentes
pginas web que se van a ver integradas en una misma ventana del explorador. Por
ejemplo, puedes crear una pgina que va a contener el men. Despus integrars esta
pgina men en la pgina de marcos para que aparezca en todas las pginas de sitio
web. Mira este ejemplo:
Puedes ver cmo al crear una pgina de marcos, la ventana se subdivide en diversas
zonas o marcos, que albergan, cada uno, una pgina distinta. Puedes hacer que el marco
de la izquierda, que contiene en men de las secciones del sitio, se mantenga en todas
las pginas que componen el sitio, de forma que no tendrs que volver a componer el
men para cada una de ellas. Solamente cambiar el marco de la derecha, que contiene
el contenido de cada seccin del sitio.
Debes tener en cuenta que las pginas de marcos no incluyen ningn contenido visible,
son slo contenedores que especifican qu pginas se mostrarn en ellos y cmo lo
harn. Cuando se hace clic en el hipervnculo de una pgina que se muestra en un
marco, la pgina a la que seala dicho hipervnculo 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 pgina correspondiente Mis relatos en el marco de la
derecha.
Por lo tanto, podemos decir que una pgina compuesta con marcos posee dos elementos
distintos. Por una parte tenemos la estructura de marcos, que es la divisin de la pgina
en distintos contenedores o zonas. A esto lo llamamos pgina de marcos. Y por otra
parte tenemos las pginas
que se mostrarn en esos marcos definidos. Son dos cosas distintas y no hay que
confundirlas. Podemos utilizar el smil de un libro: una cosa es el soporte (el tamao 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 pgina 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.
__________________________________________
__________________________________________
Frontpage te ofrece multitud de plantillas de pginas de marcos. Para crear una pgina
de es necesario hacerlo con una de estas plantillas. Elige Men Archivo > Nuevo >
Pgina > Pginas de marcos. Te aparecer una ventana como esta:
Puedes ver que existen diferentes estructuras de marcos. Si seleccionas cualquiera vers
su apariencia en la Vista previa y una breve descripcin. Solamente tienes que elegir la
que ms se aproxime a lo que quieres conseguir. Por ejemplo, si lo que quieres es crear
una pgina de marcos para mostrar una pgina de men y una pgina de contenidos,
elegirs la plantilla Contenido.
Ahora Frontpage te muestra la pgina de marcos que has elegido. Puedes ver que
solamente se trata de la estructura.
Observa tambin como a las pestaas de la parte inferior izquierda de la Vista pgina se
han aadido dos ms. La pestaa Sin marcos te permite hacer una pgina de advertencia
que les aparecer a aquellos usuarios que utilicen un navegador sin soporte para marcos.
Puedes dejar el texto que aparece de forma predeterminada. La otra pestaa nueva,
HTML de pgina de marcos, te muestra el cdigo html de la pgina que define el
conjunto de marcos. Es una ventana distinta a la ventana HTML, que muestra el cdigo
de las pginas que se alojan en el conjunto de marcos.
Una vez tengas creada la pgina de marcos y las pginas que se alojarn en ellos debes
guardarla. Ya sabes que debes guardar todos los elementos por separado: por una parte,
la pgina de marcos, y por otra, tantas pginas como marcos tenga. Normalmente, la
pgina de marcos ser la pgina inicial de tu sitio, por tanto debes nombrarla como
index.htm. Tambin puedes guardar cada pgina de un marco, seleccionando dicho
marco y eligiendo Men Marcos > Guardar pgina como.
2. Te aparece la nueva pgina de marcos. Haz clic en el botn Nueva pgina del marco
de la izquierda. Aqu vamos a introducir los elementos de men, que sern Biografa,
Discografa y Fotografas. Si quieres puedes utilizar el mismo diseo de botones
activables que ya hicimos en el ejercicio correspondiente a la leccin 3.3.
3. Ahora haz clic en el botn Establecer pgina principal del marco de la derecha y
selecciona la pgina index.htm. Como en esta pgina estn todava los elementos de
men que creamos en un ejercicio anterior, brralos, pues a partir de ahora aparecern
en el marco de la izquierda. La pgina debe quedar as:
Resultado
4. El ltimo paso es guardar todas las pginas. Por una parte la pgina que contiene los
marcos y por otra las dos pginas que estn anidadas en la pgina de marcos. Para ello
haz clic en Guardar. Primero debers guardar la pgina que contiene el men; llmala
menu.htm. Despus, guarda la pgina que est contenida en el marco de la derecha;
llmala principal.htm. Finalmente, guarda la pgina de marcos; llmala index.htm y
sustituye a la antigua.
Una vez definida una pgina de marcos y las pginas que se alojan en ellos, puedes
cambiar la estructura y disposicin desde el Men Marcos.
Cambiar el tamao de un marco
En la Vista normal de la Vista pgina puedes seleccionar el marco que deseas modificar.
Sabrs el que est seleccionado porque su borde se resalta en azul. Tambin puedes
seleccionar todo el
conjunto de marcos si los cambios van a afectar a todos los marcos de la pgina. En el
siguiente ejemplo est seleccionado el margen superior.
En el Men Marcos tienes todas dems opciones que te permitirn cambiar una pgina
de marcos, como eliminar, dividir o guardar un marco.
Vamos a detenernos con mayor atencin en la ltima de las opciones de este men, que
controla las propiedades de un marco seleccionado.
1. Nombre
En este campo pondrs el nombre con el que designas al marco seleccionado. No debes
confundir el nombre del marco con el nombre del archivo de pgina. Son dos cosas
distintas que no tienen porqu tener el mismo nombre.
2. Pgina inicial
Es la pgina que has definido para que se aloje en el marco seleccionado. Su nombre es
el nombre del archivo.
3. Tamao del marco
Desde aqu puedes controlar de forma precisa el tamao de los marcos. Tienes los
parmetros Ancho o Alto. Puedes cambiar uno u otro dependiendo de si el marco es
vertical u horizontal. Tienes tres unidades de medida posibles: pxeles, porcentaje de la
ventana o relativo a los dems marcos. Si eliges delimitarlo relativamente con un valor
de 1 todos los marcos tendrn 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 ms ancho o alto que el primero.
4. Mrgenes
Si haces clic sobre este botn podrs modificar el espaciado del marco (el nmero de
pxeles que existe entre marco y marco) y elegir si quieres que se muestren los bordes
del marco en el explorador o no.
__________________________________________
2.
Resultado
3.
1. Selecciona el texto que va a hacer de enlace y elige Men Insertar > Hipervnculo.
4. Para designar el marco de destino seleccionado como predeterminado para todos los
hipervnculos de la pgina, activa la casilla de verificacin Establecer como valor
predeterminado
de pgina. Las pginas sealadas por los hipervnculos en la pgina actual se abrirn
automticamente en el marco de destino especificado.
__________________________________________
__________________________________________
Mostrar una
pgina en un marco
En este ejercicio vamos a hacer que al hacer clic sobre los vnculos del marco de la
izquierda, las pginas correspondientes se carguen en el marco derecho.
Desarrollo
4. Repite los pasos 2 y 3 para establecer el marco de destino de los dems vnculos del
men de la izquierda.
Resultado
Puedes comprobar que has realizado todos los pasos correctamente en la pestaa de
Vista previa. Guarda los cambios.
Comprobacin
Uno
Tres
Cuatro
2. Para qu se utiliza el botn Establecer como pgina principal de un marco?
Para hacer que la pgina de marcos se convierta en la pgina principal de un sitio
web
Para establecer la pgina web que se va a ver en ese marco
Para establecer los parmetros de la pgina de marcos
3. Puedes crear una pgina de marcos sin antes haber creado las pginas que se
vern en ellos?
No
S
Solamente si la pgina de marcos tiene dos marcos
4. Para qu se utiliza la pestaa Sin marcos de la Vista Pgina?
Para escribir un mensaje de advertencia a los visitantes cuyo explorador no est
preparado para soportar marcos
Para crear una versin de la misma pgina sin marcos
Para visualizar cmo quedara la misma pgina si no tuviera marcos
5. Qu define el cdigo de la pestaa HTML de pgina de marcos?
El html de la pgina de marcos
El html de las pginas que se vern en la pgina de marcos
El html de la pgina de marcos, ms el html de las pginas que se vern en ellos
6. Qu ocurre cuando cambias el tamao de un marco?
Se modifica tambin la pgina que se va a ver en ese marco
No afecta a la pgina que se va a ver en ese marco
No se puede cambiar el tamao de un marco
7. Puedes nombre un marco de forma distinta a la pgina que va a contener?
No, un marco no tiene un nombre especfico
No, ambos deben tener el mismo nombre
S
8. Puedes definir un tamao exacto de marco en pxeles?
S, en Men Marcos > Propiedades de marco
S, en Propiedades de pgina del men contextual
No
9. Qu es un margen de marco?
FECHA DE
REVISION
FIRMA
DEL
PROFESOR
FIRMA DEL
PP.FF O
APODERADO
.. /.. /
2008
OBSERVACIONES