Se muestra la cuadrícula de una tabla, a modo de base para comenzar el diseño y distribuir los elementos por la pantalla.
Se muestra la cuadrícula de la tabla ya utlizada para el diseño, uniendo elementos con colspan y rowspan dibujando bloques de la estructura de una página web.
Se muestra un elemento de línea, formado por una frase y rodeado de un borde azul que delimita su tamaño, a muestra de que este tipo de elementos tienen el tamaño exacto de su contenido. A su derecha, el mismo bloque que deja unos espacios a los 4 lados entre el texto y el borde azul, al haberle incorporado la propiedad padding (relleno), lo que hace que la caja sea algo más grande que el propio texto.
Se muestra un enlace cmo elemento de línea, formado por una frase y rodeado de un borde azul que delimita su tamaño, a muestra de que este tipo de elementos tienen el tamaño exacto de su contenido. Debajo de esta imagen, otra muestra el mismo bloque pero con un tamaño mayor en el borde azul que la frase que contiene, mostrando que a un elemento de línea al que se aplica la propiedad "display block", se le puede dar el tamaño deseado, no dependiendo de su contenido.
En la imagen se muestra una pequeña fotografía de un concierto en directo colocada en la parte izquierda, y a su derecha un texto formando un bloque que queda a la misma altura que la imagen en paralelo, no debajo de ella.
En la imagen se muestra una pequeña fotografía de un concierto en directo colocada en la parte derecha, y a su izquierda un texto formando un bloque que queda a la misma altura que la imagen en paralelo, no debajo de ella.
La imagen está formada por dos cajas pequeñas, una con un fondo azul y la otra con fondo rojo, colocadas en paralelo una al lado de la otra y separadas por un peueño espacio entre ambas, como muestra de que puede situarse un bloque al lado de otro en horizontal.
La imagen muestra tres columnas en horizontal, dos a los lados de diferentes colores y más bien estrechas, y una columna central de otro color mucho más ancha que las otras, ocupando en realidad todo el resto (central) de la imagen que dejan las columnas laterales.
La imagen muestra dos cajas pequeñas e iguales, una azul y otra roja, colocadas verticalmente una encima de la otra (azul arriba y roja abajo), completamente unidas por la parte inferior de la de arriba y superior de la de abajo.
La imagen muestra tres cajas pequeñas iguales en tamaño y de diferentes colores: azul, roja y verde. La azul, que está arriba del todo, tiene solapada sobre ella en su parte inferior la caja roja, aproximadamente un tercio de su tamaño, y además la roja está desplazada un tercio a la derecha, lo que finalmente presenta que la esquina superior izquierda de la caja roja que está abajo monta sobre la esquina inferior derecha de la azul un tercio del tamaño de ambas. Después la caja verde queda más abajo, separada de las otras dos, ocupando el espacio que le correspondería si la caja roja no hubiera sido desplazada, es decir, que si la caja roja estuviera tocando su borde superior con el inferior de la azul, la verde tocaría con el borde superior el inferior de la roja, pero esto no ocurre por el desplazamiento hacia arriba de la roja, y la verde sigue en el mismo sitio.
Se muestra una captura de pantalla de un navegador donde se ve una caja grande como dos tercios de pantalla (de la captura), centrada y pegada a la parte superior de la misma, que tiene en su interior una caja más pequeña y de otro color pegada a la parte inferior derecha de la caja grande. Aparte, otra caja del mismo tamaño y color de la pequeña interior, se muestra uera de la caja grande y pegada a la parte inferior derecha de la pantalla.
Se presenta una imagen que conforma la web desde la que haremos la transformación del código. Tiene un ancho fijo más estrecho que la pantalla, sobre un fondo azul marino, un franja de lado a lado y dos dedos de altura con fondo en color crudo, con el título en negro y grande (www.abogado-malaga.es), casi de lado a lado, y el subtítulo un poco más pequeño situado bajo el título en color rojo (DESPACHO DE ABOGADOS), y dentro de la franja todavía. Bajo esta franja otra con igual altura y anchura, con una composición fotográfica que sugiere un desplacho y trabajo (gafas sobre unos papeles y un reloj de arena). Bajo estas un menú de lado a lado y un dedo de alto con fondo negro y texto blanco, con cuatro opciones (que se verán ás adelante); ahora un bloque de un 40 por ciento de ancho y tres dedos de alto con una foto de un edificio en contrapicado ocupando todo el alto y pegado a su derecha el texto de presentación de la empresa; a la derecha de este, otro bloque de la misma altura y el 60 por ciento de anchura restante, con un submenú de opciones dividido en dos columnas, y bajo estos de lado a lado de este bloque una foto grande de la clásica librería de despacho de abogados, con lomos de libros de leyes. El fondo de estos dos bloques es claro casi blanco. Cierra la composición un pie de todo el ancho y un dedo y medio de altura con fondo negro, con una foto de un teléfono-fax pegada a la derecha, y a su izquierda tres líneas de texto en blanco alineadas a la derecha (pegadas casi al teléfono) con los datos de contacto, y bajo estos en la misma alineación y más grande el texto de un enlace para la reserva de cita previa.
Como vamos a ir haciendo la transformación paso a paso, iremos poniendo el progreso en imágenes. En este caso se ven únicamente la cabecera con el título y subtítulo y la franja de la foto principal (gafas sobre papel, etc.) descritos en el apartado anterior.
Progresamos y añadimos a la imagen anterior el menú descrito, que tiene fondo negro y texto claro, y cuenta con las opciones: Inicio, Áreas de actuación, Situación y Contacto. El cursor de la mano sobre una de las opciones simulando el ratón en esa posición, la transforma invirtiendo los colores de ésta: fondo del color del texto (claro, crudo), y texto negro del color del anterior fondo.
En est ocasión hemos eliminado toda la cabecera dejando sólo a la vista a partir del menú, para resaltar el bloque del texto de presentación del que hablamos, que ya estaba descrito, con la imagen a la izquierda y el texto a su derecha de un bloque que ocupa el 40 por ciento del ancho. El bloque de su derecha aparece en blanco, para ser rellenado en el próximo paso.
El diseño está avanzado, por lo que recuperamos la cabecera para mostrar ya toda la página descrita en la imagen original a excepción del pie
.Es el resultado final de la transformación. La imagen muestra una composición prácticamente idéntica a la descrita en la imagen original, eliminando las pequeñas separaciones entre bloques y equilibrando un poquitín los espacios entre los bloques.