UNIDAD DIDÁCTICA
Comenzaremos con una breve introducción al área de trabajo de Dreaweaver. Cuando inicia
Dreamwaver se abrirán los siguientes elementos de trabajo:
Barra de herramientas
Ventana de documento
Panel de objetos
Panel flotante
Inspector de propiedades
El panel Objetos contiene iconos en los que puede hacer click para insertar objetos en el documento
y para cambiar su forma de trabajar con el mismo.
Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilo HTML y el inspector de
código, que le permiten trabajar con otros elementos de Dreamweaver.
La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados
con mayor frecuencia.
El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar
dichas propiedades.
Dreamweaver puede mostrar un documento de tres formas distintas: vista de Diseño, vista de Código y
una vista combinada en la que se muestra tanto el diseño como el código.
La vista de Disposición que permite diseñar el formato de una página, insertar gráficos, texto y
elementos multimedia.
En la vista Estándar se puede crear capas, crear documentos con marcos, crear tablas y aplicar
otros cambios a la página.
Antes de comenzar a trabajar es imprescindible crear un sitio local mediante el cual indicaremos a
Dreamweaver el lugar en el que tenemos intención de almacenar todos los archivos de un sitio concreto. Para
trabajar de manera eficaz con Dreamweaver, defina siempre un sitio local para cada sitio Web que cree.
1º.- En primer lugar crearemos la carpeta en la que alojaremos todos los archivos y carpetas relacionados
con nuestra página Web. Crear, por tanto, la carpeta Página Web, en la que ubicación que estimes más
oportuno, por ejemplo, en Mis Documentos.
6º.- A continuación especificaremos la carpeta raíz de nuestro sitio Web, para ello haz clic en el icono de
carpeta situado a la derecha del campo Carpeta raíz local y localiza, mediante la ventana Elegir
carpeta local, la carpeta Página Web, creada anteriormente.
7º.- Por último marca la opción Activar caché para crear un archivo de caché para el sitio. Al crear un caché
para los archivos de nuestra carpeta de sitio, se establece un registro de los archivos existentes de modo
que Dreamweaver pueda actualizar rápidamente los vínculos al mover, cambiar el nombre o eliminar un
archivo.
9º.- Por último, haz clic en el botón Aceptar del mensaje que nos indica que se creará el archivo caché inicial
del sitio.
Una vez establecida la estructura para nuestro sitio, en la que se almacenarán las páginas y activos del
mismo, crearemos nuestra primera página, es decir la página principal para el sitio.
1º.- Haz clic en la Ventana de documento de DreamWeaver para activarla. La ventana Sitio permanecerá
abierta en segundo plano.
A pesar de que el documento ya posee un nombre de archivo además necesita un título de página que
ayudará a los visitantes del sitio a identificar la página que están viendo: el título de página aparece en la barra
de título del navegador y en la lista de marcadores. Daremos un título a la página del siguiente modo:
1º.- Si la barra de herramientas no está visible, abre el menú Ver y elige Barra de herramientas.
Empezaremos, por tanto, situándonos en la vista de Disposición. Para ello abre el menú Ver y dentro del
apartado Vista de tabla elige la opción Vista de disposición o haz clic en el botón Vista de disposición del
panel Objetos.
Icono Dibujar
celda de disposición
Icono Dibujar
tabla de disposición
Icono de vista
de Disposición
A la hora de diseñar la página, piensa en términos de una cuadrícula de filas y columnas. El uso de
múltiples tablas de disposición aísla secciones de la disposición para evitar que se vean afectadas por otras.
Crearemos a continuación una única tabla de disposición que contendrá los elementos de nuestra página
Web. Para ello hemos de seguir los siguientes pasos:
1º.- Si aún no están abiertas, abre las siguientes herramientas del área de trabajo:
3º.- Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma de una herramienta
de dibujo (una cruz pequeña). Ahora haz clic en la esquina superior izquierda del documento y arrastra el
ratón para dibujar una tabla de disposición, no importa el de qué tamaño.
4º.- Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello
utilizamos la Ventana de propiedades. En la misma introduciremos en los campos Ancho-Fijo: 750 y
Alto: 1000
5º.- Haz clic con el botón derecho en el interior de la tabla de disposición recién creada. Aparece un menú,
abre la línea Alinear y haz clic en la opción Centro.
2º.- Haz clic en la esquina superior izquierda de la misma y arrastramos el ratón para dibujar,
con cualquier tamaño, una celda de disposición.
3º.- A continuación selecciona la celda que acabamos de crear haciendo clic en el perímetro de la misma.
Cuando una celda es seleccionada ésta es remarcada y aparecen unos cuadrados en los extremos de
la misma y en el centro de sus lados.
5º.- Repetimos los pasos anteriores para crear el resto de celdas que constituyen la disposición del
documento, de manera que lleguemos a obtener la siguiente estructura y con las siguientes
dimensiones. (El diseño del documento se encuentra en la siguiente página)
Ahora que ya se ha dispuesto las distintas áreas de la página, añadiremos el contenido gráfico.
Aprenderemos dos formas de insertar imágenes en Dreamweaver: utilizando el menú principal de Dreamweaver
y utilizando el panel Objetos.
1º.- Haz clic en cualquier lugar de la Celda 1, de manera que el punto de inserción se sitúa en la celda sin
seleccionarla.
6º.- Si la ventana Activos no se encuentra en pantalla, muestra la misma abriendo el menú Ventana y
marcando la línea Activos.
8º.- Se puede comprobar que el tamaño de la imagen insertada es mayor que el tamaño de la celda que lo
contiene. Ajusta, a continuación, en la ventana de propiedades, las dimensiones del logotipo, de manera
que An: 325 y Al: 200
9º.- Abre el menú Archivo y elige Guardar para guardar los cambios realizados en la página principal.
Conviene guardar los cambios efectuados cada cierto tiempo.
Completaremos el contenido gráfico de nuestra página Web introduciendo en cada una de las siguientes
celdas los archivos gráficos indicados, ajustando el tamaño de los mismos cuando corresponda.
Celda 5: “Pabellones.gif”
Celda 8: “Info_a.jpg”
Celda 9: “Ofeta_a.jpg”
Celda 10: “Ins_a.jpg”
Celda 11: “D_a.jpg”
Celda 12: “Quienes somos.gif”
Celda 19: “PiePagina.gif”
A continuación añadiremos texto a nuestra página Web. En Dreamweaver se puede escribir el contenido
directamente en una celda de disposición o cortar y pegar en ella el contenido de otro documento. En este caso
se añadirá texto a la celda de disposición copiando y pegando el contenido de un archivo de texto existente.
1º.- En el menú Archivo, selecciona la opción Abrir. En la carpeta Txt localiza el archivo: DatosCentro.txt.
4º.- Copia el texto seleccionado en el portapapeles mediante el menú Edición y la opción Copiar.
5º.- Cierra la ventana del documento DatosCentro.txt. A continuación pincha con el ratón en el interior de la
Celda 6.
6º.- Mediante la combinación Edición > Pegar, inserta el texto en la celda de disposición.
7º.- Repite el proceso anterior para insertar el contenido del archivo QuienesSomos.txt en la Celda 15.
1º.- Si el inspector de propiedades no está abierto, abre el menú Ventana y marca la línea Propiedades.
3º.- En el segundo menú emergente Formato del inspector de propiedades que indica actualmente Fuente
predet., selecciona la línea: Verdana, Arial, Helvetica, Sans-serif.
4º.- En el menú emergente Tam. elige el tamaño 2. El texto del documento se actualizará automáticamente
para reflejar los cambios.
6º.- Sigue los pasos anteriores para dar formato al texto de la Celda 15.
Las imágenes de sustitución cambian de apariencia cuando el puntero pasa sobre ellas. Utilizaremos el
comando Insertar imagen de sustitución de Dreamweaver para crear cuatro imágenes de sustitución para los
botones de navegación: Información del centro, Oferta educativa, Instalaciones y Departamento.
Una imagen de sustitución consta de dos imágenes: aquella que aparece cuando se carga la página
inicialmente en el navegador y la imagen que aparece cuando el puntero del ratón pasa por encima de la original.
Es importante asegurarse de utilizar imágenes que tengan el mismo tamaño.
A continuación añadiremos tres imágenes de sustitución para cada uno de los botones de navegación
que aparecen en la página situados en las celdas de disposición 8, 9, 10 y 11.
1º.- En la ventana de documento pincha con el ratón en la imagen: Info_a.jpg incluida en la Celda 8 para
seleccionarla. Elimina dicha imagen mediante la tecla ‘supr’ o mediante la combinación Edición >
Cortar; de esta forma será posible insertar una imagen de sustitución.
2º.- Haz clic en la Celda 8, para indicar a Dreamweaver el lugar en el que deseamos insertar la imagen de
sustitución.
3º.- Para insertar una imagen de sustitución podemos optar por cualquiera de los métodos
siguientes:
En la categoría común del panel Objetos, haz clic en el icono Insertar imagen de
sustitución.
4º.- En el cuadro de diálogo Insertar imagen de sustitución escribe Información en el campo Nombre de la
imagen:.
6º.- A continuación estableceremos la imagen que debe ser mostrada cuando el usuario pase el ratón por
encima de la imagen original. Para ello haz clic en el botón Examinar que se encuentra a la derecha del
campo Imagen de sustitución: y selecciona el archivo Info_s.jpg.
7º.- Asegúrate que la opción “Carga previa de imagen de sustitución” está seleccionada, de manera que las
imágenes de sustitución se carguen cuando se cargue la página en el navegador, lo que garantiza una
transición rápida entre imágenes cuando el usuario pasa el puntero por encima de la imagen original.
8º.- Por último haz clic en el botón Aceptar para cerrar el cuadro de diálogo.
9º.- Puedes ver el resultado cargando la página en un navegador pulsando la tecla F12. Prueba a pasar el
puntero del ratón por el botón de navegación “Información del centro”.
Repetimos los pasos anteriores para situar imágenes de sustitución en las celdas 9, 10 y 11 y crear los
correspondientes botones de navegación. Para ello utilizaremos las siguientes opciones:
Celda 9:
Celda 10:
A continuación crearemos una tabla de disposición con las celdas de botones de navegación que
acabamos de crear. Agrupar las celdas en una tabla le permite controlar el espaciado de celdas y mover
fácilmente las celdas como un grupo si desea cambiar la disposición de la página. Utilizaremos Dibujar tabla de
disposición para agrupar las imágenes de los botones de navegación.
2º.- En la ventana de documento, sitúa el puntero del ratón en la esquina superior izquierda de
la Celda 8. Con el botón izquierdo pulsado, arrastra el puntero hasta que la tabla contenga
las cuatro celdas.
3º.- Suelta el botón del ratón para ver las celdas agrupadas en una nueva tabla.
4º.- También es posible agrupar una única celda en el interior de una tabla de disposición. Siguiendo los
pasos descritos crea una tabla que contenga la Celda 15.
La vista de Disposición es útil para establecer el diseño de la página Web. Aunque puede ajustar la
mayoría de los elementos de diseño en la vista de Disposición, algunos cambios deben realizarse en la vista
Estándar. Cuando cambie a la vista Estándar, observará como Dreamweaver utiliza tablas para crear la
estructura de la página. A continuación aprenderemos a trabajar con tablas para continuar refinando el diseño.
1º.- En el panel Objetos, haz clic en el icono de vista Estándar. Puedes observar como ahora
la página queda dividida en una serie de tablas.
Como se puede observar, el texto introducido en algunas celdas, está demasiado cerca de los bordes de
las mismas. Añadiremos a continuación relleno a las celdas para dejar espacio entre el texto y las celdas.
1º.- En primer lugar seleccionamos la tabla en la cual se encuentra la Celda 15. Para ello en primer lugar
pincha con el ratón en dicha celda. Observa el selector de etiquetas situado en la esquina inferior
izquierda de la ventana de documento.
2º.- En dicho selector de etiquetas se muestra las etiquetas HTML de los elementos del documento.
3º.- Haz clic en la etiqueta <ταβλε> situada más a la derecha. En la ventana de documento, aparecerá un
borde alrededor de la tabla, al tiempo que el inspector de propiedades reflejará las propiedades de una
tabla.
4º.- En el campo Rell. celda del inspector de propiedades escribimos 2 para añadir 2 píxeles de espacio
entre el texto y las celda de la tabla.
6º.- Guarda el documento. Es conveniente guardar cada cierto tiempo los cambios realizados en el
documento.
Se puede utilizar plantillas para crear documentos que tengan una estructura y una apariencia comunes.
Las plantillas son útiles si desea asegurarse de que todas las páginas del sitio comparten determinadas
características.
En esta sección crearemos una plantilla a partir de la página principal y, a continuación, emplearemos la
plantilla para crear una nueva pagina.
1º.- Una vez abierto el archivo de la página principal: index.htm, abre el menú Archivo y elige la opción
Guardar como plantilla.
En este punto, la plantilla nueva coincide con la página a partir de la cual ha guardado la plantilla. Una
plantilla puede contener regiones bloqueadas y editables. El primer paso será crear regiones editables en la
plantilla.
1º.- En primer lugar elimina las celdas de la 4 a la 16, junto con su contenido, así como las tablas de
disposición que agrupan a varias de las celdas eliminadas.
4º.- En el campo Nombre: escribe Region1 como nombre de esta región de la plantilla. A continuación haz
clic en el botón Aceptar, para crear una región de plantilla. Observa la ficha que contiene el nombre de
la región de plantilla. El marcador de posición también está rodeado por una línea de color azul claro que
identifica los límites del área editable.
5º.- Repetimos los pasos anteriores con la Celda 3, dándole el nombre Region2 a la nueva región.
7º.- Selecciona la Celda 3 haciendo clic con el ratón en su perímetro. Sitúa el puntero del ratón en la esquina
inferior derecha de la misma y arrastrando el ratón, modifica sus dimensiones, de manera que ocupe
todo el espacio libre dejado por las celdas eliminadas.
8º.- A continuación, en su ventana de propiedades, establece el siguiente valor #CCCC00 en al campo Fnd.
9º.- Ahora selecciona la imagen situada en la Celda 1. En el inspector de propiedades pincha en el icono de
carpeta que se encuentra a la derecha del campo Origen.
Ahora que ya hemos definido las regiones editables de la plantilla, utilizaremos ésta para crear una
página en la que se detallen la oferta educativa del centro.
2º.- En la lista Plantillas: del cuadro de diálogo Seleccionar plantilla, selecciona la línea: indexPlantilla.
3º.- A continuación, haz clic en el botón Seleccionar. La plantilla se aplicará al nuevo documento.
4º.- Guarda el documento, en la carpeta raíz de nuestro sitio, con el nombre OfertaEducativa.htm.
(Recuerda: Archivo --> Guardar como...)
5º.- Pincha con el ratón en la celda editable “Región1” para situar el cursor en la misma. Inserta en dicha
celda el archivo de imagen: “OfertaTítulo.gif”
6º.- Haz clic en el interior de la celda “Región2” para seleccionarla. A continuación vamos a incluir texto en
dicha celda, ayudándonos de los botones de la ventana de propiedades que nos permiten incluir viñetas
y avanzar y retroceder en la sangría del texto.
• E.S.O.
1er Ciclo y 2º Ciclo. Disponemos de grupos de Diversificación, cuyo fin es ayudar a la
obtención del título de Secundaria a los alumnos con dificultades de aprendizaje.
8º.- Selecciona todo el texto que acabas de introducir y establece las siguientes propiedades para el mismo:
2º.- En la ventana del documento haz clic en la imagen de sustitución “Oferta” para seleccionarla.
3º.- Abre el menú Ventana y selecciona la opción Propiedades, para abrir el inspector de propiedades si es
que no está abierto. El inspector de propiedades muestra información acerca de la imagen.
4º.- En el inspector de propiedades, pincha con el ratón en el icono de carpeta situado a la derecha del
campo Vínculo.
5º.- En el cuadro de diálogo Seleccionar archivo, busca el documento creado en el apartado anterior:
OfertaEducativa.htm y pulsa el botón Seleccionar. El nombre del archivo aparecerá en el campo
Vínculo del inspector de propiedades.
6º.- Comprueba el resultado lanzando la página principal a un navegador pulsando la tecla F12. Una vez
mostrada la página en el navegador, haz clic con el ratón en la imagen de sustitución Oferta.
7º.- Repite los pasos anteriores con las siguientes imágenes de sustitución y sus correspondientes archivos:
Información Información.hmt
Instalaciones Instalaciones.htm
Departamentos Departamentos.htm
8º.- Veamos a continuación como vincular el archivo OfertaEducativa.htm con la página principal. Abre el
archivo OfertaEducativa.htm y selecciona el texto: | VOLVER A LA PÁGINA PRINCIPAL |
9º.- A continuación, en el inspector de propiedades, pincha con el ratón en el icono de carpeta que aparece a
la derecha del campo Vínculo.
10º.- En el cuadro de diálogo Seleccionar archivo, busca el documento: index.htm, que contiene la página
principal y pulsa el botón Seleccionar. El nombre del archivo aparecerá en el campo Vínculo del
inspector de propiedades.
11º.- Lanza la página a un navegador pulsando la tecla F12 y comprueba el funcionamiento de los cambios
introducidos.
Para ver una representación de alto nivel de la estructura de un sitio local utilizaremos: Ver mapa del
sitio de Dreamweaver. También se puede utilizar el mapa para añadir nuevos archivos al sitio, para añadir,
eliminar y cambiar vínculos y para crear un archivo gráfico del sitio que podrá exportar e imprimir desde una
aplicación de edición de imágenes.
El mapa del sitio siempre muestra la página principal del sitio en la parte superior del mapa; bajo la
página principal aparecen los archivos con los que ésta tiene vínculos. Hay varias formas de definir la página
principal de un sitio. La forma más sencilla consiste en usar el menú contextual de la ventana Sitio.
5º.- Aparecerá la ventana Sitio con dos vistas del sitio local: a la izquierda se muestra el mapa del sitio, que
representa gráficamente la estructura actual del sitio, con index.htm como página principal; mientras que
a la derecha se encuentra la lista de contenido de la carpeta local.
Un signo (+) situado junto a cualquier archivo del mapa del sitio indica que el archivo contiene vínculos
con otros documentos. Al hacer clic en el signo (+) se amplia el mapa mostrando los archivos asociados,
mientras que haciendo clic en el signo (-) se reduce el mapa del sitio.
Los objetos Flash son pequeños archivos gráficos SWF (Shockwave) que puedes crear mientras trabajas
en Dreamweaver. En este caso vamos a crear un objeto de Botón Flash, que situaremos al final del documento
principal del sitio y que después vincularemos con la revista digital del instituto.
2º.- Para darle un aspecto más profesional, cambiaremos el color de fondo de la página. Haz clic con el
botón derecho del ratón en cualquier zona del documento.
8º.- En el cuadro de diálogo Insertar Botón Flash establece los siguientes valores en sus correspondientes
campos.
11º.- Lanza la página a un navegador pulsando la tecla F12 y comprueba los resultados.
6.- Capas
Una capa es un contenedor que puede alojar cualquier objeto HTML, que puede ser colocado en
cualquier parte de la página. Las capas se denominan así, ya que pueden posicionarse en tres dimensiones. La
tercera dimensión se denomina índice-Z y permite que las capas se solapen unas con otras.
7º.- Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma de
una herramienta de dibujo (una cruz pequeña). Ahora haz clic en la esquina superior izquierda del
documento y arrastra el ratón para dibujar una tabla de disposición, no importa de qué tamaño.
8º.- Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello
utilizamos la Ventana de propiedades. En la misma introduciremos en los campos Ancho-Fijo: 750 y
Alto: 1000
11º.- Aparecerá un rectángulo que representa a la capa recién creada. Arrastra la misma
hasta la esquina superior izquierda del documento.
12º.- Estando seleccionada la capa, en la Paleta Flotante de Propiedades establece los siguientes valores:
ID de capa: Logotipo
An: 350px
Al: 139px
13º.- Haz clic en el interior de la capa y abre el menú Insertar, escoge la opción Imagen.
14º.- Surge una ventana de navegación que permite seleccionar el archivo de imagen. En este caso
selecciona el archivo Logotipo.gif y haz clic en el botón Aceptar.
15º.- A continuación y siguiendo los pasos anteriores crea una nueva capa que se solape con la anterior y
establece para la misma los siguientes valores:
ID de capa: Fotografia
An: 350px
Al: 231px
17º.- Pulsa la tecla F12 para lanzar la página Web al navegador. Comprueba los resultados obtenidos.
18º.- En este caso la imagen de la fotografía de Instituto se superpone a la del Logotipo. Para que el efecto
sea el contrario debemos cambiar los valores del Índice-Z de ambas capas.
19º.- Selecciona la capa Fotografia y sustituye en su Paleta de Propiedades el valor del Índice-Z por 1.
20º.- Haz lo mismo con la capa Logotipo, pero en este caso el valor a introducir es 2. Pulsa F12 y observa
los resultados.
7.- Comportamientos
Los comportamientos están constituidos por una serie de herramientas que empleadas conjuntamente
son denominadas HTML Dinámico, ya que en él se puede cambiar la página una vez que ésta se ha cargado. Se
pueden asociar una serie de acciones a determinados sucesos, como por ejemplo, al cargar la página, cuando el
usuario haga clic con el ratón en un determinado objeto, etc.
Veamos a continuación un sencillo ejemplo, en el que una misma imagen irá cambiando en función del
botón por el que esté pasando el puntero del ratón.
MatematicasBoton.gif y MatemáticasCapa
LenguaBoton.gif y LenguaCapa.gif
FisicaBoton.gif y FisicaCapa.gif
InglesBoton.gif y InglesCapa.gif
Fondo.gif
4º.- Inicia la aplicación DreamWeaver y abre el menú Sitio. Elige la opción Sitio Nuevo...
6º.- Haz clic en el icono de carpeta que se encuentra a la derecha del cuadro de texto Carpeta raíz local y
selecciona la carpeta creada en el paso 2º.
10º.- Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma
de una herramienta de dibujo (una cruz pequeña). Ahora haz clic en la esquina
superior izquierda del documento y arrastra el ratón para dibujar una tabla de
disposición, no importa de qué tamaño.
11º.- Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello
utilizamos la Ventana de propiedades. En la misma introduciremos en los campos Ancho-Fijo: 450 y
Alto: 200
Celda 1: MatematicasBoton.gif
Celda 2: LenguaBoton.gif
Celda 3: FisicaBoton.gif
Celda 4: InglesBoton.gif
Celda 5: Fondo.gif
18º.- Estando seleccionada la capa recién creada (si no lo está haz clic en su selector: rectángulos situado
en su esquina superior derecha), modifica los siguientes valores en su paleta de propiedades:
ID de capa: Fondo
An: 300px
Al: 200px
19º.- Haz clic en el interior de la capa que acabas de crear. Abre el menú Insertar y activa la línea Capa.
20º.- Selecciona esta nueva capa insertada y establece los siguientes valores en su paleta de propiedades:
ID de capa: Matematicas
Iz: 0
Sup: 0
An: 300
Al=200
Im. Fondo: MatematicasCapa.gif
Vic: hidden
21º.- Haz clic en el interior de esta última capa creada. Abre el menú Insertar y activa la línea Capa.
ID de capa: Lengua
Iz: 0
Sup: 0
An: 300
Al=200
Im. Fondo: LenguaCapa.gif
Vic: hidden
23º.- Repite los pasos anteriores para añadir dos capas más, con sus correspondientes parámetros:
ID de capa: Fisica
Iz: 0
Sup: 0
An: 300
Al=200
Im. Fondo: FisicaCapa.gif
Vic: hidden
ID de capa: Ingles
Iz: 0
Sup: 0
An: 300
Al=200
Im. Fondo: InglesCapa.gif
Vic: hidden
24º.- Pulsa F12 para lanzar la página en el navegador y comprueba los resultados obtenidos hasta ahora.
A continuación estableceremos los comportamientos, que en este caso consistirán en hacer aparecer la
capa correspondiente que se encuentra oculta, cuando el usuario pase el ratón por encima de cualquier de las
cuatro imágenes que hacen referencia a los departamentos.
9º.- Haz clic en el botón que abre la lista desplegable de eventos. Selecciona
la línea OnMouseOver.
12º.- Por último, haz clic en el botón Aceptar para confirmar los cambios.
13º.- En la paleta Comportamientos haz clic en el botón de la línea que se encuentra seleccionada, para
abrir la lista desplegable de eventos. Selecciona la línea OnMouseOut.
14º.- Pulsa F12 y comprueba que ocurre cuando se pasa el ratón por encima de la imagen
MatematicasBoton.gif.
15º.- Repite los pasos anteriores para establecer los comportamientos asociados a las imágenes:
LenguaBoton.gif, FisicaBoton.gif y Ingles.gif, con sus capas correspondientes.
8.- Marcos
Las páginas Web que usan marcos pueden ser extremadamente versátiles, ya que permiten mantener
fijas partes del sitio web, como un logotipo o las barras de navegación, mientras permiten que otras partes si
cambien el contenido. Una página basada en marcos está dividida en varias ventanas con ventanas dentro.
Aunque una página basada en marcos actúa como una sola página web, cada marco contiene un solo
documento HTML, que puede incluir contenidos completamente independientes y barras de desplazamientos
independientes.
Lo que mantiene unidos estos documentos se llama documento de definición de conjunto de marcos
o página de conjunto de marcos.
1º.- En primer lugar copia la carpeta Marcos, con todos sus archivos y subcarpetas, en el disco duro de tu
ordenador.
7º.- A continuación abre el menú Insertar, activa la línea Marcos y elige la opción Arriba.
8º.- El panel Marcos nos permite seleccionar marcos asilados o conjuntos de marcos. Para ver dicho panel,
selecciona el menú Ventana y marca la línea Marcos.
11º.- En la ventana de propiedades puedes observar como el marco exterior presenta una distribución de 2
filas x 1 columna.
12º.- El apartado Selección Fila Col. nos permite activa la fila o columna cuyos valores deseamos cambiar.
13º.- En este caso haz clic sobre la primera fila para activarla (aunque posiblemente ya se encuentra activa
por defecto).
14º.- En la sección Valor introduce el número 134, de esta forma estamos asignando al marco superior una
anchura de 134 pixeles.
15º.- El siguiente paso será guardar el documento de trabajo. Abre el menú Archivo y selecciona la línea
Guardar conjunto de marcos como...
16º.- Selecciona la carpeta Marcos y asigna al documento el nombre Index.htm. Por último haz clic en el
botón Aceptar.
17º.- Volviendo al panel Marcos, selecciona el marco topFrame haciendo clic en el mismo.
18º.- Observa ahora la paleta de Propiedades e introduce en el apartado Nombre de marco el texto
MarcoSuperior. El nuevo nombre asignado aparece en el panel Marcos.
19º.- Haz clic en el icono de carpeta que puedes encontrar a la derecha de la caja de texto Origen. Aparece
una ventana de navegación que nos permite selecciona archivos, en este caso busca el archivo
arriba.htm y haz clic en el botón Aceptar.
20º.- Ahora el documento arriba.htm se encuentra asociado al marco superior y por tanto se muestra en el
mismo.
21º.- Siguiendo los pasos anteriores, asigna el nombre Principal al marco mainFrame y asocia el mismo con
el documento portada.htm.
22º.- El último paso será vincular cada uno de los botones que aparecen en el documento arriba.htm, que
recordemos se encuentra asociado al marco superior, con una serie de documentos que, a su vez,
deberán mostrarse en el marco Principal.
28º.- Repite los pasos anteriores para vincular los siguientes botones con sus correspondientes
documentos, de manera que se muestren igualmente en el marco Principal.
29º.- Por último, lanza la página al navegador pulsando la tecla F12 y comprueba los resultados.