¿ Que te parece dreamweaver ?

PARA MI ES MUY BUENO PORQUE ES UN SOFTWARE FÁCIL DE USAR QUE PERMITE CREAR PÁGINAS WEB PROFESIONALES, Y AGREGAR DISEÑO Y FUNCIONALIDAD A LAS PAGINA .

EL ENTORNO DE DREAMWEAVER CS6

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.

En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en azul del 1 al 9.

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.

 Las barras

1.- La barra de la aplicación.

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. 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 yuna 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.

2.- 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.

3.- 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 tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y al final hay 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, vistas previa en multipantalla, 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. Hay varias 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 (ventanas) 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 fijas.

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. A continuación vamos a ver el inspector de Propiedades y más adelante veremos el panel Insertar.

4.- 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, como sucede en la imagen que puedes ver, mostrará su ubicación, dimensiones, peso, clase, etc...

En otros elementos, como párrafos y estilos, 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.

 

5.- Área de paneles.

En la parte derecha de la pantalla tenemos el área o pila de paneles.

Inicialmente, el área de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos que queramos. Para quitar un elemento del área de paneles basta hacer clic con el botón derecho sobre su nombre para que aparezca un menú con la opción Cerrar. Para añadir un elemento al área de paneles hay que ir al menú Ventana y hacer clic en el elemento que queramos añadir, si el elemento se abre en una ventana flotante, bastará arrastrarlo al área de paneles.

 

6.- Paneles.

Una vez tenemos el áea de paneles con los elementos que más nos interesen, podemos abrirlos o desplegarlos de tres formas.

1. Abrir el panel dentro del área de paneles. Para ello primero hay que expandir el área de paneles pulsando el botón de la parte superior derecha   , a continuación, basta hacer clic en cada panel para que se abra dentro del área de paneles. Para cerrar el panel hacer doble clic.

Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del área de paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaños colocando el cursor en el borde inferior y arrastrándolo.

2. Abrir el panel al lado del área de paneles. Para ello hay que partir del área de paneles sin expandir, y al pulsar en un panel, este se abrirá pegado al lado, como vemos en la siguiente figura.

3. Abrir como panel flotante. Para ello hay que pinchar en el título del panel y arrastar el panel fuera del área de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al

hacer doble clic en el título del panel, este se contrae pero sigue flotando en la misma posición. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y epandido.

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

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ú (imagen anterior), como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)

.

Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado  .

7. Línea inferior de pestañas.

En al parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar, Validación , ... )

 

Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su título.

Estas pestañas se pueden configurar de forma similar a como acabamos de ver con el área de paneles. Es decir, se pueden añadir y quitar, convertir en flotantes, etc.

Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

8.- 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.

9.- 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. También es conveniente comprobar la página con los distintos tamaños de pantalla, teléfono móvil, tablet y PC.

 

- 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 y refleja los cambios dinámicamente al interactuar con la página. Si además pulsamos

el botón  podremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un párrafo podemos ver sus márgenes, como se aprecia en la siguiente imagen.

 

2.5. La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda en línea de Adobe Community Help donde puedes buscar por temas o por búsqueda de palabras clave, .

Ayuda de Business Catalyst que es un sistema de alojamiento de páginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes.

Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.

Referencia abre un panel en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder al Centro de soporte de Dreamweaver en la web.

Dreamweaver Exchange es un sistema para compartir extensiones.

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.