I E

INSTITUCIÓN EDUCATIVA Nº 2077

“SAN MARTIN DE PORRES”
Di DIAGRAMACIÓN BASICA DE UNA PÁGINA WEB
CREANDO UNA PÁGINA WEB CON TABLAS
TABLAS:
Las tablas son una herramienta perfecta para organizar datos de manera ordenada.
Podemos usarlas también para definir la estructura de las páginas. Permiten insertar
datos, así como controlar la disposición de los elementos de las páginas. Podemos
utilizar las tablas como una herramienta de diseño, pero también para organizar la
información.
Las tablas juegan un papel muy importante, no sólo porque significa la incorporación
de nuevos elementos gráficos en nuestro diseño, sino porque mejora la forma de
trabajar. La manera más clara de organizar la información. También es adecuado de
maquetar texto y gráficos de una manera más controlada.
Las tablas presentan la información tabulada, es decir, usando filas y columnas, las
cuales nos servirán para crear varias áreas donde se mostrarán los contenidos,
maquetados como si fuera una revista o un portal.

DIAGRAMACIÓN.CON TABLAS
Las tablas constan de tres componentes básicos:
 Filas (espacio horizontal)
 Columnas (espacio vertical)
 Celdas (los contenedores que se originan en las intersecciones de las filas y las
columnas).
Dreamweaver ofrece tres métodos de visualización y manipulación de tablas: El modo
Estándar, en el que las tablas se presentan en forma de cuadrícula de filas y columnas. El
modo Ampliada, en el que se ve añadido, temporalmente, relleno y espaciado de celda a
las tablas y aumentan los bordes de las tablas para facilitar la edición. Y el modo de Diseño,
que permite dibujar, cambiar el tamaño y mover cuadros en la página mientras se siguen
utilizando tablas para la estructura subyacente.

INSERTAR UNA TABLA EN MODO ESTANDAR

1. Situamos el cursor en la ubicación de la ventana de documento donde deseamos insertar la tabla y hacer clic en el botón Tabla de
la ficha o categoría Diseño del Panel ~Insertar, o elegir el menú Insertar > Tabla.
2. Aparecerá el cuadro de diálogo Insertar tabla. Acepta los valores actuales de este cuadro de diálogo o escribimos otros nuevos.
3. En la sección Tamaño de tabla, define las siguientes opciones:
 Filas, Columnas, Ancho de tabla, Grosor del borde, Relleno de celda, Espacio celda
4. En la sección Encabezado, seleccionamos una de las opciones de encabezado:
 Ninguna, no permite encabezados de columna o de fila para la tabla.
 Izquierda, convierte la primera columna de la tabla en una columna para
encabezados. Esto nos permite introducir un encabezado para cada fila de la tabla.
 Ambos, nos permite introducir encabezados de columna y de fila en la tabla.
5. En la sección Accesibilidad, definimos las siguientes opciones:
 Texto, proporciona un título de tabla que aparece fuera de la misma.
 Alinear texto, específica el lugar en el que el texto de la tabla aparecerá en
relación con la tabla.
 Resumen, ofrece una descripción de la tabla. Los lectores de pantalla leen el
texto del resumen, pero dicho texto no aparece en el navegador del usuario.
6. Damos clic en Aceptar para crear la tabla.

Docente: Paisig Cueva Roberto 5to de Sec.

 I E

INSTITUCIÓN EDUCATIVA Nº 2077

“SAN MARTIN DE PORRES”
PROPIEDADES EN MODO ESTANDAR
Las propiedades de una tabla se muestran en el panel Propiedades, siempre y cuando esté seleccionada la tabla. Si lo que deseamos es
aplicar rápidamente un diseño predefinido a la tabla ' seleccionada, podemos utilizar el comando Formatear tabla para.
El panel Propiedades permite examinar y editar las propiedades del elemento de página seleccionado actualmente. En este caso,
mostrará los atributos de la Tabla o Celda seleccionada.

1. asignar un nombre a la tabla

 En el campo Id de tabla, digita un nombre para la tabla.
