Hacer web se ajuste tamaño pantalla

[manuedcai]

Hola

Mi pregunta es sencilla.

Tengo un web creada con photoshop y luego editada con dreamweaver solo para poner hipervinculos a otras direcciones web.
Lo que quiero es que cuando se abra la web esta se adapte al ancho y altura de la pantalla de quien la visite.
¿Tiene que ser sencillo,no? Todo el mundo la tiene asi jeje

Formulario para mi ayuda:

-Imagen de la portada web creada con photoshop y luego guardada con guardar para web y dispositivos
-Abierta con dreamweaver 8 solo para selecionar dos zonas de esa pagina para añadirle enlaces a otros zonas www
-SO: Snow Leopard (maquero)
-Hosting gratuito
-Si necesitas mas info puedes pedirmela.

Gracias

[DragonX]

para que tu sitio "se acomode" a la resolución del usuario tenes que armar todas las medidas en porcentaje (%) por ende todo lo que tenes tal vez no te sirva, ya que las imagenes tienen medida fija en pixels...

[manuedcai]

mmmmm ok ok

tengo el psd de la pagina web, como lo harias para configurarlo en porcentaje?

como harias tu la web? me refiero como la harias con photoshop? o como la harias con dreamweaver (pasando imagenes creadas con photoshop)?

[manuedcai]

a ver ya he descubierto algo pero sin solucionar mi problema....(tened en cuenta que soy 100% novato)

he creado una tabla, la he puesto en porcentaje en vez de en pixeles y he metido dentro de la tabla la imagen; inconvenientes= sigue sin adaptarse a la resolucion de la web, se ve el marco de la tabla

:S:S

[manuedcai]

la web es

www.kitincadi.tk

a ver si alguien ve la solucion

[vandercraft]

si tienes tu platilla hecha en photoshop, lo ideal seria exportarlo a image ready en el cual podras maquetar tu web, para que posteriormente puedas usar hojas de estilo, o como dicen en anteriores respuestas lo mas facil en tu caso si no quieres complicarte es usar porcentajes en las medidas.

Saludos

[manuedcai]

Iniciado por vandercraft

si tienes tu platilla hecha en photoshop, lo ideal seria exportarlo a image ready en el cual podras maquetar tu web, para que posteriormente puedas usar hojas de estilo, o como dicen en anteriores respuestas lo mas facil en tu caso si no quieres complicarte es usar porcentajes en las medidas.

Saludos

me podrias decir como se hace?

o sino quieres tener muchos trabajo solamente un tutorial que me diga como maquetar mi web o como poner en porcentajes las medidas!!

gracias vandercraft por la respuesta

[manuedcai]

Por si puedo ayudar a alguien que ande como yo...

Seleccionando en la esquina del dreamweaver con el rato todo el conjunto de la tablas, te sale en las propiedades de las tablas abajo en el recuadro para pasarlo a porcentaje en vez de pixeles fijos.

Aun asi, no logro eliminar el cuadro que forma cuando se crea una tabla :S

[manuedcai]

Por favor, alguien sabe la respuesta a mi tema?

Vuelvo a formular la pregunta.

Tengo un .psd donde tengo toda la web hecha y maquetada con la herramiento sector. Lo guardo para web y otros dispositivos y me da un html como resultado.

¿Que tengo que hacer para que ese html se ajuste al tamaño de la pantalla del navegador?

Gracias

[jomaruro]

Hola:

Sin ver tu código es difícil que es lo que hay que cambiar.

¿Qué tal leerte los manuales de XHTML y CSS de www.librosweb.es?

Saludos.

[manuedcai]

Estupendo jomauro! Te doy las gracias personalmente.

Voy a leer los dos de html y css a conciencia. Si sigo con dar la tecla pues ya mi unica solucion seria copiar aqui el codigo entero.
Pero vamos espero que entendiendo bien este mundillo no sea muy dificil ajustar una web al tamaño de una pantalla.

Saludos

[vandercraft]

Iniciado por jomaruro

Hola:

Sin ver tu código es difícil que es lo que hay que cambiar.

¿Qué tal leerte los manuales de XHTML y CSS de [url]www.librosweb.es?[/url]

Saludos.

Lo mejor que puedes hacer es leer ess manuales que dice Jomaruro es mejor utiliza hojas de estilo.

sin embargo si quieres algo facil prueba como te dijeron anteriormente meter tus imagenes resultantes en una tabla, e introduce las medidas en porcentajes donde 100% indica el tamaño total de la pantalla, aunque debes tener cuidado por que depende del diseño e imagen que estes utilizando.

