Nube de Tags con CSS en Dreamweaver

Posteado el 22. Apr, 2010 por Webi in Dreamweaver, Web Design

Esto es lo que haremos hoy miralo antes es un efecto en CSS muy bonito para tus proyectos web

PASO 1

Creamos un nuevo documento HTML en blanco con el comando Ctrl + N.

Nube de Tags con CSS en Dreamweaver

PASO 2

Vamos a copiar y pegar el siguiente código justo de bajo del donde empieza el titulo y antes que termine el </head>

Code block

<script src="js/jquery.js"></script>
 
<script>
 
$(document).ready(function(){
 
var switcher = $('<a href="javascript:void(0)">Cambiar Apariencia</a>').toggle(
 
function(){
 
$("#tags ul").hide().addClass("alt").fadeIn("fast");
 
},
 
function(){
 
$("#tags ul").hide().removeClass("alt").fadeIn("fast");
 
}
 
);
 
$('#tags').append(switcher);
 
});
 
</script>

Nube de Tags con CSS en Dreamweaver

PASO 3

Ahora vamos a crea un documento nuevo Con el comando Ctrl + N y seleccionamos el tipo CSS.

Nube de Tags con CSS en Dreamweaver

PASO 4

Vamos a agregarle el siguiente código que nos servirá para lograr nuestro propósito.

Code block

body {
 
margin:0;
 
padding:0;
 
background:#e1e1e1;
 
font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
 
color:#555;
 
line-height:180%;
 
}
 
a{color:#3c70d0;}
 
img{border:none;}
 
#cuerpo {
 
width: 260px;
 
margin-top: 0px;
 
margin-right: auto;
 
margin-bottom: 0px;
 
margin-left: auto;
 
}
 
#contenido{
 
float:left;
 
display:inline;
 
width:260px;
 
margin-left:auto;
 
margin-top: 0px;
 
margin-right: auto;
 
margin-bottom: 0px;
 
}
 
#tags ul{
 
text-align:center;
 
background:#71b5e9 url(../fondo.gif) repeat-x;
 
margin-top: 0em;
 
margin-right: auto;
 
margin-bottom: 0em;
 
margin-left: auto;
 
padding-top: 0.5em;
 
padding-right: 10px;
 
padding-bottom: 0.5em;
 
padding-left: 10px;
 
}
 
#tags li{
 
margin:0;
 
padding:0;
 
list-style:none;
 
display:inline;
 
}
 
#tags li a{
 
text-decoration:none;
 
color:#fff;
 
padding:0 2px;
 
}
 
#tags li a:hover{
 
color:#cff400;
 
}
 
.tag1{font-size:100%;}
 
.tag2{font-size:120%;}
 
.tag3{font-size:140%;}
 
.tag4{font-size:160%;}
 
.tag5{font-size:180%;}
 
#tags .alt{
 
text-align:left;
 
padding:0;
 
background:none;
 
}
 
#tags .alt li{
 
padding:2px 10px;
 
background:#efefef;
 
display:block;
 
}
 
#tags .alt .tag1,
 
#tags .alt .tag2,
 
#tags .alt .tag3,
 
#tags .alt .tag4,
 
#tags .alt .tag5{font-size:100%;}
 
#tags .alt .tag1{background:#7cc0f4;}
 
#tags .alt .tag2{background:#67abe0;}
 
#tags .alt .tag3{background:#4d92c7;}
 
#tags .alt .tag4{background:#3277ad;}
 
#tags .alt .tag5{background:#266ca2;}

Si nos damos cuenta en el div #tags ul hay una imagen incluida que se llama fondo.gif esa imagen la pueden sustituir por la imagen que ustedes quieran.

Nube de Tags con CSS en Dreamweaver

PASO 5

Con el comando Ctrl + S salvamos nuestro documento CSS dentro de una carpeta llamada css para tener un orden de todos nuestros archivos y le ponemos de nombre tagclouds.css.

Nube de Tags con CSS en Dreamweaver

PASO 6

Ahora volvemos nuevamente a nuestro documento HTML y agregamos el siguiente código para enlazar nuestro HTML con el CSS, justo después del titulo y antes del Script.

Code block

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

Nube de Tags con CSS en Dreamweaver

PASO 7

Vamos a agregar el siguiente código dentro de las etiquetas de <body>.

Code block

<div ID="cuerpo">
 
<div ID="contenido">
 
<div>
 
<ul>
 
<li class="tag1"><a href="#">Nube 1</a></li>
 
<li><a href="#">Tutoriales en al web</a></li>
 
<li class="tag3"><a href="#"> Nube 2</a></li>
 
<li class="tag2"><a href="#"> Nube 3</a></li>
 
<li><a href="#">Tutoriales en la web</a></li>
 
<li class="tag1"><a href="#">Nube 4</a></li>
 
<li><a href="#"> Tutoriales en la web</a></li>
 
<li class="tag5"><a href="#"> Nube 5</a></li>
 
<li><a href="#"> Tutoriales en la web </a></li>
 
<li class="tag1"><a href="#"> Nube 6</a></li>
 
<li><a href="#"> Tutoriales en la web </a></li>
 
<li class="tag4"><a href="#"> Nube 7</a></li>
 
<li><a href="#"> Tutoriales en la web </a></li>
 
<li class="tag5"><a href="#"> Nube 8</a></li>
 
<li><a href="#"> Tutoriales en la web </a></li>
 
<li class="tag2"><a href="#"> Nube 9</a></li>
 
</ul>
 
</div>
 
</div>
 
</div>