Dreamweaver - CS3

Lección 36: Pestaña de Diseño (4)

36/58 Lecciones 

Dibujar una Tabla de Diseño

Otras dos opciones, que encontramos bajo la pestaña de “Diseño” de la barra de herramientas “Insertar”, son “”dibujar tabla de diseño” y los botones “dibujar diseño celda”.

Esto es actualmente consistente con la introducción de las tablas en modo “normal”, solo dibujamos nuestra tabla y las celdas dentro de ellas.
La primera cosa que debes hacer es dibujar la tabla.
Sólo haz click en el botón “dibujar diseño tabla” en la pestaña de “Diseño”.
Haz click y arrastralo en tu documento donde quieres insertar la tabla.
En este ejemplo yo estoy dibujando una tabla alrededor del rastreo de imagen que hemos insertado en la lección anterior.

Después dibujamos las diferentes celdas en nuestra tabla. Sólo necesitas dibujar una celda donde haya contenido. No necesitas dibujar celdas vacías.

Haz click en el botón “Dibujar diseño celda” en la pestaña “Diseño” y dibuja una celda para el título, logo, imagen y para un texto de cada imagen.

Puedes personalizar el tamaño de las celdas haciendo selección de las celdas y haciendo click y arrastrando los bloques en el filo de la celda.
Puedes cambiar la posición de la celda, seleccionándolas las celdas y haciendo click y arrastrando en el filo de la tabla.

Añade información a la celda en el mismo modo que lo haces en una Tabla “normal”
Coloca el cursor en la tabla y empieza a escribir texto. Para colocar una imagen en una tabla, arrastrala en la celda del panel “Archivos”.

Cuando una celda es seleccionada puedes ajustar sus propiedades en la ventana de propiedades.

Tramo automático

Si vemos la página en el navegador, vemos que ésta tabla tiene un valor fijo.
Para ajustar el ancho de ésta tabla al ancho de la ventana de navegación, primero slecciona la celda que quieras hacer tramo, en otras palabras, donde esta la variable en contra del ancho de la ventana de navegación y haz click en la casilla de verificación “Tramo automático” en la ventana de propiedades.

Esto abre una ventana de diálogo “Escoger Espacio Imagen”.
Aqui tenemos tres opciones:
El primero es el espacio de imagen.
La segunda usan ya un espacio de imagen existente.
Y la tercero no usa un espacio de imagen.

Dejáme explicarte que es un espacio de imagen.
Un espacio de imagen es una imagen invisible el cual asegura que el ancho de la celda es mantenida.

Porque no tengo ésto, escojo la primer opción “Crear un espacio de imagen en Archivo” y guárdalo en la carpeta “imagenes”.
Si tienes una lista, puedes escoger la segunda opción.
Y si no la quieres tienes una tercera opción.
Por favor nota que si escojes la tercer opción, las celdas no vendran invisibles en navegadores viejos.

Haz click en el botón Aceptar.

Como verás, la celda ahora estará estrecha y cuando la mires desde la parte inferior verás que las celdas con datos no están apropiadamente alineadas al título de la celda.

Ve la página en el navegador (haz click en la tecla F12).
Dependiendo que tan grande o pequeño sea tu ventana de negocio, la imagen y el texto no están alineados a la mitad de la página.
¿Cómo podemos resolverlo?

Primero para la imagen.
Selecciona la celda donde se encuentre.
Haz click y arrastra con los bloques a la izquierda y derecha al filo de la celda, entonces la celda tiene el mismo ancho que el ancho de la tabla.
Con la celda aún seleccionada, haz click en la flecha que apunta hacia abajo a un lado de la caja “Horz” y escoje “Centro” del menu desplegable.
Esto mejorará la imagen centrada en la tabla.

Ve el resultado en tu navegador aquí.

Para el texto, necesitamos otra solución.
Si escogemos la misma solución, el texto es centrado y repartido respecto al tamaño de la ventana del navegado.
Entonces colocamos este texto en su propia tabla.
Primero selecciona el texto y presiona Ctrl + C en tu teclado (ésto copia el texto).
Haz click en el botón suprimir de tu teclado (esto remueve el texto).
Selecciona el renglón de abajo de la tabla.
Haz click en el botón “Unir Celdas” en la ventana de propiedades.
En “Horz” escoge la “Mitad” (esto centrará el contenido de la celda).

Coloca el cursor en el renglón de abajo y haz click en el botón “Insertar” de la barra de menu.
Selecciona “Tabla” en el menu desplegable.
Especifica el número de renglones y columnas, más el ancho de tu tabla. En este caso lo haré con 1 columna y 1 renglón, con el ancho de 350 pixeles.
Haz click en el botón Aceptar.
Coloca el cursor en la nueva tabla justo creada y haz click en Ctrl + V de tu teclado.
Esto pegará el texto previamente copiado.

Ver la página en tu navegador y verás que no importa que tan grande o pequeño sea la ventana del navegador, aun trae la imagen y el texto, al centro de la página.

Increíble! Has completado Lección 36 INICIAR EL PROXIMO LECCIÓN