|
En el zip
de materiales hay
contenida una carpeta
que se llama iframes,
extrae esa carpeta y
cópiala en tu sitio
Dreamweaver al lado de
las que ya tienes allí.
En ella hay contenidos
estos archivos:

Si tu
quieres construir tu
página de marco flotante
propia, debes tener tus
gráficos y además un
mínimo de 2 docuementos
html para probar los
hipervínculos. Si usas
los míos en el zip ya
viene todo el material
que necesitarás pues lo
que realmente queremos
aprender es cómo poner
un marco flotante en
Dreamweaver 8.
Comenzamos estableciendo
siempre las propiedades
de página para el
documento actual:

Luego en
la barra insertar, vamos
a cambiar la forma de
visualizar los datos y
mostraremos todas las
opciones como fichas:


Bien, así
es como se verá ahora.
Clic en insertar tabla
dentro de la ficha común
y añadiremos una tabla
de 1 fila x 2 columnas y
un ancho medido en
píxeles de 750.


En el
inspector de propiedades
terminamos de configurar
la tabla. Alinear al
centro, borde 1 y color
#002850.

Situamos
el puntero del ratón en
la celda derecha de la
tabla e insertamos una
nueva tabla, esta vez de
2 filas por 1 columna y
ancho de tabla 100
medido en porcentaje.

Insertamos la imagen
principal en la fila
superior (Imagen8_1x1) -
fíjate que las imágenes
van numeradas esto te
ayudará para colocarlas
de manera sencilla. Al
insertar la imagen ves
que queda alineada a la
izquierda y desplaza
además el borde de la
tabla. Alinea la imagen
a la derecha y con el
puntero del ratón fija
el borde de la tabla
arrastrándolo y lo
sueltas al lado del
borde izquierdo de la
imagen.

Situamos
el puntero del ratón en
la segunda fila e
insertamos una nueva
tabla en ella de 1 fila
x 6 columnas, acho de
tabla 100%

Insertamos ahora las
imágenes restantes
numeradas
secuencialmente de menor
a mayor.

Y ahora
vamos al meollo de la
cuestión. Vamos a ver
cómo se inserta un marco
flotante en Dreamweaver
8. Situamos el puntero
del ratón en la celda
izquierda que aún
tenemos libre:

Hacemos
clic en la pestaña HTML
y cambiamos a vista de
código. Fíjate bien
donde está situado el
puntero del ratón.

En el
menú de la pestaña HTML
elegimos la opción Marco
flotante y nota como ha
cambiado de manera
automática el HTML del
documento con una nueva
instrucción añadida.


Cambiamos
ahora a vista de diseño
y vemos que en la celda
aparece un cuadrado
pequeñito.

En el
selector de etiquetas,
haz clic sobre la
etiqueta <iframe> para
seleccionarla:

Y en el
grupo de paneles, haz un
clic sobre el panel de
Etiqueta y nota que al
lado está el nombre de
la etiqueta que está
activa, en este caso <iframe>.
Si despliegas el
apartado General dentro
de la pestaña atributos,
ves que hay un montón de
cosas que se pueden
modificar:

Vamos a
ir cambiando cosillas.
Para rellenar solo hay
que hacer un clic al
lado del atributo que
deseamos cambiar.
Rellena tal como se
muestra en la imagen:
(es importante que te
fijes en el nombre que
le damos al marco - name
---> flotante)

Si
miramos nuestra página
en el navegador, veremos
ahora esto:

El marco
flotante como podemos
apreciar se abre por
defecto con la página
indice.html como le
hemos indicado, ahora
vamos a poner
hipervínculos en las
estrellas. Alternaremos
indice.html y quien.html
para ver los cambios.

Clic en
la primera estrella, y
rellenamos las opciones
según se muestran en la
imagen. Haz lo mismo con
el resto de las
estrellas y en la última
pones un vinculo de
correo electrónico.

Ahora
guardamos nuestra pagina
Archivo - Guardar como y
la nombras iframes.html,
luego clic en F12 y la
visualizamos en el
navegador y esto es lo
que veremos:
Mi página Web
Esto es
todo. No era tan dificil,
¿verdad que no? ;)
|