Adobe dreamweaver Tutorial

18
TUTORIAL

description

Definiciones, característica, evolución, herramientas...

Transcript of Adobe dreamweaver Tutorial

Page 1: Adobe dreamweaver Tutorial

TUTORIAL

Page 2: Adobe dreamweaver 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

Page 3: Adobe dreamweaver Tutorial

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

Page 4: Adobe dreamweaver Tutorial

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.

Page 5: Adobe dreamweaver Tutorial

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

Page 6: Adobe dreamweaver Tutorial

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.

Page 7: Adobe dreamweaver Tutorial

Pantalla Inicial

Page 8: Adobe dreamweaver Tutorial

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.

Page 9: Adobe dreamweaver Tutorial

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.

Page 10: Adobe dreamweaver Tutorial

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.

Page 11: Adobe dreamweaver Tutorial

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.

Page 12: Adobe dreamweaver Tutorial

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.

Page 13: Adobe dreamweaver Tutorial

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

Page 14: Adobe dreamweaver Tutorial

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

Page 15: Adobe dreamweaver Tutorial

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.

Page 16: Adobe dreamweaver Tutorial

•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

Page 17: Adobe dreamweaver Tutorial

UTILIDADES

Page 18: Adobe dreamweaver Tutorial

AUTOR: Angel Lopez