Modulo 4 Utn Centro e-learning

Experto Universitario
en Desarrollo Web y
Multimedial

pag. 2

Módulo 3:
Estructura y Maquetación Web

pag. 3

Unidad 4:

Maquetación con
etiqueta DIV +
CSS

pag. 4

Presentación de la Unidad:
Muchos sitios Web utilizan diseños basados en tablas para mostrar la información en las páginas. Las tablas son útiles a la hora de presentar datos y son
muy fáciles de introducir enla página. Pero las tablas también tienden a generar
una gran cantidad de código que es difícil de leer y de mantener.
Un diseño que utiliza elementos de bloques en lugar de filas y columnas de
tabla, contiene mucho menos código que un diseño similar basado en tablas.
Los diseños basados en CSS suelen utilizan etiquetas en lugar de
para crear los bloques CSS utilizados para el diseño.pag. 5

Objetivos:
Unidad 4: Que el alumno logre aplicar los atributos de estilos CSS a la estructura del sitio a
través de la utilización de divs

pag. 6

Temario:
Temario:
.: Modelo de cajas
.: Anchura
.: Altura
.: Margen
.: Relleno
.: Bordes
.: Anchura
.: Color
.: Estilo
.: Modos de compatibilidad con Explorer 8
.: Fondos
.: Posicionamiento y visualización
.: Tipos deelementos
.: Posicionamiento normal
.: Posicionamiento relativo
.: Posicionamiento absoluto
.: Posicionamiento fijo
.: Posicionamiento flotante
.: Propiedad display y visibility
.: Propiedad overflow
.: Propiedad z-index

pag. 7

Consignas para el aprendizaje colaborativo

En esta Unidad los participantes se encontrarán con
diferentes tipos de consignas que, en el marco de losfundamentos del MEC*, los referenciarán a tres
comunidades de aprendizaje, que pondremos en
funcionamiento en esta instancia de formación, a los
efectos de aprovecharlas pedagógicamente:
1. Los foros asociados a cada una de las unidades.
2. La Web 2.0.
3. Los contextos de desempeño de los participantes.
Es importante que todos los participantes realicen las actividades sugeridas y
compartan enlos foros los resultados obtenidos.

pag. 8

MODELO DE CAJAS
El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje
de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las
páginas se representen mediante cajas rectangulares.
Las cajas de unapágina se crean automáticamente. Cada vez que se inserta una etiqueta HTML,
se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que
incluye la página:

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar
todas sus características. Cadauna de las cajas está formada por seis partes, tal y como muestra
la siguiente imagen:

(Esquema utilizado con permiso de http://www.hicksdesign.co.uk/boxmodel/)

pag. 9
Las partes que componen cada caja y su orden de visualización desde el punto de vista del
usuario son las siguientes:
.: Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo,
unaimagen, el texto de una lista de elementos, etc.)
.: Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
.: Borde (border): línea que encierra completamente el contenido y su relleno.
.: Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el
espacio de relleno.
.: Color de fondo (background color): color que se muestra por detrás delcontenido y el
espacio de relleno.
.: Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno o el
margen se muestra el color o imagen de fondo (si están definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es
la...