Navegador Adobe Dreamweaver

Cs5

Al finalizar el capítulo, lograrás:

"'el Identificar los elementos principales del entorno 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ón e 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.

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

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 en formato

HTML o CSS y permite modificar dichas propiedades.

ofrece diversos paneles y como por

ejemplo el

y Archivos. Muchos de estos elementos se

presentan

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

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

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.

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.

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ú