sin embargo el uso de tablas y tablas anidadas no es conveniente por diversas cuestiones, asi que recomiendo que te leas el manual que posteo Jomaruro

Saludos.

[ccello]

No te recomiendo ajustar en % porque la imagen se distorsionara si por ejemplo ejemplo habren la web en 600 por 300 por ejemplo.

[gdasoft]

Yo en mi caso si lo que deseas es que tu site se adapte a las diferentes configuraciones de monitor crearia la página utilizando porcentajes %.

Y si te vieras en el inconveniente que menunciona ccello

No te recomiendo ajustar en % porque la imagen se distorsionara si por ejemplo ejemplo habren la web en 600 por 300 por ejemplo.

Simplemente tendrias que hacer que al abrir tu página web esta maximize la ventana.

Aunque cuando asignas las medidas de tu web en % ten en cuenta también especificarle el mínimo de alto y ancho para que cuando hagan la ventana pequeña no se te monten todas las capas o tablas unas encima de otras que queda MU FEO :)

[gdasoft]

PD: Al acceder a tu página el antivirus NOD32 la bloquea, que lo sepasssss!

[ilu7ionHD]

Iniciado por manuedcai

Hola

Mi pregunta es sencilla.

Tengo un web creada con photoshop y luego editada con dreamweaver solo para poner hipervinculos a otras direcciones web.
Lo que quiero es que cuando se abra la web esta se adapte al ancho y altura de la pantalla de quien la visite.
¿Tiene que ser sencillo,no? Todo el mundo la tiene asi jeje

Formulario para mi ayuda:

-Imagen de la portada web creada con photoshop y luego guardada con guardar para web y dispositivos
-Abierta con dreamweaver 8 solo para selecionar dos zonas de esa pagina para añadirle enlaces a otros zonas www
-SO: Snow Leopard (maquero)
-Hosting gratuito
-Si necesitas mas info puedes pedirmela.

Gracias

Amigo ajustar el tamaño con % no funciona, genera errores.
Lo que debes hacer es lo siguiente:
Hacer una funcion que busque la resolucion del usuario entonces mediante "if" podes ajustarla. Algo asi

<script language="javascript">
ancho = window.length;
if(ancho == "800"){
aqui el codigo para resoluciones 800x600;
}else if(ancho == "1024"){
aqui el codigo para resoluciones 1024x768;
}
</script>

[Canomi]

Y esa función, perdonad mi ignoracia, en que parte del código hay que introducirla?

Muchas gracias de antemano.

[Canomi]

Iniciado por ilu7ionHD

Amigo ajustar el tamaño con % no funciona, genera errores.
Lo que debes hacer es lo siguiente:
Hacer una funcion que busque la resolucion del usuario entonces mediante "if" podes ajustarla. Algo asi

<script language="javascript">
ancho = window.length;
if(ancho == "800"){
aqui el codigo para resoluciones 800x600;
}else if(ancho == "1024"){
aqui el codigo para resoluciones 1024x768;
}
</script>

Otra pregunta: ¿ A que te refieres con lo de "aquí el código para resoluciones"? Dios, creo que me queda muchísisimo por aprender, ¿No es apasionante?

Gracias

[Trublux]

Básicamente lo que tienes que hacer es, en vez de usar píxeles, usar ems y %.
Para el tema de las imágenes, tienes que ponerlas de width 100% y el height auto; para que no distorsionen tienes que poner un max-width.

Pero lo mejor es que busques información sobre diseño líquido (flexible) y responsive design, y usar media queries.

Aquí hay algunos ejemplos de responsive design (cambia el tamaño de la ventana del navegador y verás cómo el contenido se adapta):
Responsive design – harnessing the power of media queries

P.D.: No he podido acceder a la web que has puesto.

[Canomi]

Iniciado por ilu7ionHD

Amigo ajustar el tamaño con % no funciona, genera errores.
Lo que debes hacer es lo siguiente:
Hacer una funcion que busque la resolucion del usuario entonces mediante "if" podes ajustarla. Algo asi

<script language="javascript">
ancho = window.length;
if(ancho == "800"){
aqui el codigo para resoluciones 800x600;
}else if(ancho == "1024"){
aqui el codigo para resoluciones 1024x768;
}
</script>

Aún así sigo sin saber eso de "codigo para resoluciones" Por favor. Auda!!!

[Trublux]

Lo que quiere hacer es que cargues un CSS u otro dependiendo de la resolución de la pantalla.
Para saber qué resolución tiene el usuario usa JavaScript; pero esto mismo se puede hacer con media-queries (y es más correcto).