Que tamaño va a tener mi pagina web?

Esta es una de las primeras preguntas que nos hacemos al diseñar una pagina web, sobre todo si estamos comenzando y para responder a esta pregunta vamos a reflexionar sobre las resoluciones de pantalla:

La resolucion de pantalla oscila entre 800 x 600 y 1024 x 768, esto es lo mas comun, sin embargo hay monitores mas grandes.

Para una resolucion de 800 x 600, debemos darle al tamaño del diseño web 768 x 500, para una resolucion de 1024 x 768 vamos a utilizar un tamaño de 1000 x 500.

Si utilizamos Photoshop para realizar el diseño de la interfaz de la pagina web, vas a usar las medidas que mensioné arriba, pero en Dreamweaver debemos armar las tablas o realizar la maquetacion de la pagina web, llamando a cada tabla que nos genera photoshop e insertandola dentro de la celda que queremos que se muestre. Como se hace eso?, ahora te explico.

Al realizar los cortes en Photoshop y “Guardar para Web” en Phosothop CS o “Save for wweb and Devices” en photoshop CS3, el programa genera un archivo html y una imagen correspondiente para cada sector dibujado en Photoshop las cuales ubica en un a carpeta llamada “images” un nivel superior a partir del archivo html.

OJO: No te recomiendo realizarle modificaciones a este archivo html, recuerda que esta enlazado y es 100% dependiente del arhivo psd, esto significa que cada cambio realizado en el archivo psd y luego guardado para web, va a modificar este archivo por lo que conviene mejor “guardarlo como” con otro nombre y preferiblemente en otra ubicacion siempre dentro de la carpeta raiz de nuestro sitio.

Ejemplo:
Tienes la siguiente estructura en tu sitio:

-raiz

    - imagenes

    - animaciones

    - documentos

Agrega otra carpeta para que tu sitio quede asi:

-raiz

    - imagenes

    - animaciones

    - documentos

     - cortes

En esta carpeta “cortes” guarda los archivos html generados por Phosothop, y los archivos que vas a modificar guardalos dentro de “raiz”.

Esto implica otro cambio al codigo, y es en lo referente a las rutas: originalmente las imagenes se mandan a llamar de la siguiente manera < img src = ” images / archivo.jpg “ >, pero al realizar el cambio la ruta deberá quedar < img src = ” cortes / images / archivo.jpg “ >, si lo haces directamente desde Dreamweaver archivo / guardar como no tendras que modificar nada en el codigo, ya que Dreamweaver te pregunta si deseas actualizar los vinculos, a lo ucal deberas contestar SI.

Como podras observar en Dreamweaver no haces mucho, todo lo realizas en Photoshop.

Pero que sucede si el cliente solicita que la pantalla se agrande?, que no sea de un tamaño fijo de pantalla sino mas bien se amplíe y adapte a cualquier resolucion que visite el sitio web.

mmmm… sencillo, aqui debemos trabajar con el ancho de las tablas, creo que aqui vas a trabajar con codigo, jeje. En un documento nuevo de Dreamweaver debes insertar una tabla de 2 o 3 columnas (depende de como tengas el diseño).

El codigo se veria asi (2 columnas)

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width= 100% >aqui insertas la columna del contenido de la pagina < / td >
< / tr >
< / table >

Si es de 3 columnas

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width = 100% >aqui insertas la columna del contenido de la pagina < / td >
  < td width = 200 >Aqui la columna de la derecha < / td >
< / tr >
< / table >

 Al final el codigo de tu pagina web deberia tener este aspecto:

< table width = 100%>
< tr >
< td >Esta tabla se reserva para el TOP < / td>
< / tr >
< /table >

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width = 100% >aqui insertas la columna del contenido de la pagina < / td >
  < td width = 200 >Aqui la columna de la derecha < / td >
< / tr >
< / table >

Para finalizar dejame hacerte una aclaracion: Lo ultimo que vimos es apra que nuestra pagina web se adapte a cualquier resolucion, pero siempre tiene una medida minima, es decir, si originalmente la diseñaste para una resolucion de 1000 x 500 (ver explicacion arriba), en un monitor de 800 x 600 va a verse  la barra de desplazamiento horizontal.
Tomalo en cuenta.

Saludos

Espero les haya sido de utilidad.