Hola,
Debes colocar los códigos que te indican antes que finalice la etiqueta </head>, asi:
Código HTML:
<!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í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>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</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"> </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> </p></td>
<td width="8" rowspan="3" bgcolor="#151515"> </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>
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.1.0<!-- google_ad_section_end --></div></body>
</html> Ahora bien para que puedas poner una miniatura y al hacer clic se abra con el lightbox simplemente debes con el Dreamweaver insertar la miniatura normalmente, luego vas hacer un link que llame a la foto grande desde la miniatura. Una vez que hayas hecho eso vete a la vista de código justamente al código de tu miniatura veras un código así:
Código HTML:
<a href="imagen.jpg" title="Titulo">Imagen</a>
Simplemente agregale dentro de la etiqueta <a> esto:
Código HTML:
rel="lightbox"
, quedando asi:
Código HTML:
<a href="imagen.jpg" title="Titulo" rel="lightbox">Imagen</a>
Si deseas ponerle un titulo a la foto al abrir, asi como ingresas
Código HTML:
rel="lightbox"
, debes poner
Código HTML:
title="aqui va tu titulo"
¡Eso es todo!