INFOTECH MÓDULO 1 CURSO. Aprendiendo sobre Dreamweaver. Creación de páginas web con Adobe Dreamweaver

Transcripción

1 INFOTECH MÓDULO 1 Aprendiendo sobre Dreamweaver CURSO Creación de páginas web con Adobe Dreamweaver

2 INFOTECH Capacidades específicas Nombre del módulo 1 Contenidos Recursos Comprensión e Indagación y Actitudes y valores Duración Juicio crítico Creatividad información experimentación Aprendiendo sobre Dreamweaver 1. Entorno de Dreamweaver. 2. Crear y Aplicar Reglas CSS. 3. Crear Listas y Sublistas para organizar el texto. 4. Crear y Editar un sitio con carpetas y subcarpetas. Fichas de aprendizaje. Ejercicios complemenarios (aplicaciones y cuestionarios) en Paideia. Recursos de la Web. Identifica y diferencia las herramientas básicas del entorno de Adobe Explora las opciones Se incentiva la Planteamiento de Dreamweaver. del menú exploración de preguntas abiertas para Conoce los pasos para ayuda para la creación herramientas adicionales. Actitud comprometida incentivar el debate en e crear una página web. su página web. Se incentiva la con el nuevo aprendizaje. aula. Conoce las Explora las diversas modificación de la página Responsabilidad frente Temática transversal herramientas básicas para opciones para crear de acuerdo a las a nuevas tareas. Se actual y acorde a las modificar el diseño de su Reglas CSS. preferencias de cada fomenta la independencia preferencias del grupo página creando y Explora las alumno. en la realización de etario que permite aplicando Reglas CSS. herramientas para la Se motiva a aplicar los trabajos aplicando un flexibilidad en cuanto a la Organiza su página personalización de sus aprendizajes a otras áreas estilo propio a su diseño. generación de diferentes web a través de listas y listas y sub listas. de ámbito académico y sub temas. sub listas. personal. Crea y configura un sitio web. 4 semanas MÓDULO 1: Aprendiendo sobre Dreamweaver

3 Tema: Descubriendo el espacio de trabajo, ingreso y edición de textos Ficha de Aprendizaje 1 n Logro Ingresa al programa y reconoce los elementos del entorno. Aplica formato al # Conocimientos previos Observa el entorno, qué sabes sobre Dreamweaver? 1

4 Mapa de contenidos Crear páginas web se debe Ingresar texto y Dar formato al texto DREAMWEAVER te permite Barra de herramienta Documento Barra de aplicaciones contiene un Inspector de Propiedades Entorno compuesto por Panel de Archivo Grupo de Paneles Ventana de Documentos Contenidos de aprendizaje Dreamweaver es un software que nos permite diseñar, crear y editar una web de manera sencilla sin la necesidad de ser un experto en lenguaje HTML. Ingresar al programa Al ingresar veremos la pantalla de bienvenida en la que encontraremos opciones para abrir un documento, crear un nuevo documento, entre otras. Para ingresar al espacio de trabajo de Dreamweaver, haz clic en la opción HTML de la ventana Crear nuevo. 2

5 La pantalla que aparece es la del espacio de trabajo, tal como se muestra a continuación: A B C D E A. Barra de herramientas Documento. B. Barra de la aplicación. C. Ventana de documento. D. Grupos de paneles. E. Inspector de propiedades. F. Panel Archivos Elementos del entorno Ahora te explicaremos cada uno de los elementos. A. Barra de herramientas Documento Muestra principalmente las pestañas con todos los documentos actualmente abiertos y te da la posibilidad de variar la vista del documento. Multipantalla F Vistas del documento Vista previa B. Barra de aplicaciones En ella encuentras todas las funciones que se pueden realizar con Dreamweaver. Muestra también el tipo de espacio de trabajo que estás usando e inclusive te brinda un buscador on line similar a Google. Buscador Menú Tipo de espacio de trabajo 3

