Pues bien, Hacemos una página nueva.
· Vamos a la paleta diseño y seleccionamos “Marcos: marco superior” y le decimos que será Mainframe.
Se nos divide la página en 2, veremos que en la parte superior de la página hay un hueco con un tamaño de cabecera y en la inferior hay hueco como para texto y otros.
· Si automáticamente no nos sale seleccionado el código Framset, clicamos en la mitad de estos dos y veremos que nos aparece seleccionado en azul dos códigos “Framset”, clicamos en el primer Framset o seleccionamos la ruta que sale en el código Framset y automáticamente en el menú inferior vemos que nos aparece unas nuevas opciones.
·Al clicar en el Framset primero, le diremos que su origen será la cabecera (En este caso la cabecera se llama "Tit")
·Clicamos en el segundo Framset y le diremos el origen de la página de la parte inferior. (En este caso la parte inferior se llama "home")
- Voy a la paleta de diseño, selecciono "Marco superior", en teoría automáticamente me sale un código seleccionado con 2 Framset, cada uno tiene una ruta del ordenador. (Sino sale seleccionado, puedo clicar en el borde del marco que sale en la mitad de la página)
- Selecciono el primer mainframe, y le pongo de origen, "tit.html" (cabecera)
- Selecciono el segundo mainframe y le pongo origen a "home.html" (parte inferior). Automáticamente me dice guardar y guardo como index y ya sale automáticamente el cambio.
· No obstante y para que funcione, clicamos en la imagen de la cabecera y en el menú inferior en el apartado “Destino” le indicamos que sea Mainframe, y en el texto de debajo la imagen (por ejemplo, Home), también le indicamos que sea Mainframe. Guardamos todo.
· Vamos a la página “postales” y veremos que hay una imagen que parece un mapa con varias rutas. En cada zona de la ruta, haremos una zona interactiva. En cada zona interactiva irá una página html diferente y su destino será Mainframe. De esta forma, cuando seleccionemos por ejemplo “Cardona”, pues nos llevará hasta la página que hable de Cardona sin que desaparezca el menú superior.
· Una vez hecho esto, vamos a la página Home, donde teníamos un cuadro de imagen sin nada. En este lugar colocaremos un video del you tube, escogemos un video y debajo del video veremos el botón “Compartir” y automáticamente se despliegan otros botones, como el de insertar, le damos a insertar y nos aparece seleccionado un código. Copiamos este código, vamos a la página home, seleccionamos el cuadro donde va a ir el video y colocamos el código de you tube en él, usando unas medidas de cuadro apropiadas a la miniatura del you tube, para que podamos ver el video correctamente, por ejemplo 166 x 264 píxeles.
· Por último, vamos a confeccionar unos detalles en la cabecera.
· Cogemos las imágenes (.gif) que aparecen en la cabecera y las abrimos con Photoshop. Le damos un poco de brillo y la volvemos a guardar para web como gif de 16 colores y la guardamos con otro nombre, por ejemplo “Home_over”
· Volvemos a Dreamweaver y vamos a la paleta “Común” y abrimos botón de “imágenes” y en el menú desplegado, clicamos en “imagen de substitución”. Nos abre una pequeña ventana, donde le podremos decir, cual es la imagen original y cual queremos que sea la de substitución. La original será “home” y la de substitución será “home_over”
A lo mejor, más tarde nos puede ocurrir algún fallo, como por ejemplo, que desaparezca el color de la cabecera. Para asegurarnos que no pase, aremos lo siguiente:
· Esto que hay seleccionado que tiene la letra en gris, debemos borrarlo para que no cause conflicto. Después de suprimirlo, nos quedará el texto en azul
Después comprobaremos que ya funciona correctamente y si es necesario, volveremos a vincular las páginas.
No hay comentarios:
Publicar un comentario