Resumen de Dreamweaver

Propiedades de texto, estilo CSS, hiperenlaces, imágenes y tablas

Paola Sinning 11ºD

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen en la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).

Un diseño basado en CSS, es decir, un diseño que utiliza elementos de bloques en lugar de filas y columnas de tabla, contiene mucho menos código que un diseño similar basado en tablas. Los diseños basados en CSS suelen utilizar etiquetas <div> en lugar de <table> para crear los bloques CSS utilizados para el diseño. Puede colocar estos bloques CSS en cualquier lugar de la página y asignarles propiedades como bordes, márgenes, colores de fondo, etc. Además, a los usuarios que utilizan lectores de pantalla les será mucho más sencillo acceder al contenido de las páginas Web creadas con CSS, porque el código es más sencillo y más corto.

Dreamweaver le permite utilizar capas. Una capa de Dreamweaver es un elemento de página HTML que se puede colocar en cualquier lugar del documento. Específicamente, es una etiqueta <div> (o cualquier otra etiqueta) con una posición absoluta. Las capas se arrastran hasta su página con Dreamweaver y después las coloca donde quiera. Las capas funcionan como bloques de contenido que pueden albergar activos como imágenes, archivos Flash, texto, etc.

Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas. Al crear filas múltiples con celdas múltiples, las celdas formal columnas. Técnicamente, una celda es una división dentro de una fila horizontal, y una columna es una acumulación vertical de estas divisiones de celdas.

Dreamweaver muestra el ancho de la tabla y de cada columna en el Selector de tablas (marcado con líneas verdes) cuando se selecciona una tabla o cuando el punto de inserción está en ella.

Junto a los anchos se encuentran flechas para el menú de encabezado de la tabla y los menús de encabezado de las columnas. Puede utilizar los menús para acceder rápidamente a determinados comandos relacionados con tablas. También puede activar o desactivar la vista de los anchos y los menús seleccionando Ver > Ayudas visuales > Anchos de tabla.

Las tablas pueden tener bordes, y las celdas de una tabla pueden tener relleno, espaciado o ambos. El relleno de celda determina el número de píxeles entre el contenido de una celda y los límites de la misma. El espacio entre celdas determina el número de píxeles entre celdas contiguas de una tabla.

Si no se especifican de forma explícita los valores de relleno y espaciado de celda, la mayoría de los navegadores mostrará la tabla como si el valor de relleno de celda fuera 1 y el de espaciado de celda fuera 2. Si quiere asegurarse de que los navegadores muestran la tabla sin relleno ni espaciado, establezca 0 como valor de ambos atributos.

Las imágenes pueden ser de muchos formatos diferentes: BMP, GIF, JPG. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores

Los formatos más utilizados son los GIF y el JPG que a pesar de ser imágenes de menor calidad que las imágenes bmp , son más recomendables debido a que ocupan menos memoria

Para insertar una imagen hay que dirigirse al menú insertar, a la opción imagen. Después de esto ya es posible seleccionar una imagen a través de la nueva ventana

Es posible optimizar una imagen insertada en un documento abierto de Dreamweaver, a través de Fireworks. De este modo puede modificarse el formato de la imagen, la transparencia, la paleta de colores que utiliza.

Al modificarse estos valores, lo que se pretende es que la imagen ocupe menos memoria.

Para optimizar una imagen desde Dreamweaver hay que seleccionar la imagen, y seguidamente dirigirse al menú comandos, opción optimizar imagen en fireworks

Desde la nueva ventana será posible modificar los atributos de la imagen

Un vínculo es una referencia insertada en una página Web que señala a otro documento. Puede convertir prácticamente cualquier tipo de activo en un vínculo, pero el tipo de vínculo más común es el de texto.

Puede crear vínculos en cualquier etapa del proceso de creación del sitio. En este apartado va a crear vínculos para la barra de navegación, aunque todavía no lo haya formateado para que aparezca como barra de navegación.

Creación de vínculos

Puede crear varios tipos de vínculos en un documento:

Un vínculo con otro documento o archivo, como un archivo gráfico, de película. PDF o de sonido

Un vínculo de anclaje con nombre, que salta a un emplazamiento específico dentro de un documento.

Un vínculo de correo electrónico, que crea un mensaje de correo electrónico en blanco con la dirección del destinatario ya rellenada.

Vínculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un vínculo que ejecuta código JavaScript.

Puede utilizar el icono de carpeta o el cuadro de texto Vínculo del inspector de propiedades para crear vínculos desde una imagen, un objeto o texto hasta otro documento o archivo

1. Seleccione texto o una imagen en la vista Diseño de la ventana de documento.2. Abra el inspector de propiedades (Ventana > Propiedades)