TUTORIAL
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).
Dreamweaver
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
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.
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.
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
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.
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.
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.
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.
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.
HERRAMIENTAS
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.
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 local
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.
•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.
•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.
Texto y Propiedades
UTILIDADES
AUTOR: Angel Lopez