Como se consigue este estilo de diseño.

[Norton]

He visto varias paginas, en las cuales todo su fondo es la portada de un disco, pero lo que no entiendo es como consiguen que este fondo se mantenga y solo salga la informacion de los links en el centro sin variar su estructura de diseño, yo creo que no esta hecho con frames, lo que no se si han utilizado capas.¿Me podeis orientar como puedo hacer ese tipo de diseño?, quiero hacer algo parecido utilizando una textura creada por mi en la cual se mantenga siempre firme, pero saliendo la info de los links en el centro tipo como la web del ejemplo:
www.humanmincer.com

Orientarme por favor ya que estoy algo perdido, he visto su codigo fuente pero no lo entiendo muy bien ya que en esto soy nuevo.
Norton

[vad]

Me parece que una solución puede ser la siguiente.
Creas un documento con la imagen de fondo que quieras.
luego usas capas para ubicar los botones.
finalmete en el centro creas tantas capas como botones tengas (una sobre otra y no debes olvidar ponerle nombre a cada capapara poder trabajar con ellas seleccionándolas desde el panel capas) llenas cada capa con el contenido qe necesites y luego mediante el panel de comportamientos usas "mostrar ocultar capas"
este comportamiento es simple de usar si buscas en este mismo foro o en tutoriales en la red encontrarás explicaciones muy didácticas y creo que es la solución a tu problema.

[Norton]

Mirare por ahi tutoriales Vad , vere si consigo informacion y luego si lo entiendo intentare ponerlo en practica con alguna web que diseñe de prueba, si no volvere a pregutar sobre este tema aqui mismo, gracias por tu info.

Norton

[Kitiara]

¿Y no será más probable que esté usando iframes? Lo digo porque quizá sea más sencillo que utilizar las capas. Eso sí, hay que tener mucho cuidado para que la imagen de fondo de la tabla coincida con la del fondo de la página.

Un saludo

[Rebel001]

lo que ellos estan usando es un javascript en el pricipio de su pagina, la cual abre un pop-up, el cual contiene la pagina, y lo que tu ves en el fondo puede ser una imagen en partes, osea arriba, al los lados y abajo, puedes poner un iframe como dice Kitiara, despues con Body en el CSS haces que el frame tenga el color que quieras.
bye

[Norton]

Hola Kitiara y Rebel001, si no recuerdo mal (iframe es igual a marco flotante).
Imagino que para el fondo del "iframe" han recortado en photo shop o en algun otro programa de diseño, esa porcion de la pagina principal y le han aplicado un pequeño degradado para que se lean bien los textos, luego lo han aplicado como fondo en los iframes determinados por los enlaces de la pagina.
Rebel001 tiene razon con el asunto del "scritp"; primero aplica dicho codigo para abrir la ventada a las dimensiones deseadas, y creo que los comandos/links estan mapeados si no me equivoco.
Mi duda es que nose como linkear desde los comandos hasta los "iframes" determinados, nunca he usado este tipo de marcos flotantes, es mas cuando quiera pasar de un marco flotante a otro por que la informacion sea muy extensa como debo de hacerlo.¿tengo que interpretar este tipo de marcos como si se tratara de los tipicos "frames"?.
Orientarme un poco sobre este tema, yo intentare hacer el diseño en el photo shop7 para probar lo que ha comentado Kitiara, ya vere si consigo linkear desde los comandos/enlaces hasta cada "iframe".Lo veo muy dificil pero a todo se llegara con tiempo y dedicacion.

Norton

[rusoftware]

Al igual que Vad, yo creo que usaron capas... con Dreamweaver abres la palera de "comportamientos" (beaviors) y seleccionando una gráfica (el botón) le das a "mostrar-ocultar capas"...

La que quieres mostrar, le pones "show" y las que quieres esconder: "hide". Luego, das a "aceptar" y en la paleta de comportamientos aparecerá éste... Ahí configuras el evento de ratón (on click, on mouse over, etc) con la flechita.

Un abrazo. Fede

[caricatos]

Hola Norton:

La verdad es que no uso ningún editor, pero te puedo decir como está hecha la página (la que es un popup)

