TUTORIAL
Dreamweaver
Qué es Dreamweaver?
Adobe Dreamweaver es la herramienta de diseño más avanzada enfocada a la construcción y edición de sitios y páginas web (basados en estándares), creado inicialmente por Macromedia (actualmente producido por Adobe Systems).
Características
: Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar. : Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por dónde comenzar
Ventajas Cumple perfectamente el objetivo de diseñar páginas de carácter profesional. Que lo puede utilizar cualquier usuario para crear webs sin ser profesional, aunque los conocimientos básicos son fundamentales. Una de sus características más destacadas es su arquitectura extensible (permite el uso de Extensiones, que son pequeños programas que cualquier usuario puede escribir, descargar e instalar, ofreciendo funcionalidades añadidas a la aplicación). Los archivos del programa son rutinas de Javascript y hace que sea un programa muy fluido, y que otros editores hagan extensiones para su programa y lo pongan a su gusto.
Adobe Dreamweaver está disponible para: MAC, WINDOWS y también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API’s de Windows, tipo Wine. Adobe Dreamweaver tiene el apoyo de un gran grupo de desarrolladores que hacen que existan extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web.
Desventajas Aunque muchos usuarios afirmen en los foros de DW que no tiene desventajas, tampoco se puede decir que Dreamweaver lo puede utilizar cualquiera, al ser tan avanzado el único inconveniente es que puede resultar difícil su manejo para usuarios menos experimentados en el diseño de páginas web, ya que quien lo utiliza tiene que tener un conocimiento básico de este programa. Bien entonces una vez que ya hemos analizado la definición, su características y sus ventajas ya tenemos una idea de lo que se trata Adobe Dreamweaver qué es lo que nos ofrece y en qué nos puede servir. Pues quizás los estudiantes no le veamos la importancia de utilizar este programa, a lo mejor no nos sirva ahora, pero cuando ya nos involucremos en el campo laboral ya sabremos cómo se utilizan los programas de Adobe, además con esta práctica ya tenemos una idea de lo que será nuestro website, ese es el objetivo de estudiar ese diseñador web
EVOLUCION Dreamweaver de Macromedia se ha convertido en la solución estándar de la industria para el desarrollo profesional de la Web y, actualmente, más de 3,2 millones de profesionales utilizan Dreamweaver para desarrollar sus sitios Web. Con su tecnología Roundtrip HTML, que protege la calidad del código cuando el usuario alterna entre la vista del código y la del diseño, Dreamweaver es la solución pionera para el desarrollo profesional de sitios visuales en Internet. En el año 2000, en respuesta a la creciente popularidad de las tecnologías de servidor entre los desarrolladores de la Web, Macromedia presentó Dreamweaver UltraDev, que, además de la funcionalidad de Dreamweaver, ofrecía una serie de herramientas para crear aplicaciones Web en ASP, JSP y ColdFusion.
Pantalla Inicial
HERRAMIENTAS El primer elemento que destaca en el entorno de trabajo de Dreamweaver60 es la ventana de bienvenida, que ofrece sugerencias para la configuración del espacio de trabajo para distintos fines e información de nuevas funciones para aquellas personas que hayan utilizado versiones anteriores de Dreamweaver.
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. 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.
HERRAMIENTAS 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.
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.
HERRAMIENTAS
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.
En la sección 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.
HERRAMIENTAS
La barra de herramientas del documento, que 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.
HERRAMIENTAS
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.
HERRAMIENTAS 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.
En la parte derecha de la ventana de diseño, se encuentra el grupo de paneles, pudiendo activarlo o desactivarlo desde el menú principal en la opción de ver y seleccionando ocultar paneles del menú desplegable, también podemos hacer la misma acción en la opción ventana del menú principal, o bien, una tercera forma es empleando la tecla de atajo F4. 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. Dicho panel tiene una verdadera importancia cuando el número de carpetas y archivos crece considerablemente y se dificulta su administración manualmente, por lo tanto, 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. Este software de diseño de páginas web puede administrar un sitio complejo constituido por una gran variedad de carpetas y archivos, y subir al servidor un archivo que se encuentre en proceso de edición en la pantalla, en tan sólo unos segundos, sin la necesidad de detener el servicio web o desconectar a los usuarios. Al momento de subir el archivo al servidor se muestran sus cambios o actualizaciones al instante.
Configuración
Configuración rápida de un sitio web en Dreamweaver Configurar un sitio web en Dreamweaver es muy sencillo, tan sólo es necesario especificar las propiedades del sitio local y los parámetros de conexión al sitio remoto utilizando un acceso FTP para empezar a publicar archivos en el servidor.
Definir una carpeta local Configurar un sitio web en Dreamweaver es muy sencillo, tan sólo es necesario especificar las propiedades del sitio local y los parámetros de conexión al sitio remoto (en este caso utilizando un acceso FTP) para empezar a publicar archivos en el servidor. Inicie Dreamweaver y en el menú superior seleccione Sitio / Administrar sitios.... Aparecerá una nueva ventana, se trata del Administrador de Sitios, haga clic en Nuevo... / Sitio para abrir la ventana de configuración del nuevo sitio.
Definir una carpeta remota
Publicar archivos locales
Texto y Propiedades
Características del texto
Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos. •Formato: •Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.
Texto y Propiedades
•Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo. •Estilo: •El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva. •Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso. •Lista: •Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado. •Sangría: •Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto. •Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
UTILIDADES
AUTOR: Angel Lopez