Curso

Imágenes y texto en Dreamweaver MX

Para modificar la alineación del texto respecto a una imagen en Dreamweaver MX tenemos primero que seleccionar la imagen y después elegir el tipo de alineación que queremos para nuestro texto. En propiedades cuando seleccionamos la imagen nos muestra el atributo alinear en el cual encontramos varias opciones, si lo que queremos es envolver texto alrededor de la imagen utilizaremos las opciones Izquierda o Derecha, cuando elegimos una de estas opciones Dreamweaver MX coloca un símbolo con la imagen de un ancla el el lugar donde se insertó la imagen, este símbolo indica donde se encuentra la etiqueta html de la imagen en relación con el texto. La cantidad de texto que envuelve la imagen va a depender de varios factores: del tamaño en el que aparece el texto en la ventana del navegador, de la cantidad de texto introducido y del tamaño de la ventana del navegador.

Si lo que queremos es ajustar el espacio entorno a una imagen para que el texto no salga pegado a ella seleccionamos la imagen y en el inspector de propiedades configuramos ese espacio introduciendo en las casilla Espacio V (vertical) y espacio H (horizontal) la distancia que queramos conseguir entre nuestra imagen y el texto que la acompaña.

Insertar imagen de sustitución en Dreamweaver MX 2004

Para insertar una imagen de sustitución es conveniente tener dos imágenes del mismo tamaño. Para insertarla nos situamos en el lugar donde queremos poner nuestra imagen y vamos a Insertar | Objetos de imagen | imagen de sustitución. Se abre entonces una ventana de diálogo para insertar las imágenes: Nombre de la imagen ( ponemos un nombre ) Imagen original (imagen que se ve al principio) imagen de sustitución (imagen que aparece al situar el ratón encima de la original y que la sustituye), dejamos seleccionada la opción de carga previa de la imagen de sustitución, texto alternativo es el texto que aparece cuando ponemos encima el ratón para identificar la imagen y si queremos poner un enlace lo podemos poner en la casilla al hacer clic ir a la URL.

Las hojas de estilo en Dreamweaver MX

Las hojas de estilo sirven para dar formato homogéneo a todo nuestro sitio web de una forma rápida y sencilla. Con los estilos CSS definimos atributos como el color de fondo o la imagen de fondo, márgenes de la página, el color de los vínculos, etc.

Hay dos formas de utilizar los estilos en Dreamweaver, podemos utilizar un estilo interno cuando tengamos que dar forma a una sola página (el estilo se escribe en el código interno del documento) o un estilo externo almacenado en una carpeta fuera del documento y vinculado a la página, este estilo lo utilizamos cuando necesitemos dar formato a varios documentos a la vez para mantener un aspecto homogéneo en todos ellos.

Los estilos internos solo se utilizan en el documento en el que se van creando, si damos formato a la página, por ejemplo, ponemos un color de fondo azul, elegimos arial como tipo de letra y cambiamos el color de los vínculos en blanco desde Modificar| propiedades de la página, ya estamos generando estilos en Dreamweaver, los estilos se van escribiendo en el código entre las etiquetas . Si hemos elegido un color negro para el tipo de letra y luego queremos poner una palabra o frase en otro color lo hacemos desde el inspector de propiedades, cuando lo hacemos vemos que en la casilla Estilo se genera un estilo nuevo (estilo 1), si ponemos una palabra o frase en cursiva se generará otro estilo (estilo 2) etc. Si luego queremos aplicar otra vez estos estilos solo tenemos que seleccionar la palabra o frase y luego escoger el estilo que queremos aplicar. También podemos cambiar el nombre del estilo que creamos para reconocerlos más facilmente, esto lo hacemos desde la casilla Estilo del inspector de propiedades, eligiendo la opción cambiar nombre.

Si hemos generado un estilo para un documento y luego queremos utilizarlo en otros documentos lo podemos exportar. Archivo | Exportar | estilos css . Creamos una nueva carpeta para los estilos y lo guardamos. Para aplicarlo después vamos al panel Estilos CSS ( Ventana | Estilos CSS) , en la esquina superior derecha del panel hay unas lineas y una pequeña flecha, pinchamos y se abre un menú de opciones, elegimos adjuntar hoja de estilos externa y seleccionamos el estilo que habiamos guardado, dejamos la opción vincular, y le damos a aceptar.

Las tablas con Dreamweaver MX

En este post veremos como crear tablas con Dreamweaver MX
Para crear una tabla en Dreamweaver MX 2004, en primer lugar colocamos el cursor en el lugar donde queremos insertar la tabla y hacemos clic en el botón insertar tabla de la categoría común de la barra insertar o le decimos insertar tabla desde la barra de menú. En los dos casos se abre el cuadro de diálogo Tabla.

