La tecnología bien consolidada e indispensable para crear sitios web modernos, con la separación de los capas de contenido y gráfica se llama CSS.
Encontrar recursos en internet, white papers, ebook, manuales y tutoriales sobre este tema es muy sencillo, pero desentrañar toda esta información a veces no es tan sencillo. ¿Dónde empezar? Puede ser un serio problema, sobre todo porque nunca se tiene la certeza de que la calidad de la documentación que se ha encontrado fácilmente con una búsqueda mínima en google sea buena.
¿Cómo hacer? Personalmente siempre empiezo con la wikipedia... pero introduciendo estas palabras clave en google o yahoo: WIKI BOOKS CSS
Empezar con la búsqueda correcta es fundamental para no perder tiempo.
Te invito a hacer la búsqueda con las palabras clave en google que te he aconsejado ahora ……..espero... hazlo con calma..
Todos hemos encontrado, haciendo la búsqueda, un contenido de calidad superior porque ha sido analizado por el equipo de wikipedia (esto lo sabes si has publicado algún artículo o libro en wikipedia)
http://it.wikibooks.org/wiki/CSS
Aquí está el enlace que hemos encontrado….Como leerás, este libro ha sido seleccionado como libro de vitrina….es decir, has encontrado un buen libro.Puedes descargarlo directamente desde este enlace en versión PDF para consultararlo cuando estés offline…
Ok, aquí estamos. Este wikibook es una lectura útil solo si debes emprender un trabajo particular con el WEB, de lo contrario no te aconsejo que lo leas porque resultaría seguro aburrido y pesado.
No es aburrido si tienes un proyecto que desarrollar y tienes objetivos que perseguir y piensas que la red es una gran oportunidad.
¿Qué es el CSS?
Para dar una definición diferente a la del wikibook que te he sugerido antes, te invito a mirar nuevamente la imagen del hombre de lego de arriba. A la izquierda tenemos el proyecto del hombre con las líneas (contenidos básicos) sin ningún detalle gráfico (color, posición, objetos adicionales cualitativos del proyecto inicial). La imagen del hombre de la derecha hace que el proyecto sea claro, agregando atributos y cualidades, pero también agregando objetos que dejan intuir el objetivo del hombre. El w3c nos proporciona en inglés una definición formal y exhaustiva sobre qué es el CSS y cómo se utiliza.
http://www.w3schools.com/Css/css_intro.asp
¿Qué partes del libro son fundamentales? El libro es ya un super resumen, pero en mi opinión, profundizar en la parte del posicionamiento puede dar una ventaja práctica cuando se crean hojas de estilo profesionales
Otra recurso que puede ayudar a nivel didáctico en la explicación de los principales selectores de CSS es el siguiente sitio: http://www.cssportal.com
¿Cómo se inserta el CSS en el código HTML que estás creando?
Como ves arriba, insertas el archivo CSS como enlace externo, aunque existe la modalidad para insertar el código CSS internamente en la página HTML, pero que fuertemente desaconsejo porque la tecnología CSS sirve precisamente para ahorrar tiempo en las modificaciones de los diseños gráficos finales.
Si usas correctamente los CSS, ahorras mucho tiempo en la actualización de la gráfica de diseño de las páginas.
Aquí está un ejemplo de un CSS profesional donde se utilizan técnicas avanzadas para el posicionamiento y el estilo del texto.
Para recibir más información sobre los CSS, puedes inscribirte en la sección "gratis para ti" y pedirme más ejemplos progresionales para el uso avanzado.
El posicionamiento en los CSS es subestimado por muchos diseñadores web.... aquí está la sección que te aconsejo estudiar con mucha atención.
Posicionamiento
Los CSS permiten posicionar dentro de una página objetos que varían o permanecen fijos
independientemente del tamaño en que se visualiza la página y/o al desplazarse por ella.
En la página, un elemento puede ser posicionado de tres maneras diferentes:
siguiendo el curso normal de la página previsto por el HTML
sin ningún vínculo con el resto del flujo de los elementos, alineándose de manera que los elementos se dispongan al lado (esta técnica, llamada en jerga técnica floating, es similar al funcionamiento del atributo de alineación de las imágenes)