¿TABLA O DIV?

Las tablas pueden hacerse: en HTML en la forma clásica o mediante la utilización de DIV más estilos. Esta última forma, aunque más complicada, tiene sus ventajas en especial en las web grandes ya que los DIV, hacen que los archivos pesen menos y se cargue más rápidamente la página. Además, mejoran mucho con los estilos CSS.

Las TABLAS, son en principio más controlables y muy útiles para formularios y listas. Su uso es esencialmente para crear estructuras rígidas, para tabular datos que, combinando con CSS, adquieren cierta flexibilidad. Son ideales para presentar datos, pero en cuestión de diseño y maquetación los div's son lo mejor ya que ahorran bastante código. En la creación de páginas dinámicas con contenidos amplios, trabajar con tablas en su totalidad sería muy limitante.

Razones para utilizar div o tabla se pueden encontrar en muchos foros. A continuación, incluyo dos enlaces donde dan algunas: IGDonline; VidaMrr


Vamos a ver un ejemplo para colocar imágenes, con links, en forma de tabla. Se puede hacer de distintas maneras y, según lo que nos convenga, lo haremos de una forma u otra. Elegimos imágenes de forma cuadrada y les damos un tamaño concreto (130x130):


1. PONIENDO LAS URL DE LAS IMÁGENES UNA A CONTINUACIÓN DE OTRA

Incluimos los códigos de las imágenes, unos a continuación de los otros, dejando espacios entre ellos para que queden con una separación. Conforme vamos añadiendo imágenes, se van colocando en filas, pero si se quiere forzar una fila se da un salto de línea:

<a href="https://enlace primera imagen"><img border="0" height="130" src="https://primera imagen" width="130" /></a>   <a href="https://enlace segunda imagen"><img border="0" height="130" src="https://segunda imagen" width="130" /></a>   <a href="http://enlace tercera imagen"><img border="0" height="130" src="https://tercera imagen" width="130" /></a>   <a href="http://enlace cuarta imagen"><img border="0" height="130" src="https://cuarta  imagen" width="130" /></a>

2. CON TABLAS

Ya vimos en el apartado de HTML, cómo crear tablas. En este caso, ponemos la tabla centrada, sin borde, con un espacio concreto entre celdas y con imágenes de tamaño específico y con un link:

<center>
<table cellspacing="20"><tbody>
<tr>

<td><a href="https://enlace primera imagen"><img border="0" height="130" src="https://primera imagen" width="130" /></a></td>
<td><a href="https://enlace segunda imagen"><img border="0" height="130" src="https://segunda imagen" width="130" /></a></td>
 <td><a href="http://enlace tercera imagen"><img border="0" height="130" src="https://tercera imagen" width="130" /></a></td>
<td><a href="http://enlace cuarta imagen"><img border="0" height="130" src="https://cuarta  imagen" width="130" /></a> </td>

</tr>
</tbody></table>
</center>

Si queremos más imágenes, tendremos que modificar la tabla añadiendo las filas y columnas que necesitemos.

3. CON DIV

Con la etiqueta Div, definimos un espacio. Si queremos que las imágenes aparezcan en línea, incluimos sus códigos unos a continuación de los otros (si damos un salto de línea aparecen en cascada).  Definimos el margen con un valor de 10 px alrededor de cada imagen. Conforme vamos añadiendo imágenes, se van colocando en filas. Los links se añaden como en los ejemplos anteriores.

<div style="height: auto; width: auto;">

<img height="130" src="https://primera imagen" style="float: left; margin: 10px;" width="130" />    <img height="130" src="https://segunda imagen" style="float: left; margin: 10px;" width="130" />   <img height="130" src="https://tercera imagen" style="float: left; margin: 10px;" width="130" />   <img height="130" src="https://cuarta  imagen" style="float: left; margin: 10px;" width="130" />

</div>

La propiedad margin admite entre uno y cuatro valores, con el siguiente significado:

• Si solo se indica un valor, todos los márgenes tienen ese valor.
• Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
• Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna a los márgenes izquierdo y derecho.
• Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.

4. CON HTML Y CSS

En LinuxHispano encontramos una explicación de cómo hacerlo.

DABBLET, UNA HERRAMIENTA PARA PROBAR CSS ONLINE

Dabblet es un sitio de pruebas que permite escribir CSS y HTML en dos espacios diferentes y que, en tiempo real, según se teclean caracteres, nos muestra el resultado en un tercer espacio.

No requiere registro aunque, si queremos copiar los resultados en nuestro blog, tenemos que hacerlo por medio de otra aplicación (Github) que sí requiere registro.

