Scribd
Cargar
48 vistas17 páginas

Entorno Dreamviewer CS6

El documento describe el entorno de trabajo de Dreamweaver, incluyendo las barras, pestañas, paneles e inspectores. Explica que Dreamweaver facilita la creación de páginas web mediante la inserción automática de etiquetas HTML y la edición gráfica. Además, proporciona una introducción al lenguaje HTML y cómo este define los elementos de una página web a través de etiquetas de inicio y cierre.

Cargado por

Yordis Cujar Moreno
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
48 vistas17 páginas

Entorno Dreamviewer CS6

El documento describe el entorno de trabajo de Dreamweaver, incluyendo las barras, pestañas, paneles e inspectores. Explica que Dreamweaver facilita la creación de páginas web mediante la inserción automática de etiquetas HTML y la edición gráfica. Además, proporciona una introducción al lenguaje HTML y cómo este define los elementos de una página web a través de etiquetas de inicio y cierre.

Cargado por

Yordis Cujar Moreno
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 17

Unidad 1.

Básico: HTML básico

Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text
Markup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin de cada
elemento de la página Web.

Por ejemplo, el título de la página Web se escribe entre las


etiquetas <title> y </title>. Como ves, ambas etiquetas consisten en poner un mismo
comando entre los símbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que
incluye el símbolo "/", indica final.

Las etiquetas disponen de atributos que permiten definir características del elemento


sobre el que actúan. Por ejemplo, <table border="1"> indica que la que se trata de una
tabla, y que tendrá un borde de grosor 1.

Una página HTML básica tendría el siguiente aspecto:

<html>

<head>

<title> Mi primera página web </title>

</head>

<body>

<p><a href="http://www.aulaclic.es/"> Haz clic aquí para ir a


aulaClic</a>

y aprender más sobre páginas web.</p>

</body>

</html>

El ejemplo anterior mostraría una página con un sólo párrafo en el que parte del texto
enlaza con la web de aulaClic. Puedes probarlo copiando el código y pegándolo en un archivo
de texto, que debes guardar con la extensión .htm.

Observa que cada etiqueta tiene una apertura y un cierre, y que están anidadas unas
dentro de otras.
Las etiquetas que se introducen en un documento HTML no son visibles cuando el
documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un
usuario desde Internet solicita ver una página el servidor Web envía la página al navegador y
este interpreta las etiquetas para dar la página correctamente formateada.

Cuando utilizamos Dreamweaver para crear una página Web no tenemos que
preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias
para construir la página con la apariencia y contenido definidos en el editor gráfico. Esto nos
facilita muchísimo el trabajo..

Unidad 2. 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.

2.1. 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.

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.


Unidad 2. El entorno de Dreamweaver CS6 (II)

2.2. Las barras

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.

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.

2.- Las pestañas de 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.

3.- 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.
 

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.

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.

Unidad 2. El entorno de Dreamweaver CS6 (III)

2.3. Inspectores y paneles

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.

4.- 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.

5.- Á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.

6.- 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.

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. 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 epandido.
Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

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)
.

7. 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.
Unidad 2. El entorno de Dreamweaver CS6 (IV)

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra
de documento:

8.- La vista Diseño 

La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

9.- La vista Código 

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación,


de código fuente. No permite tener directamente una referencia visual de cómo va quedando
el documento según se va modificando el código.
El código que vemos es el que genera Dreamweaver al editar el contenido en la
vista Diseño.

Unidad 2. El entorno de Dreamweaver CS6 (V)

- La vista Dividir 

La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona


izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio
en alguna de las zonas, este cambio se aplica directamente sobre la otra.
 

- La Vista en vivo 

La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del
resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los
elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el
navegador.

La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que


pequeños cambios se previsualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la página con los principales navegadores del
mercado que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso
verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de
diseño, en la vista en vivo o en el navegador. También es conveniente comprobar la página
con los distintos tamaños de pantalla, teléfono móvil, tablet y PC.

- La vista Código en vivo 


Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la
vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes
de la web en la  Vista en vivo, se seleccione su correspondiente código fuente y refleja los
cambios dinámicamente al interactuar con la página. Si además pulsamos el
botón   podremos ver los estilos asociados a cada elemento. Por ejemplo, al
colocar el cursor sobre un párrafo podemos ver sus márgenes, como se aprecia en la
siguiente imagen.

2.5. La ayuda
A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

 Si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1 se accede


a la ayuda en línea de Adobe Community Help donde puedes buscar por temas o por
búsqueda de palabras clave, .
 Ayuda de Business Catalyst que es un sistema de alojamiento de páginas web con
funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes.
 Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.
 Referencia abre un panel en el que encontrarás la sintaxis y descripción de las etiquetas
HTML.
 Acceder al Centro de soporte de Dreamweaver en la web.
 Dreamweaver Exchange es un sistema para compartir extensiones.
 Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los


términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

También podría gustarte