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 y actividades 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.
ELEMENTOS BÁSICOS DE DREAMWEAVER: 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- MULTIMEDIA 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.
%2B20.18.19.png)
%2B15.32.58.png)
%2B20.44.38.png)
%2B20.42.20.png)
%2B18.48.24.png)
%2B20.26.05.png)
%2B20.23.42.png)
%2B20.27.37.png)