Resulta muy útil para profesionales que trabajan con código ya que permite comprobar rápidamente el diseño y hacer ajustes sobre la marcha.

Un ejemplo podemos verlo clicando AQUÍ.

Hay otras aplicaciones. Una relación comparativa de algunas, se encuentra en CREATIVOSONLINE.

ÍNDICE HTML

1) Nociones básicas
2) Etiquetas
3) Párrafo sangrado y color de fondo
4) Listas
5) Tablas
6) Marquesinas



Podéis encontrar más prácticas en:
Ángel R. Puente Pérez
Manual HTML. Universidad de Valencia

MARQUESINAS

Para conseguir un texto en movimiento podemos recurrir al lenguaje HTML

Una marquesina es una ventana en la que se desplaza un texto. La etiqueta básica es: <marquee>Texto que se desplaza </marquee> con la que conseguimos como resultado:

Texto que se desplaza

Por defecto, la marquesina ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Podemos modificar estos atributos:

Alineación (ALIGN). Modifica el alineamiento del texto que rodea a la marquesina y puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: <marquee align="BOTTOM" height="60" widht="50%">La palabra ¡Hola! estará alineada en la parte inferior de la marquesina</marquee> ¡Hola!

La palabra ¡Hola! estará alineada en la parte inferior de la marquesina ¡Hola!

Dirección del desplazamiento (DIRECTION). Por defecto el texto se mueve hacia la izquierda (LEFT). Podemos hacer que el texto se desplace hacia la derecha igualando este atributo a RIGHT. Ejemplo:<marquee direction="RIGHT">Este texto se dirige hacia la derecha</marquee>

Este texto se dirige hacia la derecha

También podemos hacer que el texto se desplace hacia arriba indicando UP en el atributo dirección:

Esta es una marquesina con el texto en azul y el fondo amarillo y que se desplaza hacia arriba.

Color de fondo (BGCOLOR). Podemos modificar el color de fondo de la marquesina, como ya vimos en un ejercicio anterior. Ejemplo:<marquee bgcolor="#FF7070">Esta marquesina tiene un fondo de color rosa</marquee>

Esta marquesina tiene un fondo de color rosa



Podemos incluir la marquesina en una entrada o en un gadget HTML en el que incluiremos las etiquetas con los atributos que deseemos. Por ejemplo:

<span style=" font-weight:bold; color:#ffffff; font-size:18px;">
<marquee bgcolor="669933">
Ejemplo de marquesina colocada en un gadget HTML
</marquee>
</span>

EJERCICIOS

1. En una nueva entrada incluir distintas marquesinas en las que practiquéis alineación, dirección de desplazamiento y color de fondo.
2. Hacer una marquesina de bienvenida al blog en un gadget y colocarlo bajo la cabecera de vuestro blog.

NOCIONES BÁSICAS DE HTML

 HTML son las siglas de HyperText Markup Language (lenguaje de marcado hipertextual) y hace referencia a uno de los lenguajes para la elaboración de páginas web.

La página web contiene sólo texto mientras que recae en el navegador web la interpretación del código, es decir,  la tarea de unir todos los elementos y visualizar la página final.

HTML se escribe en forma de «etiquetas» también llamadas elementos, marcas o tags, encerradas por corchetes angulares. En general, las etiquetas tienen una apertura <> y un cierre </>.

Los elementos tienen dos propiedades básicas: atributos y contenido. Los atributos del elemento se añaden, únicamente, a la etiqueta de apertura y el contenido está ubicado entre las dos etiquetas. Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.

La mayoría de los atributos de un elemento son pares nombre-valor, separados por el signo igual «=» y escritos en la etiqueta de apertura. El valor puede estar rodeado por comillas dobles o simples.

Por ejemplo, para incluir un enlace la etiqueta utilizada es <a>, con el atributo href que permite incluir la ruta hacia la página con la que enlazará:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba  </A>

El lenguaje HTML puede ser creado y editado con cualquier editor que admita texto sin formato.

Las etiquetas básicas o mínimas son:

<!DOCTYPE HTML>
 <html>
   <head>
     <title>Ejemplo1</title>
   </head>
   <body>
     <p>ejemplo1</p>
   </body>
 </html>

• DOCTYPE, informa al navegador del tipo de archivo que se trata. Es la única que se escribe con mayúsculas.
• <html> </html>, abren y cierran el documento.
• En la <head> reside información acerca del documento, y generalmente no se ve cuando se navega por él. Incluye el elemento <title> que es una breve descripción que identifica la página y que sí se muestra al usuario.
• El cuerpo <body> es donde está todo el contenido del documento que se muestra.

