TUTORIAL Y MANUAL DREAMWEVER CS6

TUTORIAL DREAMWEAVER CS6

ADOBE DREAMWEAVER CS6

   ¿Qué es Dreamweaver cs6?

Dreamweaver CS6 es un software o  programa de la empresa Adobe fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS6 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

     ¿Para qué sirve Dreamweaver cs6?

 El Dreamweaver, sirve para diseño y programación web, básicamente para hacer o modificar páginas de Internet. Para utilizarlo se necesita al menos algún conocimiento de lenguaje Html o PHP, estos son códigos o lenguajes que se utilizan para desarrollar sitios web.

Elementos que presenta Dreamweaver cs6

1)Botón de menú control:

Comenzando desde la esquina superior derecha, se encuentra el botón de menú control , el cual nos permite controlar la ventana de la aplicación de dreamweaver CS6, por ejemplo, se puede minimizar, maximizar, restaurar e incluso cerrar la aplicación.

2)Barra de herramientas de acceso rápido :

La versión de dreamweaver CS6 posee una barra de herramientas de acceso rápido para realizar las siguientes funciones: cambiarse a los diferentes tipos de vista, es decir, trabajar en la vista diseño o bien en la vista de código, además puede manipular otras extensiones o aplicaciones a dreamweaver y también se administran los sitios en su servidor.

3)Perfiles de usuario :

La opción perfiles de usuario tiene como propósito configurar el espacio de trabajo en el software de diseño como lo es dreamweaver CS6, es una parte fundamental, debido a que existen tres grandes grupos de usuarios de esta aplicación, entre los cuales podemos mencionar: desarrolladores de aplicación  programadores y los enfocados al diseño de páginas web. Cada uno de ellos emplea diferentes herramientas para la realización de su labor dentro del amplio campo de internet, por lo tanto, el espacio de trabajo de la aplicación se adapta a cada perfil de usuario. 4)Búsqueda:

La opción de búsqueda permite localizar información que requerimos para la realización de una tarea en específico, por ejemplo: buscar todo lo relacionado con las hojas de estilo en cascada, basta con teclearlo en el cuadro de texto y oprimir la tecla Enter, para que la computadora se conecte a internet y traiga información del tema en cuestión.

5)Menú principal :

A continuación se presenta el menú principal, que muestra las opciones desplegables clásicas para el trabajo, los cuales aparecen por lo general en cualquier tipo de ventana, cabe mencionar que el menú principal posee todas las opciones que necesitamos en la aplicación.

6)Identificador de documento:

El identificador del documento o nombre de archivo que se esta trabajando en el momento es muy valioso porque nos permite ver su nombre completo, además de indicarme si sufrió modificaciones y todavía no las guardamos, porque al final del nombre tiene un asterisco, también es muy relevante la indicación de la trayectoria completa de la ubicación del archivo dentro de la computadora, como se muestra en la imagen.

7)Panel de insertar : En la parte derecha de la ventana de dreamweaver CS6 se encuentra el panel de insertar, que contiene los botones más comunes para la inserción de diversos tipos de "objetos", como hipervínculos, imágenes, tablas, elementos multimedia y plantillas en un documento. Cada objeto es un fragmento de código html que permite establecer diversos atributos al insertarlos, por ejemplo, se puede insertar una imagen haciendo clic en el icono imagen  de la barra de insertar. Alternativamente, pueden poner objetos utilizando la opción de insertar, localizada en el menú principal. Este mismo panel se subdivide en otras fichas como son: común, diseño, formularios, datos, spry, texto y favoritos, cada una de estas fichas cuenta con distintos iconos enfocados a una función en especial, que permite mejorar el diseño del contenido.

8)La barra de herramientas del documento:

Contiene iconos y menús emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista diseño y vista código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador, activar la regla, cuadrícula y administrar los archivos creados, como puede ser subirlo al servidor de internet y publicarlo a los clientes.

La vista en vivo se aplica por ejemplo, cuando se trabaja con bases de datos y se muestra la información a través de una página web en tiempo real y se puede probar la programación de la página asp o bien la conexión de a la base de datos, como puede ser access o sql.

9)Área de trabajo :

Enseguida de la barra de herramientas del documento se observa la ventana o área de trabajo, que muestra el documento actual que se está creando y editando, como se muestra en la siguiente imagen.

10)Selector de etiquetas :

