Unidad 1. Conceptos básicos de Dreamweaver CS6 (I)

1.1. Qué es Dreamweaver CS6

Dreamweaver CS6 es un software fácil de usar que permite crear páginas

web profesionales.

Las funciones de edición visual de Dreamweaver CS6 permiten agregar rápidamente

diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código

HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos

JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas

trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir

del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la

página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a

entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas

Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.

Las páginas web están escritas en HTML. Si no conoces las características básicas de

HTML puedes verlas aquí.

1.2. Novedades de Dreamweaver CS6

En este punto comentaremos las características que aporta esta nueva versión sobre la

anterior.

Plantillas diseño fluido. El acceso a la web a través de todo tipo de dispositivos está

experimentando un aumento importante. Ahora es habitual acceder a internet desde el

teléfono móvil y desde las tabletas. Esto complica el diseño de los sitios web porque los

dispositivos son de diferentes dimensiones.

Una forma de afrontar este problema es utilizando el diseño fluido, este tipo de diseño hace

que la página se adapte automáticamente a las dimensiones del dispositivo. Este tipo de

diseño utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo

correctamente. Sin embargo, existen librerias de Javascript que solucionan este

inconveniente.

Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseño fluido que

veremos en la unidad 18.

Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial

a otro estado final de forma continua. Con transiciones se pueden lograr vistosos efectos

de animaciones.

Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire

distinto a nuestros diseños de páginas web. En esta versión, Dreamweaver permite incorporar

los archivos de nuevas fuentes de forma sencilla.

Intergración con PhoneGap mejorada. PhoneGap es un servicio para generar

aplicaciones para teléfonos móviles en las plataformas más utilizadas (Android, Apple, ...)

ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .

Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de

adquirir productos Adobe, como Dreamweaver, mediante suscripción mensual o anual, de

esta forma se tiene acceso más rapido a las actualizaciones y se puede disponer de los

archivos de trabajo en cualquier ubicación con acceso a internet.

Además hay funciones que sólo estan disponibles para los suscriptores de Cloud, como

la inserción de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate

o la búsqueda dinámica en Mac.

Unidad 1. Conceptos básicos de Dreamweaver CS6 (II)

1.3. Editar páginas web

Cualquier editor de

texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la

extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado.

Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.

Pero crear páginas web mediante el código HTML es más laborioso que hacerlo utilizando

un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los

elementos de la página, al mismo tiempo que es más complicado crear una apariencia

profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML.

Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al

principio, nos ayudará a entender lo que estamos haciendo y podremos aprender HTML

rápidamente.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados,

y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe

Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como

pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.

Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con

servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El

precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en

disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco

espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que

tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo

que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no

podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una

empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para

publicar en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de Google

o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como

una página web a la hora del diseño.

También tenemos Google Sites que permite modificar directamente el código HTML.

En el resto del curso nos referiremos preferentemente a páginas web creadas desde cero

por el usuario, sin restircciones de diseño.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también

un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un

dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar

repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es

posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org,

.es o .com. La terminación hace referencia al pais (.es para España, .com.mx para México,

.pe para Perú, ...) o al tipo de página (.com para comerciales, .org para organizaciones, .mobi

para teléfonos móviles o celulares, ...)

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que

nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número

de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base

de datos para poder acceder a ella a través de programación vía Web.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy

sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego

querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a

tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos

tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la

organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y

enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes,

ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás

de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos

que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir,

también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen

entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la

imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas

perdidas buscando fallos.

Unidad 1. Conceptos básicos de Dreamweaver CS6 (III)

1.5. Arrancar y cerrar Dreamweaver CS6

Veamos las dos formas básicas de arrancar Dreamweaver CS6.

Desde el botón Inicio situado, normalmente, en la esquina inferior

izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .

Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos.

Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que

puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.

Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes

operaciones:

Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar

Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir....

Hacer clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos.

Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. Se abrirá el programa Brigde que muestra las carpetas y archivos de forma gráfica.

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS6.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes

operaciones.:

Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + N.

Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir

la Categoría Página en blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya

creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A

continuación pulsamos el botón Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl + S.

Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente

con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por

uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar todo de la Barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas

en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya

que en ocasiones es posible no desear guardar los cambios en todos los documentos

modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta

que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay

cambios sin guardar aparece un * tras el nombre del

documento

Unidad 1. Conceptos básicos de Dreamweaver CS6 (IV)

1.7. Mi primera página

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear

una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página.

Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los

elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has

hecho una página web, este es el momento para descubrir lo fácil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior

como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página

básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.

Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la

página.

Entonces se abrirá una ventana como la que aparece a continuación:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser

de color azul.

Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.

Para aplicar los cambios, pulsa sobre el botón Aceptar.

Unidad 1. Conceptos básicos de Dreamweaver CS6 (V)

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la

carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta

dedicada a las imágenes.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer

clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre

una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador

que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en

cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor

de la imagen.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web

que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de

crear.

Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar,

situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter).

Después nos dirigimos al menú Insertar, opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la

habías guardado, seleccionarla y pulsar Aceptar.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector

de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene

el siguiente aspecto:

Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está

contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el

formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el

icono CSS a la izquierda.

Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las

propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la

información, mientras que CSS se encarga de mostrar ese contenido con el formato

adecuado.

Unidad 1. Conceptos básicos de Dreamweaver CS6 (VI)

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto

mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el

diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>,

para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial,

Helvetica, sans-serif, color azul #009 y centra el texto con el segundo botón de la parte

derecha , tal y como muestra la imagen siguiente:

Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en

línea>, marca los botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el

contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las

propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.

Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como

hemos visto hasta ahora, pulsando en .

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel

de Propiedades a las propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:

Por último guarda el documento. Ya

sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por

ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta

que la imagen descargada.

Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.

Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber

seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho

todo bien.

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.

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.

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.

Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos

permiten colocarlo como otra barra de herramientas.

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)

.

Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te

recomendamos este avanzado .

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.

Pág. 2.4