SE RECOMIENDA que para mejorar la legibilidad del código se inserten las etiquetas de apertura y cierre en líneas independientes y, además, desplazar a la derecha el contenido de una etiqueta de modo que las etiquetas de apertura y cierre estén alineadas.


Para quien quiera saber más sobre HTML visitar:

Guía para escribir documentos HTML
Tutorial de HTML

ETIQUETAS HTML

PÁRRAFO SANGRADO Y CON COLOR DE FONDO

Para sangrar un párrafo se utiliza la etiqueta:

<Blockquote>Párrafo que queremos sangrar </Blockquote>

Cuantas más etiquetas pongamos, mayor será el sangrado.

Si queremos que un párrafo tenga un fondo de color distinto:

<div style="background-color: #c7c4c4;"> </div>

Así, si queremos sangrar un párrafo y que, además, tenga un fondo distinto, por ejemplo de color gris, tendremos que poner el párrafo entre las etiquetas:

<Blockquote>
<div style="background-color: #c7c4c4;">
Este es un ejemplo de párrafo sangrado y con fondo de color gris.
</div>
</Blockquote>

LOS COLORES:
Vienen definidos por #XXYYZZ, donde XX representa la cantidad de rojo, YY la de verde y ZZ la de azul. Estos números están en numeración hexadecimal y los dígitos, de menor a mayor son:

0123456789ABCDEF

Por ejemplo el color rojo es #FF0000, porque tiene el máximo de rojo y cero de los otros dos colores.

Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros dos invariables. Así, si queremos un rojo más oscuro podemos poner #AA0000, o aún más oscuro #550000.

Para que un color tenga un tono más suave, se deben variar los otros dos colores haciéndolos más claros, en una cantidad igual. Por ejemplo, el rojo lo podemos convertir en rosa con #FF7070.

El formato RGB hexadecimal es la forma más compacta de indicar un color, ya que incluso es posible comprimir sus valores cuando todas sus componentes son iguales dos a dos:

   #AAA = #AAAAAA
   #FFF = #FFFFFF
   #A0F = #AA00FF
   #369 = #336699

Podemos hacer nuestros propios experimentos, pero también existen páginas en las que se pueden elegir los colores directamente:
Obtener código de color automáticamente


Si queremos que al pasar el ratón sobre los párrafos con fondo de color nos cambie el color, tenemos que añadir, dentro de la etiqueta div, los códigos onmouserover(color) y onmouserout (color). Por ejemplo:

<div style="background-color: #c7c4c4;" onmouseover='this.style.background="#c7c4c4"' onmouseout='this.style.background="white"'>

Este es un ejemplo de cambio de color del parráfo al pasar el ratón

</div>

EJERCICIO

En una entrada nueva, a la que titulareis Párrafo sangrado y con fondo de color, escribir el texto que hay a continuación, con tres sangrados y fondo de color distinto al de vuestra entrada (si es necesario cambiar el color de la letra):

“Aquello que para la oruga es el fin del mundo, para los demás se llama mariposa”. Lao Tse.

“No hables si no es para decir algo que sea mejor que el silencio”. La oración de la rana, Anthony de Mello.

LISTAS

Veremos dos tipos de listas: ordenadas (numeradas) y desordenadas (no numeradas).

Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

<ul>
   <li> una cosa </li>
   <li> otra cosa</li>
</ul>

Es decir, toda la lista está dentro de las etiquetas <ul></ul>, y cada cosa va precedida de la etiqueta <li>

El resultado sería:

• una cosa
• otra cosa

Podemos anidar una lista dentro de otra. Por ejemplo:

<ul>
   <li> Mamiferos </li>
   <li> Peces
       <ul>
         <li> Sardina </li>
         <li> Bacalao</li>
       </ul>
   </li>
   <li> Aves</li>
</ul>

TEN EN CUENTA QUE: no se debe cerrar la etiqueta <li> hasta no haber cerrado la lista interna (en este caso en los peces).

Quedaría el siguiente resultado:

• Mamiferos
• Peces
  
  • Sardina
  • Bacalao
• Aves

Las listas ordenadas (ordered lists) tienen una estructura similar, pero utilizan la etiqueta <ol>:

<ol>
   <li> primera cosa </li>
   <li> segunda cosa</li>
</ol>

Quedaría así:

1. primera cosa
2. segunda cosa

EJERCICIO
Haz una lista desordenada con los ingredientes de una receta de bizcocho y ordenada con los pasos para prepararla.

ESTRUCTURA DE UNA TABLA

