PLAZAS LIBRES EN DISEÑO WEB - 03

Tenemos plazas libres en el curso de diseño web de:

MARTES y JUEVES 12:00 - 13:00

Aunque hemos dado ya un trimestre, un alumno que estudie todas entradas del blog, tutoriales y ejercicios podría ponerse al día en unas semanas (sufriendo, eso sí, pero estudiando se puede).

El diseño web está muy relacionado hoy en día con el diseño gráfico, por lo que puede complementar la formación que recibís en el el curso de diseño gráfico.

Os subo 3 entradas, en las que podéis ver un ejemplo de clases teóricas, prácticas y el ejercicio que están realizando en estos momentos los alumnos.

EJEMPLO ENTRADA - EJERCICIO 01 (desarrollado en el primer trimestre)

Vamos a continuar el ejercicio 01. Lo primero pedir disculpas a los alumnos del curso e Torrejón de la mañana porque yo había dormido poco y estaba empanado y me olvidé darle la altura a los DIVs y por eso no los veíamos... error de principiante que a un profe falto de sueño también puede pasarle. Una mala tarde la tiene cualquiera :)

Descargaremos las imágenes de onehub.com/home con Firebug o desde aquí:

Creamos los DIVs para el contenido de section class="section_01"

Y en section class="billboard" le ponemos la imagen billboard.png como background-image

Vamos a hacer lo mismo con las imágenes de los DIVs contenidos en section class="section_01"

Si nos fijamos, a la derecha vemos que nos sobran 2px. Es debido a que las imágenes son de 326px de ancho y 326x3=978px. Como el contenedor es de 980px... ahí los tenemos. Los usaremos para los 2px de los bordes grises del div central.

Se los añadimos por CSS. Recordamos que, como explicamos en la clase del box-model los 2px se añaden, por lo que debemos reducir 2px la anchura del div class="section_01_02"

Con lo visto, ya nos es fácil poner la imagen en section class="section_02" mediante background-image

Para los textos de section class="billboard" usaremos la nueva etiqueta de html5 

<hgroup>

<hgroup>

      <h1>Share files with confidence./h1>      

     <h2>Securely share and control files in the cloud.</h2>

</hgroup>

Y ajustamos el CSS para que nos quede parecido a la web que estamos usando como modelo.

La semana que viene seguimos...