INFOTECH MÓDULO 1
Aprendiendo sobre Dreamweaver
CURSO Creación de páginas web con Adobe Dreamweaver
INFOTECH Nombre del módulo 1
Contenidos
Recursos
Comprensión e información
Capacidades específicas Indagación y Juicio crítico experimentación
Creatividad
Actitudes y valores
Duración
1. Entorno de Dreamweaver. →Identifica y diferencia las herramientas básicas →Se incentiva la del entorno de Adobe →Explora las opciones →Planteamiento de exploración de Dreamweaver. del menú preguntas abiertas para 2. Crear y Aplicar Reglas →Conoce los pasos para ayuda para la creación de herramientas adicionales. →Actitud comprometida incentivar el debate en el CSS. →Fichas de aprendizaje. crear una página web. su página web. →Se incentiva la con el nuevo aprendizaje. aula. →Conoce las → Explora las diversas → Ejercicios 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 complemenarios Aprendiendo sobre actual y acorde a las preferencias de cada fomenta la independencia modificar el diseño de su Reglas CSS. (aplicaciones y Dreamweaver preferencias del grupo alumno. → Explora las cuestionarios) en Paideia. página creando y en la realización de etario que permite 3. Crear Listas y →Recursos de la Web. aplicando Reglas CSS. herramientas para la →Se motiva a aplicar los trabajos aplicando un flexibilidad en cuanto a la Sublistas para organizar el →Organiza su página personalización de sus aprendizajes a otras áreas estilo propio a su diseño. generación de diferentes texto. web a través de listas y listas y sub listas. de ámbito académico y sub temas. personal. sub listas. →Crea y configura un sitio web. 4. Crear y Editar un sitio con carpetas y subcarpetas.
MÓDULO 1: Aprendiendo sobre Dreamweaver
4 semanas
Ficha de Aprendizaje
Tema: Descubriendo el espacio de trabajo, ingreso y edición de textos
Logro @
#
n°
1
Ingresa al programa y reconoce los elementos del entorno. Aplica formato al texto.
Conocimientos previos
Observa el entorno, ¿qué sabes sobre Dreamweaver?
1
Mapa de contenidos Ingresar texto
Crear páginas web se debe
y Dar formato al texto
te permite
DREAMWEAVER
Barra de herramienta Documento Barra de aplicaciones
se debe
Conocer el entorno
Inspector de Propiedades
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 del menú Crear nuevo.
2
La pantalla que aparece es la del espacio de trabajo, tal como se muestra a continuación:
A
B
C
D
E
F
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
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
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.
4
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 a la aplicación y crea un documento nuevo. Paso 2. Guárdalo 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
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
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
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
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
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 conocimientos
@
Aprende más sobre los conceptos básicos de Dreamweaver en el siguiente enlace: https://www.youtube.com/watch?v=-YeDgJs8Bzk
10