INTRODUCCIÓN AL PROGRAMA DREAMWEAVER CS5 PARA CREAR UNA PAGINA WEB

1. Navegador Adobe Dreamweaver
Cs5
Al finalizar el capítulo, lograrás:
"'el Identificar los elementos principales delentorno de trabajo de Adobe
Dreamweaver CS5. ·
"'el Configurar el área de trabajo de Adobe Dreamweaver CS5 para iniciar la
creación de páginas Web. .
Además, podrás conocer acerca de:
"'el Elementos del entorno de trabajo.
"'el Creacióne una página web.
"'el Vistas en Adobe Dreamweaver CS5.
"'el Paneles.
"'el Operaciones para configurar las propiedades de una página Web.
"'el Barras.

2. PRESENTACIÓN
Cuando ingresas a Internet, habrás notado que todas las páginas Web contienen texto,
botones, fotos, imágenes con movimiento, videos, sonidos, música,etc. Estos elementos son
colocados siguiendo un diseño específico y utilizando un programa para crear páginas Web.
Adobe Dreamweaver CS5 es uno de los programas más utilizados para crear sitios y páginas
Web. Con él podrás elaborar de manera rápida y sencilla cualquier tipo de página que desees,
como tu página personal, la página Web de tu promoción, una página para promocionar un
producto,la biografía de tú artista o deportista favorito, etc.
En esta sesión, conocerás los elementos del entorno de trabajo, las diferentes vistas que
puedes utilizar, la ventana del documento, la barra de la aplicación, la barra de archivos
relacionados, los paneles y las propiedades de un documento
ELEMENTOS DEL ENTORNO DE TRABAJO
Para empezar a trabajar en Dreamweaver CS5 realiza lo siguiente:
1. Haz die en el botón Inicio y luego en la opción Todos los programas
2. Ubica el puntero del mouse en la carpeta Adobe Master Collection CS5
3. Haz die en el programa Adobe Dreamweaver CS5
4. Observa que enseguida aparece la siguiente pantalla

3. 5 Selecciona, de la zona Crear nuevo, el acceso HTML y así podrás observar el área de
trabajo del programa y conocer algunos de los componentes que se utilizan con mayor
frecuencia.
Nº Elemento Descripción
1 Barra de la aplicación
Contiene botones propios de la aplicación, el administrador del
espacio de trabajo y un cuadro de búsquedas de ayuda online.
2 Barra de menú principal
Contiene las diferentes opciones principales para controlar el
programa.
3
Barra de herramientas
del documento
Contiene botones y menús emergentes que te permiten ver la
ventana del documento de diferentes formas, definir opciones
de vista y obtener acceso a algunas operaciones comunes.
4 Ventana del documento
Muestra el documento actual mientras lo estás creando y
editando.
5 Paneles
Contiene fichas que permiten abrir y cerrar los inspectores y
paneles que se utilizan con mayor frecuencia.
6 Panel de propiedades
Muestra propiedades del objeto o texto seleccionado enformato
HTML o CSS y permite modificar dichas propiedades.
ofrece diversos paneles y como por
ejemplo el
y Archivos. Muchos de estos elementos se
presentan

4. CREACIÓN DE UNA PAGINA WEB
Cualquier página Web que quieras diseñar puede contener texto e imágenes, además de
elementos avanzados, como animación, videos, sonido y especialmente, los vínculos con otros
documentos.
Todos estos elementos son administrados a través de la ventana del documento
VENTANA DEL DOCUMENTO
La ventana del documento muestra el documento actual de forma similar a cómo aparecerá en
un navegador Web. Al empezar a trabajar con Dreamweaver, visualizarás una pantalla con los
siguientes elementos:
No Elemento Descripció
n
1
Barra de herramientas
del documento
Muestra el nombre del archivo y un asterisco si el archivo
contiene cambios no guardados. Además contiene íconos
que permiten cambiar las distintas vistas del documento,
acceder al título de la página o realizar las distintas opciones
de validación que ofrece el programa.
2 Barra de estado
Situada en la parte inferior de la ventana de documento,
proporciona información adicional sobre el documento que se
está creando.
3 Selector de etiquetas
Muestra las etiquetas HTML que controlan el texto o los
objetos seleccionados.
4 Tamaño de ventana
Permite cambiar el tamaño de la ventana del documento para
que adopte dimensiones predeterminadas o personalizadas
1
1
1
1