Hay una imagen de fondo que abarca toda la ventana y hay un iframe que tiene de fondo un sector de la misma imagen... seguro que no tiene frameborder y el recorte de la imagen que se usa de fondo del iframe seguramente le ha sido aplicado un filtro (o algo similar) con algún editor (tal vez photoshop)
La imagen de fondo tiene que estar fija (background-atachment: fixed) de esta manera no es importante si se repite o no.
Para los enlaces es necesario que el iframe tenga un nombre (name="grande" o algo similar) y los enlaces serán con el target igual al nombre del iframe.
<a href="destino.html" target="grande" > enlace destino </a>

Saludos

[amanda75]

Pues muy interesante el sistema, pero quien tenga deshabilitados los PopUp en su navegador,,,,( como yo mismita),,,, no podrá entrar a esta web.


Y dudo mucho que alguien que haya elegido esa configuración en su navegador, la cambie para entrar en algún sitio.

[vad]

me parece que es complicarse demasiado, porque es muy dificil hacer coincidir una imagen con otra en cambio las capas son transparentes por lo tanto solo usas una vez el fondo y luego colocas las capas una sobre otra, mas sencillo que eso imposible.

[Norton]

Gracias Caricatos por tus explicaciones, casi tengo ya diseñada lo que es la base de la pagina que sale en un pop-up, lo que no consigo es vincular bien los comandos del menu hacia los iframes pero con tu explicacion probare hacerlo de esa manera y vere si me sale lo de los vinculos.

La idea de Vad tampoco esta mal, la he probado tambien pero tengo un problema y es que el fondo es bastante claro y los textos no se ven bien, una solucion seria degradar todo el fondo pero pierde su gracia bastante la verdad sea dicha.Gracias por tu ayuda.
Norton

[-Defero-]

No es un iframe, en este caso son frames (marcos). Mirad el código de la estructura:

Código HTML:

<frameset rows="71,*" frameborder="NO" border="0" framespacing="0"> 
  <frame name="topFrame" scrolling="NO" noresize src="fondo_arriba.html" frameborder="NO" >
  <frame name="mainFrame" src="nexo2.html" frameborder="NO" scrolling="NO">
</frameset> 

Con el archivo fondo_arriba.html crea la franja de arriba. Luego, nexo2.html tiene dentro como frame este otro documento, el cual a su vez tiene dentro otros dos frames, con este código:

Código HTML:

<frameset rows="456,*" frameborder="NO" border="0" framespacing="0"> 
  <frame name="topFrame" scrolling="NO" noresize src="nexo3.html" frameborder="NO" >
  <frame name="mainFrame" src="fondo_abajo.html" scrolling="NO" frameborder="NO">
</frameset> 

El archivo fondo_abajo.html crea la franja inferior. El archivo nexo3.html tiene otros dos frames:

Código HTML:

<frameset cols="100,*" frameborder="NO" border="0" framespacing="0"> 
  <frame name="leftFrame" scrolling="NO" noresize src="fondo_izda.html" frameborder="NO">
  <frame name="grande" src="nexo4.html">
</frameset> 

El primer frame muestra el contenido del lado izquierdo (fondo_izda.html), y el segundo (nexo4.html) contiene otros dos frames más:

Código HTML:

<frameset cols="600,*" frameborder="NO" border="0" framespacing="0"> 
  <frame name="leftFrame" noresize src="news/index.html" frameborder="NO">
  <frame name="mainFrame" src="fondo_dcha.html" scrolling="NO" frameborder="NO">
</frameset> 

El primer frame es el que muestra el contenido (news/indes.html), y el segundo muestra el lado derecho (fondo_dcha.html). O sea, que el contenido está aquí, que es donde deberemos mirar eso del fondo inmóvil (podíamos haber accedido a este documento mucho más rápido pulsando en Mozilla botón derecho-este marco-mostrar solamente este marco, pero eso sería menos divertido). Debes fijarte en esta línea:

Código HTML:

<link rel="stylesheet" href="../estilos/estilos.css" type="text/css"> 

Esa línea hace referencia a una hoja de estilo, en la que encontraremos esto:

Código HTML:

body {  background-color: #000000; font-family: Verdana; font-size: 10px; font-weight: normal; color: #FFFFFF; background-repeat: no-repeat; background-attachment: fixed; background-position: left top; line-height: normal; background-image:  url(../gfx/fondos/fondo_trabajo.jpg)}

El truco está en lo de background-attachment: fixed, que hace que el fondo no se desplace con el texto.