Universidad Nacional de Colombia

1
Desarrollo de aplicaciones en Internet

• Layout con CSS

2
Estructurar la página

• Las secciones logicas se deben dividir por medio
  de ltDIVgt
• Se recomienda ubicar los ltDIVgt en un orden con
  sentido si se emplea un navegador sin CSS.
• Usar los elementos de título h1, h2, h3 para
  resaltar la información consistentemente
• Emplee comentarios en la página para saber lo que
  contienen

3
Ejemplo

• ltdiv idnavegaciongt
• lta hrefwww.unal.edu.cogtunallt/agt
• lta hrefdis.unal.edu.cogtdislt/agt
• lt/divgt
• ltdiv idcontenidogt
• ltpgt aquí va el contenido lt/pgt
• lt/divgt
• lt!-- contiene las notas del sistema --gt
• ltdiv idnotasgt
• lth1gt una noticia importante! lt/h1gt
• lt/divgt

4
El modelo de cajas

• Con CSS, cada elemento tiene una caja invisible
  que lo contiene. (bloque o inline)
• Los elementos se despliegan en el orden que se
  encuentren en el XHTML
• Las cajas se ajustan al tamaño del elemento.

Un texto
Un texto más largo
EL texto más largo en varias líneas
5
Límites del elemento
6
Posicionamiento de Cajas

• Estática La posición por defecto
• Absoluta Especificar las coordenadas exactas con
  respecto a su padre
• Fija especificar las coordenadas exactas con
  respecto a la ventana del navegador
• Relativa mover la caja con relación a su
  posición por defecto en el flujo.

7
Estática
8
Absoluta
9
Fija
10
Relativa
11
display

• none oculta el elemento
• block muestra el elemento a nivel de bloque (con
  saltos de línea)
• inline muestra el elemento como si fuera inline
• list-item muestra el elemento como si se usara el
  tag ltligt