Cómo crear páginas inconexas Rollover con Dreamweaver

by admin

Puede utilizar Adobe Dreamweaver CS 5.5 para editar el HTML de la página Web y crear un efecto de rollover desunido. Esta función permite a un visitante a pasa el ratón sobre un enlace o imagen y cambiar el valor de otro elemento de la página. Un rollover desunido se puede lograr con un elemento HTML, un poco de CSS y un segundo elemento HTML que se oculta de forma predeterminada, pero aparece cuando el ratón pasa por encima de su designados elemento HTML.

Instrucciones

1 Lanzar Adobe Dreamweaver CS5.5.

2 Haga clic en HTML en la columna Crear nuevo en el centro de la ventana.

3 Haga clic en el botón de "Código" en la esquina superior izquierda de la ventana.

4 Haga clic entre las etiquetas <body> y </ body>.

5 Escriba el siguiente código HTML para los objetos que se mostrarán a sus visitantes. Asegúrese de reemplazar el texto de relleno "Rollover" con su propio.

<Div id = "djrollover">
<Div>
<a href="#"> Rollover 1 <span> <p> Renovación de texto 1 </ p> </ span> </a>
</ Div>
<Div>
<a href="#"> Rollover 2 <span> <p> Rollover Text 2 </ p> </ span> </a>
</ Div>
<Div>
<a href="#"> Rollover 3 <span> <p> Renovación de texto 3 </ p> </ span> </a>
</ Div>
</ Div>

6 Haga clic dentro de la sección <head> de la página, a continuación, agregue el siguiente código CSS a la página:

<Style type = "text / css">

djrollover {

Anchura: 800px;
}

div {djrollover

Anchura: 150px;
altura: 50px;
}

djrollover un lapso {

display: none;
}

djrollover a {

bloqueo de pantalla;
padding: 10px 0 0 30px;
}

djrollover un palmo de la libración {

bloqueo de pantalla;
position: absolute;
superior: 55 px;
izquierda: 200px;
}

</ Style>

7 Haga clic en Archivo en la parte superior de la ventana, a continuación, seleccione Guardar como.

8 Escriba un nombre para la página en el campo Nombre de archivo, haga clic en "Guardar".

Consejos y advertencias

  • Puede reemplazar cualquier parte de su página de texto con imágenes. Sin embargo, todas las imágenes deben tener las mismas dimensiones para no afectar a la colocación de otros elementos de la página.
ETIQUETA: