Inicio TuToriales diseño web tutorial tablas html

Ejercicio: 05 tablas
Objetivo: Distribuir elementos a partir de tablas
Software y versión utilizados: Macromedia Dreamweaver mx
Nivel: Básico
Duración: Una hora aprox.

Archivos necesarios: 05ejercicio_tablas

 

Paso1

Debemos crear el sitio al igual que hicimos en el ejercicio anterior, desde el menú sitio / nuevo...
Escogemos el directorio donde guardamos todas las imágenes.
La página es una página de venta de instrumentos musicales de segunda mano.

 
 

Paso 2

A continuación vamos a crear una tabla para distribuir y organizar todos los elementos.
Para insertar una tala lo hacemos desde el menú Insertar / tabla o desde el icono de tabla de la paleta de inserción.
Como disponemos de 10 elementos la tabla ha de tener 12 filas (para el título y los encabezamientos) y 5 columnas (imagen, nombre, modelo, estado y precio).

Truco

Podemos crear la tabla con un tamaño fijo o porcentaje. Si lo hacemos con porcentaje. la tabla se redimensionará si se varía el tamaño de la ventana del navegador.

 


Paso 3

Incluimos las imágenes desde el menú Insertar /imagen o desde el icono en la paleta de inserción.
Rellenamos las celdas correspondientes a los titulares y a los textos...

 

Paso 4

Para colocar la imagen con el logotipo que hace de tirular debemos unir celdas. para esto seleccionamos las celdas arrastrando el cursor por encima de todas las celdas y acudimos al menu Modificar / tabla / Combinar celdas o desde el icono de el menu de la paleta de formato.

Truco

UN truco para seleccionar rápidamente celdas y filas es acerlo desde el cócigo clicando en la etiqueta correspondiente <td> o <tr> respectivamente en la parte inferior de la ventana del editor.

 


Final

Para cambiar el color de las celdas, la lineacion del texto, el fondo, el color el color y el tamaño del borde... lo hacemos desde la paleta Propiedades seleccionando en cada caso celdas tablas, filas o columnas...
Para finalizar podeis dar color al fondo de la página desde el menú Modificar / Propiedades de la página.
Podeis visualizar el resultado en el navegador desde el menú Archivo / Previsualizar en el navegador...

ejemplo

 

Ernesto Navarro Durá. 2009