CAPITULO 4.

Me imagino que deben haber practicado unnnnn montónnn =), los que vamos a hacer a continuación es aprender a vincular un html con otro, esta acción es lo que nos permite que el usuario cuando esta en nuestro sitio pueda navegar de acuerdo a lo diseñado por nosotros.

En primer lugar vamos a pensar un organigrama es lo mas adecuado para saber que vamos a desarrollar, que botones colocar y a donde vamos a dirigir al navegante. Los navegadores reconocen el index.html como el default.html o el main.html (lo mas usado es el index.html) como primer página a mostrar, si no existe ninguna con este nombre, no sabe cual abrir como primera.

Cliente: Vocales

Objetivo: Mostrar al usuario cuales son las vocales del abecedario.

Método: Usar tipografía como gráfico.

Páginas a desarrollar:

• Principal (index.html)
  • Menú principal:
    • a
  • e
  • i
  • o
  • u
  • contacto
  • Recomiendo
• e (incorporamos una imagen de la letra e)
• i (incorporamos una imagen la letra i acompañado un texto informativo)
• o (incorporamos la imagen de un oso)
• u (incorporamos texto sobre la u, la definición del diccionario)

En las páginas a, e, i, o, u, colocamos un botón para volver a principal y repetimos el contacto y recomiendo. (En teoría esta todo aprobado por el cliente Vocales)

¡¡¡Entonces manos a la obra!!!

Bajar archivo con imágenes y textos.

1. Realizo la recolección de imágenes, texto (en la teoría lo da el cliente, por eso, en este caso se las doy yo para que puedan trabajar.)
2. Defino el sitio en Dreamweaver MX, llamándolo Vocales por ejemplo, no se olviden este paso es el más importante! con su carpeta correspondiente en el rígido, para colocar todo el sitio cuando lo vamos desarrollando ahí.
3. Voy a guardar las paginas a, e, i, o, u y principal y comenzamos por la última mencionada.
4. Abrimos la página creada como principal y póngale el fondo que deseen, eso lo dejo al criterio de ustedes y vamos a crear una barra de navegación por texto por ahora, lo que aprendar como vincular, lo pueden llevar luego a una imagen, se realiza de la misma manera.
5. Como pueden observar en el archivo para bajar que les estoy dando todos los elementos para que puedan rápidamente seguir con este tutorial.
6. Colocamos en principal la imagen principal y por debajo, colocamos el menú de navegación. En el título del html podemos colocar por ejemplo: ::: Bienvenidos a la Página Principal de Vocales :::.
   Ver ejemplo.
7. Ahora, vamos a colocar las imágenes en todos los htmls restantes, vean los ejemplos:
   Página A - Página E - Página I - Página O - Página U
8. Fíjense que para colocar el vínculo a las frases, tenemos que "barrerlas con el mouse" o seleccionarla como les muestro en el ejemplo y hacen click en la carpeta que tienen a continuación de Link o Vínculo y ahí le indican donde esta el html que desean abrir por medio de esa frase.
   
   
   
   
   
9. Cuando realizan el vínculo para contacto, en link no debemos buscar nada, directamente escriben: mailto:elemail@deustedes.com.
   
   
   
10. Cuando les toca la hora de realizar vínculos a otros sitios webs, tengan en cuenta que uno no desea que el navegante en su navegador mande nuestro sitio hacia la solapa de "Atrás", por eso preferimos indicarle por medio del target o destino la orden "_blank" que significa en otro navegador, puden ver en los ejemplos.
    
    
    
11. Les paso ahora las características que le he dado a los vínculos en las propiedades de la página para que los vínculos sean del color que pueden observar y miren los efectos que hacen los vínculos cuando ya fueron tildados y en el momento que tienen el mouse apretado en el vínculo sin soltar como nos muestra el color seteado.
    
    

Para practicar:

• Armar sitios, de colores, mas letras, números, etc.
• Que estén vinculados entre sí y no olvidar un contacto y practicar vincular a un sitio externo al nuestro y con la opción blank que es la más recomendada.
• Coloquen imágenes, textos, etc.

Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. Allí encontrarás otros que también saben y aprenden.