Adobe Dreamweaver Cs6_01.docx

Conceptos básicos de Dreamweaver Qué es Dreamweaver Dreamweaver es un software fácil de usar que permite crear páginas web profesionales.

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, trabajar con capas, insertar comportamientos JavaScript, 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.

El Entorno De Trabajo

Las barras

La barra de la aplicación.

La barra la aplicación, si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante. Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

Las pestañas de documento.

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo. La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación. Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.

La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa. La barra de representación de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. En esta nueva versión se han añadido más opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento. 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, como ya veremos. Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes. El inspector de Propiedades

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. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc... Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando. El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite. Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo. Vistas de un documento Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

La vista Diseño

La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

La vista Código 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.

El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.

La vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha 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 La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador. La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador. No obstante, siempre hay que comprobar la página con los principales navegadores del mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador.

La vista Código en vivo Esta vista 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. La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas: Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1. Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta. Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML. Acceder a Dreamweaver Support Center en la web. Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

Configuración de un Sitio Local Un sitio web 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. 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, archivos de tipos específico, 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. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento son las únicas que cambiaremos: Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento: Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no. Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan. Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Abrir un sitio. Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos.

Ver el sitio.

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestro sitio index.html, izquierda.html, prueba.html, percebra.html. Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón

que aparece en la parte superior del panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.