Revista DREAMWEAVER
29
description
Â
Transcript of Revista DREAMWEAVER
EDITORIAL
Es un software de edición en
forma de un estudio (basado en
la forma de Adobe Flash) su
propósito es construir, desarrollar,
diseñar y editar sitios, vídeos y
aplicaciones web. Inicialmente
fue creado por Macromedia pero
actualmente es desarrollado por
Adobe Systems. Adobe
Dreamweaver se ha convertido
en el programa más utilizado para
el diseño y la programación web,
esto gracias a las funciones que
posee, su fácil integración a otros
programas como Adobe Flash y
recientemente por su soporte
para estándares del World Wide
Web Consortium...
INDICE
DEFINICIÓN……………………….….…..01
MENÚ……………………………..….…....02
VENTAJAS……………………...…………03
ENTORNO DE TRABAJO……….….……04
PRINCIPALES BARRAS DE
HERRAMIENTAS…………….……..…….05
CONTENIDO
Definición
Dreamweaver es la herramienta de
diseño de páginas web más
avanzada, tal como se ha afirmado
en muchos medios. Aunque sea un
experto programador de HTML el
usuario que lo maneje, siempre se
encontrarán en este programa
razones para utilizarlo, sobretodo en
lo que a productividad se refiere.
Cumple perfectamente el objetivo de
diseñar páginas con aspecto
profesional, y soporta gran cantidad
de tecnologías, además muy fáciles
de usar:
Hojas de estilo y capas
Javascript para crear efectos e
interactividades
Inserción de archivos multimedia..
Menú
.
MENÚ
A continuación se describirá los
elementos más importantes del
Menú
De Adobe Dreamweaver CS3: El menú
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. El menú
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. El menú
Menú
.
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áginay herramientas
de Dreamweaver CS3. El menú
Insertar
Ofrece una alternativa a la barra
Insertar para la inserción de
objetos en el documento. El menú
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. El menú
Menú
.
Texto
Le permite aplicar formato al
texto fácilmente. El menú
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. El menú
Sitio
Proporciona opciones de menú
para crear, abrir y editar sitios,
así como para administrar
los archivos del sitio actual
(en Macintosh). El menú
Ventana
Proporciona acceso a todos
los paneles, inspectores
y ventanas de Dreamweaver
CS3.
.
Ventajas ·
La gran ventaja de este editor sobre otros es su gran
poder de ampliación y personalización del mismo,
puesto que en este programa, sus rutinas (como la de
insertar un hipervínculo, una imagen o añadir un
comportamiento) están hechas en Javascript-C, lo que le
ofrece una gran flexibilidad en estas materias.
· Como editor WYSIWYG que es, Dreamweaver
permite ocultar el código HTML de cara al usuario,
haciendo posible que alguien no entendido pueda crear
páginas y sitios web fácilmente sin necesidad de escribir
código.
· Un aspecto de alta consideración de Dreamweaver
es su funcionalidad con extensiones. Es decir, permite el
uso de "Extensiones". Las extensiones, tal y como se
conocen, son pequeños programas, que cualquier
desarrollador web puede escribir (normalmente en HTML
y Javascript) y que cualquiera puede descargar e
instalar, ofreciendo así funcionalidades añadidas a la
aplicación.
.
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web. La pantalla inicial 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.
El entorno de Dreamweaver CS6 (I)
.
El entorno de Dreamweaver CS6 (I)
En el resto de esta unidad vamos a ir describiendo los puntos más
importantes señalados en esta imagen por los números en azul del 1 al 9.
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.
.
El entorno de Dreamweaver CS6 (II)
1.- La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de
Dreamweaver. Si tenemos la ventana maximizada veremos
todos los elementos de la barra ocupando una sola línea, si
no, ocuparán dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la
imagen, en la parte inferior), varios botones propios de la
aplicación, el conmutador de espacio de trabajo y una caja de
búsquedas para obtener ayuda on line.
Los botones propios de la aplicación, que aparecen junto al
icono, nos permiten (de derecha a izquierda) cambiar entre la
vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.
Las barras
.
El entorno de Dreamweaver CS6 (II)
Las barras
Más hacia la derecha observamos el conmutador del
espacio de trabajo, como un desplegable. Un espacio de
trabajo es la configuración del entorno (paneles visibles
y su disposición) que podemos guardar y cargar. Lo
veremos más adelante.
Los menús, están agrupados en categorías.
Al hacer clic en Insertar, por ejemplo, veremos las
operaciones relacionadas con los diferentes elementos
que se pueden insertar en Dreamweaver. Todas las
opciones de Dreamweaver son accesibles a través de los
menús, aunque en ocasiones nos envíen a los paneles.
.
El entorno de Dreamweaver CS6 (II)
Las pestañas del documento
Cada archivo que tengamos abierto, mostrará una
pestaña con su nombre, lo que nos permitirá cambiar
de uno a otro fácilmente. Si junto al nombre aparece un
*, indica que ese archivo tiene cambios sin guardar.
Podemos cerrar cada documento clicando en el aspa de
la derecha, o acceder a otras acciones haciendo clic
con el botón derecho, como Cerrar otros archivos.
Debajo de las pestañas encontramos los archivos a que
utiliza nuestra página, como la hoja de estilos, archivos
JavaScript, etc... pudiendo acceder a ellos con un clic.
Esto nos ahorrará bastante tiempo.
.
El entorno de Dreamweaver CS6 (II)
La barra de estado
Esta barra la encontramos debajo de la ventana de documento, y
nos da información sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve
para seleccionar etiquetas completas. Siguiendo hacia la derecha
tenemos las herramientas de Selección, Mano (para desplazarse) y
Zoom. Más a la derecha encontramos tres iconos para ver la
página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y
al final hay otros datos como el tamaño de la ventana, el tamaño
de la página o su codificación
Hasta aquí las barras que siempre veremos en la aplicación. A
parte, existen otras que podemos ver u ocultar desde el
menú Ver → Barras de herramientas
.
El entorno de Dreamweaver CS6 (II)
La barra de herramientas estándar
La barra de herramientas estándar contiene iconos para
realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo
archivo, Abrir, explorar con Adobe Bridge, Guardar,
Guardar todo, Imprimir el código fuente, Cortar, Copiar,
Pegar, Deshacer y Rehacer. Esta barra puede ser muy
útil, pero en realidad casi todo el mundo usa esos
comandos directamente con el teclado (Ctrl + G para
guardar, Ctrl + C para copiar, etc.)
.
El entorno de Dreamweaver CS6 (II)
La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las
distintas vistas de edición y la vista en vivo, vistas
previa en multipantalla, acceder cómodamente al título
de la página, o realizar las distintas opciones de
validación que nos ofrece el programa.
La barra de representación de estilos.
Esta barra, menos utilizada, nos permite ver la
apariencia de nuestra web en distintos dispositivos, si
estamos utilizando hojas distintas que dependan del
eso. Hay varias opciones, como las de ver los estilos
que dependen de pseudo clases activas, como cuando
el cursor está sobre un elemento
.
El entorno de Dreamweaver CS6 (III)
La barra de navegación con navegador.
Esta barra nos permite usar Dreamweaver como un
navegador web y navegar por las páginas de nuestro
sitio, aunque sólo tiene sentido con la Vista en vivo,
como ya veremos.
Como también veremos al personalizar el entorno,
algunos paneles, como Insertar nos permiten
colocarlo como otra barra de herramientas
Dreamweaver utiliza ventanas flotantes similares a las
barras de herramientas, que se conocen como paneles
(ventanas) o inspectores. La diferencia entre panel e
inspector es que, en general, la apariencia y opciones
de un inspector cambian dependiendo del objeto
seleccionado, mientras que el panel nos da acceso a
opciones generales fijas.
A través de la opción Ventana, de la barra de menús,
es posible mostrar u ocultar cada uno de los paneles o
inspectores. A continuación vamos a ver el inspector
de Propiedades y más adelante veremos el panel
Insertar.
.
El entorno de Dreamweaver CS6 (III)
El inspector de Propiedades
El inspector de Propiedades muestra las opciones
propias del objeto o texto seleccionado,
permitiéndonos editarlas, por lo que se convierte
en uno de los elementos más utilizados en
Dreamweaver. Por ejemplo, cuando el elemento
seleccionado sea una imagen, como sucede en la
imagen que puedes ver, mostrará su ubicación,
dimensiones, peso, clase, etc...
En otros elementos, como párrafos y estilos, este
panel puede mostrar dos tipos de propiedades,
HTML y CSS, que podemos aplicar a los diferentes
elementos de la página Web que estemos
diseñando.
.
El entorno de Dreamweaver CS6 (III)
Área de paneles En la parte derecha de la pantalla tenemos el área o pila
de paneles.
Inicialmente, el área de paneles contiene unos
determinados elementos, pero podemos quitar y
poner los elementos que queramos. Para quitar un
elemento del área de paneles basta hacer clic con el
botón derecho sobre su nombre para que aparezca un
menú con la opción Cerrar. Para añadir un elemento al
área de paneles hay que ir al menú Ventana y hacer clic
en el elemento que queramos añadir, si el elemento se
abre en una ventana flotante, bastará arrastrarlo al área
de paneles.
.
El entorno de Dreamweaver CS6 (III)
Paneles
Una vez tenemos el área de paneles con los
elementos que más nos interesen, podemos abrirlos
o desplegarlos de tres formas.
1. Abrir el panel dentro del área de paneles. Para ello
primero hay que expandir el área de paneles pulsando
el botón de la parte superior derecha , a
continuación, basta hacer clic en cada panel para que
se abra dentro del área de paneles. Para cerrar el
panel hacer doble clic.
Por ejemplo, en la siguiente imagen vemos el
panel Archivos abierto dentro del área de paneles. Se
pueden abrir varios paneles a la vez y ajustar sus
tamaños colocando el cursor en el borde inferior y
arrastrándolo
.
El entorno de Dreamweaver CS6 (III)
2. Abrir el panel al lado del área de
paneles. Para ello hay que partir del área
de paneles sin expandir, y al pulsar en un
panel, este se abrirá pegado al lado,
como vemos en la siguiente figura.
.
El entorno de Dreamweaver CS6 (III)
3. Abrir como panel flotante. Para ello hay que
pinchar en el título del panel y arrastrar el panel
fuera del área de paneles, el panel se puede colocar
en cualquier zona de la pantalla, incluso fuera de la
pantalla de Dreamweaver. Al hacer doble clic en el
título del panel, este se contrae pero sigue flotando
en la misma posición. Para expandirlo, volver a
hacer doble clic. En al siguiente imagen vemos el
panel Archivos flotando y expandido.
Hemos visto un inspector y ahora vamos a ver un panel,
el panel Insertar.
.
El entorno de Dreamweaver CS6 (III)
El panel Insertar En el panel Insertar, encontramos todos los elementos que
podemos encontrar en el menú Insertar, clasificados en
categorías. Podemos emplearlo para insertar imágenes, enlaces,
multimedia, tablas, formularios... cualquier elemento que nuestra
web necesite.
Como vemos en las imágenes, es posible configurar este
panel para verlo como menú (imagen anterior), como panel
flotante o como una barra de herramientas integrada en la
ventana de trabajo (imagen siguiente)
.
El entorno de Dreamweaver CS6 (III)
Línea inferior de pestañas En al parte inferior de la pantalla tenemos una línea que
contiene varias pestañas (Buscar, Validación )
Para abrir una pestaña basta hacer clic sobre ella, para
cerrarla hacer doble clic en su título.
Estas pestañas se pueden configurar de forma similar a
como acabamos de ver con el área de paneles. Es decir, se
pueden añadir y quitar, convertir en flotantes, etc.
.
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 pre visualizar 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.
Para ver u ocultar la barra de herramientas, elija en el menú Ver
la opción Barra de herramientas.
Para ver sólo código en la ventana de documento, haga clic en
el botón Vista de código.
Para ver una vista que contenga las vistas de Código y de
Diseño, haga clic en el botón Vistas de código y diseño.
Para ver sólo la vista de Diseño, haga clic en el botón Vista de
diseño.
Para introducir un título para el documento, utilice el campo
Título. Si el documento ya tiene título, éste aparecerá en dicho
campo.
.
Principales barras de herramientas
Para poner, obtener o proteger un archivo, haga clic
en el botón de menú de "Estado de archivo".
Para pre visualizar o depurar un documento en un
navegador, haga clic en Vista previa/depurar en
navegador y elija uno de los navegadores
enumerados en el menú emergente.
Para actualizar la vista de Diseño, haga clic en el
botón Actualizar vista de diseño.
Para obtener información de referencia sobre código
HTML, CSS y JavaScript, haga clic en el botón
Referencia.
Para desplazarse por el código, haga clic en el botón
Navegación por el código. Para obtener más
información, consulte "Introducción al depurador
JavaScript".
Para mostrar u ocultar la regla, la cuadrícula y las
ayudas visuales, haga clic en el botón de menú
Opciones.
.
Principales barras de herramientas
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 panel 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 panel.
Si desea insertar un objeto en el documento haga clic en el
correspondiente botón del panel 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.
Si desea insertar un marcador de posición mantenga
presionada la tecla Control mientras da clic en el ícono
para insertar el objeto. (Por ejemplo, para insertar un
marcador de posición para una imagen sin especificar un
archivo de imagen, mantenga presionada la tecla Control y
haga clic en el botón Imagen.)
.
Principales barras de herramientas
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 ventana de documento y, a continuación,
haga clic en el icono Ayuda, situado en la esquina superior derecha del
inspector de propiedades.
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.
.
Universidad Bicentenaria de Aragua Cátedra: Informática IV Elaborado por: Reinier Grosso Profesor: Ysabel Sánchez
