CSS(Cascading Style Sheets)

Hojas de Estilo en Cascada

MAQUETACIÓN CSS CON DREAMWEAVER

1

ESTRUCTURA

DISEÑO Y FORMATO

Comparativo

• HTML se usa para estructurar el contenido

• CSS se usa para formatear el contenido.

1. Creamos la estructura de maquetación, insertando la etiqueta DIV

CSS con Dreamweaver

2. Reemplazamos con el contenido necesario, revisando que no eliminemos la estructura de maquetación

CSS con DreamweaverHEADERHEADER

MENUMENU

CONTENTCONTENT

FOOTERFOOTER

WRAPWRAP

3. Empezando con la etiqueta <div#wrap> usando el selector de etiquetas y la ventana de estilos desplegada agregamos las reglas CSS correspondientes.

CSS con Dreamweaver

1. SELECTOR DE ETIQUETAS

2. EDITAR CSS

CSS con Dreamweaver3. VENTANA ESTILOS CSS

4. NUEVA REGLA CSS

AGREGAR NUEVA REGLAAGREGAR NUEVA REGLA

CSS con Dreamweaver5. DEFINIR REGLAS PARA #WRAP

REGLAS CSSQUE USAREMOS

2

TIPO DE FUENTETIPO DE FUENTE

TAMAÑOTAMAÑO

ESTILOESTILO

ALTO DE LINEAALTO DE LINEA

COLORCOLOR

NEGRITANEGRITA

MAYUS-MINUSMAYUS-MINUS

SUBRAYADOSUBRAYADO

TACHADOTACHADO

NINGUNONINGUNO

TIPO

COLOR DE FONDOCOLOR DE FONDO

FONDO

IMAGEN DE FONDOIMAGEN DE FONDO

BLOQUE

ALINEACIÓNALINEACIÓN

CUADRO

ANCHOANCHO

ALTOALTO

FLOTARFLOTAR

RELLENORELLENO MARGENMARGEN

BORDE

ESTILO DE BORDEESTILO DE BORDE

ANCHO DEL BORDEANCHO DEL BORDE

COLOR DEL BORDECOLOR DEL BORDE

LISTA

QUITAR LISTAQUITAR LISTA