La regla más importante a la hora de elegir entre clases e ID’s es que un ID sólo debe ser usado una vez en el documento. 

Es decir, una vez que asignamos un ID a un elemento no se puede volver a asignar a otro elemento de la misma página. ¡Ojo! Cuando hablamos de página nos referimos a la página que se está cargando actualmente en el navegador, no al sitio completo.

Las clases, en cambio, las podemos usar las veces que queramos dentro del mismo documento. Así es que, si hay una serie de propiedades comunes entre una serie de elementos de la misma página lo apropiado será usar clases. Si dentro de esos elementos hay uno que queremos destacar de una manera especial una única vez en la página, entonces usaremos un ID. 

En nuestro pequeño ejemplo, usaríamos clases para los párrafos “destacados” porque lo más probable es que haya más de un párrafo que queramos destacar y así podemos controlar la apariencia de todos los párrafos destacados desde un único lugar. En cambio, también lo más probable es que sólo haya un párrafo que sea el resumen de todos los demás. En este caso usaríamos un ID, y nuestro código quedaría así:

<p id="resumen">Este es el resumen del texto y quiero que vaya en itálica.</p>
<p>Esto sería un párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Un nuevo párrafo de texto normal.</p>
<p class="destacado">Aquí va texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Más texto normal.</p>
<p class="destacado">Aquí iría más texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>

Y empleando clases sería:

body {color:#000;}
p {color:#333;}
#resumen {color:green;font-style:italic;}
.destacado {color:red;}
Y se vería así:

Este es el resumen del texto y quiero que vaya en itálica.

Esto sería un párrafo de texto normal.

Esto sería otro párrafo de texto normal.

Un nuevo párrafo de texto normal.

Aquí va texto que quiero destacar.

Esto sería otro párrafo de texto normal.

Más texto normal.

Aquí iría más texto que quiero destacar.

Esto sería otro párrafo de texto normal.

Esto sería otro párrafo de texto normal.

Acerca de los ID’s:

Un ID se define en el código HTML así:

<div id="ejemplo_de_id">
<!-- propiedades... -->
</div>

En el archivo CSS podemos localizar el identificador anterior para aplicarle los estilos de la siguiente manera:

#ejemplo_de_id {
background: blue;
}

• Están definidos por el símbolo de numeral o almohadilla (#), el cual precede al nombre del ID.
• Pueden aparecer una vez sola dentro de la página web.
• Tienen prioridad sobre todos aquellos estilos aplicados a través de una clase.

Sobre las Clases:

Las Clases se aplican en el HTML así:

<div class="ejemplo_de_clase">
<!-- propiedades... -->
</div>

Y se definen en el archivo CSS de la siguiente manera:

.ejemplo_de_clase{
background: blue;
}

• Están definidas por un punto (.) precediendo al nombre de la clase.
• Pueden ser utilizadas mas de una vez por pagina en cualquier numero de elementos.
• Pueden combinarse varias clases mediante y aplicarlas a un mismo elemento de la pagina:

<div class="clase1 clase2 clase3">

Comenzamos a elaborar el boceto para pagina web en el software Ilustrador utilizando lineas guías para determinar la retícula y medidas, también se utilizaron rectángulos de diferentes medidas para darle formato a las secciones de nuestra pagina web.

Después en el software Photoshop se trabajaron las imágenes para adaptarlas al tamaño requerido para nuestra plantilla de ilustrador, también se utilizo en otoscopio una mascara de capa para cambiar el color de fondo de nuestras imágenes.

Posteriormente se acomodaron las imágenes en nuestra plantilla

Por ultimo con la herramienta de enlaces de Ilustrador se cambian las imágenes para tener una segunda pagina con la misma plantilla.

Galería apilada

Presentación

Collage

• WordPress
• Facebook
• Facebook