Foros del Web » Creando para Internet » Diseño web »

Dificultad en página web...

Estas en el tema de Dificultad en página web... en el foro de Diseño web en Foros del Web. Hola a todos. Les pido ayuda!! Esta es una imagen de lo que me pidieron: http://www.subirimagenes.com/imagen-paginaweb-5811436.html Me pidieron una página donde: La primer parte de ...
  #1 (permalink)  
Antiguo 18/01/2011, 12:21
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 11 meses
Puntos: 0
Dificultad en página web...

Hola a todos.
Les pido ayuda!!

Esta es una imagen de lo que me pidieron:
http://www.subirimagenes.com/imagen-paginaweb-5811436.html

Me pidieron una página donde:
La primer parte de cabecera y menu tiene que estar siempre visible... y también la parte inferior con el contacto... lo único "movible" es la parte intermedia... pero resulta que toda la página en sí tiene un degradee... yo estaba maquetando con photoshop y me doy cuenta que al hacer esto si luego la parte intermedia la mueven para abajo para recorrerla pues se pierde el degradee, es decir, el degradee de la cabecera no engancha con el del medio y así...

¿Cómo se puede hacer esto?

Si no se entiende algo me explico mejor!

Saludos y gracias!
  #2 (permalink)  
Antiguo 18/01/2011, 12:49
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dificultad en página web...

creo que el contenido del "MEDIO" que como lo menciones, será el unico que recargara y cambiara, Podrias usar un Iframe.

Pero si links o el menu estarian en la cabezera, entonces podrias usar divs y un poco de jQuery :)

Esto de jQuery, lo encontraras en google como Tabs jQuery y se hace en CSS, dandole los estilos apropiados, en HTML solo con divs, y listas (ul/li) y la libreria correspondiente de jQuery, 1.1.11 (creo)

Saludos
  #3 (permalink)  
Antiguo 18/01/2011, 12:58
 
Fecha de Ingreso: enero-2011
Mensajes: 58
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Dificultad en página web...

No entiendo...

Puedes explicarte mejor?

Un saludo!
  #4 (permalink)  
Antiguo 18/01/2011, 13:13
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dificultad en página web...

No creo que tenga que explicar, por que mejor, no se puede.
Para lograr hacer una pagina, debes de tener conocimientos y si no los tienes, no podras entender que es lo que trato de decirte y mucho menos, podras realizarla.

Ahora... rimboe eres erdosain9
Por que el que creo este tema es erdo y tu me dices que te explique?

Ya te dije, si no entiendees investiga, que son y como se utilizan los iframe.
o busca en google tabs jquery (tambien te lo dije).

Si no tienes conocimientos de CSS y HTML, no creo que entiendes a los tabs jquery.

Y por decima vez, investiga, en san Google encontraras mucho contenido
  #5 (permalink)  
Antiguo 18/01/2011, 13:36
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Dificultad en página web...

Hola, muchas gracias por contestar!

No hay forma de hacer esto sin el Jquery que mencionás? Porque bueno, tendría que aprenderlo... y no sé si tengo el tiempo.

No sé puede hacer sólo con div y css?

saludos y gracias!

P.d.: por cierto, no hay otra forma aparte de los Iframe?... sólo por saber... Quiero decir, si no uso Iframe, tendría que recargar constantemente la parte superior? ¿NO hay otra?
  #6 (permalink)  
Antiguo 18/01/2011, 13:51
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dificultad en página web...

Exacto!!! no hay otra forma, sin iframes, Se recargaria todo.
  #7 (permalink)  
Antiguo 18/01/2011, 14:49
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Dificultad en página web...

Hola, disculpen mi ignorancia pero entonces, por ejemplo en una página como esta http://www.clasificados.clarin.com/
la parte del menu (inmbuebles, autos, empleos, etc.) cada vez que entro a alguno de ellos se vuelve a cargar toda la parte superior??

Y por otro lado y más importante... esto quiere decir por ejemplo que si tuviera una página principal con este menú (cuento 1, cuento 2, cuento 3)

Cuento 1 refiere a una página llamada cuentoUno.html,
Cuento 2 refiere a una página llamada cuentoDos.html,
etc...

Entonces cuentoUno.html, y cuentoDos.html, etc. tienen exactamente las mismas referencias a imágenes, etc. quiero decir, el mismo código repetído uno y otra vez en cada página para generar ese menú???

Si fuera así, no sería más "viable", poder generar un archivo tal que se llamara Menú y luego referirlo, por ejemplo, simplemente con el nombre en cuentoUno.html, y cuentoDos.html?? para que no tenga que estar todo el código repetido en varios html al pedo, digo...