2. Selecciona opciones de diseño de tabla
 En los campos Filas y Cols, define el número de filas y columnas de la tabla.
 En los campos An y Al, define el ancho y el alto de la tabla como un número de pixeles o como porcentaje de la ventana del
navegador. Normalmente no es preciso especificar el alto de una tabla.

3. Utilizaremos el campo Alinear, para especificar cómo debe alinearse una tabla con otros elementos del mismo párrafo, como
pueden ser texto o imágenes. Izquierda alinea la tabla a la izquierda de otros elementos, Derecha alinea la tabla a la derecha de
otros elementos y Centro, centra la tabla. También podemos elegir la alineación predeterminada del navegador.

PROPIEDADES DE LAS CLUMNAS, FILAS O CELDAS

1. Seleccionar cualquier selección de celdas de la tabla
2. Selecciona el menú Ventana > Propiedades para abrir el panel de Propiedades.
3. Disponemos de las siguientes opciones de apariencia:
a. Utilizaremos la lista desplegable del campo Horiz o Vert para configurar la alineación horizontal o vertical del contenido de una
celda. Podemos alinear el contenido con la parte superior, media, inferior, con la línea de base o simplemente con el valor
predeterminado del navegador.
b. En los campos An y Al, especificamos en pixeles el ancho y el alto de las celdas seleccionadas.
Para definir una imagen de fondo para una celda, columna o fila, utilizaremos el campo Fnd.
Hacemos clic en el icono de carpeta para localizar una imagen. También podemos escribir la ruta de la imagen o utilizar el icono
de señalización.
c. Para definir el color de fondo para una celda, columna o fila, utilizaremos el campo Fnd. Podemos utilizar el selector de colores
o escribir el código hexadecimal correspondiente al color deseado.
Para establecer un color de borde para las celdas, utilizaremos la opción Borde.
d. Disponemos de las siguientes opciones de diseño:
 Hacemos clic en el botón Combinar celdas para combinar las celdas, filas o columnas seleccionadas y convertirlas en una sola
celda.
 Hacemos clic en el botón Dividir celda para dividir una celda y convertirla en dos o más celdas. Aparecerá el cuadro de diálogo
Dividir celda, en la cual indicará la cantidad de divisiones que deseamos realizar en esa celda.

Docente: Paisig Cueva Roberto 5to de Sec.

 I E

INSTITUCIÓN EDUCATIVA Nº 2077

“SAN MARTIN DE PORRES”
PRACTICA DE LABORATORIO
1. Crear la tabla que tenéis a continuación dentro de la página “index.html”: Poner como colores de arriba hacia abajo:
marrón, naranja, rojo, y amarillo claro. Guardar los cambios y comprobar cómo ha quedado.

2. crear una página web que tenga como título “Meses del año” y un encabezado en la primera línea que ponga “Mes de
Abril”. A continuación deberéis definir la tabla necesaria para albergar este mes. Guardar la página con el nombre
‘abril.htm’ dentro de vuestro sitio web DREAM. Además la página debe tener las siguientes características:
- color de fondo verde
- color de fondo de la tabla de color naranja
- letras para cada fila en un color diferente.

3. Abrir la página web “abril.htm” situada dentro de vuestro sitio web. Añadir una columna a la derecha y otra a la izquierda
y también una arriba y otra abajo. Deberéis poner como color de fondo de las celdas creadas el color gris. Esto lo podéis
hacer seleccionando las celdas y pulsando sobre el botón Guardar la tabla resultante con el nombre
“abril_modificado.htm”

Docente: Paisig Cueva Roberto 5to de Sec.

 I E

INSTITUCIÓN EDUCATIVA Nº 2077

“SAN MARTIN DE PORRES”
ACTIVIDAD DOMICILIARIA

Elaborar la página web "Mascotitas", diseñando su estructura con tablas.

A continuación se dan las medidas de la tabla principal y de las tablas anidadas. (TRAERLO IMPRESO Y EN USB)

Docente: Paisig Cueva Roberto 5to de Sec.