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 página 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 más común, 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 hacer una pagina web, vas a usar las medidas anteriores, pero en debemos armar las (o capas) y realizar la maquetación de la página web, llamando a cada tabla que nos genera photoshop e insertándola 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 web 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:

  • raíz
    • imágenes
    • animaciones
    • documentos

Agrega otra carpeta para que tu sitio quede asi:

  • raíz
    • imágenes
    • 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 tendrás que modificar nada en el codigo, ya que Dreamweaver te pregunta si deseas actualizar los vínculos, a lo cual deberás contestar SI.

Como podrás observar en Dreamweaver (hasta este momento) 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 resolución 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.
Tómalo en cuenta.

Espero les haya sido de utilidad.

28 comments on “Tamaño de una pagina web

  1. 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!

  2. 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.

  3. 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.

    • 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.

  4. 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.

  5. 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.

      • 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

  6. 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

  7. deberias aprender CSS las divisiones se logran con la etiqueta DIV y cada DIV deberia tener un ID para darle estilo en el archivo css o etiqueta style

  8. Pingback: Mi primera pagina web |

  9. Pingback: Tutoriales diseño web, aprende a crear paginas web a tu ritmo gratis

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>