Lo que pregunto probablemente sea resultado de mi ignorancia, pido disculpas de antemano... je.

Saludos y gracias!

p.d.: espero se entienda lo que digo... explico un poco más por si acaso...

supongamos que tengo varios textos a los cuales se accede por un menú horizontal en la parte superior, para mantener ese menu por todas las páginas voy a tener que copiar exactamente todo el código, en cada uno de las páginas que muestran el menu... ¿? aunque sólo sea que después sólo voy a cambiar un texto por otro??? (sin el uso de marcos, digo)
  #8 (permalink)  
Antiguo 18/01/2011, 14:57
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dificultad en página web...

Si, puedes hacer el menu en una pagina. Ejemplo menu.html

y con un include ( es PHP ), pones el menu en cuentouno.html y cuentodos.html, sin necesidad de volver a escribir el mismo codigo en estas paginas.

Saludos :)
  #9 (permalink)  
Antiguo 18/01/2011, 15:09
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Dificultad en página web...

Podrías darme un ejemplo de código de esto o decirme dónde buscar eso en concreto??
  #10 (permalink)  
Antiguo 19/01/2011, 01:54
 
Fecha de Ingreso: enero-2011
Mensajes: 58
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Dificultad en página web...

Cita:
Iniciado por Kurozaki Ver Mensaje
No creo que tenga que explicar, por que mejor, no se puede.
Para lograr hacer una pagina, debes de tener conocimientos y si no los tienes, no podras entender que es lo que trato de decirte y mucho menos, podras realizarla.

Ahora... rimboe eres erdosain9
Por que el que creo este tema es erdo y tu me dices que te explique?

Ya te dije, si no entiendees investiga, que son y como se utilizan los iframe.
o busca en google tabs jquery (tambien te lo dije).

Si no tienes conocimientos de CSS y HTML, no creo que entiendes a los tabs jquery.

Y por decima vez, investiga, en san Google encontraras mucho contenido
Que hablas? me parece que estas un poco confundido.. en ningún momento te menciono, pido explicaciones al autor del post....
  #11 (permalink)  
Antiguo 19/01/2011, 16:58
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dificultad en página web...

Cita:
Iniciado por rimboe Ver Mensaje
Que hablas? me parece que estas un poco confundido.. en ningún momento te menciono, pido explicaciones al autor del post....
Jeje.. Apuesto que si te tuviera enfrete, ya quisieras pegarme xD.
Pero tu post esta abajo del mio y dices que explique mejor.

jamas crei que le dijeras al autor, ya que el ha explicado muy bien, y se entiende muy bien su problema.

___________________________________________

@erdosain9

Tienes tu pagina, ejemplo, este codigo:
Código HTML:
<html>
<head><title>mi pagina</title>
<style type="text/css">
* {margin:0; padding:0; border:0;}
body {background:#00F;}
#contenido {width:100%; height:500px; background:#0F0; color:#000; font-size:21px;}
#footer {width:100%; height:30px; background:#EE7; color:#000; font-size:20px; font-weight:700px;}
#menu {width:100%; height:40px; color:#000;}
</style>
</head>
<body>

<div id="menu">
<?
	include('menu.html');
?>
</div>
<div id="contenido">
bla bla bla... XD
</div>
<div id="footer">
derechos de autor.
</div>

</body>
</html> 
y tienes el menu que seria este codigo:
Código HTML:
<html>
<head><style type="text/css">
#menue {width:auto; margin:0 auto; list-style:none;}
#menue li {float:left;}
#menue li a {display:block; width:auto; padding: 5px 3px; text-decoration:none;}
#menue li a:hover {background:#2929FE;}
</style></head>
<body>
<ul id="menue">
<li><a href="#">INICIO</a></li>
<li><a href="#">CATEGORIAS</a></li>
<li><a href="#">FOROS</a></li>
<li><a href="#">CONTACTAME</a></li>
</ul>
</body></html> 
Ahora si te fijas en tu pagina con un include, hemos puesto el menu, sin necesidad de poner el codigo.

Asi que si tienes10 paginas, solo tienes que poner:

<? include('el menu'); ?>

que en este caso es menu.html





Saludos :)


P.D: recuerda que el include es PHP, asi que, no te funcionara si lo calas desde tu PC, tienes que tener un servidor local o alojado en un host que ejecute PHP :)
  #12 (permalink)  
Antiguo 19/01/2011, 21:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Dificultad en página web...

erdosain9:

Hay varias formas de hacer lo que querés, pero cada una necesitará de ajustes específicos según sea el conteido de tu web, es particular de la parte central, que es la que cambia.

No necesariamente tenes que usar iframes, podés hacerlo con ajax.
La idea es crear 3 divs, una para el header y otra para el footer o pie, ambas con position:fixed, y una central donde, a traves de ajax se cargarían los contenidos de los links del menu.

