Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 143

Visitas el mes pasado: 201

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




8. Diseño de páginas

8.2 Tipos de diseño

css

Estructura de página

La estructura de una página Web es la forma en que se veran sus contenidos. Nos referimos aquí a los bloques de contenido, diferenciados unos de otros, que se muestran en la pantalla en áreas distintas.

Hay varios tipos de estructura que suelen ser comunes a muchas páginas. Una estructura clásica suele tener varios bloques: una cabecera; un cuerpo central, en el que hay varias columnas (dos o tres normalmente) de las cuales una de ellas es mas ancha; debajo de todo se suele poner en otro bloque un pie de página.

A pesar de que este tipo de estructura es la más usada para el diseño de páginas, nada nos impide crear un tipo de estructura diferente, creando diseños originales que se salgan de estos estándares.

En este tema veremos las estructuras más comunes usadas en el diseño de páginas, así como las diferentes maneras de construirlas, y las ventajas e inconvenientes de cada una de ellas.

Una vez aprendido ésto, el diseño de páginas distintas de las habituales es cuestión de imaginación y buen gusto.


Estructuras más habituales

Tal vez la estructura más simple que solemos encontrar en el diseño de páginas es la de cabecera, un menú lateral izquierdo, un bloque central de contenidos, y el pie de página:

Diseño de página 1

Otra estructura también muy habitual es la de cabecera, debajo de ella tres columnas, que suelen ser un menú a la izquierda, los contenidos en el centro, y una columna lateral a la derecha. Debajo de éstas columnas un pie de página.

Diseño de página 2

Nos basaremos en estos diseños para explicar cómo crear una página con varios bloques, ya que una vez que se aprende a crear una página con varios bloques de contenidos, cambiar la posición, el tamañó y la cantidad de los bloques es cuestión de seguir los mismos pasos.

Conviene, antes de escribir el código del diseño de la página, hacerse un esquema o dibujo de cómo queremos visualizar la página, con el sitio que va a ocupar cada bloque. Esto puede facilitarnos mucho el trabajo posterior.


Tamaño fijo o variable

Se entiende por tamaño fijo de página, aquel que utiliza para definir el tamaño de los bloques medidas fijas, que no varían aunque cambie el tamañó del navegador (por estar en una ventana que no ocupa toda la pantalla), mientras que el posicionamiento variable hace que los bloques cambien de tamaño al cambiar el tamaño de la ventana.

En concreto el tamaño fijo utiliza como medida habitual los píxeles, mientras que el tamaño variable suele tener como medida el porcentaje.

El tamaño fijo o variable muestra diferente comportamiento en la pantalla del ordenador, sobre todo en los siguiientes casos:

Ventana restaurada: en el sistema operativo Windows, las ventanas que muestran los programas (el navegador también) pueden estar definidas de tres maneras; maximizada: la ventana ocupa toda la pantalla; Restaurada: la ventana ocupa parte de la pantalla, dejando ver en la parte que no ocupa otras ventanas que no están activas o el fondo del escritorio; Ventana minimizada: la ventana no se muestra pero tiene una pestaña en la barra de tareas. El comportamiento de la página Web es distinto para la página en la ventana restaurada, según su diseño sea fijo o variable.

Resolución de pantalla La resolución de pantalla es la cantidad de píxeles que se muestran en la pantalla. se mide en "pixeles_ancho" x " píxeles_alto". Ésta puede variar de un usuario a otro, ya que el mismo usuario puede cambiarla en su ordenador. En Windows para cambiarla pulsamos el botón derecho del ratón en el escritorio, y en el menú emergente pulsamos en propiedades; aparecerá el cuadro "propiedades de pantalla", y allí elegimos la pestaña "configuración". Las resolución de pantalla depende también del tipo de pantalla, en pantallas más estrechas (4 x 3) suelen ser de 800 x 600px, 1024 x 768px, 1280 x 960, etc.; en pantallas más anchas (16 x 9)la resolución puede ser de 1280 x 768, 1440 x 900, etc. Las páginas Web tienen diferente comportamiento al cambiar la resolución de pantalla, según su diseño sea fijo o variable.

Veamos ahora cual es el comportamiento de cada uno de estos dos tipos de tamaño:

Tamaño variable: porcentajes.

Tamaño fijo: píxeles.

Las siguientes páginas de ejemplo son una con diseño fijo y otra variable, aparentemente pueden ser casi iguales, sin embargo puedes comprobar las diferencias cambiando la resolución de pantalla o restaurando la ventana y cambiándole su tamaño.

Página de tamaño variable


Página de tamaño fijo


También podemos combinar los dos tipos de tamaño, de forma que unas cajas sean fijas y otras variables, o poner un límite al diseño variable, de forma que a partir de ciertas medidas no pueda expandirse o contraerse más la caja. Todo esto lo veremos más adelante.


Medida de las cajas

Al dar una medida a una caja mediante las propiedades width y height se tiene en cuenta sólo lo que es la caja en sí, por tanto no entran ahí ni los márgenes, ni el borde ni el relleno.

Al diseñar una página, debemos tener en cuenta que cada caja o bloque va a ocupar no sólo la medida que le demos, sino también la de sus márgenes, su borde y su relleno. Por tanto la medida real del ancho de un bloque será la suma de:

Es importante tener en cuenta que la caja va a ocupar la suma de todas estas medidas, ya que al diseñar la página hay que tener en cuenta el sitio que va a ocupar y el sitio que queda libre para insertar las otras cajas.

Para la altura de la caja ocurre lo mismo, así que la altura real será también la suma de todos los elementos anteriores en altura.


Diseño posicionado o diseño flotante

Según empleemos la propiedad position o la propiedad float para diseñar los bloques de la página tendremos distintos tipos de diseño. Mediante la propiedad position Tendremos un diseño posicionado, en el que marcamos en qué lugar deben ir cada uno de los bloques. Con la propiedad float es el mismo tamaño de los bloques el que marca donde deben posicionarse.

Son por tanto distintos métodos de trabajo, y por lo tanto distintas formas de diseñar la página.




En la siguiente página veremos cómo diseñar una página mediante la propiedad position y las propiedades de desplazamiento: left, top, right, bottom.

Diseño posicionado.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com