5. A continuación, vas a realizar un pequeño ejemplo para ver el funcionamiento de la ventana
documento. Para ello, realiza lo siguiente:
1. Muestra las reglas del documento, selecciona el menú Ver, elige la opción Reglas y haz clic
en Mostrar.
2. Ubica el cursor en el cuadro Título y escribe "El Sueño del Celta". Observa que dicho título
aparecerá en la barra de:título de la ventana del documento.
3. Digita el texto que se aprecia en la imagen. Observa que en la barra de estado aparece la
etiqueta <p> que en lenguaje HTML significa párrafo.
GUARDA UNA PÁGINA WEB
Para que puedas guardar la página Web que acabas de crear, realiza lo siguiente:
1. Selecciona el menú archivo o presiona las teclas Ctl + S
2. Selecciona la opción Guardar
3. Ingresa el nombre del archivo
4. Ubica el lugar donde lo deseas guardar
5. Haz clic en el botón Guardar
La aventura que narra esta novela empieza en el Congo en 1903 y termina en una cárcel de Londres, la
mañana de 1916.
Aquí se cuenta la peripecia vital de un hombre de leyenda: el irlandés Roger Casement. Héroe y villano,
traidor y libertario, moral e inmoral, su figura múltiple se apaga y renace tras su muerte. Casement fue uno
de los primeros europeos en denunciar los horrores del colonialismo. De sus viajes al Congo Belga a la
Amazonía sudamericana quedaron dos informes memorables que conmocionaron a la sociedad de SJ
tiempo. Estos dos viajes y lo que allí vio cambiarían a Casement para siempre, haciéndole emprender la
travesía, en este caso intelectual y cívica, tanto o más devastadora. La que lo llevó a enfrentarse a una
Inglaterra a la que admiraba y a militar activamente en la causa del nacionalismo irlandés.
El sueño del celta describe una aventura existencial, en la que la oscuridad del alma humana aparece en un
estado más puro y, por tanto, más enfangado

6. CAMBIAR EL TAMAÑO DE LA VENTANA DE UN DOCUMENTO
Dreamweaver te permite adaptar las dimensiones de la ventana a la resolución de tu pantalla. Para
establecer un tamaño predeterminado para la ventana de tu documento, realiza lo siguiente:
1. Haz clic en la zona de Tamaño de la ventana de la Barra de estado
2. Selecciona Editar tamaños en el menú emergente.
3. Ubica el cursor en la zona de Tamaños de ventana, observa que se aprecia 3 columnas: Ancho,
Alto y Descripción.
4. En Ancho, escribe el valor 510, y en Alto, escribe 316
5. Haz clic en el campo Descripción e introduce el texto: 510 x 316, personal.
6. Haz clic en Aceptar
VISTAS EN ADOBE DREAMWEAVER
Las vistas son utilizadas para ver el documento de diferentes formas. Dreamweaver te permite
trabajar utilizando las siguientes vistas: Código,Dividir, Diseño y Vista en vivo.
Vista Código
1. Ubica el cursor al inicio del tercer párrafo y haz die en el botón Código. Observa que se
muestra el documento con todo el código HTML generado automáticamente por Dreamweaver.

7. Vista Dividir
2. Haz clic en el botón Dividir. Observa que se muestra simultáneamente en una ventana dividida:
el código HTML en el lado izquierdo y el diseño de la página en el lado derecho.
Vista Diseño
3. Haz clic en el botón Diseño. Observa que se muestra una representación visual del
documento.
Vista en Vivo
4. Haz clic en el botón Vista en vivo. Observa que se muestra una representación más realista
de la apariencia que tendrá el documento en un navegador. La Vista en vivo no es editable.
Codigo en Vivo
5. Haz die en el botón Código en vivo. Observa. que se muestra el código en el panel de la
izquierda y conforme te desplazas en la Vista en vivo ocurre el mismo desplazamiento en el
código. Sólo está disponible al visualizar un documento en la Vista en vivo.
Inspeccionar
6. Haz die en el' botón Inspeccionar. Observa que se activa la vista en vivo y en modo de
iinspección para los estilos CSS.
PANELES
Los paneles son elementos adicionales de Adobe Dreamweaver CS5 que se ubican en la parte derecha
de la ventana de trabajo. Los paneles se organizan en grupos y proporcionan acceso a características
especiales para el diseño de tus páginas Web. Cada grupo de paneles pueden ampliarse o contraerse y
acoplarse o desacoplarse con otros grupos de paneles.
EL PANEL DE PROPIEDADES
El panel de Propiedades está ubicado, tal y como habíamos indicado al inicio de la sesión,
debajo de la ventana del documento, y te permite examinar y cambiar las características del
objeto seleccionado. El panel está dividido en dos: HTML y CSS con la finalidad de diferenciar
claramente el conjunto de características que se pueden trabajar.
Por ejemplo, en CSS, se mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. y en
HTML, podrás crear un vínculo,colocar formato de encabezados, etc.

8. Para activar el panel de Propiedades realiza lo siguiente:
1. Haz die en el menú Ventana
2. Selecciona la opción Propiedades
OPERACIONES PARA CONFIGURAR LAS PROPIEDADES DE UNA PÁGINA
Una página Web es interesante cuando contiene una serie de elementos tales como títulos de página,
imágenes, colores de fondo, colores de texto y vínculos hacia otras páginas u objetos. Todas estas
características son propiedades básicas de cualquier documento HTML.
DEFINIR UN COLOR DE FONDO PARA LA PÁGINA
Una forma de hacer que tus páginas sean más atractivas visualmente, es aplicando colores de fondo
apropiados. Para que coloques un color de fondo a la página Sueño_Celta, realiza los siguientes pasos:
1. Activa el menú Modificar y elige la opción Propiedades de la página.
2. En el cuadro de diálogo Propiedades de la página, haz die en la opción Color de fondo y
selecciona el color Oro (código de color: #FCO) del selector de color.
3. Haz die en el botón Aceptar
4. Guarda tu documento y presiona la tecla F12 para hacer la vista previa de la página
en el
5. Explorador de Internet.
Si quieres ocultar / todos los paneles de
la puedes la tecla F4 o
ingresar al menú