Ver Mensaje Individual
  #4 (permalink)  
Antiguo 12/09/2008, 21:29
_CesaR_
 
Fecha de Ingreso: junio-2007
Mensajes: 9
Antigüedad: 16 años, 10 meses
Puntos: 3
Respuesta: Como usar Lightbox en Dreamweaver

Si ya me se los codigos, el problema es que no se en que parte del codigo de la pagina ponerlo

Este es el codigo de la pagina en donde quiero usar el efecto Lightbox

Cita:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
body {
background-color: #0d0d0d;
}
a:link {
text-decoration: none;
color: #CCCCCC;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.Estilo9 {
font-size: 11px;
color: #999999;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body>
<table width="780" height="326" border="0" align="center" bordercolor="#181818" bgcolor="#131212">
<tr>
<td><img src="Imagenes/header_saggazze.gif" alt="Famiglia Saggazze" width="749" height="300" hspace="10" /></td>
</tr>
</table>
<table width="780" border="0" align="center" cellspacing="0" bordercolor="#151515">
<tr>
<td colspan="2">                                  <a href="index.html"><img src="Imagenes/boton_principal_1.gif" alt="principal" width="99" height="65" border="0" /></a><a href="Imagenes/Galeria/Nueva carpeta/petadas.html"><img src="Imagenes/boton_petadas_2.gif" alt="Petadas" width="99" height="65" border="0" /></a><a href="sobre_saggazze.html"><img src="Imagenes/boton_sobre_3.gif" alt="Sobre Saggazze" width="99" height="65" border="0" /></a><img src="Imagenes/boton_rangos_4.gif" alt="Rangos y Vestimenta" width="99" height="65" /><a href="contactanos.html"><img src="Imagenes/boton_contact_5.gif" alt="Contactanos" width="94" height="65" border="0" /></a></td>
<td bgcolor="#151515">&nbsp;</td>
</tr>

<tr>
<td width="280" height="73"><img src="Imagenes/saggazze_grazie.gif" alt="Grazie" width="271" height="132" /></td>
<td width="486" rowspan="3" bgcolor="#0D0D0D"><p align="center"><strong>Asociato<br />
</strong><img src="Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" /></p>
<blockquote>
<p align="center">El asociato es el primer rango, con el que empezarás a trabajar.<br />
Con este rango te encargarás de ayduar a conseguir empleo a la gente que llegue a la sala, explicales cual es la vestimenta, cual es la misión y cual es la placa que deben usar.<br />
Recuerda tratar a los clientes con amabilidad.</p>
<p><strong>Vestimenta:</strong> <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif','HombreAsociato','width=451,height =414')">Hombre</a> - <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif','MujerAsociato','width=447,height=4 08')">Mujer</a> (clic para ver imagen)</p>
<p><strong>Misión:</strong> Asociato [Saggazze]</p>
<p><strong>Rango siguiente:</strong> Soldato</p>
<p><strong>Placa:</strong> Deberás portar la placa roja</p>
<p align="left"><strong>Debes tener en cuenta que:</strong></p>
</blockquote>
<ul>
<li>Para la misión recuerda respetar las mayúsculas, minúsculas y corchetes.</li>
<li>Debes obedecer a los rangos superiores, de no ser así, serás sancionado.</li>
<li>Para los corchetes presiona Alt+91 para [ y Alt+93 para ]</li>
<li>Resivirás paga, siempre y cuando te destaques entre los demas trabajadores, recuerda que se les paga a los 5 mejores.</li>
<li>No estan permitidos los accesorios.</li>
</ul>
<div>
<div align="right"></div>
</div> <p>&nbsp;</p></td>
<td width="8" rowspan="3" bgcolor="#151515">&nbsp;</td>
</tr>
<tr>
<td height="156" bordercolor="#FFFFFF" bgcolor="#151515"><div align="center"> <strong>Lista de rangos</strong><strong></strong></div>
<ul><li>Soldato</li>
<li>Sicario</li>
<li>Esecutore</li>
<li>Muscle</li>
<li>Proxeneta</li>
<li>Capodecine</li>
<li>Caporegime</li>
</ul></td>
</tr>
<tr>
<td height="178" bgcolor="#151515"><div align="center">
<p><img src="Imagenes/silla_mamut.gif" alt="Saggazze's Style" width="200" height="117" hspace="40" /></p>
<p><img src="Imagenes/saggazze_style_texto.gif" alt="Saggazze Style" width="250" height="40" /><br />
</p>
</div></td>
</tr>


<tr>
<td height="27" colspan="3" bgcolor="#151515"><div align="center" class="Estilo9">Copyright @ 2008, www.saggazze.com, todos los derechos reservados.</div></td>
</tr>
</table>
</body>
</html>
Y segun las instrucciones tengo que hacer esto:

Para utilizar Lightbox lo primero es descargar la versión actual. Lightbox utiliza las librerias Prototype y Scriptaculous. Entonces necesitas incluir estar librerías en el head de tu html.

Cita:
HTML:

1.
<script type="text/javascript" src="js/prototype.js"></script>
2.
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
3.
<script type="text/javascript" src="js/lightbox.js"></script>
El siguiente paso es incluir la hoja de estilos para que Lightbox tenga la apariencia deseada, para ello incluimos los estilos en el header del html que estamos creando.

Cita:
HTML:

1.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
El paso final para utilizar Lightbox es agregar la propiedad rel="lightbox" a los enlaces que deseamos que abran una ventana flotante con la imagen. La propiedad href indicará que imagen se abrirá, la propiedad title sera el titulo de la ventana.

Cita:
HTML:

1.
<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>
-------------------------------------------------------------------------------------------------

El problema es que no se en donde pegar esos codigos, ya me baje el programa y todo, pero no se que hacer con esos codigos en que parte los tengo que pegar.

Espero que me puedan ayudar :(