Curso de Dreamweaver

Imágenes y texto en Dreamweaver MX

2005-09-26T19:12:00.000+02:00

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

2005-08-10T16:26:00.000+02:00

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

2005-08-10T16:25:00.000+02:00

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

2005-07-18T11:58:00.000+02:00

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

2005-06-21T13:29:00.000+02:00

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?

2005-06-08T11:05:00.000+02:00

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?

2005-05-23T11:10:00.000+02:00

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

2005-05-12T15:13:00.000+02:00

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.

Vincular páginas con Dreamweaver MX 2004

2005-05-09T22:54:00.000+02:00

Es importante cuando creamos enlaces (o vínculos) conocer la ruta entre el documento de origen y el de destino. Las rutas más habituales son: las rutas absolutas y las rutas relativas.
Rutas absolutas: indican el URL completo del documento vinculado (o de la página vinculada). Ejemplo: si queremos poner un enlace a la sección de publicidad de Google España desde nuestra página tendremos que escribir la dirección completa http://www.google.es/ads/.
Rutas relativas: suelen hacer referencia a nuestro sitio web. Ejemplo: si tenemos tres apartados (inicio, quiénes somos, contacto) en nuestra web, con los nombres de archivo siguientes: index.html, quienes_somos.html y contacto.html, y queremos hacer un enlace desde una de ellas a otra (por ejemplo enlazar INICIO con CONTACTO, tenemos que escribir sólo el nombre del archivo. No es necesario (como ocurre en la absoluta) escribir TODA la dirección completa, (en este caso escribiríamos contacto.html).
Cómo hacer los enlaces con Dreamweaver MX 2004
Desde el panel propiedades, tenemos que ir al apartado Vínculo. Si conocemos la dirección la escribimos (ruta absoluta). Si es un archivo nuestro, podemos buscarlo haciendo clic en el icono de la carpeta.
Otra forma es en la Barra insertar|común, seleccionamos el icono de la cadena (hipervínculo) y escribimos en Texto la palabra o frase que llevará el enlace y en Vínculo escribimos la dirección.
Si queremos hacer un vínculo a un correo electrónico lo podemos hacer también desde la Barra insertar | común en el icono siguiente (el sobre) o desde propiedades escribiendo mailto: y la dirección de correo electrónico que queremos enlazar. Ejemplo: mailto:euroresi@euroresidentes.com

Definir un sitio con Dreamweaver MX 2004

2005-05-04T14:52:00.000+02:00

Cuando tenemos un proyecto web es necesario definir primero la ubicación de los elementos que lo componen: imágenes, animaciones, archivos, etc.
Habría que crear una carpeta (en Mis Documentos, por ejemplo) con el nombre del sitio: miweb, por ejemplo. Dentro de esa carpeta creamos una carpeta para las imágenes (imagenes). Utilizad sólo imágenes tipo .gif, .jpg o .png. Y recordad que al poner el nombre a las carpetas no debemos dejar espacios y tampoco poner acentos.
Una vez creadas estas 2 carpetas ya podéis abrir Dreamweaver. En la barra de menú vais al apartado sitio. Una vez allí abrid Administrar sitios y hacer click en Nuevo Sitio. Hay 2 opciones: Básicas y Avanzadas. Es casi preferible ir directamente a Avanzadas. En la categoría Datos locales rellenamos todos los datos. De momento, sólo hay que rellenar los tres primeros: Nombre del sitio, Carpeta raíz local (la que hemos creado con el nombre de miweb) y Carpeta predeterminada de imágenes (nuestra carpeta imagenes). Es muy importante abrirlas y seleccionarlas. Una vez finalizado, le decimos listo y ya tenemos definido nuestro sitio web que aparecerá en el panel Archivos / Vista local abajo a la derecha en Dreamweaver.

Empezamos con Dreamweaver

2005-05-03T11:18:00.000+02:00

Primero es importante conocer un poco el entorno de trabajo de Dreamweaver, este entorno lo conforman una serie de barras de herramientas, ventanas, paneles y otros elementos que nos permiten interactuar con el programa.

Cuando abres Dreamweaver MX 2004 por primera vez te pide que configures el espacio de trabajo, hazlo en modo diseñador, cuando le des al botón aceptar te aparece una pantalla con la página de inicio. Elige crear nuevo html y tendrás un pantalla como la de la foto.

Todos lo paneles y ventanas se pueden mover, cerrar, abrir, y cambiar de posición para facilitar el trabajo.

El espacio de trabajo es donde desarrollaremos nuestro proyecto, en su parte superior verás una pestaña donde pone Untitled-1, (esto es porque nuestro documento todavía no tiene nombre), un poco más abajo tenemos una casilla donde pone documento sin título, lo que pongamos en este espacio son los datos que apareceran en la zona superior de nuestra pantalla del ordenador. ¡Cuidado! Una cosa es el nombre de nuestro documento y otra el título que le pongamos, todos los documentos de nuestra página pueden llevar el mismo título.

Ahora vamos a guardar nuestro documento nuevo. Iremos a Archivo|Guardar como| y le ponemos un nombre.

A tener en cuenta: Al poner un nombre a nuestro archivo no debemos dejar espacios, intentad ponerlo todo en minúsculas, y no useis caracteres regionales como la ñ o la ç y tampoco poner acentos.

Aspectos a tener en cuenta

2005-05-01T16:24:00.000+02:00

Configurar la pantalla
No todas las personas tienen la misma resolución de pantalla en sus ordenadores. Cuando hagamos una web tenemos que comprobar que se vea correctamente en las dos resoluciones más usuales: 800x600 píxeles y 1024x768 píxeles. Cuando decimos "que se vea correctamente" queremos decir que nuestro diseño encaje en la pantalla (que no aparezcan barras de desplazamiento en la zona inferior).
Piensa que el área que queda una vez descontados los navegadores y las barras es de 760x420 para la resolución de 800x600 píxeles. Y de 955x600 para la de 1024x768 píxeles. Tenlo en cuenta cuando pienses tu web.
Cómo comprobarlo
En Windows XP hay que ir a Inicio, Panel de Control, Pantalla, Configuración. Una vez allí tenemos que modificar el Área de la pantalla.
Un consejo
Si haces tu web para una resolución de 800x600 tendrás siempre menos problemas.

Curso de diseño web con Dreamweaver MX 2004

2005-04-29T12:32:00.000+02:00

Dreamweaver MX 2004 es una herramienta para crear sitios web profesionales. Podéis obtener una versión demo durante 30 días en la web de Macromedia.
Para realizar este curso de diseño de páginas web también necesitareis un programa de edición de imágenes, bien Fireworks o Photoshop.

Un consejo: es importante saber qué contenidos queremos que tenga nuestra web y a quién va dirigida (nuestro público). En base a esto es conveniente hacer una maquetación previa para ordenar estos contenidos. Os recomendamos que esto se haga de manera esquemática (en papel o con ordenador). El objetivo es conocer cuantos apartados y subapartados necesitaremos en nuestra futura web. Todo esto teniendo en cuenta que las webs son dinámicas y que podemos rectificar.