La etiqueta general es: <table></table>. Si queremos añadir un borde, tendremos que incluir este atributo a la etiqueta de la tabla, indicando el grosor por medio de un número: Esto sería:

<Table Border=5>
   [Resto de etiquetas]
</Table>

La etiqueta para cada fila es: <tr></tr>, que se repetirá tantas veces como filas queramos. Es decir, una tabla con dos filas sería:

<Table Border>
  <TR>
    [etiquetas de las celdas de la primera fila]
  </TR>

  <TR>
    [etiquetas de las celdas de la segunda fila]
  </TR>

</Table>

Dentro de cada fila están las etiquetas de las celdas (columnas) que son: <td></td> y que habrá que repetir tantas veces como celdas queremos que haya en esa fila. Así, una tabla con dos filas y cada fila con tres celdas sería:

<Table Border>
  <TR>
    <TD>Celda 1, fila 1</TD>
    <TD>Celda 2, fila 1</TD>
    <TD>Celda 3, fila 1</TD>
  </TR>

  <TR>
    <TD>Celda 1, fila 2</TD>
    <TD>Celda 2, fila 2</TD>
    <TD>Celda 3, fila 2</TD>
  </TR>

</Table>

Si queremos poner un título a la tabla lo hacemos con la etiqueta <caption></caption>
Una tabla centrada, con borde=1, título y una fila con tres celdas sería:

<center>
<table border="1"><Caption>Título de la tabla</Caption>
  <TR>
    <TD>Celda 1, fila 1</TD>
    <TD>Celda 2, fila 1</TD>
    <TD>Celda 3, fila 1</TD>
  </TR>
</table>
</center>

y quedaría:

TÍTULO

Celda 1, fila 1

Celda 2, fila 1

Celda 3, fila 1

El contenido de las celdas puede ser un texto (como hemos puesto en los ejemplos), una imagen, un enlace, etc.

Para una imagen:

<Table Border=2>
   <TR>
    <TD><IMG SRC="imagen.jpg"></TD>
   </TR>
</Table>

Para un enlace:

<Table Border=2>
   <TR>
    <TD><A HREF="URL del enlace">Nombre del enlace</A></TD>
   </TR>
</Table>

Si queremos modificar el ancho o el alto de una tabla o de una celda, tendremos que incluir los atributos weidth o height, dentro de la etiqueta de tabla o de la de las celdas, y darle un valor numérico. Por defecto nos lo da en píxeles, pero podemos ponerlo en porcentaje si añadimos el símbolo de %.


EJERCICIO

Hacer una tabla con un mensaje de bienvenida a vuestro Blog, con dos o tres filas y dos o tres celdas en cada una. Ponerle un título e incluir en las celdas imágenes y texto. También podéis añadir algún enlace.

Un ejemplo lo encontráis en el inicio de Curso Multimedia.

PONER MENÚ DESPLEGABLE EN EL BLOG

Vamos a poner un menú horizontal con subpestañas desplegables y para ello seguiremos los pasos que nos recomienda Ciudad Bloger. Primero tenemos que deshabilitar los estilos predefinidos, después añadir los nuestros y finalmente agregar un gadget en lenguaje HTML con el menú que queremos incluir.

TE AYUDARÁ SABER: Cuando entres en el código HTML de la plantilla del Blog,  para hacer una búsqueda usa las teclas Ctrl+F. Asegúrate de estar haciendo la búsqueda en el código de la plantilla y no en la página que tienes abierta. Para ello sitúa el cursor sobre el código y después haz la búsqueda. CUIDADO, puede haber líneas ocultas. Para verlas despliégalas clicando sobre la flecha que aparece a la derecha del número de línea.

Clica en los siguientes enlaces. Hazlo por orden y con cuidado. 

A. DESHABILITAR ESTILOS PREDEFINIDOS

B. AÑADIR ESTILOS PROPIOS

C. AÑADIR GADGET HTML/Javascript

A. MENÚ DESPLEGABLE: DESHABILITAR ESTILOS

Como tenemos Blogs creados con la plantilla de Blogger, lo primero que tenemos que hacer es deshabilitar los estilos predefinidos de la siguiente manera (también puedes verlo en esta entrada):

1º Entra en: Plantilla>Editar HTML y busca la línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en rojo. Puede haber muchas; elimina todas las que encuentres.

En caso de no encontrar esta línea puedes saltarte el apartado A y empezar en el B.


2º Busca:

/* Tabs
----------------------------------------------- */

y elimina todo lo que hay dentro de ello.

Por ejemplo, en esta plantilla debes eliminar todo lo que está en verde:

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

