Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo específicos: Un ícono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal es que los íconos aparezcan automáticamente para cada link, y no estar cargándolos manualmente.

Si no sabías cómo hacer esto usando solamente CSS, te comento que resulta estúpidamente sencillo:

Lo principal es entender el simple funcionamiento de los condicionales “^” y “$“. El condicional “^” significa empieza con, y “$” significa termina con.

Sabiendo eso puedes añadir iconos a los links salientes, que son los que empiezan con http://

a[href^="http://"] {

estilos para los links salientes

}

Y también puedes añadir cualquier cosa a los links con extensiones específicas, en este caso daremos un estilo diferente a todos los links que terminan en .rar:

a[href$=".rar"] {

estilos para los links a archivos .rar

}

El resto es solo cuestión de experimentar un poco, los condicionales funcionan con cualquier navegador medianamente nuevo.

Hacer SEO puede resultar bastante tedioso y estresante. Es por eso que los webmasters agradecemos infinitamente herramientas como la que provee dnframe.com, con más de 60 datos acerca del dominio que desees: Page Rank, Alexa Rank, una calificación entre 1 y 10 para tus etiquetas title y tus keywords,

• Page Rank.
• Alexa Rank.
• Calidad del nombre de dominio, tamaño total de HTML, cantidad de palabras en los keywords y la descripción: Todo con una calificación que puede ir del 1 al 10.
• Validación HTML, CSS y RSS.
• Cantidad de páginas indexadas por los buscadores.
• Velocidad de carga.
• Backlinks y páginas indexadas en marcadores sociales como Delicious, Digg, Webeame, Reddit, etc.

Es muy común ver en webs con diseño grunge esos menús con tipografía manuscrita que se subrayan al pasar el cursor encima.

Una técnica para lograr esto consiste en usar 2 imágenes: una para el menú no activado y otra para cuando pasamos el mouse encima, en este caso con los ítems subrayados. Usar la imagen del menú no activado como fondo de un div, colocar dentro del div una lista con parámetros de tamaño, cuyos ítems (en el estado hover) tengan como imagen de fondo el menú activado, o subrayado. A la imagen de fondo durante el hover debemos darle coordenadas de posición para que coincidan las partes.  A continuación voy a explicar cómo hacer un sencillo pero agradable menú grunge:

HTML

<div id=”contenedor_menu”>
<ul id=”menu”>
<li id=”blog”><a href=”index.html”>Blog</a></li>
<li id=”contact”><a href=”contact.html”>Contact</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
</ul>
</div>

CSS

#contenedor_menu { /*–Creamos un div que contenga al menú, con las dimensiones de la imagen a utilizar */
height: 376px;
width: 292px;
overflow: hidden; /*Con overflow hidden hacemos que cualquier cosa que salga de los bordes del div sea invisible */
background:url(menu.png) no-repeat; /*Nuestra imagen de fondo, el menú */
}
#menu { /*-Ésto vamos a usarlo como id de la lista o ul, le damos la ubicación apropiada para la imagen que estamos usando*/
margin:76px 0px 0px 10px;
padding:0px;
}
#menu li { /*Quitamos los estilos de lista y la separación entre ítems*/
list-style:none;
margin:0px;
padding:0px;
}

#menu li, #menu a { /*Damos a los ítems de lista el tamaño apropiado para abarcar el texto presente en la imagen del menú, y display block para que los links funcionen como cuadro*/
display:block;
height:70px;
width:160px;
}

#blog, #contact, #about { /*Éstos son los id para cada ítem de lista, con el text-indent escondemos el texto del link*/
text-indent:-300em;
overflow:hidden;
}

/*La parte más importante: en el estado hover de cada ítem de lista cambiamos el background por el del menú activado, y le damos las coordenadas necesarias para que los ítems aparezcan justo donde deben estar*/

#blog a:hover {background:url(menu_on.png) -10px -76px no-repeat; }
#contact a:hover {background:url(menu_on.png) -10px -146px no-repeat; }
#about a:hover {background:url(menu_on.png) -10px -216px no-repeat; }

La mejor forma de entender todo esto es descargando el ejemplo y leyendo el código completo

Algo que muchas personas preguntan (principalmente en foros) es cómo hacer cuando quieren convertir en link un div que tiene imagen de fondo, algo así como convertirlo en un botón.

El ejemplo que presento es para un div con imagen de fondo que se transforma en link al colocar dentro un link de texto oculto, y dándole display:block al link:

CSS

#menu { <!–Contenedor –>
float:left;
background:url(imagen.jpg) top center no-repeat;
}

#menu a {
height: 100px; <!–Los valores de tamaño los asignamos al link, no al div contenedor –>
width: 150px;
text-indent:-3000em; <!–Con esto hacemos que el span no se vea –>
display:block; <!–Aquí hacemos que funcione como caja, como botón –>
}

HTML

<div id=”menu”><a href=”http://www.google.com” ><span>Google.com</span></a></div>