CAPITULO 3. LAS CAPAS

Ahora hablemos de CAPAS.

• Las capas tienen su buen uso para DHTML, es decir, HTML dinámico, pero también las podemos usar para la organización del html, ustedes seleccionen el ícono capa que se encuentra al lado derecho del ícono tabla.
• Una vez seleccionado, dibujamos el tamaño de la capa, una capa nos sirve como concepto básico para colocar cualquier objeto como texto, imagen, tabla, etc, dentro del html en la ubicación que nos guste sin estar sujetos al editor de texto.
  
  
  
• Dentro de la capa dibujada insertamos una imagen.
  
  
• Vean que en el top de la capa, es decir margen superior izquierdo, tenemos un cuadradito, desde ahí con el mouse podemos mover a donde queremos la capa con todo lo que contenga por todo el html.
• Sigo agregando capas con texto y más imágenes como pueden ver en el ejemplo y colocar las capas como deseen, NO SUPERPONGAN, porque sino luego no podemos convertir a una gran tabla esta disposición de elementos.
  
  

Ustedes se preguntarán: ¿porqué esto no lo podemos dejar con las capas y listo?, la respuesta es simple, no todos los navegadores de los usuarios de internet en el mundo tienen todo actualizado, todavía tenemos versiones 4 o inferiores y no todos los navegadores, como el Netscape, por ejemplo, en versiones viejas reconocen la ubicación precisa de las capas. Si las lee, pero no su ubicación, vuelvo a repetir, entonces para no tener inconvenientes, directamente, convertimos todo a una gran tabla y listo, nos aseguramos de esa manera que todos van a poder visualizar tranquilamente nuestro html.

Bajar archivo con imágenes

Veamos un ejemplo.

• Una vez que agregamos las capas necesarias y las ubicamos como deseamos, vamos al menú modificar > convertir > y seleccionamos lo siguiente: CAPAS A TABLAS.

• Nos aparece la siguiente ventana:

• Aca estoy pidiendo lo más preciso posible, si le pido Center on Page, corro todo al centro y si en realidad estoy colocando todo tal cual deseo, no conviene.
• Nota: No podemos convertir capas a tabla si se encuentran superpuestas capas.

Nos puede suceder que al tiempo tenemos que mover algo de lugar y retocar alguna cosilla, para eso, volvemos al menú modificar, convertir y pedimos lo contrario, convertir la tabla a capas y de esa manera, arreglamos todo lo necesario y volvemos a pedir que sea una tabla.

Nuestros botones como imágenes de sustitución (rollovers)

Los rollovers son imágenes que al pasar el puntero del mouse por encima, cambian por otra del mismo tamaño. Éstos pueden ser botones o simples efectos gráficos de intercambio de imágenes.

• Para crear un rollover, nos posicionamos en el lugar donde queremos insertarlo y hacemos click sobre el botón Insertar imagen rollover (Insert Rollover Image) en la barra de herramientas comunes.
• Se abrirá un cuadro de diálogo que nos pedirá un nombre para nuestro rollover y también que le indiquemos la ubicación de la primera imagen (cuando el mouse no está encima) y de la segunda imagen (cuando el mouse está encima).
• Tildamos también la opción de pre-carga de las dos imágenes para que el usuario pueda ver el rollover cuando hayan bajado las dos imágenes.
• También establecemos una dirección adonde nos llevará el rollover al hacer clic. Pulsamos aceptar. (No siempre necesario.)
• El texto alternativo es el ALT, es el menú emergente donde nos dice una "ayuda". Esto lo utilizamos muchas veces para guiar al navegante, o para aquellos, que ponen en su navegador no bajar imágenes y de esa manera le indica el texto que hay en esa imagen, entonces, si desea el usuario con botón derecho pide: Mostrar imagen.

Aquí les muestro un ejemplo:

Tengo dos imágenes que deseo intercambiar para el rollover:

Bajar imágenes para rollover.

Esto fue lo que completé:

Y este es el resultado:

Reglas

Grilla

También podemos hacer aparecer una grilla para guiarnos en el diseño de nuestra página. Para ello debemos ir a Ver > Grilla > Mostrar.

• Desde aquí podemos especificarle al programa cada cuantos pixels, pulgadas o centímetros tendremos las líneas de nuestra grilla, para ello debemos ir a:
  Ver > Grilla > Seteos.
• Para que nos resulte más fácil ubicar con respecto a la grilla los objetos que insertamos en nuestra página, podemos tildar la opción Ajustar a (Snap to) que se encuentra en Ver > Grilla, de esta forma, las líneas de nuestra grilla adoptarán un efecto de imán que atraerán los objetos para alinearlos mejor cuando los incorporemos al espacio de nuestra página.

Configuremos uno o más exploradores para visualizar las páginas.

• Lo primero que vamos a querer hacer después de haber introducido algo de texto en nuestra página, es ver cómo está quedando. Para ello, pulsamos la tecla F12 o Control + F12, se abrirá nuestro navegador predeterminado en nuestra máquina.
• Si tuviéramos más de un navegador, podemos indicarle al programa cómo acceder a él.
• Debemos ir al ícono que se encuentra en la barra común de herramientas que es lo mismo que ir a Archivo > Previsualización en Navegador> Editar la lista de navegadores.
  
  
  
• Se abrirá un cuadro de diálogo que nos permitirá agregar navegadores secundarios para previsualizar.
• El botón Agregar (Add) se utiliza para definir un nuevo navegador.
• El botón Editar (Edit) nos permite cambiar los seteos para el navegador seleccionado.
• El botón Remover (Remove) nos permite quitar de la lista un navegador. Para previsualizar una página con el navegador secundario debemos oprimir Ctrl F12 o lo que nos indique ahí mismo en la edición de los navegadores.

Puntos de fijación (Anclas o Anchor)

• Para colocar un enlace a otro punto de la misma página debemos primero colocar un ancla en el punto de destino del vínculo.
• Ubicamos el cursor en el punto de la página adonde deseamos crear una referencia y vamos al ícono que tenemos en la barra común de herramientas.
  
  
  
• Introducimos un nombre que represente esta ubicación en la página. Podemos asignar cualquier nombre, pero es recomendable escoger uno que sea fácil de recordar cuando se asigne el vínculo que navegará a esta ubicación, cuando hacemos click en el ícono del ancla, nos aparece la siguiente pantalla:
  
  
  
• De esta forma se introduce un punto de fijación, representado por un pequeño icono con un ancla. Este icono no se verá luego al visualizar la página en un explorador.
• Si aparece un cartel de advertencia es porque usted tiene seteado su programa para no mostrar elementos invisibles. Para mostrarlos y poder ver el ancla, deberá ir a:
  Ver > Elementos invisibles.
  
  
  
• Una vez creado el ancla podrá linkear a ella desde cualquier otro punto de la página (texto o gráfico ). Para hacer el vínculo deberemos tipear en el campo Vínculo (Link) el símbolo numeral seguido del nombre del ancla al que queremos linkear. Por ejemplo #texto.
• Si desea poner un vínculo aun punto de fijación que se encuentra en otra página, lo que deberá hacer es escribir # y el nombre del ancla luego del nombre de la página adónde se encuentra dicho ancla. Por ej. : prueba.html#ancla.
• Otra manera de colocar vínculos a anclas es por medio del puntero o mira que tenemos al lado del campo de vínculo en la barra de propiedades.
  
  
  
• Lo que hacemos es arrastrar la mira hacia el archivo que deseamos vincular y listo, y lo mismo esta mira nos sirve para colocar a los html juntos y llegar con la mira hacia el ancla de la otra página html y vincular automáticamente.

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