6 C. Ventana de documento En esta parte ingresarás el texto, la imagen y cualquier otro elemento. El modo de visualización y de trabajo es similar al de Word. D. Grupo de paneles Entre los paneles que se pueden mostrar en esta sección, están el de Insertar, Estilos CSS y de Archivos. Por ejemplo, en el panel Insertar se muestran íconos para insertar hipervínculos, imágenes, tablas, multimedia, plantillas, etcétera. E. Inspector de propiedades Siempre que selecciones cualquier texto, imagen, video, cuadro u otro elemento de tu web, en esta parte se mostrarán las propiedades de dicho objeto seleccionado. Con él puedes realizar modificaciones básicas, así como establecer vínculos e hipervínculos. F. Panel Archivos Con este panel podrás monitorear las carpetas que forman parte de tu proyecto: las imágenes, los videos, los archivos de sonido, los documentos HTML que estés trabajando, etcétera. Si no esta activado el panel Archivos en tu espacio de trabajo, puedes ir al menú Ventana -> Archivo 4

7 Creando un nuevo documento Es importante que crees una carpeta de trabajo. Puedes crearla en el Escritorio y nombrarla Dreamweaver. En ella guardarás todos tus archivos y documentos del curso. Paso 1. Ingresa al programa y crea un documento nuevo. Paso 2. Seleccióna el menú Archivo y guarda tu archivo en la carpeta Dreamweaver y nómbralo Web. Luego, selecciona como tipo de archivo la opción HTML Documents. Copiando texto de fuente externa Descarga el archivo web.docx de la plataforma y realiza lo siguiente: Paso 1. Abre el archivo con Word, selecciona el texto y cópialo. Paso 2.Ubícate en Dreamweaver y coloca el cursor al inicio del documento que has creado. Selecciona el menú Edición; y luego, Pegado especial. En la ventana Pegado especial elige la opción Texto con estructura y formato completo. Observa que se han conservado los colores y formatos del texto. 5

8 Paso 3. Colócate al final de cada párrafo y presiona la combinación de teclas SHIFT + ENTER para crear un espaciado simple entre cada párrafo. Paso 4. En la barra de herramientas de Documento coloca el título de la página. Paso 5. Para visualizar la página web, ubica el ícono con el mundo en la barra de herramientas de Documento. Ahora crearemos un blog sobre fotografía. Cada noticia podrá tener tres partes: fecha, título y cuerpo. Primero, editarás el encabezado y luego, en una segunda parte, el resto del cuerpo del blog. Si deseas, puedes cambiar el título de tu blog para hacerlo más atractivo o colocar todo el título en mayúsculas. 6

9 Editando el encabezado: tamaño de letra Paso 1. Selecciona el título del blog: Paso 2. Dirígete al Inspector de propiedades (en la parte inferior) y en la opción Formato selecciona Encabezado 1. Con esta opción puedes diferenciar rápidamente el título de un párrafo. Tienes varias opciones de encabezado. 7

10 Editando el encabezado: color de letra Paso 1. Selecciona nuevamente el título. Paso 2.Dirígete al Inspector de propiedades y haz clic en CSS (el programa está predeterminado en HTML). En las opciones de CSS dirígete a Regla de destino y selecciona Nuevo estilo en línea. Paso 3. Haz un solo clic en de tu agrado. para acceder a la paleta de colores y selecciona el Paso 4. Como resultado, puedes marcar la opción En vivo; verás el resultado que se muestra en un navegador. 8

11 Para continuar realizando modificaciones, debes desmarcar la opción En vivo. Editando el encabezado: extras También se pueden agregar otros formatos al texto como posición, tipo de fuente, tamaño, entre otros. Realiza las siguientes modificaciones: Paso 1. Regresa al Inspector de propiedades. Dentro de las opciones de CSS encontrarás los botones que se muestran a continuación. Debes escoger el que moverá el texto a la derecha. Paso 2. Este es el resultado: Ahora, siguiendo los mismos pasos, ubica el subtítulo a la derecha y modifica su color a gris. 9

12 Aplica lo aprendido Ingresa a Paideia y realiza las siguientes actividades: Aplicación 1.1 Abre el documento fotografia.html que trabajaste en la ficha y elige el modo de vista Dividir. Observa el código HTML e identifica las etiquetas y describe las funciones que tienen las siguientes propiedades: bold, align y style. Aplicación 1.2 Crea una página web sobre tu banda o cantante favorito y toma en cuenta los siguientes puntos: biografía, mejores canciones y actualidad. Cada sección debe tener un párrafo de extensión. Amplia tus Aprende más sobre los conceptos básicos de Dreamweaver en el siguiente enlace: 10