1. Arrancar y cerrar Dreamweaver CS4
Veamos las dos formas básicas de arrancar Dreamweaver CS4.
· Desde el botón Inicio situado, normalmente,
en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic
sobre el botón Inicio, se despliega un
menú. Al colocar el cursor sobre Todos los
programas aparece otra lista con los programas que hay instalados
en tu ordenador, buscar Adobe Dreamweaver CS4 y
haz clic sobre él para arrancar el programa.
· Desde el icono de Dreamweaver CS4 del
Escritorio.
Para cerrar Dreamweaver
CS4, podemos utilizar cualquiera de las siguientes operaciones:
· Hacer
clic en el botón cerrar, en la esquina superior derecha, como en cualquier
ventana de Windows.
· Pulsar
la combinación de teclas Alt + F4.
· Hacer
clic sobre el menú Archivo y
elegir la opción Salir.
2. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera
de las siguientes operaciones:
· Hacer clic en el botón abrir de la barra
de herramientas estándar (si está visible).
· Pulsar la combinación de teclas Ctrl + O.
· Hacer clic sobre el menú Archivo y elegir la opción Abrir.
· Hacer doble clic sobre el archivo en la ventana del sitio.
· Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS4.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:
· Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible)
· Pulsar la combinación de teclas Ctrl + O.
· Hacer clic sobre el menú Archivo y elegir la opción Abrir.
· Hacer doble clic sobre el archivo en la ventana del sitio.
· Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS4.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:
· Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible)
· Pulsar la combinación de teclas Ctrl + N.
· Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
· Hacer clic en el botón Guardar de la barra de herramientas estándar.
· Pulsar la combinación de teclas Ctrl + S.
· Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
· Hacer clic en el botón Guardar todo de la barra de herramientas estándar.
· Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento.
· Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
· Hacer clic en el botón Guardar de la barra de herramientas estándar.
· Pulsar la combinación de teclas Ctrl + S.
· Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
· Hacer clic en el botón Guardar todo de la barra de herramientas estándar.
· Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento.
3. Las barras
La barra de
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),
variosbotones 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, o acceder a otras
acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
Dreamweaver CS4 añade una novedad. 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 (un programa incorporado), Guardar, Guardar
todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.
La barra de
herramientas de documento.
La barra de herramientas de documento 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.
Como veremos al personalizar el entorno, algunos
paneles, como Insertar nos permiten colocarlo como otra barra de
herramientas.
4. 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.
5. 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 superior muestra el código fuente, y la
inferior 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 otra de las novedades que trae
Dreamweaver CS4. 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.
No hay comentarios:
Publicar un comentario