Upload
chespok
View
243
Download
1
Embed Size (px)
DESCRIPTION
Maquetación con CSS
Citation preview
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