Tamaño de una pagina web



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.

Te recomiendo:

  • Unique Post

Guardado en:

 Recibenos en tu Email

Enter your email address:

Delivered by FeedBurner

Lo mas nuevo en el Blog:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

8 Comments

  1. Hola,

    Quisiera daros un aporte acerca del el tamaño de una web:
    ¿Es tu web usable a 800 x 600? | El inútil “Optimizado para 1024 x 768”

    Un saludo y enhorabuena por el e-book de diseño web con DW y PS
    pero cuidado con las tablas, usad CSS

  2. Disculpa en la etiqueta href del vínculo se coló un salto depárrafo, edítalo por favor, en este textarea no se puede leer el final, seguro que es un tema de overflow en CSS, míralo

  3. Martin dice:

    Perdón que corrija, pero ya va siendo hora de que te
    dediques a enseñar CSS…las tablas son una pesadilla.
    Además te recomiendo echarle un ojo a tu propia página,
    ya que tiene varios errores, como por ejemplo estos cuadros
    de comentarios.
    Un abrazo! y ponte a trabajar mi amigo!

  4. Armand dice:

    muchas Gracias para algunos nos es grato recordar trucos pasados mas cuando uno se acostumbra a trabajar css y multimedia flash, en cuestion a la ergonomia de la pagina no tenia idea del rango de trabajo. aunque es mas sencillo trabajar con hojas de stilo es bueno recapitular como ucen con trucos tan baratos como los que espusiste de tablas pero es bueno aterrizar pues sin la teoria de nada sirve para un futuro problema mas avanzado.

  5. natasha dice:

    hola bueno aver si me ayudan soy un poco novata
    e cual es el mejor programa de dreanweer o frompage
    estoy empezando por primera ves a utilizar estos programas

    bueno gracias espero su respuesta.

    • admin dice:

      Cualquiera de los dos es bueno, cada uno tiene sus pros y sus contras, lo mejor es saber HTML, algo que se nos oculta al momento de mensionar las caracteristicas de estos dos programas es que con NINGUNO DE ELLOS puedes diseñar, en ambos lo mas que puedes hacer es “Montar” lo que has diseñado por fuera ya sea con Photoshop o con Gimp.

  6. @solucionesseo Excelentes aritculos, Felicidades: http://bit.ly/4n4HQv Cual debe ser el tamaño de una pagina web?

  7. @solucionesseo Excelentes articulos, muy interesantes Felicidades: http://bit.ly/4n4HQv Cual debe ser el tamaño de una pagina web?

Dejar un comentario