Configuramos las características:

filas: introducimos el número de filas que queremos.

columnas: introducimos el número de columnas que queremos.

ancho de tabla: lo podemos definir en % (tamaño relativo) o en píxeles con lo cual definimos un tamaño absoluto es decir que el tamaño de la tabla no varía aunque varíe la resolución del navegador, en el caso del tamaño relativo las tablas se adaptan a la resolución de la pantalla del usuario.

grosor del borde: si no queremos borde, le ponemos 0.

relleno de celda: espacio entre el contenido de la celda y su borde.

espacio entre celdas: definimos el espacio entre dos celdas adyacentes.

Si queremos que nuestra tabla tenga un encabezado, seleccionamos una de las opciones del apartado Encabezado, el texto del encabezado sale centrado y en negrita.

Una vez creada la tabla podemos modificar su aspecto desde el inspector de propiedades. Al seleccionar la tabla (para seleccionar la tabla ponemos el cursor a su izquierda y hacemos clic y arrastre hacia la derecha o bien nos ponemos en una de las celdas y seleccionamos la etiqueta <table> que aparece justo encima del inspector de propiedadesnos, también la podemos seleccionar si nos acercamos a uno de sus bordes y cuando sale una flecha doble hacemos clic) el inspector nos muestra las características de la tabla y podemos definir un color de fondo o bien insertar una imagen de fondo a la tabla.

También podemos definir las características de cada una de las celdas de la tabla. Para ello, nos ponemos en la celda que queremos y desde el inspector de propiedades le definimos los atributos, tamaño, alineación de su contenido, color o imagen de fondo. Para seleccionar un celda nos ponemos dentro de ella y seleccionamos su etiqueta <td> igual que haciamos con la etiqueta <table>; para seleccionar celdas adyacentes nos ponemos en una de ellas y hacemos clic y arrastre hasta la siguiente, si queremos seleccionar celdas que no estan juntas lo hacemos presionando la tecla control y hacemos clic.

Para añadir más filas y columnas a la tabla podemos hacerlo directamente desde el inspector de propiedades seleccionando la tabla y cambiando el número de filas y columnas definidas inicialmente o bien ponemos el cursor en un fila o columna y le decimos Modificar| Tabla | Insertar fila o Insertar columna.
Para eliminar un fila o una columna Modificar| Tabla | Eliminar fila o Eliminar columna.

También podemos combinar filas o columnas para ello seleccionamos las filas o columnas a combinar y en el inspector de propiedades hay dos iconos justo debajo de la palabra Col, el primero sirve para combinar varias celdas en una y el otro divide la celda en nuevas filas o columnas.

Vínculos con Dreamweaver MX 2004

Hay varias formas de poner un vínculo en Dreamweaver MX 2004.

Podemos hacerlo desde la barra insertar (en modo Común) seleccionando el icono en forma de cadena, se abre una ventana de diálogo con varias casillas, en texto ponemos la palabra que queremos enlazar, en vínculo pondremos la dirección html donde queremos ir y en destino podemos elegir entre: _blank, _parent,_self y _ top.
Por ahora solo utilizaremos _blank si queremos que nuestro enlace se abra en una ventana nueva del navegador.

Otra forma es hacerlo desde el inspector de propiedades. Hay que seleccionar el texto a enlazar y en la casilla de vínculo introducimos la dirección del enlace.
Si no sabemos la dirección correcta pinchamos sobre el icono de la carpeta y la seleccionamos de nuestro sitio web o pinchamos sobre el icono en forma de rueda y arrastramos para elegir la dirección en el panel archivos.
Si es un enlace externo hay que poner toda la dirección web completa, si es un enlace a nuestro sitio web solo ponemos los elementos de la dirección no comunes del enlace.

Podemos definir el color y formato de los vínculos desde la ventana de propiedades de la página. Iremos a vínculos donde podemos definir cuatro colores diferentes, uno para cada estado del enlace, también podemos definir la fuente, el tamaño y el estilo del subrayado del enlace.

También podemos utilizar imágenes para crear vínculos, en este caso seleccionamos la imagen y en la casilla de vínculo del inspector de propiedades escribimos la dirección del enlace.

¿Como insertar imágenes en Dreamweaver MX?

Insertar una imagen de fondo en la página.

Una imagen de fondo es un gráfico que se repite a lo ancho y alto de toda la ventana del navegador. Podemos definir tanto un color de fondo como una imagen.

