Aspectos básicos de Dreamweaver

Cómo tener una página en Internet ----------------------

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por
disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen
de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio
de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también
en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a
vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a
incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa,
aunque sí es aceptable para una página personal.Cuando se va a contratar un servicio de
hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia
empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página.
Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los
nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones,
como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra
página no será más que un archivo dentro de la de la empresa contratada.

Editar páginas web

Comenzar a utilizar Dreamweaver es tan fácil como abrir un documento HTML existente o crear
uno nuevo. Dreamweaver MX 2004 es un software fácil de usar que permite crear páginas web
profesionales sin la necesidad de programar manualmente el código HTML. Para seguir este curso
te puedes descargar la versión gratuita de Dreamweaver desde la página de Macromedia, la
versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de
este estupendo programa.
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los
documentos con la extensión HTML o HTM, e incluir como contenido del documento el código
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear páginas web medíante el código HTML es más costoso que hacerlo utilizando un editor
gráfico. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más
utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es
Macromedía Dreamweaver. Otra serie de buenos editores de páginas web son Microsoft
Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.
Área de trabajo de Dreamweaver-------------------------

1
 

La ventana de documento muestra el documento actual mientras lo está creando y editando.
 La barra del lanzador, situada en la parte inferior derecha de la ventana de documento,
contiene botones que permiten abrir y cerrar los inspectores y paneles que utiliza con
mayor frecuencia.
 La barra de herramientas contiene botones y menús emergentes que le permiten ver la
ventana de documento de diferentes formas, definir opciones de vista y obtener acceso a
algunas operaciones comunes, como, por ejemplo, previsualizar en un navegador.
 Los menús contextuales permiten acceder rápidamente a comandos útiles para la
selección o área actual. Para ver un menú contextual, haga clic con el botón derecho del
ratón.
 El panel Objetos contiene botones para la creación e inserción de diversos tipos de
objetos, como imágenes, tablas, capas y marcos.
 El inspector de propiedades muestra propiedades del objeto o texto seleccionado y
permite modificar dichas propiedades. (Las propiedades que aparecen en el inspector
dependen del objeto o texto seleccionado.)

Diferentes vistas de Dreamweaver-----------------------

Dreamweaver le permite trabajar en su documento de diferentes formas: utilizando la vista Diseño
(muestra una representación visual del documento), utilizando la vista Código (código HTML
subyacente) o empleando una vista combinada que muestra el diseño y el código del documento.

Utilizar la barra de herramientas--------------------------

Contiene botones que permiten alternar entre diferentes vistas del documento rápidamente:
Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño. La barra de
herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el
estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en
función de la vista que seleccione.

Utilizar el inspector de propiedades----------------------

2
El inspector de propiedades permite examinar y editar las propiedades del elemento de página
seleccionado actualmente. (Un elemento de página es un objeto o texto.) El contenido del
inspector de propiedades varía en función del elemento seleccionado.

Definir preferencias generales-----------------------------

Las preferencias generales controlan la apariencia global de Dreamweaver. Para cambiar estas
preferencias, elija Edición >
Preferencias

Aquí decidimos qué

explorador será el que nos
permita previsualizar nuestra
página web en internet.

Definir preferencias en el menú modificar |

propiedades de la página------------------------------------

Podemos decidir el tipo de

letra o fuente de nuestra
página web (no todas se
visualizan si el usuario no las
tiene instaladas). También
decidimos el fondo de la web:
color o imagen, ya sea de
tamaño grande o de tamaño
más pequeño (que se repite
en mosaico).

3
 Los distintos aspectos de los
