Cómo crear una página web sin tablas utilizando XHTML y CSS

A medida que los estándares web se mueven hacia adelante, creando diseños sin tablas es una habilidad vital para los diseñadores Web que deseen aprovechar todo el potencial de Internet. diseños sin tablas permiten la separación de contenido y el diseño, la apertura de un nuevo mundo de posibilidades. Los usuarios tienen un enorme control sobre su experiencia de navegación si optan por utilizar hojas de estilo personalizado. Los desarrolladores web pueden modificar fácilmente el contenido, y los diseñadores pueden cambiar por completo un diseño desde una ubicación conveniente.

Instrucciones

1 Haz un dibujo de cómo la página web tiene que mirar. CSS utiliza un enfoque llamado el modelo de caja, en la que los elementos consisten en cajas rectangulares con propiedades tales como márgenes y el relleno. Dibuje cada elemento como una caja y calcular las propiedades adecuadas. Usted va a utilizar el elemento div para dar formato a gran parte del diseño de página. los datos se agrupan de una manera lógica, teniendo en cuenta que cada div irá en la página. Asignar un nombre a cada sección y escribirlo en la parte apropiada de la imagen.

2 Crear su plantilla de página web utilizando XHTML. Asegúrese de escribir código adecuado que pasa la prueba de validación W3C. El código debe estar limpia y sencilla. Añadir un atributo id para cada uno de sus divs, asignándoles los nombres que se corresponden con los de la imagen que dibujó. Su divs pueden estar en cualquier orden, pero puede que desee para colocarlos en orden de importancia para los propósitos de optimización de motores de búsqueda. Crear una hoja de estilo para colocar los elementos. Se puede controlar el posicionamiento de un número de maneras. La manera más simple se llama posicionamiento absoluto. Añadir un "position: absolute;" comunicado a cada bloque selector. Especificar la posición exacta de cada elemento, utilizando frases como "top: 50px;" o "izquierda: 10px ;." Aquí está un ejemplo de cómo el estilo de un div utilizando posicionamiento absoluto:

LeftCol {

position: absolute;

top: 50px;

izquierda: 10px;

}

Otra manera de posicionar divs es por ellos flotante. Un div flotaba mueve hacia un lado determinado de su contenedor. Aquí hay un ejemplo:

LeftCol {

float: left;

}

rightcol {

float: right;

}

3 Pruebe su disposición para asegurarse de que se muestra correctamente en todos los navegadores. Encuentra una lista de los navegadores web populares y probar su sitio en diferentes resoluciones en cada uno de ellos. En junio de 2010, algunos de los navegadores más populares son Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox, Safari, Opera y Chrome. Modificar el CSS si nota un error de visualización en cualquier navegador. A veces hay que ser creativo con la forma de escribir el código. Repita el proceso de probar y ajustar su código hasta que se muestre correctamente en cada navegador.