Foros del Web » Creando para Internet » HTML »

Cómo meter paginas dentro de un div

 Estas en el tema de Cómo meter paginas dentro de un div en el foro de HTML en Foros del Web. Hola a todos soy nuevo por aquí, el caso es que estoy haciendo una página web un tanto básica con el dreamweaver pero se me ...
  #1 (permalink)  
Antiguo 21/10/2008, 03:59
 
Fecha de Ingreso: octubre-2008
Mensajes: 5
Antigüedad: 15 años, 6 meses
Puntos: 0
Cómo meter paginas dentro de un div
Hola a todos soy nuevo por aquí, el caso es que estoy haciendo una página web un tanto básica con el dreamweaver pero se me ha presentado un bache, tengo ya todo hecho el encabezado y en la izquierda todo el menu donde mi intención es que al pinchar en cada una de las opciones pues en la parte de la derecha me vayan saliendo las páginas, el caso es que la parte de la derecha es un div, y no sé como hacer, que poner para qué dentro de ese div se vayan abriendo las páginas a las que hace referencia ese menu, aquí pongo el código que tengo elaborado, lo que busco es como lo que ocurre en la página de orishas

http://www.orishasthebest.com/Index2.html

este es mi código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>P&aacute;gina *********</title>
<link rel="stylesheet" href="2col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.Estilo2 {font-size: 10px}
.Estilo3 {font-size: 12px}
body {
background-image: url();
background-repeat: no-repeat;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body {
background-attachment: scroll;
background-image: url(fondoweb.jpg);
background-repeat: no-repeat;
background-position: 320px 70px;
}
.Estilo4 {font-size: 24px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<!-- The structure of this file is exactly the same as 2col_rightNav.html;
the only difference between the two is the stylesheet they use -->
<body onload="MM_preloadImages('../im&aacute;genes/sobre21.gif','blog1.gif')">
<div align="center" id="masthead">
<form id="form1" name="form1" method="post" action="">
<p>
<marquee behavior="slide">
Bienvenid@s a nuestra página
</marquee>
</p>
</form>


<form id="form3" name="form3" method="post" action="">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="100" title="****">
<param name="movie" value="encabezado.swf" />
<param name="quality" value="high" />
<embed src="encabezado.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="100" ></embed>
</object>
</form>
<div id="globalNav">
<div align="right"><span class="Estilo3"><a href="****@***.org" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('e-mail','','../im&aacute;genes/sobre21.gif',1)"></a><a href="mailto:****@***.org" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('e-mail','','../im&aacute;genes/sobre21.gif',1)"></a><a href="#">enlace</a> | <a href="#">enlace</a> | <a href="#">enlace</a> | <a href="#">enlace</a> | <a href="#">enlace </a><a href="****@***.org" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('e-mail','','../im&aacute;genes/sobre21.gif',1)"></a> |</span></div>
</div>
</div>
<!-- end masthead -->
<div class="relatedLinks" id="content" onclick="document.location.href=.html">
<div class="feature">
<h3 class="Estilo4">*********</h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="" alt="" width="280" height="200" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


</div>
</div>
<!--end content -->
<div id="navBar">
<div id="search">
<form action="#">
<label>B&uacute;squeda</label>
<input name="searchFor" type="text" size="10" />
<input name="goButton" type="submit" value="Ir" />
</form>
</div>
<div id="sectionLinks">
<ul class="Estilo1"><li><a href="#">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="movie" value="button1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="" />
<embed src="button1.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" bgcolor=""></embed>
</object>
</a></li>
<li><a href="presentacion.html"> Presentaci&oacute;n</a></li>
<li><a href="#">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="BGCOLOR" value="" />
<param name="movie" value="button2.swf" />
<param name="quality" value="high" />
<embed src="button2.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" ></embed>
</object>
</a></li>
<li><a href="#">-*******/a></li>
<li><a href="#">-******* </a></li>
<li><a href="#">-******* </a></li>
<li><a href="#">-******* </a>
<ul>
<li><a href="#">-******* </a></li>
</ul>
</li>
<li><a href="#">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="BGCOLOR" value="" />
<param name="movie" value="button3.swf" />
<param name="quality" value="high" />
<embed src="button3.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" ></embed>
</object>
</a></li>
<li><a href="#">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="BGCOLOR" value="" />
<param name="movie" value="button4.swf" />
<param name="quality" value="high" />
<embed src="button4.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" ></embed>
</object>
</a></li>
<li><a href="#">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="BGCOLOR" value="" />
<param name="movie" value="button5.swf" />
<param name="quality" value="high" />
<embed src="button5.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" ></embed>
</object>
</a><a href="mailto:******">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
<param name="BGCOLOR" value="" />
<param name="movie" value="button6.swf" />
<param name="quality" value="high" />
<embed src="button6.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" ></embed>
</object>
</a></li>
</ul>
<p align="left"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Blog','','blog1.gif',1) "><img src="blog.gif" alt="Blog" name="Blog" width="60" height="71" border="0" id="Blog" /></a></p>
<ul class="Estilo1">
<ul>
<li> </li>
</ul>
</ul>
</div>
<div class="relatedLinks">
<h3>Enlaces</h3>
<ul class="Estilo2">
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
</ul>
</div>
<form id="form2" name="form2" method="post" action="">
<table width="70%" border="0" cellspacing="0" cellpadding="5">
<tr>
<th height="113" scope="col"><img src="../Nueva carpeta/animacion.gif" alt="animaci&oacute;nweb" width="200" height="178" longdesc="Fotos animadas" /></th>
</tr>
</table>
</form>
</div>
<!--end navbar -->
<div id="siteInfo"><a href="#">Sobre Nosotros </a> | <a href="#">Mapa del Sitio </a> | <a href="#">Pol&iacute;tica de Privacidad </a> | <a href="#"></a><a href="mailto: *******" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('e-mail1','','../im&aacute;genes/sobre21.gif',1)"><img src="../im&aacute;genes/sobre2.gif" alt="e-mail" name="e-mail1" width="40" height="32" border="0" align="baseline" id="e-mail1" /></a>| &copy;2008 *********</div>
<br />
</body>
</html>
  #2 (permalink)  
Antiguo 21/10/2008, 05:06
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Cómo meter paginas dentro de un div
Hola:

Bueno, te respondo la parte teórica, porque mirar código DW es una cosa muyu difícil, ya que suele insertar mucha basura (te recomiendo que vayas aprendiendo html, y escribas el código directamente... no es tan difícil)...

Dentro de ese div (aunque podrías obviarlo) debes poner un iframe al 100% de width y height, aunque si no lo pones, puedes asignar los estilos directamente a ese iframe.
Ese iframe debe tener un nombre (atributo name) y los enlaces deben tener un atributo target con el mismo nombre del iframe.

Por cierto, no es necesario usar javascript, así que moveré el mensaje a (X)HTML.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/10/2008, 05:57
 
Fecha de Ingreso: octubre-2008
Mensajes: 5
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Cómo meter paginas dentro de un div
Muchas gracias caricatos lo voy a intentar a ver, me has salvado la vida y desde luego que voy a seguir aprendiendo
  #4 (permalink)  
Antiguo 05/02/2009, 07:38
 
Fecha de Ingreso: febrero-2009
Mensajes: 3
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Cómo meter paginas dentro de un div
Hola!!

Me ha costado hacerlo, pero ya me funciona, espero que os sirva:

prueba.html
prueba2.html
prueba3.html

En prueba.html hago un botón que se llame "ABRIR" y al pinchar en abrir, me habre "prueba2.html" dentro del iframe-div que tengo en la página "prueba.html"


<html>

<head>
<title>Prueba iframe dentro de div</title>
<style type="text/css" media="screen">
<!--
#layer1 {
visibility: visible;
position: absolute;
width: 100px;
height: 100px;
left: 9px;
}
-->
</style>
</head>

<body>
-------------botón abrir
ABRIR
---------------iframe que se llama contenido
<div id="layer1">
<iframe src="prueba3.html" name="contenido"></iframe>
<a href="prueba2.html" target="contenido"> ABRIR </a>
---------------aquí le estamos diciendo que al pinchar ABRIR, nos habra PRUEBA2 dentro del iframe CONTENIDO.
</div>

----------- (explicación)
Con esto podemos dividir nuestra web en divs, porejemplo menu a la izquierda y contenido a la derecha. pinchamos en el menú y se carga en el contenido.
Es muy útil si tenemos 20 páginas y cambiamos mucho el menú (porejemplo para poner destacados o enlaces...). Así lo cambiaremos una sola vez

No sé si me explico.
Saludos
KD
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


« Tema Anterior | Próximo Tema »


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