Si tienes los contenedores en la posición correcta y el contenido se está comportando aceptablemente, puedes empezar a aplicar estilo al contenido de los contenedores. IDs y Clases Utiliza cuantos menos IDs y clases como sea posible. Deberías ser capaz de aplicar estilo a casi cualquier elemento dentro de un contenedor utilizando selectores descendentes. Por ejemplo: #header {} /* styles the container */ #header h1 {} /* styles any <h1> in the container */ #header p {} /* styles any <p> in the container */ #header ul {} /* styles any <ul> in the container */ #header ul li {} …

Sigue leyendo que hay más →

Cuando se han colocado correctamente los contenedores y se muestran correctamente en todos los navegadores, ya pueden quitarse las alturas. A continuación se puede colocar algo de texto de muestra en cada contenedor. El contenido debería ser semánticamente correcto – o sea, utilizar h1, h2 etc. para los encabezados, párrafo para el texto, etc. Una vez mas, los resultados deben comprobarse en los navegadores. Contenedores con texto de muestra Resultados en Browser Cam (antes debes crear un proyecto) Una nota sobre los tamaños de fuente El tamaño de fuente es un asunto incendiario. Todo el mundo tiene una opinión acerca …

Sigue leyendo que hay más →

Ahora hay que aplicar estilo a estos contenedores principales con un método de colocación. Para que sea mas fácil ver como interactúan los contenedores, a cada uno de ellos se le dará un color de fondo y altura distintos – y puestos en cajas de colores. Es importante, particularmente cuando estás tratando con una plantilla nueva, que realices un paso y a continuación lo compruebes en los navegadores afectados antes de seguir adelante. Esto evitará que tengas que volver sobre tus pasos si ocurre un problema. El comportamiento de los contenedores puede cambiar hasta cierto grado cuando el contenido real …

Sigue leyendo que hay más →

Observa tu diseño y decide como posicionar cada uno de los contenedores. ¿La plantilla será liquida (liquid), de ancho fijo (fixed-width), con em (em-driven) o una combinación de las anteriores? ¿La plantilla estará centrada (centered) en la página? ¿Que contenedores necesitan ser flotantes (floated)? ¿Que contenedores estarán en un flujo normal (normal flow)? ¿Necesitas utilizar colocación absoluta (absolute)? Este es probablemente el paso mas difícil, ya que la experiencia tiene mucho que ver. Para este ejemplo los métodos de colocación serán: container – en línea (inline), centrado en la página header – en línea (inline) mainnav – en línea (inline) …

Sigue leyendo que hay más →

Crea algunos elementos <div> vacíos para mostrar estos contenedores. Por ejemplo: <div id=”container”> <div id=”header”></div> <div id=”mainnav”></div> <div id=”menu”></div> <div id=”contents”></div> <div id=”footer”></div> </div> Una nota sobre los tipos de documento Asegurate de que eres consciente de los tipos de documento (doctype) que estás utilizando, pues esto afectará al modo en que los navegadores mostrarán la plantilla. No tienes porque usar el modo de ajuste a los estándares pero deberías ser consciente de lo que es y de como tendrá efecto en la plantilla.

Estos contenedores se convertirán en los elementos principale del <div> que soportarán tu contenido, así que dales nombres que tengan un significado semántico en vez de nombres que describan su apariencia. Para este ejemplo los contenedores principales se llamarán: container header mainnav menu contents footer Si los contenedores son únicos para una página, utiliza IDs en vez de clases. Esto puede ser importarnte cuando tienes que asignar estilos a otros elementos de la página. Si ocurre un conflicto, las reglas que utilizan los IDs tendrán prioridad a las que usan las clases. Prototipo de ejemplo con contenedores con nombre

Para colocar los elementos en la página, es necesario establecer la totalidad de los contenedores. Mira nuestro diseño (el cual podría ser un prototipo digital, un boceto en papel o incluso una plantilla/web existente) y resuelve los contenedores principales de la página. Prototipo de ejemplo con contenedores

Antes de empezar a construir tu plantilla basada en CSS debes decidir que navegadores soportará y hasta que nivel pretendes que los soporte. Para ayudar a decidirte habla con clientes, usuarios tipo y examina ficheros log existentes si estuvieran disponibles. Hay tres niveles básicos de navegadores que soportan CSS: 1. Navegadores antiguos Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc 2. Navegadores recientes Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc 3. Navegadores modernos Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc Niveles de soporte Soporte CSS completo – el navegador sirve todas …

Sigue leyendo que hay más →