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 768 x 500, para una resolucion de 1024 x 768 vamos a utilizar un tamaño de 1000 x 500.

Si utilizamos para realizar el diseño de la interfaz de la pagina web, vas a usar las medidas que mensioné arriba, pero en debemos armar las 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 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 .

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.

Articulos Relacionados:

Walter Alvarez
Presidente de Soluciones SEO empresa de diseño web y hospedaje web. Dedicado a la enseñanza de Diseño Web y escribe temas de Superacion Personal como parte integral del Marketing de un negocio en Internet.


24 Responses to “Tamaño de una pagina web”

  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?

  8. Para los que comienzan con el diseño web: http://bit.ly/cSk5Go

  9. [...] que el cliente entienda todo lo que le decimos a cerca de páginas web, como se hace, cual es el tamaño de una página web, lenguaje a utilizar y menos las secciones y funcionalidad ade un sitio dinámico,  pero SI [...]

  10. frank dice:

    muy buenos los comentarios

  11. Desde el punto de vista de programación y diseño, es mejor no usar tablas y hacer un uso más extendido de las CSS. Pero esto no es lo importante ahora, para mi este articulo es una gran explicacion de como trabajar para maquetar una web y un gran aporte para aquellos que empiezan. Esta muy bien explicado y tambien muy bien guiado, pues para quienes empiezan es muy facil perderse. Excelente.

  12. David dice:

    Bueeeenas noches!
    llevó 2 semanas aprendiendo por mi cuenta a usar Golive cs2 ya subí mi pagina http://www.beltran2.com (se aceptan criticas …) pero tengo un problema y necesito de su ayuda…… cuando le pongo en google buscar "beltran2" encuentra la pagina ,entre otras,pero debajo de "beltran" me aparecen los nombres de los archivos y no la descripción de la misma… segun yo le puse la descripción en SITE+settings+sample info…. pero no me aparece
    espero de verdad me puedan ayudar
    saludos cordiales

    • No estás utilizando textos en tu web, unicamente imagenes. Las imagenes se llaman beltran….gif.

      Si no vas a utilizar textos utiliza la meta "description" para decirle a los buscadores de que trata la pagina que estan viendo.

    • En el futuro, intentar posicionar esa pagina se te va a hacer muy dificil, puesto que no hay texto a posicionar. Saludos y Bendiciones

      • DAVID002 dice:

        Gracias por responder…como mencione es primera vez que hago mi pagina… cuando te refieres a: utiliza la meta "description" para decirle a los buscadores de que trata la pagina que estan viendo.
        eso con que se come? jejejeje donde o como lo hago ..
        de antemano te agradezco tu tiempo y tu experiencia
        salu2

  13. DAVID002 dice:

    Ok.. muchas gracias bro eso va en la pagina de "index" o en la que uso como templete para todas?…unas preguntas mas…(como chin…) jejeje aun y siendo golive cs2 puedo modificar los códigos htlm? por que "picandole" vi que tiene una herramienta que va en el "head" (meta ) y palabras clave… pero ya le puse ahí la descripción y las palabras clave pero sigue saliendo igual en el buscador….

    Y esto es aparte… te comento que viendo eso en google… busque "beltran" sin el 2….. y encontré la liga a mi pagina que me estaban haciendo (que estaba quedando del nabo) (con la misma dirección) por eso decidi hacerla yo mismo….. y tiene aun el enlace y sale la pagina anterior …si busco "beltran2" sale la mia …
    ahi ke o como… se supone que si yo actualizo mi pagina por ftp se debería de borrar la anterior no? o le tengo que decir al cuate que la estaba haciendo que la borre desde su servidor?

    Brother te agradezco tu tiempo

    salu2 cordiales!

    • Puedes decirle al diseñador que estaba haciendo la pagina que la borre del su servidor, ahora regresando a las instrucciones de cabecera. El Meta Description es para cada una de las paginas, y si, debes entrar al Modo HTML

  14. DAVID002 dice:

    Muchas gracias por todo!!!!!!
    …si en algo te puedo apoyar con todo gusto lo hare!

    salu2 cordiales!!

    David B.

Leave a Reply

Copyright © 2011 · Tutoriales y Photoshop, All Rights Reserved.
Powered by Free Premium Wordpress Themes.