DESIGNAID

Herramientas claves para representar tus ideas

Tablas resaltadas en HTML con dreamweaver

pildora_dw.gifSorry por la falta de posts ultimamente, pero de verdad he tenido poco tiempo para publicar entradas, pero casualmente en un proyecto que estoy haciendo tuve que usar este método y pense en publicarlo para que les sea de provecho. (eso sin comentar que es super fácil y bien rapidito de hacer)🙂

Muchas veces cuando trabajamos para el web tenemos que representar mucha información en una tabla muy grande, algo así como una tabla de excel. cuando hay muchísimos datos como estos, es difícil encontrar lo que se esta buscando, por eso es más fácil para los usuarios si se resaltada cada celda al colocar el cursor encima. de esta manera lo ayudamos visualmente a buscar. 

Para ver el efecto real que haremos tal y como queda, busca y descarga el archivo “tabla_resaltada.zip” en mi BOX de archivos de práctica. hazle doble click al archivo y abre el documento “tabla_resaltada.htm”  con internet explorer. fíjate que al pasar el cursor encima de las celdas de la tabla que esta alli  verás el efecto de las filas resaltadas. eso es lo que haremos en esta práctica.

Aunque el titulo del post diga dreamweaver, realmente esta práctica la puedes hacer facilmente con cualquier editor de páginas web, como frontpage o cualquier otro que uses. yo en mi caso uso dreamweaver MX, porque siempre me gustó la interfaz de la versión 4 me parece más comoda de usar. en fin. empecemos!

PASO 1: crea un nuevo documento en dreamweaver. ahora una de las cosas por las cuales dreamweaver ha tenido ese nivel de éxito, es que ha sido la primera herramienta que permitió una visualización del código y del aspecto del montaje, asi que es más fácil de tener noción de lo que se esta haciendo. gracias a esto, ahora somos diseñadores los que nos ocupamos de montar (y diseñar claro está) las paginas web y no los programadores como se hacía antes. en fin me salí del tema por un momento, volvamos:

Ok, verifica que tengas la opción de ver el codigo y la previsualización al mismo tiempo, esot lo haces haciendo click en este boton que ves aqui. de esta manera podemos trabajar mas facilmente.

tablas-resaltadas_1.gif

PASO 2: Ahora, ya tenemos listo nuestro archivo inicial. ahora lo que haremos sera crear un tabla, y esta tabla tendrá un codigo especial para resaltar las celdas. usaremos un parametro simple de HTML que nos permitira cambiar el color de las celdas dinámicamente, de manera que cuando coloquemos el cursor encima de las celdas el color de estas celdas cambie para resaltar su contenido.

 ahora, copia (cntrl-C)  del post este código a continuación:

<TABLE width=”330″ border=”0″ align=”center” cellpadding=”2″ cellspacing=”1″>
  <TR bgcolor=”#D5F79B” onMouseOver=”this.bgColor=’#D50019′;” onMouseOut=”this.bgColor=’#D5F79B’;”>
    <TD width=”67″>titulo 1</td>
    <TD width=”47″>titulo 2</TD>
    <TD width=”55″>titulo 3</TD>
    <TD width=”53″>titulo 4</TD>
    <TD width=”82″>titulo 5</TD>
  </TR>
  <TR bgcolor=”#D5F79B” onMouseOver=”this.bgColor=’#D50019′;” onMouseOut=”this.bgColor=’#D5F79B’;”>
    <TD>dato 1</td>
    <TD>dato 2</TD>
    <TD>dato 3</TD>
    <TD>dato 4</TD>
    <TD>dato 5</TD>
  </TR>
  <TR bgcolor=”#D5F79B” onMouseOver=”this.bgColor=’#D50019′;” onMouseOut=”this.bgColor=’#D5F79B’;”>
    <TD>dato 1</td>
    <TD>dato 2</TD>
    <TD>dato 3</TD>
    <TD>dato 4</TD>
    <TD>dato 5</TD>
  </TR>
  <TR bgcolor=”#D5F79B” onMouseOver=”this.bgColor=’#D50019′;” onMouseOut=”this.bgColor=’#D5F79B’;”>
    <TD>dato 1</td>
    <TD>dato 2</TD>
    <TD>dato 3</TD>
    <TD>dato 4</TD>
    <TD>dato 5</TD>
  </TR>
</TABLE>

ahora que lo copiaste, vete a dreamweaver porque vamos a pegar este código en la página para recrear la tabla rápidamente.

PASO 3: Ahora en dreamweaver pegaremos el codigo en un sitio especial. busca estas etiquetas en el codigo: <HEAD> </HEAD>  entre estas dos etiquetas vamos a pegar el codigo que copiamos.  estas etiquetas son muy simples de entender, de hecho el HTML es el lenguaje mas simple de estudiar y usar y hay muchos sitios en la red te pueden ayudar. estas etiquetas definen el contenido que mostrara tu página, cualquier cosa que coloques entre ellas dos aparecerá en tu pagina. por ejemplo si colocas: <HEAD> hola internet!</HEAD> aparecera en tu pagina un texto saludando a la red. pues bien, pega alli entonces el codigo que copiaste mas arriba. recuerda, ENTRE las dos etiquetas. anda yo te espero. no voy a ir ningun lado por ahora.😉

tablas-resaltadas_2.gif

 PASO 4: relájate y descansa. porque ya esta lista tu tabla. ahora presiona F12 en tu teclado y podras probar tu tabla en tu explorador. si quieres cambiar los colores que le puse para colocar los tuyos lo unico que debes hacer es modificar el valor hexadecimal que esta en el código y colocar los tuyos. puedes asesorarte con photoshop para escoger los colores más fácilmente.

Para esta practica usamos el evento onMouseOver para decirle al explorador que este al tanto de cuando el cursor este encima de la celda, y la expresion this.bgColor la usamos para cambiarle el color a la celda en ese momento que pase encima el cursor.

El HTML es super fácil y simple de entender, si tienes conocimentos básicos de ingles puedes convertirte en un experto en la programacion HTML invirtiendo solo algo de tiempo.

espero te sirva de mucho.

 saludos!

Luis S.

1 comentario»

  miguelantekera wrote @

buscando esto que necesitaba me encuentro con tu pagina…tienes un monopolio en internet!! gracias me quedo excelente…

de casualidad no tendras algun tutorial para formularios de contactos sencillos en php?


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: