Aplicando estándares (Final)

Como vimos en el ejemplo anterior, el codigo html, queda limpio, sin nada que maneje el estilo, ni que nos de una idea de cómo quedara el resultado final. Con esto logramos dos cosas, que el html (xhtml), se mantenga claro y fácil de entender y por otro lado, hace que realizar un cambio en él, sea solamente manipular las hojas de estilo en cascada (CSS).De esta manera, cualquier cambio será rápido y sencillo. Otro punto que podrán notar es que no hay ninguna tabla en el código de ejemplo, y sin embargo pareciera que si la hubiera. Uno de los problemas que tenemos al maquetar con tablas, es hacer que todo coincida y quede como queremos, se vuelve engorroso,y porque no, frustrante.Quién no peleó alguna vez con una tabla, donde el borde quedaba desalineado, o que no se veía como queríamos?.En éste ejemplo, veremos como podemos cambiar totalmente la apariencia, haciendo cambios en la hoja de estilo, (y obviamente en la imágenes que forman parte), partiendo siempre de el mismo código HTML. Tomando la página generada en la Parte 2,logré darle la apariencia de una ventana de WinXP.

Esto lo logré, capturando los botones de windows, y utilizándolos como fondos para los links. Utilice gifs transparentes, para que al ubicarlos sobre los otros divs, no se solapen los fondos.

Por ejemplo, la esquina de resize, tiene fondo transparente, para que el “fondo” sea el de la barra.Después, copie la hoja de estilo a otro CSS, y partí desde él para modificar la apariencia.
En el siguiente estilo, cambie hacia Panther, que es el SO de las Mac.Siguiendo el mismo método, modifique el CSS, para hacer que los links, tengan la apariencia de los botones de Panther. También modifique los tamaños de cada elemento en el CSS para que tenga las dimensiones de la imagen que contiene.
Y aqui tenemos el resultado.

Con esto doy por terminado este ejemplo, espero que les haya servido, y si tienen alguna consulta o duda, por favor escriban. Gracias.