Embed Size (px)
DESCRIPTION
REVISTA
Citation preview
The Dreamweaver
Magazine
Edwards Andrade
Índice
• Que es Dreamweaver ......................................................................... 1
• Utilidades …………...................………………………………….……2-3
• Principales barras de herramientas ……………………………….…..4-5
• Características del Dreamweaver …………………………..……...…….6
• Evolución del Dreamweaver……………..……………………….....…7-8
• Como iniciar Dreamweaver requisitos para instalarlo…………..….......9
• Como abrir y guardar archivos en Dreamweaver………….…….…10-11
• Pantalla inicial de Dreamweaver………………………….. ……….…..12
• Cómo configurar un sitio local paso a paso……………………….…....13
• Las propiedades y formato del texto en Dreamweaver………………….…..14
Que es Dreamweaver
Adobe Dreamweaver : es una aplicación
en programa de estudio (basada en la
forma de estudio de Adobe Flash) que está
destinada a la construcción, diseño y
edición de sitios, vídeos y aplicaciones
Web basados en estándares.
Creado inicialmente por Macromedia
(actualmente producido por Adobe
Systems) es uno de los programas más
utilizados en el sector del diseño y la
programación web por sus funcionalidades,
su integración con otras herramientas
como Adobe Flash y, recientemente, por su
soporte de los estándares del World Wide
Web Consortium
Sus principales competidores son
Microsoft Expresión Web y BlueGriffon
(que es de código abierto) y tiene soporte
tanto para edición de imágenes como para
animación a través de su integración con
otras.
Hasta la versión MX, fue duramente
criticado por su escaso soporte de los
estándares de la web, ya que el código
que generaba era con frecuencia sólo
válido para Internet Explorer y no validaba
como HTML estándar.
(1)
Según su menú sus
utilidades son :
Archivo
contiene los elementos de menú
estándar como Nuevo, Abrir,
Guardar, Guardar como.
También contiene otros comandos
para la visualización o
manipulación del documento actual,
como Vista previa en el navegador
e Imprimir código.
Edición
contiene los elementos de menú
estándar como Cortar, Copiar y
pegar.
También incluye comandos de
selección y búsqueda, como
Seleccionar etiqueta padre, Buscar
y reemplazar, y proporciona acceso
al editor de Métodos abreviados de
teclado y al Editor de la biblioteca
de etiquetas.
Ver
le permite obtener diversas vistas
del documento (como la vista
Diseño y la vista Código) y mostrar
y ocultar diversos tipos de
elementos de página y
herramientas de Dreamweaver
CS3.
(2)
Insertar
ofrece una alternativa a la barra
Insertar para la inserción de
objetos en el documento.
Modificar
le permite cambiar las
propiedades del elemento de
página seleccionado.
A través de este menú, puede
editar los atributos de etiquetas,
cambiar las tablas y elementos de
tablas y realizar diversas
operaciones relacionadas con
elementos de biblioteca y
plantillas.
Texto
le permite aplicar formato al texto
fácilmente.
Comandos
proporciona acceso a diversos
comandos, entre otros, uno para
aplicar formato al código en
función de las preferencias de
formato y otro para crear un
álbum de fotos.
Sitio
proporciona opciones de menú
para crear, abrir y editar sitios,
así como para administrar los
archivos del sitio actual (en
Macintosh).
Ventana
proporciona acceso a todos los
paneles, inspectores y ventanas de
Dreamweaver CS3.
(3)
Principales barras
de herramientas
La barra de herramientas
La barra de herramientas de
Dreamweaver contiene botones
que permiten alternar entre
diferentes vistas del documento
rápidamente, cambiar el título del
documento o previsualizar la
página en el navegador. Los
elementos del menú Opciones
(botón situado en el extremo
derecho de la barra de
herramientas) cambia en función de
la vista que seleccione.
El panel objetos
Este panel contiene botones que
permiten la creación e inserción de
diversos tipos de objetos, como
tablas, vínculos, capas e imágenes.
El pánel contiene siete categorías
de forma predeterminada: Común,
Formularios, Marcos, Head,
Invisibles y Caracteres. También
contiene botones que cambian de
vista: Estándar y Disposición. Cada
uno de estos elementos serán
explicados en temas posteriores.
Para cambiar de categoría dé clic sobre alguna de las pestañas
situadas en la parte superior del pánel.
Si desea insertar un objeto en el documento haga clic en el
correspondiente botón del pánel o arrastre el ícono del botón hasta la
ventana de documento. Dependiendo del objeto, aparecerá un cuadro
de diálogo en el cual se le pedirá que seleccione o inserte el archivo u
objeto deseado.
(4)
Inspector de propiedades
El inspector de propiedades
permite examinar y editar las
propiedades del elemento que esté
seleccionado actualmente, puede
ser un objeto o texto. Es posible
seleccionar los elementos en la
ventana de documento o en el
inspector de código.
La mayoría de los cambios
realizados en las propiedades se
aplicarán de inmediato en la
ventana de documento. (Para
algunas propiedades, los cambios
no se aplican hasta que se hace
clic fuera de los campos de texto de
edición de la propiedad, se
presiona Enter o se presiona Tab
para cambiar a otra propiedad.)
El contenido del inspector de
propiedades varía en función del
elemento seleccionado. Si quiere
obtener información sobre
propiedades concretas, seleccione
un elemento en la
El inspector de propiedades
muestra inicialmente las
propiedades del elemento
seleccionado que se utilizan con
mayor frecuencia; para ver todas
las propiedades haga clic en la
flecha de ampliación situada en la
esquina inferior derecha del
inspector de propiedades, para ver
más propiedades del elemento.
ventana de documento y, a
continuación, haga clic en el icono
Ayuda, situado en la esquina
superior derecha del inspector de
propiedades. (5)
Características del
Dreamweaver
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.
- puede dar el diseño a la página.
- puede ponerle audio y video.
- puede modificar el código.
- puede hacer anclajes.
- puede hacer hipervínculos.
- puede poner tablas.
-puede importar documentos en Word.
- puede hacer mapas e imagen.
- puede hacer capas.
- puede hacer sustituciones e imagen.
#1 Compatibilidad con CMS
integrada
#2 Inspección de CSS
#3 Integración con Adobe BrowserLab
#4 Sugerencias de código de clase personalizada de PHP
(6)
Evolución del
Dreamweaver
Dreamweaver
Historia y evolución
Es un programa para desarrollo de
paginas web. El mismo posee un
entorno visual y una vista código.
Antes pertenecía a Macromedia
ahora pertenece a Adobe
Dreamweaver 1.0 (Lanzado en
Diciembre de 1997; Dreamweaver
1.2 Marzo de 1998) sólo para Mac
OS.
Dreamweaver 2.0 (Lanzado en
Diciembre de 1998)
Dreamweaver 3.0 (Lanzado en
Diciembre de 1999)
Estas versiones mostraron
correcciones y no tuvo mayores
cambios a su primer lanzamiento
Dreamweaver 8 (Lanzado el 13 de
Septiembre de 2005)
se ha creado a partir de las
versiones anteriores, pero se ha
ampliado su funcionalidad en
ámbitos esenciales como XML y
CSS, y se ha agilizado el flujo de
trabajo para que los usuarios
puedan hacer más cosas en menos
tiempo.
es compatible con todas las
principales tecnologías de servidor
como, por ejemplo, ColdFusion,
PHP, ASP, ASP.NET y JSP,
Proveedor Versión
mayor
Versión
menor/nom
bre
alternativo
Fecha de
publicación Notas
Macromed
ia
1.0
1.0 Diciembre de 1997
Primer
lanzamiento,
sólo para Mac
OS.
1.2 Marzo de 1998
Primera
versión para
Windows.
2.0 2.0 Diciembre de 1998
3.0
3.0 Diciembre de 1999
UltraDev 1.0 Junio de 1999
4.0
4.0 Diciembre de 2000
UltraDev 4.0 Diciembre de 2000
6.0 MX 29 de mayo de
2002
7.0 MX 2004 10 de septiembre
de 2003
8.0 8.0 13 de septiembre
de 2005
(7)
Transcripción de Evolución de Dreamweaver
Dreamweaver 4.0 (Lanzado en Diciembre de 2000)
Dreamweaver UltraDev 4.0 (Lanzado en Diciembre de 2000)
Dreamweaver MX [Numero interno de versión: 6.0] (Lanzado
en Mayo de 2002)
combinaba las mejores funciones de desarrollo de UltraDev y
las principales funciones de edición del código de HomeSite
en el entorno básico
tuvo una extraordinaria acogida y fue la herramienta de
desarrollo Web más galardonada de la historia, e incluso más
que todas las versiones anteriores de Dreamweaver.
Dreamweaver MX 2004 [Numero interno de versión: 7.0]
(Lanzado el 10 de Septiembre en 2003)
llevó el diseño de sitios Web a una nueva dimensión al
incorporar una revolucionaria función de soporte para el
diseño y el desarrollo basados en CSS. Al incorporar la
tecnología CSS al flujo de trabajo de todos los usuarios,
Dreamweaver UltraDev 1.0
(Lanzado en Junio de 2000)
ofrecía una serie de herramientas para crear aplicaciones
Web en ASP, JSP y ColdFusion
Adobe
9.0 CS3 16 de abril de 2007
Sustituye a Adobe
GoLive en la
serie Creative
Suite
10.0 CS4 23 de septiembre
de 2008
11.0 CS5 12 de abril de 2010
11.5 CS5.5 12 de Abril de
2011
Proveedor Versión
mayor
Versión
menor/nombre
alternativo
Fecha de
publicación Notas
(8)
Como iniciar Dreamweaver
requisitos para instalarlo
Requisitos mínimos
En primer lugar se debe comprobar
si esta versión se puede instalar
sobre el sistema operativo del
ordenador.
Dreamweaver 8 es compatible con
Windows® 2000, Windows XP y
Macintosh Mac OS® X 10.3 y 10.4
No obstante, a partir de esta
versión, Dreamweaver ya no es
compatible con Windows 98,
Windows 2000 Server, Windows
2003 Server ni con Macintosh OS
10.2.x o versiones anteriores.
Se puede iniciar :la aplicación
de diferentes formas.
Hay que ir seleccionando; en
primer lugar se pulsa botón Inicio,
figura 1.1, después se elige la
opción Macromedia y finalmente se
debe pinchar sobre el Icono
Macromedia Dreamweaver 8.
Figura 1.1. Ejecución de
Dreamweaver
Durante la instalación se daba la
opción de instalar un icono en el
Escritorio.
En caso de haber elegido esta
opción, se podrá iniciar pulsando
dos veces sobre dicho icono, figura
1.2.
De igual forma se da la opción de
instalar un icono en el menú de
inicio rápido, por lo que en este
caso también se podrá iniciar
pinchando una vez sobre dicho
icono, figura 1.3.
Figura 1.3. Arranque de
Dreamweaver desde el menú
de inicio rápido ) (9)
Como abrir y guardar
archivos en Dreamweaver
En el menú que se desplegará, buscaremos
la opción Nuevo y pincharemos en ella con
el botón izquierdo del ratón.
Se nos abrirá una ventana como la que vemos en la imagen
inferior.
En ella podremos elegir entre diversos tipos de documentos, el
que deseemos crear.
Nosotros pulsaremos en la pestaña General y en el panel de la
izquierda llamado categoría elegiremos “Página básica”.
El panel adyacente cambiará de manera contextual dependiendo
que opción hayamos elegido en el panel de categorías.
Como por ahora hemos elegido página básica.
Este será el título del panel y entre las distintas opciones
pulsaremos sobre HTML.
Abrir documento
(10)
Vemos que hay una gran variedad de
documentos que podemos crear desde aquí.
Más adelante veremos algunos de ellos, a
medida que los necesitemos.
Guardar un Documento
Una vez que hemos aprendido a crear
documentos nuevos, cuando hayamos
terminado de trabajar con ellos,
necesitaremos aprender a guardarlos para
poder recuperarlos en el futuro.
Para ello desplegaremos de nuevo el menú
archivo y buscaremos esta vez la opción
guardar.
Al pulsar sobre la opción guardar se nos
abrirá una ventana titulada “Guardar como”.
En ella vemos varias zonas importantes.
En la zona superior podemos elegir la carpeta
donde queramos guardarlo, es donde pone
“Guardar en”.
Y en la zona inferior
introduciremos el
nombre con el que
deseamos conservar el
documento.
Para finalizar sólo
tenemos que pulsar el
botón guardar en la
ventana activa.
En esta lección hemos
aprendido otra manera
de crear documentos
nuevos con
dreamweaver y también
hemos aprendido a
guardarlos
(11)
Pantalla inicial de Dreamweaver
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.
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.
Cómo configurar un sitio
local paso a paso
Un sitio web es un conjunto de archivos y carpetas, relacionados
entre sí, con un diseño similar o un objetivo común. Es necesario
diseñar y planificar el sitio web antes de crear las páginas que va a
contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el
disco local.
Los documentos HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las imágenes, las animaciones,
las hojas de estilo, etc., se deben crear nuevas carpetas dentro de
ésta, con el objetivo de tener una mejor organización de los archivos
a la hora de trabajar.
Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el
denominado sitio remoto, lo que equivale a publicar el sitio, de modo
que la gente podrá verlo en Internet.
La organización de los archivos en un sitio permite administrar y
compartir archivos, mantener los vínculos de forma automática,
utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre
index.htm o index.html, ya que los navegadores buscan una página
con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica
http://www.aulaclic.com en el navegador, éste intentaría cargar la
página http://www.aulaclic.com/index.htm, por lo que se produciría un
error en el caso de que no existiera ninguna página con el nombre
index.htm.
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
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 de Propiedades 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
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.
Formato:
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.
que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
The Dewamweaver Magazine
