Revista Digital
25
-
Upload
glorenri-benitez -
Category
Documents
-
view
216 -
download
1
description
Â
Transcript of Revista Digital
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ú.
Insertar
Ofrece una alternativa a la barra Insertar para la inserción de objetos
en el documento. 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ú
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ú.
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. · El entorno
de Dreamweaver CS6 (I)
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.
.
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 yuna 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.)
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.
.
El entorno de Dreamweaver CS6 (II)
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
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
.
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 áea 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.
3. Abrir como panel flotante. Para ello
hay que pinchar en el título del panel y
arrastar 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
.
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.
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.
.
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.