Para insertar una imagen de fondo en Dreamweaver, primero creamos la imagen que queremos utilizar.(Pincha aquí para ver algunos ejemplos de fondo). Después vamos a Modificar| Propiedades de la página| Aspecto | Imagen de fondo y pinchamos en el icono de la carpeta para seleccionar la imagen que vamos a utilizar. Le damos a aceptar y vemos como ha quedado.

Los formatos de imagen que mejor se adaptan a la web son JPG para fotografías y GIF para colores planos, iconos, fondos, texto, además este formato admite transparencia y animación.

Para insertar una imagen en nuestro documento hay varias posibilidades, bien desde la ficha común, pinchando en el icono que tiene un árbol, o bien desde la opción Insertar| Imagen.

Cuando insertamos una imagen en el documento el inspector de propiedades nos muestra todas sus características (tenemos que tener la imagen seleccionada).

Ancho y Alto: se refiere al tamaño de la imagen.

Origen (carpeta donde está ubicada).

Alt (el Alt es el texto que aparece enmarcado en un recuadro amarillo cuando nos situamos sobre la imagen al viasualizarla en el navegador).

Vínculo: si queremos ponerle un enlace.

Edición: son herramientas para el tratamiento de la imagen sobre el documento, recorte, brillo, perfilar bordes.

Borde: para poner un borde a la imagen, ponemos un número, 1, 2.

¿Cómo insertar texto con Dreamweaver MX 2004?

Para insertar texto con Dreamweaver podemos hacerlo escribiendo directamente sobre la página. Para darle formato tenemos abajo el inspector de propiedades.
En el apartado Formato tenemos los encabezados (que se suelen mostrar en tamaños de fuente más grandes o más llamativos que el resto del cuerpo). Hay 6 niveles de encabezado (el 1 es el más grande y el 6 el más pequeño). Los encabezados se utilizan para dividir el contenido en apartados o llamar la atención en determinadas partes de la página. Cuando aplicamos un formato se aplica a todo el texto como un bloque.
Si quiere establecer el formato de un bloque de texto a un párrafo, puede seleccionar Párrafo del menú Formato en el inspector de Propiedades o usar Control-Mayús-P (Windows) o usar Comando-Mayús-P (Mac).
Cada vez que escribimos y pulsamos la tecla Intro hacemos párrafos nuevos. En codigo fuente el texto estará entre < p > y .
Un < p > generaría el equivalente a dos saltos. En cambio, un < br > genera un salto de linea. Si lo queremos hacer en Dreamweaver tenemos que pulsar Mayús + Intro.
Los Estilos se refieren a hojas de estilo en cascada (CSS) que definen el aspecto y la ubicación de los elementos en su página. Dreamweaver va generando estilos a medida que vamos dando formato al texto: tipo de letra, tamaño, negrita, color, etc.
Los estilos que va generando Dreamweaver tambien los nombra por defecto: Estilo1, Estilo2, etc. Eso se puede cambiar, lo veremos más adelante.

Propiedades del documento

Seguimos con el curso gratuito de Dreamweaver MX 2004...
Cuando creamos un documento nuevo tenemos que configurar las características que lo definen (configurar sus atributos). Para ello, en la barra de menú seleccionamos Modificar, Propiedades de la página. Desde aquí podemos modificar las características de nuestra página: Aspecto, Vínculos, Encabezados, Título e Imagen de rastreo.

Aspecto: aquí podemos definir la fuente, el tamaño y el color del texto que tendrá nuestro archivo. También el color de fondo del documento e incluso añadir una imagen de fondo. El apartado de los márgenes hace referencia a la distancia hasta los bordes superior e inferior de la ventana del navegador.
En Vínculos, definimos el color de los enlaces y cómo queremos que aparezca nuestro enlace (siempre subrayar, nunca subrayar, etc.).
En Encabezados se define el tamaño y el color de la fuente para seis tipos de encabezados distintos.
En Título podemos poner el título al archivo. Aparecerá arriba del todo en el navegador. Es una de las informaciones útiles para los motores de búsqueda que indexan las páginas web.
La codificación se refiere a los caracteres del documento (alfabeto utilizado). Para el español y otors idiomas de Europa Occidental hay que seleccionar Europeo Occidental.
Y, finalmente, el apartado de Imagen de rastreo se utiliza para disponer de una imagen de fondo a la que podemos dar distintos grados de transparencia. Esta imagen no se verá en el navegador. Es como una imagen que se usa para calcar o realizar la maquetación encima de ella. Sirve como ayuda visual.