hipervínculos son: su fuente o
letra, su tamaño, sus colores
(diferentes según sean el
vínculo creado, el activo o el
visitado) y el estilo del
subrayado (que nos permite
elegir la opción más personal
para nuestra web.

La barra de herramientas Insertar o panel de objetos

permite insertar elementos en un documento
sin la necesidad de recurrir al menú insertar.
No olvides probar los botones y el texto flash
para crear los botones u origen de los
hipervínculos.

Planificación y diseño de sitios----------------------------

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o un emplazamiento local
de almacenamiento de documentos pertenecientes a un sitio Web. Cuando comience a pensar en
la creación de un sitio Web, debe seguir una serie de pasos de planificación para asegurarse de
que el sitio sea un éxito. Incluso en el caso de que vaya a crear tan sólo una página principal
personal que sólo verán los amigos y la familia, será conveniente planificar el sitio cuidadosamente
para asegurarse de que todo el mundo pueda utilizarlo correctamente.
Un sitio es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un
objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a
contener.
Determinar los objetivos
Decidir los objetivos del sitio es el primer paso que debe tomar a la hora de crear un sitio Web.
Pregúntese a sí mismo o a sus clientes cuestiones relacionadas con el sitio. ¿Qué espera
conseguir al disponer de un sitio Web? Escriba sus objetivos de manera que pueda recordarlos
durante el proceso de diseño. Los objetivos le
ayudan a centrarse y a adaptar el sitio Web a sus necesidades particulares. La complejidad de sus
objetivos afectará a la navegación, a los elementos multimedia que utilice (Flash, Director, etc.), e
incluso a la apariencia y al funcionamiento del sitio.
4
Elegir la audiencia destino
la mayoría de la gente quiere que todo el mundo visite su sitio Web. Sin embargo, es difícil crear
un sitio Web que pueda utilizar absolutamente todo el mundo. La gente utiliza navegadores
distintos, se conecta a velocidades diferentes y puede o puede que no disponga de plug-ins
multimedia. Todos estos factores afectan al uso del sitio. Y ésta es precisamente la razón por la
que debe determinar su audiencia destino.
Crear sitios compatibles con diversos navegadores
Hay más de veinte navegadores Web distintos en uso, la mayoría de los cuales están disponibles
en varias versiones. Aunque su objetivo sea únicamente ofrecer compatibilidad con Netscape
Navigator y Microsoft Internet Explorer, utilizados por la mayoría de los usuarios de la Web, no
todos los visitantes dispondrán de las versiones más recientes de esos navegadores.
Cuanto más sofisticado sea el sitio —en términos de diseño, animación, contenido multimedia e
interacción—, menos probable será que ofrezca compatibilidad para distintos navegadores. Por
ejemplo, no todos los navegadores pueden ejecutar JavaScript.
Organizar la estructura del sitio
Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle frustración y tiempo
más adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden,
puede terminar con una enorme carpeta llena de archivos y difícil de administrar.
Ahorrará mucho tiempo posteriormente en el proceso si planifica el diseño y la disposición antes
de comenzar a trabajar con Dreamweaver. Puede ser tan sencillo como crear un boceto en papel
de cómo desea que sea la disposición del sitio.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos
HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes,
las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el
objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se
conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que
equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
La organización de los archivos en un sitio permite administrar
y compartir archivos, mantener los vínculos de forma
misitio
automática, utilizar FTP para cargar el sitio local en el servidor,
etc.
Es conveniente que la página inicial del sitio tenga el nombre
textos index.htm o index.html, ya que los navegadores buscan una
página con ese nombre cuando se intenta acceder a una URL
genérica.
imagenes

galeriafotos

Index.html

musica.mid

Características del texto-------------------------------------

El inspector de propiedades,fuente permite
seleccionar un conjunto de fuentes.
Aparecen conjuntos de fuentes en lugar de
una sola, ya que es posible que al establecer
una única fuente el usuario no la tenga en su
ordenador. El seleccionar un conjunto de
fuentes posibilita que en el caso de que el
usuario no tenga una fuente se aplique otra
del conjunto. Por ejemplo, si seleccionamos

5
Arial, Helvetia,Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en
Helvetia.

Hiperenlaces, vínculos e hipervínculos------------------

Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
1. Referencia absoluta: conduce a una ubicación externa al sitio en el que se encuentra el
documento. La ubicación es en Internet, por ejemplo, "http://www.aulaclic.com".
2. Referencia relativa al sitio: conduce a un documento situado dentro del mismo sitio que el
documento actual.
3. Referencia relativa al documento: conduce a un documento situado dentro del mismo sitio
que el documento actual, pero partiendo del directorio en el que se encuentra el
documento actual.
4. Puntos de fijación: conduce a un punto dentro de un documento, ya sea dentro del actual
o de otro diferente. Para ello el vínvulo debe ser
"nombre_de_documento#nombre_de_punto". El punto se define dentro de un documento
a través del menú Insertar, opción Anclaje con nombre.
Creación de enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el
Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene
HTTP://

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar
dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece
a través del menú Insertar, opción Hipervínculo.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el
conjunto de marcos padre.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.

Enlace a correo electrónico---------------------------------

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se
desea que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vínculo en este caso es mailto:direccióndecorreo.
Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando
previamente el texto o la imagen deseados.
También es posible a través
del menú Insertar, opción
Vínculo de correo
electrónico.
En este caso no es posible
asignar el vínculo a una
imagen, solo permite
introducir el texto que
contendrá el vínculo de
correo.

6
Tipos de imágenes para una web: Formatos de imagen
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. 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 el 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. Vamos a
ver un poco más sobre estos formatos:
 Formato GIF: utilizan un máximo de 256 colores, y son recomendables para imágenes con
grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran
frecuencia, ya que permiten contener transparencias y animación.
 Formato JPG: las imágenes son de mayor calidad que las GIF, al poder contener millones de
colores, pero el tamaño de la imagen es mayor y tarda más en descargarse.
 Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser
visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.
 Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La
imágen solo se mostrará correctamente en el navegador.

Optimización de una imagen--------------------------------

Es posible optimizar una imagen insertada en un documento abierto en Dreamweaver, a través de
Fireworks. De este modo puede modificarse el formato de la imagen, la transparencia, la paleta de
colores que utiliza, etc.Al modificar 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.

Transparencias
En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de una
imagen. Normalmente lo que se desea hacer transparente es el fondo.
Por ejemplo, en la imagen de la derecha el fondo puede desentonar con el
fondo de la página, o hacer que su apariencia sea más pobre.
Lo primero que hay que hacer es establecer un color de fondo para la
imagen, de modo que éste no coincida con el color de ningún otro elemento
del dibujo, para que éste último pueda seguir mostrándose correctamente
después de aplicar la transparencia.
Después podrá aplicarse la transparencia sobre el color deseado, desde algún programa de
tratamiento de imágenes, como puede ser Fireworks.
Una forma de aplicar transparencia mediante Fireworks es a través de los botones.
Cuando se está optimizando la imagen, puede pulsarse uno de los dos primeros botones
anteriores, de modo que el puntero adquiere la forma de un cuentagotas al situarse sobre la
imagen o sobre la lista de colores de la imagen. Pulsando sobre un
color, éste se volverá transparente.
La diferencia entre el primer y el segundo de estos botones, es que
el primero solo permite asignar transparencia a un color, mientras
que el otro permite añadírsela a varios. El último botón se utiliza
para quitar la transparencia de algún color.
En el caso de haber aplicado la transparencia al color azul que hacía de
fondo de la imagen, esta quedaría como la de la derecha.
La existencia de transparencia permite mejorar notablemente la estética de
nuestras páginas.

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de
imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas
páginas.

7
Para insertar un rollover hay que dirigirse al menú Insertar, Imágenes interactivas, a la opción
Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de
sustitución.
Es preferible que la opción Carga previa de imagen de sustitución esté activa. De este modo se
evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que
aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada
en el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse
a través del campo Alt del inspector de propiedades de la imagen seleccionada.

Botones Flash
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse para
crear menús, como pueden ser los botones Flash.
Para insertar un botón Flash hay que dirigirse al menú Insertar, Imágenes interactivas, a la
opción Botón Flash.
A través de Estilo puede seleccionarse uno de los distintos formatos de botón que se ofrecen. En
esta misma ventana hay que especificar también el texto que mostrará el botón, así como el
nombre con el que será guardado y el vínculo asociado.
Es preferible guardar los botones Flash en el mismo directorio que los documentos
HTML, en lugar de en la carpeta destinada a almacenar imágenes , ya que de no ser así
es posible que al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no permita
guardar el botón con ese vínculo en una ubicación diferente de la de dicho documento.
Recuerda que los botones deben guardarse con la extensión SWF.
A través del inspector de propiedades del botón Flash es posible editar de nuevo sus atributos.
Puede volver a abrirse la ventana anterior pulsando sobre el botón Editar, y a través del botón
Reproducir es posible probar el funcionamiento del botón Flash desde Dreamweaver, sin la
necesidad de tener que abrir la página con algún navegador. Después de haber probado el
funcionamiento del botón Flash, debe pulsarse de nuevo sobre el botón Reproducir (que habrá
cambiado por el botón Detener).

Texto Flash
El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes intercambia el color
del texto.
Para insertar texto Flash hay que dirigirse al menú Insertar, Imágenes interactivas, a la opción
Texto Flash.
En la nueva ventana, además del texto, el vínculo y el nombre con el que será guardado el texto,
hay que especificar el color original y el de sustitución.
El inspector de propiedades del texto Flash es igual que el de un botón Flash.

Bibliografía y Webgrafía-------------------------------------
 http://www.aulaclic.es/dreamweaverMX
 http://www.manualespdf.es/manual-dreamweaver-8/
 http://www.programatium.com/dreamweaver.htm
 http://roble.pntic.mec.es/apuente/dw_mx_ini/