Es decir, que toda tu web se cargaría en una página única, el index. Ni siquiera necesitarías los includes (que, por otra parte si no usas php, te queda la alternativa de hacerlo con SSI)

Una vez solucionado esto tenes que ver el tema del degradé de fondo.
Ahi la cosa se complica un poco más. Esto que sigue puede funcionar, pero tenes que trabajar un poco con las imágenes.

Lo que no me gusta mucho de este sistema es que si el contenido central te genera scroll, la estética del degradee se rompe. (probá de cargar le archivo 2 desde el menu para verlo)

Y no funciona del todo bien en IE7

Demo
http://foros.emprear.com/ajax/degradee/index.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 20/01/2011, 01:10
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Dificultad en página web...

Para mí y según entiendo de:
Cita:
Iniciado por erdosain9 Ver Mensaje
Me pidieron una página donde:
La primer parte de cabecera y menu tiene que estar siempre visible... y también la parte inferior con el contacto... lo único "movible" es la parte intermedia... pero resulta que toda la página en sí tiene un degradee... yo estaba maquetando con photoshop y me doy cuenta que al hacer esto si luego la parte intermedia la mueven para abajo para recorrerla pues se pierde el degradee, es decir, el degradee de la cabecera no engancha con el del medio y así...

se trata solamente de presentación y no de programación. Es decir con aplicar los estilos correctos lograrás lo que buscas.
Para el degrade, simplemente pones el fondo en el div contenedor o en el body, mientras que no le pones fondos al div menu, ni al div contenido, ni al div pie.

En cuanto a que sean visible cabecera, menu y pie, supongo que es que sea visible en el navegador siempre y no haya que estar bajando con el scroll para ver por ejemplo el pie. Es decir que la página será de una altura tal que siempre quepa en la ventana del navegador. Esto es una cuestión de determinar la altura, en base a alguna resolución de pantalla. En la imagen que pones tienes una altura de 1024px, pero como yo uso una resolución de altura 768 (1024x768) tengo que usar el scroll para ver toda la página. Así que define eso y luego es cuestión de que la suma de los div cabecera+menu+contenido+pie sea igual a la altura definida.
En cuanto al div contenido deberías usar este estilo para que aparezca el scroll de ser necesario

Te dejo lo que estuve probando, solo es cuestión de adaptar las alturas:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin título</title>
  5.  
  6. <style type="text/css">
  7. <!--
  8. /* reseteo de estilos por defecto*/
  9. * {margin:0; padding:0;  outline: 0;}
  10. a {outline:none;}
  11. ul {list-style:none}
  12.  
  13. #contenedor{
  14.     background-image: url(imagenes/fondos/fondo1fdw.png);
  15.     background-repeat: repeat-x;
  16.     height: 1024px;
  17.     width: 970px;
  18.     margin-right: auto;
  19.     margin-left: auto;
  20.     position: relative;
  21.     background-position: bottom;
  22. }
  23. #cabecera {
  24.     color: #660;
  25.     background-image: url(imagenes/fondos/fondofdwcabeza.png);
  26.     background-repeat: repeat-y;
  27.     height: 100px;
  28.     width: 100%;
  29. }
  30. #menu{
  31.     height: 50px;
  32.     width: 100%;
  33.     text-align: center;
  34. }
  35. #contenido{
  36.     width: 90%;
  37.     height: 450px;
  38.     overflow:auto;
  39.     text-align: center;
  40. }
  41. #pie{
  42.     height: 80px;
  43.     width: 100%;
  44.     position: absolute;
  45.     margin-right: auto;
  46.     margin-left: auto;
  47.     border-top-width: medium;
  48.     border-top-style: solid;
  49.     border-top-color: #FFF;
  50.     bottom: 0px;
  51. }
  52. -->
  53. </head>
  54.  
  55. <div id="contenedor">
  56.  
  57. <div id="cabecera"> acá va la cabeceras </div>
  58. <div id="menu"> <img src="imagenes/fondos/fondofdwboton.png" width="162" height="42" /> </div>
  59. <div id="contenido">contenido <img src="imagenes/fondos/fdwcontenido.jpg" width="426" height="644" /></div>
  60. <div id="pie">pie</div>
  61. </div>
  62. </body>
  63. </html>

Bien, si entendí mal tu consulta y realmente se trata de que "siempre visible" es " no recargar esa parte de la página"desde ya te pido disculpas.
Saludos

PD: las imagenes son recortes de la tuya, es decir recorte la cabecera, los botones, etc.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 20/01/2011 a las 01:17

Etiquetas: degradee, dificultad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:03.