2. ¿EN QUE CONSISTE DREAMWEAR?
Dreamweaver es la herramienta de diseño de páginas web más
avanzadas.
Las funciones de edición visual de Dreamweaver permiten
agregar rápidamente diseño y funcionalidad a las páginas, sin
la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, hojas de estilo trabajar
con capas, insertar comportamientos Java Script para crear
efectos e interactividades e inserción de archivos multimedia,
etc. De una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo,
permitiendo entre otras cosas trabajar con mapas visuales de
los sitios web, actualizando el sitio web en el servidor sin salir
del programa.
http://www.aulaclic.es/dreamweaver-cs5/t_1_1.htm
3. ELEMENTOS BÁSICOS DE
DREAMWEAR
La barra de la aplicación: Esta barra contiene los siguientes
elementos: los menús, varios botones propios de la aplicación los
cuales nos permiten cambiar entre la vista de diseño o código,
acceder a las extensiones que se pueden añadir, o al
administrador de sitios, el conmutador de espacio de trabajo y
una caja de búsquedas para obtener ayuda on line.
Las pestañas de documento: cada archivo que tengamos abierto,
mostrará una pestaña con su nombre accediendo de uno a otro
con facilidad.
La barra de estado: encontramos el selector de etiquetas, nos
sirve para seleccionar etiquetas completas, las herramientas de
Selección, Mano y Zoom. Y otros datos como el tamaño de la
ventana, el tamaño de la página o su codificación.
4. La barra de herramientas estándar: contiene iconos para realizar
las acciones más habituales del menú Archivo y Edición, Nuevo
archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar
todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer
y Rehacer.
La barra de herramientas de documento: contiene iconos que
nos permiten cambiar entre las distintas vistas de edición y la
vista en vivo.
La barra de representación de estilos: nos permite ver la
apariencia de nuestra web en distintos dispositivos, si
estamos utilizando hojas distintas que dependan de eso.
La barra de navegación con navegador: esta barra nos permite
usar Dreamweaver como un navegador web y navegar por las
páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en
vivo.
5. El inspector de Propiedades: muestra las opciones propias del
objeto o texto seleccionado, permitiéndonos editarlas, por lo que se
convierte en uno de los elementos más utilizados en Dreamweaver.
El panel Insertar: Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios o cualquier elemento que
nuestra web necesite.
La vista Diseño: nos permite trabajar con el editor visual,
ofreciéndonos un aspecto muy similar al resultado final, pero
editable.
La vista Código: se utiliza para poder trabajar en un entorno
totalmente de programación, de código fuente. No permite tener
directamente una referencia visual de cómo va quedando el
documento según se va modificando el código.
La vista Dividir : permite dividir la ventana en dos zonas: Código y
Diseño. Una muestra el código fuente, y la otra el editor visual.
Cuando se realiza un cambio en alguna de las zonas, este cambio se
aplica directamente sobre la otra.
6. La Vista en vivo: es una mejora reciente de Dreamweaver. Nos
ofrece una vista del resultado final no editable.
La vista Código en vivo: se emplea conjuntamente con la Vista en
vivo. Divide la pantalla como la vista Dividir, pero sin que podamos
editar el código. Lo que hace es que al seleccionar partes de la web en
la Vista en vivo, se seleccione su correspondiente código fuente.
http://www.aulaclic.es/dreamweaver-cs5/t_2_1.htm
7. EL TEXTO Y SUS PROPIEDADES
Los encabezados se utilizan para establecer títulos dentro de un
documento, es importante emplear correctamente los
encabezados, ya que se organizará mejor el contenido de nuestra
web. El formato predeterminado sirve para que el texto aparezca
tal cual ha sido escrito.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos
permiten formatear nuestra página y darle el diseño que
queramos. Podemos cambiar desde propiedades simples, como el
color de fondo, hasta cosas más vistosas.
Los estilos CSS se utilizan para combinar una serie de atributos
del texto, como pueden ser el color , el tamaño, etiquetas,
encabezados, párrafos, enlaces, etc. Además se puede crear um
estilo personalizado tiene uma capacidad simple de
actualizacion.
8. HIPERENLACE
Un hiperenlace es el que al ser pulsado lleva de una página o
archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a
parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos será
crear una etiqueta <a></a> que es la que en HTML se encarga
de definir los 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 HTML.
Otra forma de crear un enlace es a través del menú Insertar,
opción Hipervínculo.
9. CLASES DE HIPERENLACE
Referencia absoluta: Conduce al sitio en el que se encuentra el
documento utilizando la ruta completa del archivo, incluyendo el
protocolo http://.
Referencia relativa al documento (por defecto): La ubicación del
archivo enlazado se toma en relación con la ubicación de la
página. Esta es la opción por defecto de Dreamweaver, y es la
forma más habitual para enlazar archivos dentro del sitio.
Referencia relativa al sitio: Conduce a un documento situado
dentro del mismo sitio que el documento actual. Tomando como
origen la carpeta raíz del sitio.
Marcadores o Puntos de fijación: Conduce a un punto dentro de
un documento, ya sea dentro del actual o de otro diferente. Para
ello, indicamos el nombre del punto de fijación a continuación de
la ruta del archivo (relativa o absoluta) separados por una
almohadilla (#).
Se debe tener siempre en cuenta que los nombres de las rutas se
correspondan perfectamente a los nombres de los archivos y
carpetas en el servidor
10. LAS IMÁGENES
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. Otra forma de
insertar una imagen, es arrastrarla directamente desde el
panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o
escribimos mal su nombre, en Dreamweaver
aparecerá indicando que el enlace del archivo está roto.
Es preferible que la imagen sea relativa al Documento, ya que
si cambiamos la página de carpeta, lo habitual es cambiar
también sus imágenes.
12. IMAGEN DE SUSTITUCIÓN O
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.
Para insertar un rollover hay que dirigirse al
menú Insertar, Objetos de Imagen, a la opción Imagen de
sustitución. En la nueva ventana hay que especificar la imagen
original y la de sustitución.
http://www.aulaclic.es/dreamweavercs5/graficos/imagen_sustitucion.g
if
13. Películas flash: son animaciones, cuyo archivo tiene la
extensión SWF. Estas películas pueden crearse mediante el
programa Flash también de Adobe. Para poder ser visualizado
en el navegador, y necesitan que el usuario tenga instalado el
plug-in de Flash Player. Las películas Flash pueden insertarse
en una página a través del menú Insertar → Media, opción
SWF.
Sonido: Las páginas que contienen sonido suelen ofrecer la
posibilidad de activarlo o desactivarlo, para que aquellos
usuarios que no deseen escuchar el sonido de la página puedan
desactivarlo. Para insertar un archivo de audio en un
documento tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.
Videos: Los formatos de vídeo que suelen utilizarse en Internet
son el AVI, el MPEG y el MOV. Para insertar un archivo de
vídeo en un documento tienes que dirigirte al
menú Insertar, Medía, opción Plug-in.
MULTIMEDIA
