Ficha Infotech

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