Etiqueta destacada con CSS utilizando Dreamweaver

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

Hoy vamos a ver como colocamos una etiqueta que sobresalga del borde para darle un efecto genial a nuestra pagina web.

PASO 1

En Adobe Photoshop creamos nuestra etiqueta como la que se ve en la imagen.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 2

Con la herramienta Crop Tool vamos a cortar alrededor de la etiqueta

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 3

Desaparecemos todos los fondos que tenga nuestra etiqueta y ahora con el comando Ctrl + Shift + Alt + S vamos a salvar para web como un png 24.

Etiqueta destacada con CSS utilizando Dreamweaver

Aqui te dejamos el editable en .PSD

PASO 4

Ahora vamos a Dreamweaver y con el comando Ctrl + N creamos un documento nuevo HTML.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 5

Vamos al menú Modify – Page Properties en la categoría Appearance y colocamos en Background color: un gris oscuro #999999.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 6

Ahora con el comando Ctrl + S salvamos nuestro documento con el nombre de etiqueta.html

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 7

Vamos a la ventana Insert – Common y damos click sobre Insert Div Tag.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 8

En la ventana le colocamos el nombre de cotenido a nuestro DIV y damos click en New CSS Style.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 9

Nos aparecerá la ventana New CSS Rule y aplicamos los valores que se ven en la imagen y damos click en Ok.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 10

Ahora vamos a la Categoría Background y en Background color: escogemos un color blanco #FFFFFF.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 11

En la categoría Box colocamos los valores que se ven en la imagen y damos click en Ok.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 12

Borramos el texto que nos apareció dentro del DIV e insertamos un DIV nuevo llamado etiqueta, seguimos los pasos 7, 8 y 9.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 13

Vamos a la Categoría Box y el tamaño de nuestro DIV será el mismo tamaño que nuestra etiqueta, en este caso mi etiqueta mide 421 x 66 píxeles, ahora en Margin, en Left variara también hasta que su etiqueta se ajuste al borde.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 14

Tendremos un DIV con un texto dentro como se muestra en la imagen.

Etiqueta destacada con CSS utilizando Dreamweaver

PASO 15

Borramos el texto que tenemos dentro del DIV y vamos al menú Insert – Image y seleccionamos la imagen de la etiqueta y en la ventana Image Tag Accesibility Attributes le colocamos el nombre de Etiqueta y le damos Ok