Separata1 ok
0 recomendaciones530 vistas
Este documento proporciona una introducción al programa Adobe Dreamweaver CS5, describiendo sus principales elementos de trabajo como la barra de aplicación, la ventana del documento, las vistas y paneles. Explica cómo crear y guardar una página web básica, configurar las propiedades de una página como el color de fondo, y cambiar entre las vistas de código, diseño y en vivo.
Separata1 ok
- 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ú