Maquetación con CSS

1. CSS
(Cascading Style Sheets)
Hojas de Estilo en Cascada

2. MAQUETACIÓN CSS CON
DREAMWEAVER
1

3. ESTRUCTURA
DISEÑO Y
FORMATO
Comparativo
• HTML se usa
para estructurar
el contenido
• CSS se usa para
formatear el
contenido.

4. 1. Creamos la estructura de maquetación,
insertando la etiqueta DIV
CSS con Dreamweaver

5. 2. Reemplazamos
con el contenido
necesario,
revisando que
no eliminemos la
estructura de
maquetación
CSS con Dreamweaver
HEADER
MENU
CONTENT
FOOTER
WRAP

6. 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

7. CSS con Dreamweaver
3. VENTANA ESTILOS CSS
4. NUEVA REGLA CSS
AGREGAR
NUEVA REGLA

8. CSS con Dreamweaver
5. DEFINIR REGLAS PARA #WRAP

10. REGLAS CSS
QUE USAREMOS
2

11. TIPO DE FUENTE
TAMAÑO
ESTILO
ALTO DE LINEA
COLOR
NEGRITA
MAYUS-MINUS
SUBRAYADO
TACHADO
NINGUNO
TIPO

12. COLOR DE FONDO
FONDO
IMAGEN DE FONDO

13. BLOQUE
ALINEACIÓN

14. CUADRO
ANCHO
ALTO
FLOTAR
RELLENO MARGEN

15. BORDE
ESTILO DE
BORDE
ANCHO DEL
BORDE
COLOR DEL
BORDE

16. LISTA
QUITAR LISTA