Imagen Diseño Web
04/07/2008 09:23 AM
¿Cómo seleccionar el diseño de su sitio web?
Tan importante como los contenidos es la disposición de los elementos que se presentan en una página web. Esta disposición afectará la ...
27/06/2008 11:55 AM
¿Necesito tener una web?
La respuesta más común a esta pregunta es siempre si, casi cualquier empresa de diseño web le dirá sin pensar que si, le dirán que lo que ...
24/06/2008 12:55 PM
El SPAM
Primera Premisa: el SPAM funcionaba y vendía. Segunda Premisa: EL SPAM puede significar perder su web. Dadas estas dos premisas, usted ...
13/06/2008 01:33 PM
Empresa de diseño y marketing web
Una empresa de diseño web con una estructura seria y responsable, tiene unido al servicio de diseño web el servicio de marketing web. ...
Visite nuestro Blog de Diseño Web
Diseño Web con CSS

Somos expertos en diseño web con CSS.

El diseño web está dividido en dos partes (igual de importantes) la estructura y la presentación. La estructura es como se ensambla internamente cada página web, para ello existen normas que permiten estandarizar la construcción de una página web, actualmente es XHTML (eXtensible Hypertext Markup Language) en su versión 1.1, ya está trabajando el W3C la versión 2.0. Para la presentación, como se verán los contenidos estructurados, existe CSS (Cascading Style Sheets).

Para considerar un diseño web como bueno, debe cumplir ciertos requisitos que están basados en los estándares que hemos mencionado anteriormente. Si una página web no cumple con el estándar se considerada que no está bien construida. La validación se puede realizar desde diferentes medios uno de los principales la herramienta de W3C que permite visualizar si la pagina en cuestión cumple o no con el estándar.

La creación de diseño web con CSS es un mandato en un mundo que avanza a pasos agigantados en todo lo que se refiere a tecnología y la tecnología relacionada a Internet todos los días nos trae algo nuevo.

Os ponemos un ejemplo de cómo debería ser una web:

Estructura:

maqueta de diseño web básicoEn esta estructura podemos definir que hay tres sectores horizontales (Banner, Menú-Publicidad-Contenidos y Menú Inferior). El área central tiene a su vez tres secciones (Menú, Publicidad y Contenidos). Entonces, nosotros dividiremos (utilizando la estructura DIV) en un primer momento, el diseño web de la página en tres DIV:

Y el Div de centro en tres DIV adicionales:

El Menú lo construiremos con listas con algo parecido a:

Esta estructura se complementa con sus respectivos Párrafos (<p></p>) en contenidos, el mismo menú pero en horizontal para el cierre de la página web y poco más.

Esto ha sido la estructura, de manera que si lo vemos sin nada de CSS, nos encontraremos una página web que sin ser atractiva a la vista, sin nos muestra una estructura y podemos leer los contenidos con sólo movernos dentro del navegador.

Pero el diseño web con la estructura está incompleto, hace falta darle color y una presentación más agradable o atractiva. Aquí entra CSS a funcionar.

Bien desde un fichero externo, con extensión css o con instrucciones css dentro de la página, estamos en capacidad de darle un vuelco a la historia de este diseño web simple.

Comenzamos a asignar características a cada una de las div:

cabecera {
width: 800px;
height: 150px;
background-image: url(imagenfondo.jpg);
}

No os explicaremos cada parte de CSS, no es la intensión de estas páginas web, pero si os queremos dar una breve introducción a cómo trabaja el diseño web con css. Indicamos el nombre que será regido por las instrucciones de presentación que siguen (CABECERA) abrimos llave ({) y en la siguiente línea (puede ir a continuación de la llave) asignamos al elemento cabecera una propiedad denominada "width" (ancho) con un valor igual a 800 pixeles. Notad que colocamos dos puntos como igualdad (:) y que dejamos un espacio en blanco entre los dos puntos y el valor. Así también asignamos a la propiedad "height" (altura) el valor de 150 pixeles. Por último asignamos una imagen como fondo (background-image).

¿Qué sucedería si no asignamos estos valores en la página? Pues que la imagen nunca aparecería y si la asignamos cómo contenido (lo que también es válido hacer) nos podríamos llevar una sorpresa si colocamos una imagen con los tamaños sobre dimensionados o lo contrario...una imagen muy pequeña.

Como podéis ver, es relativamente simple trabajar con XHTML y CSS, ahora bien, la cuestión es saber lo que hay que hacer y cómo se debe hacer, aún más si se trata de una web más complicada, como por ejemplo con dos o tres columnas y sin utilizar las tablas.

Si necesitas más información de cómo trabajamos sin tablas y solo con XHTML Y CSS, por favor no dejes de escribirnos un mail a diseñoweb@wsort.com


imagen

Partners

Contacto

  diseñoweb@wsort.com
  C/Nuñez Morgado, 6, 1º A, 28036, Madrid
  +34 91 323 83 57

Todos los Derechos Reservados © 2008 Soluciones de Organización en Tecnologías de la Información.