3º Una vez eliminado, en su lugar agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

B. MENÚ DESPLEGABLE: AÑADIR ESTILOS PROPIOS

Una vez eliminados los estilos predefinidos, tenemos que incluir los que nosotros queremos.

1º Entramos en Plantilla>Edición HTML y antes de </HEAD> agregamos los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPv_Q0ulNAvkf020xLoI2CZiXUXHExk4Q2TgRKSe52KgkyoZb9pOqQJU4GKnhSfhaVSjOYvNihkuY63d4U4cv0b-Bwq7l7ahZPVVUCZGLd97r-aDNzXGZA3YN5WL9BrJ2xObOJeNsatcv/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix3rfye7-kzihQnKS5UMh8sk6pFJq9RdwBA70dSHMTSO24fbn96ubDuziVUVDUFSyeO-7-cCyhBio5ct06JabzuFKNFaznB0aLjUJXM8aBzdpLG-ytzn8CAQf_lISUJ-9Bk2Jhprt8ArCt/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

Lo que aparece en naranja son las imágenes de las flechas de las subpestañas y pueden cambiarse.


2ºAntes de ]]></b:skin> pega los estilos:

/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

En color verde aparecen las áreas que pueden personalizarse como color de fondo, color de enlaces, etc.

C. MENÚ DESPLEGABLE: GADGET HTML/Javascript

El tercero y último paso para poner los menús desplegables es añadir un Gadget HTML/JavaScripts. Para hacerlo entra en Diseño>AñadirGadget y selecciona HTML/JavaScripts.

OS AYUDARÁ: Teclear en el Bloc de Notas la configuración que quereis incluir y, luego, copiarla en el Gadget. Si no funciona, volver a intentarlo.

Se trata de hacer listas (ul) y sublistas (li) encerradas en las etiquetas:

<div class="jqueryslidemenu" id="myslidemenu">

   <ul>

     <li> <a href="URL del enlace">Pestaña 1</a></li>
   </ul>
<br style='clear: left'/>
</div>

Así por ejemplo para 6 pestañas, con dos subpestañas en la Pestaña 3 que, a su vez tiene 3 subpestañas en la 3.2, y la Pestaña 5 con 4 subpestañas el código sería:

<div class="jqueryslidemenu" id="myslidemenu">

<ul>
    <li><a href="URL del enlace">Pestaña 1</a></li>
    <li><a href="URL del enlace">Pestaña 2</a></li>
    <li><a href="#">Pestaña 3</a>
       <ul>
         <li><a href="URL del enlace">Sub 3.1</a></li>
         <li><a href="URL del enlace">Sub 3.2</a>
          <ul>
           <li><a href="URL del enlace">Sub 3.2.1</a></li>
           <li><a href="URL del enlace">Sub 3.2.2</a></li>
           <li><a href="URL del enlace">Sub 3.2.3</a></li>
          </ul>
         </li>
        </ul>
     </li>
    <li><a href="URL del enlace">Pestaña 4</a></li>
    <li><a href="#">Pestaña 5</a>
     <ul>
      <li><a href="URL del enlace">Sub 5.1</a></li>
      <li><a href="URL del enlace">Sub 5.2</a></li>
      <li><a href="URL del enlace">Sub 5.3</a></li>
      <li><a href="URL del enlace">Sub 5.4</a></li>
     </ul>
    </li>
   <li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>

ACTIVIDAD FINAL MENÚ DESPLEGABLE

Crear un menú con tres pestañas que, a su vez, tienen subpestañas.

A la primera la llamaremos INICIO y tendrá un enlace a la entrada con el mensaje de bienvenida.

La segunda, a la que llamaremos TEXTO, no enlaza con ningún documento y tendrá 8 subpestañas, cada una de ellas ha de enlazar con cada uno de los documentos de texto que hemos hecho.

La tercera, a la que llamaremos PRESENTACIONES, no enlaza con ningún documento y abre dos subpestañas: a la primera le llamamos Power Point y a la segunda Prezi. La subpestaña Power Point no enlaza a ningún documento y, a su vez, abre dos subpestañas, una a cada uno de los ejercicios que hemos hecho. La subpestaña Prezi tendrá un enlace al ejercicio que hemos hecho.

COMO AYUDA:
Para hacer un enlace sin contenido, entre las comillas se pone el símbolo “#”. Por ejemplo:

<a href="#">Texto</a>

Si queremos enlazar con una entrada concreta:

<a href="URL DE HACER UN TRIPTICO CON WORD">Hacer un tríptico con Word</a>