Inmediatamente debajo de la ventana o área de trabajo, se encuentra el selector de etiquetas en la parte inferior izquierda, que muestra la jerarquía de etiquetas que rodean a la selección actual en la vista de diseño, por ejemplo, si estamos utilizando una tabla, veremos varias etiquetas relacionadas con este tema, es decir, aparece la etiqueta <table> correspondiente a la tabla, la etiqueta <tr> que forma el renglón de la tabla y la etiqueta <td> identificando la columna de la tabla en donde estamos ubicados, el selector de etiquetas permite ubicar perfectamente a cada elemento dando clic en su etiqueta o parámetro correspondiente.

11)Panel de archivos :

En la parte derecha de la ventana de diseño, se encuentra el grupo de paneles, podiendo activarlo o desactivarlo desde el menú principal en la opción de ver y seleccionando ocultar paneles del menú desplegable.Normalmente el panel que se encuentra abierto corresponde al de archivos que permite administrar el sitio web o portal, mostrando los archivos y carpetas que lo conforman. Utilizamos este panel para crear un nuevo sitio, crear una nueva carpeta y archivo. Cuando se le cambia de nombre a las carpetas y archivos, automáticamente dreamweaver realizará las actualizaciones en las ligas que existan en el sitio con esos archivos. Otra de las acciones más comúnmente empleadas es para actualizar el sitio cuando hemos realizado algunos cambios y no se reflejan automáticamente y es necesario refrescar su contenido.

12)Panel de propiedades :

En el panel de propiedades existen dos modos de establecer las características de los elementos que componen a una página web, es decir, puedo trabajar con código html o bien crear reglas para definir las hojas de estilo en cascada (CSS). Al momento de dar un clic en el botón de programación HTML, las propiedades que podemos aplicar a un objeto de la página son unas muy particulares y al momento de aplicarlas se incrusta la etiqueta html de la propiedad seleccionada.

12.1)Programación HTML:

En la parte inferior de la ventana de dreamweaver CS6 se encuentra el panel de propiedades, que permite ver y cambiar diversas propiedades del objeto o texto seleccionado, cada tipo de objeto tiene distintas propiedades. Dependiendo del objeto seleccionado son las propiedades para aplicar, además el panel de propiedades se puede expandir o contraer mediante un clic en el icono ubicado en la esquina inferior derecha.

12.2)Hojas de estilo en cascada (CSS)

Dreamweaver CS6, en su panel de propiedades tiene un botón para aplicar las características de los objetos que componen una página web, a través de las hojas de estilo en cascada (CSS, Cascade Style Sheet), con ello, definimos reglas para aplicar las propiedades de formato a los elementos de una archivo html, mediante código especial, posteriormente se invoca a la clase definida para que el objeto adquiera esas propiedades. Esto resulta relativamente sencillo mediante la utilización del panel de propiedades en la modalidad de hojas de estilo en cascada.

Ejemplo práctico

PASO 1: Abrimos  Dreamweaver CS6, clic en HTML y nos enviara  a la pantalla de documento:

PASO 2  : Si al ingresar  encontramos con algunas direcciones, lo quitamos para que no haya alguna confusión:

PASO 3 :Comenzamos a trabajar  con tratar de imprimir “HOLA AMIGOS COMO ESTAN ” , como  título  de página  pondremos  PRIMERA PAGINA utilizando  los códigos como se muestra a continuación :

Para que nuestro mensaje salga centrada, tamaño de letra y en negrita solo se empleó las siguientes etiquetas:

<center><h1><b> HOLA AMIGOS COMO ESTAN </b></h1></center>

PASO 4 : Luego de haber digitado  los códigos lo guardamos con el nombre index.html, para ello hacemos clic en Archivo/Guardar como /Guardar, y se guardara la página:

PASO 5: Para ver nuestra página en el navegador solo hacemos clic a la imagen del planeta y elegimos en que navegador verlo:

                 

  

PASO 6: Podemos darle una Vista previa en chrome y el resultado será como se muestra en la imagen:

Como se puede apreciar  como título de página esta MI PRIMMER PAGINA y como contenido  se observa  HOLA AMIGOS COMO ESTAN, entonces es así como  Dreammweaver  va permitirnos  desarrollar poco a poco nuestra página web, ya teniendo en cuenta sobre más códigos se podrá digitarlos para que nuestra página sea buena.