Menu en CSS con Over utilizando Dreamweaver

Posteado el 20. Apr, 2010 por Webi in Dreamweaver, Web Design

PASO 1

En Adobe Photoshop vamos a crear los botones que vamos a utilizar en nuestro menú, creamos el botón principal y el Over del botón.

Menu en CSS con Over utilizando Dreamweaver

Descarga el .PSD de aqui

PASO 2

Con la herramienta Crop Tool vamos a marcar alrededor del primer botón para poder cortarlo.

Menu en CSS con Over utilizando Dreamweaver

PASO 3

Ahora desaparecemos el fondo de nuestro documento y con el comando Shift + Ctrl + Alt + S vamos a salvar para web como PNG-24, y guardamos nuestro botón en la carpeta donde estará nuestro HTML, lo recomendable es hacer una carpeta llamada imágenes para tener un orden en nuestros archivos.

Menu en CSS con Over utilizando Dreamweaver

PASO 4

Realizamos el mismo procedimiento con todos los botones, para obtener 2 imágenes de cada una, naranja y negro.

Menu en CSS con Over utilizando Dreamweaver

PASO 5

Ahora vamos a Adobe Dreamweaver, y creamos un documento nuevo vamos la menú File – New y elegimos la opción HTML.

Menu en CSS con Over utilizando Dreamweaver

PASO 6

Vamos al menú File – Save As y guardamos nuestro documento como index.html en la carpeta que ya destinamos para nuestros documentos.

Menu en CSS con Over utilizando Dreamweaver

PASO 7

Empezamos por posesionar el cursor en la parte blanca de nuestro documento, y luego vamos a la barra Insert en la pestaña Common y damos click sobre el botón Insert Div Tag.

Menu en CSS con Over utilizando Dreamweaver

PASO 8

Nos aparecerá la ventana Insert Div Tag una vez ahí en el campo Class: agregamos el nombre “fondomenu” de igual manera en el campo ID.

Menu en CSS con Over utilizando Dreamweaver

PASO 9

Damos click en el botón New CSS Style para que nos aparezca la ventana New CSS Rule en la cual aplicamos los valores que se ven en la imagen y luego damos click en el botón Ok.

Menu en CSS con Over utilizando Dreamweaver

PASO 10

Ahora nos aparecerá la ventana de Save Style Sheet File As que nos indica donde queremos guardar nuestro estilo css, yo le sugiero que cree una carpeta llamada css para que lleven un orden en sus archivos, luego le colocamos el nombre menucss a nuestro archivo y le damos click en el botón guardar.

Menu en CSS con Over utilizando Dreamweaver

PASO 11

Nos aparece la siguiente ventana que es donde vamos a aplicarle las propiedades a nuestro div.

Menu en CSS con Over utilizando Dreamweaver

PASO 12

Vamos a la pestaña Background y en Background image: podemos colocar una imagen de fondo si lo deseamos en este caso yo colocare una imagen que cree anteriormente en photoshop, en Repeat: le coloque que no quiero que se repita, en Horizontal position: centrado y vertical position: top.

Menu en CSS con Over utilizando Dreamweaver

PASO 13

Ahora vamos a la pestaña Box y aplicamos los valores que se ven en la imagen y damos click en el botón Aplicar y luego en Aceptar.

Menu en CSS con Over utilizando Dreamweaver

PASO 14

Nos aparecerá un DIV con el fondo y las medidas que aplicamos anteriormente.

Menu en CSS con Over utilizando Dreamweaver

PASO 15

Borramos el texto que se encuentra dentro del DIV y ahora agregamos un div nuevo llamado boton1.

Menu en CSS con Over utilizando Dreamweaver

PASO 16

Nuevamente le damos click al botón New Style Css y aplicamos los pasos anteriores hasta llegar a la ventana CSS Rule y en la pestaña box aplicamos los valores que se ven en la imagen.

Menu en CSS con Over utilizando Dreamweaver

PASO 17

Agregamos otro DIV llamado espacio y aplicamos los valores que se ven en la imagen.

Menu en CSS con Over utilizando Dreamweaver

PASO 18

Ahora vamos a ir al código y vamos a seleccionar el div boton1 y espacio y lo vamos a copiar 2 veces más.

Menu en CSS con Over utilizando Dreamweaver

PASO 19

Vamos a colocar nuestro cursor dentro del primer div y ahora vamos al menú Insert – Image objects – Rollover Image.

Menu en CSS con Over utilizando Dreamweaver

PASO 20

Ahora vamos a ver cual va a ser la imagen original de nuestro botón y cual la imagen del rollover. Y que link le vamos a colocar a la imagen y luego damos click en el botón Ok.