Dreamweaver
CS5
Ayllen zue Sanchez Camargo
11°E
Escuela normal superior del distrito de barranquilla

Menú
• Concepto de Dreamweaver CS5
• Sus características
• Editar páginas web
• Cómo tener una página en Internet
• Arrancar y cerrar Dreamweaver CS5
• Elementos básicos de Dreamweaver CS5

Concepto de Dreamweaver CS5
Dreamweaver CS5 es un software fácil de
usar que permite crear páginas web
profesionales.
Las funciones de edición visual de
Dreamweaver CS5 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 que permite trabajar en mapas
visuales.

Sus características
Compatibilidad con CMS integrada.
Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es
in interfaz o programa que nos permite gestionar el contenido de un sitio web.
Inspeccionar CSS.
la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado,
y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Integración Adobe Browserlab.
Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve
una misma página web en las distintas versiones de Internet.
Configuración sencilla de sitios.
Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han
simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco
importantes.
Sugerencias de código.
las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones
propios de los distintos CMS soportados.

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.
Para crear páginas web mediante el código HTML es más
costoso 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 aprenderlo rápidamente.
Uno de los editores de paginas web mas utilizados es
Adobe Dreamweaver ya que es muy sencilla.
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

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.
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.
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.
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, aunque esto último
será útil sólo para usuarios avanzados.

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.

Arrancar y cerrar
Dreamweaver CS5
Veamos las dos formas básicas de arrancar Dreamweaver CS5.
•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 CS5 y haz clic sobre él para arrancar el programa.
•Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes Puedes arrancar Dreamweaver
CS5 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 CS5, 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.

Abrir y guardar documentos
Para abrir un documento
•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 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 CS5.
Para abrir un documento nuevo
•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

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

Elementos básicos de
Dreamweaver CS5
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.

Las barras
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.

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.
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 encontramos las herramientas de Selección, Mano (para desplazarse) y
Zoom. Y 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,
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. En esta nueva versión se
han añadido más 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.

Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como
paneles 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.
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. Vamos a ver los más importantes.
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, mostrará su ubicación, dimensiones, peso, clase, etc...
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 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.

Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de
documento:
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.

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.

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

La ayuda
A través del menú Ayuda puedes ir a varias
opciones, veamos algunas de ellas:
•Acceder al cuadro de diálogo de ayuda muy
similar al de Windows donde puedes buscar por
temas, por índice o por contenido, si seleccionas
la opción Ayuda de Dreamweaver o simplemente
pulsando F1.
•Acceder a una Introducción a InContext Editing
de la página de Adobe, que muestra un resumen
de esta herramienta.
•Abrir el panel Referencia en el que encontrarás
la sintaxis y descripción de las etiquetas HTML.
•Acceder a Dreamweaver Support Center en la
web.
•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.