Maquetación Web

Imprimir

maquetarLa maquetación es la distribución de los elementos de una página web. El elemento más utilizado para esta tarea son las capas o divisiones (cajas), definiendo su tamaño y posición utilizando propiedades CSS.

El tamaño de los elementos de bloque se regulan con las propiedades: width (ancho) y height (alto).

Por defecto, los elementos de bloque ocupan todo el ancho del elemento que los contiene, y el alto se ajusta a su contenido en cada momento,

Si modificamos su tamaño, quedará a su izquierda.

Para centrar un elemento respecto a su contenedor debemos usar la propiedad margin: auto; .

En ocasiones al establecer el tamaño de un elemento (sobre todo el alto) puede ocurrir que no quepa su contenido, esto se denomina desbordamiento y se controla con la propiedad overflow.

El posicionamiento es la forma en la que el navegador coloca los distintos elementos de la página. Lo normal es el posicionamiento estático, pero tambiíen existe el fijo, absoluto y relativo. Al cambiar el posicionamiento de un elemento podemos hacer que varios elementos se solapen, para controlar esto utilizamos la propiedad z-index que indica el orden de apilamiento (los valores más altos están más arriba).

modelo_box1pmodelo_box0p

 

  • El posicionamiento relativo ( position: relative; ) mueve el elemento desde su posición original, el resto de los elementos se comportan como si aún estuviera en su sitio.
  • El posicionamiento absoluto ( position: absolute; ) mueve el elemento a una determinada posición y el resto de los elementos lo ignoran, es decir, sale del flujo normal de la página. Podemos variar su posición con las propiedades top, right, bottom o left. Y su tamaño con height o width.
  • El posicionamiento flotante ( float: left;  o  float: right; ) mueve el elemento todo lo posible hacia el lado indicado permitiendo que el resto de los elementos fluyan a su alrededor. Para impedir que un elemento fluya al rededor de un elemento flotante utilizamos la propidad clear: both; .
  • Ancho de página: Fijo o Elástico/Líquido. Depende de lo que pretendamos con un determinado diseño utilizaremos uno u otro. Cada uno tiene sus ventajas e inconvenientes.

Las distintas divisiones o capas se indican en CSS mediante el caracter almoadilla ( # ) y se referencian en la hoja web dentro de la etiqueta  <DIV id="nombre_capa"> ... </DIV> . Los elementos ID son únicos dentro de una página HTML, es decir, sólo se pueden utilizar una vez.

endefensadeinternetEl exponente máximo de esta sociedad es Internet, red de redes por antonomasia y la causante de la planetización de la gente corriente. La creación del World Wide Web, en 1989 se debe a Tim Berners-Lee (2000), investigador del Laboratorio Europeo de Física de Partículas (CERN).

internet1

Durante ya bastantes años diseño y preparo una breve Web para mis alumnos de informática. Si aquí no aparece algo distinto de lo que ya se ha dicho espero que, al menos, consiga expresarlo de forma más clara. - Jesús Plaza.
─ El conocimiento es libre ─