The Dewamweaver 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.
(2)
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.
Insertar ofrece una alternativa a la barra Insertar para la inserción de objetos en el documento.
Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver CS3.
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).
(3)
Principales barras de herramientas La barra de herramientas
El panel objetos
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.
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 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.
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 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
Versión Proveedor mayor
Versión menor/nom Fecha de publicación bre alternativo
Notas
1.0
Primer lanzamiento, Diciembre de 1997 sólo para Mac OS.
1.2
Marzo de 1998
2.0
Diciembre de 1998
3.0
Diciembre de 1999
1.0
Macromed 2.0 ia
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, (7) PHP, ASP, ASP.NET y JSP,
3.0 UltraDev 1.0 Junio de 1999 4.0
Diciembre de 2000
4.0 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
Primera versión para Windows.
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 Proveedor
Versión mayor
Versión menor/nombre alternativo
Fecha de publicación
Notas Sustituye a Adobe
9.0
CS3
16 de abril de 2007
GoLive en la serie Creative
Suite
Adobe 10.0
CS4
11.0
CS5
11.5
CS5.5
(8)
23 de septiembre de 2008
12 de abril de 2010 12 de Abril de 2011
Como iniciar Dreamweaver requisitos para instalarlo 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 primer lugar se debe comprobar En caso de haber elegido esta si esta versión se puede instalar opción, se podrá iniciar pulsando sobre el sistema operativo del dos veces sobre dicho icono, figura ordenador. 1.2.
Requisitos mínimos
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.
(9)
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
Como abrir y guardar archivos en Dreamweaver Abrir documento
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.
(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”.
(11)
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
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.
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. 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
que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
Formato:
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.
The Dewamweaver Magazine