dreamweaver-fichasdeaprendizaje2014.pdf

8/19/2019 dreamweaver-fichasdeaprendizaje2014.pdf

1/92

1

Ficha de Aprendizaje N° 1

Curso:

Creación de páginas Web con Adobe Dreamweaver

Capítulo I Aprendiendo sobre Dreamweaver

Tema: Descubriendo el espacio de trabajo

Duración: 2 horas pedagógicas

Ingresa al programa y reconoce los elementos del entorno

Dreamweaver

Ingresar al

programa

Elementos del

entorno

Barra de

herramientas

Documento

Barra de

aplicaciones

Ventana de

documento

Grupo de

paneles

Inspector de

propiedades

Panel de

archivos

Creando un

nuevo

documento

Logros de aprendizaje

Conocimientos previos

Observa el entorno,

¿qué se puede

realizar en él? ¿Qué

sabes sobre

Dreamweaver?

Mapa de Contenidos


2/92

2

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.

Al ingresar, veremos la pantalla de bienvenida

en donde encontraremos opciones para abrir un

documento, crear un nuevo documento, entre

otras.

Para ingresar al espacio de trabajo de Dreamweaver, haz clic

en HTML:

La pantalla que aparece es la del espacio de trabajo, como se muestra a continuación:

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

Contenidos de aprendizaje

Ingresar al programa


3/92

3

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.

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 utilizando e inclusive te brinda un buscador on

line tipo Google.

C. Ventana de documento

En esta parte, ingresarás el texto, imagen y cualquier otro elemento. El modo de visualización y

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, de Archivos.

Por ejemplo en el panel Insertar se muestran íconos para insertar

hipervínculos, imágenes, tablas, multimedia, plantillas, etcétera.

Elementos del entorno

Vistas del documento

Multi plantilla

Vista previa

Buscador

Tipo de espacio de trabajoMenú


4/92

4

E. Inspector de propiedades:

Siempre que selecciones cualquier texto, imagen, vídeo, 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, vídeos, archivos de sonido, los

documentos HTML que estés trabajando, etcétera.

Es importante crear una carpeta de trabajo, puedes crear esta carpeta en el Escritorio y

nombrarla como DREAMWEAVER. Allí guardarás todos tus archivos y documentos del curso.

Creando un nuevo documento

Paso 1: Ingresa a la aplicación y crea un nuevo

documento

Paso 2: Guárdalo en la carpeta Dreamweaver y nómbralo web,

luego selecciona como tipo de archivo la opción HTML

Documents.


5/92

5

Descarga el archivo web.docx de la plataforma y realiza lo siguiente:

Paso 1: Abre el archivo con Word, selecciona y copia el texto,

Paso 2: Luego ubícate en Dreamweaver y coloca el cursor al inicio y selecciona el menú

Edición y luego Pegado especial. En la ventana Pegado especial elige la opción Texto conestructura y formato completo.

Observa que se han conservado los colores y formatos del texto

Copiando texto de fuente externa


6/92

6

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

del documento.

Aplicación 1.1: Arrastra y une las imágenes con el texto correspondiente.

Aplicación 1.2: Establece que elementos del entorno se relacionan entre sí. Arrastra

y une los textos.

Aplica lo aprendido


7/92

1


Curso:

Creación de páginas Web con Adobe Dreamweaver

Capítulo I Aprendiendo sobre Dreamweaver

Tema: Ingreso y edición de texto


Ingresa texto al programa y lo edita.

Observa la siguiente imagen:

¿Cómo crees que se realizó? ¿Qué otros documentos similares podrías realizar?




8/92

2

En esta ficha se trabajará en el desarrollo de un boletín de noticias escolares, tal como el que

se mostró en la imagen inicial. Primero crea el nuevo documento, nómbralo boletín.html yguárdalo en tu carpeta de trabajo.

Dreamweaver

Ingresando textoEditando el

encabezado

Tamaño de letra Color de letra Extras

Mapa de Contenidos


Paso 1: Comienza ingresando el título y subtítulo de tu blog , para lo cual debes hacer

clic en la ventana Documento (espacio en blanco). Verifica que usas el tipo de vista

de Diseño.


9/92

3

Primero, editarás el encabezado y, en una segunda parte, el resto del cuerpo del boletín. Si

deseas, puedes cambiar el título de tu boletín para hacerlo más atractivo o colocar todo el título

en mayúsculas.

Paso 2: Ya tienes el encabezado, ahora continúa con la primera entrada del boletín. Cada

noticia podrá tener tres partes: fecha, título y cuerpo.

Paso 1: Selecciona el título del blog :

Paso 2: Luego, dirígete al Inspector de

propiedades 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.

ENCABEZADO

ENTRADA


10/92

4

Paso 3: A continuación, da un solo clic en para acceder a la paleta de colores y

selecciona el que quieras.

Paso 4: Como resultado, puedes marcar la opción En vivo, verás el resultado que se mostraría

en un navegador

Para continuar realizando modificaciones debes desmarcar la opción En vivo.

Editando el encabezado – color de letra

Paso 1: Selecciona

nuevamente el título

Paso 2: Luego, 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.


11/92

5

También se pueden agregar otros formatos al texto como posición, tipo de fuente, tamaño entreotros. Realiza las siguientes modificaciones:

Paso 1: Regresa al Inspector de propiedades. Dentro de las opciones de CSS, encuentras

los siguientes botones, debes escoger el que moverá el texto a la derecha.

Paso 2: Este es el resultado:

Ahora cambia la ubicación del subtítulo a la derecha y modifica su color a plomo, siguiendo los

mismos pasos.

Aplicación 1.3: Abre el documento boletín.html que trabajaste en la ficha y

elige el modo de vista de Dividir, observa el código HTML e identifica que etiquetas

corresponden con los siguientes elementos:

Aplicación 1.4: Crear página web sobre viajes

Aplica lo aprendido

Editando el encabezado – extras


12/92

1


Curso: Creación de páginas Web con Adobe Dreamweaver

Capítulo I: Aprendiendo sobre Dreamweaver

Tema: Edición utilizando reglas CSS


Utiliza la regla CSS para modificar los diseños, según sus propias características.

Aplica la regla CSS en los diversos diseños.

¿Para qué crees que te puede servir el uso de reglas en un formato de texto?

Edición utilizando

reglas

Crear una regla

CSS

Aplicar una regla

CSS



Mapa de Contenidos


13/92

2

En esta ficha continuaremos trabajando el boletín

escolar.

Al abrir la aplicación, se mostrará el último trabajo

realizado, si no se muestra puedes utilizar la opción

abrir y ubicar la carpeta con tu trabajo.

Ahora edita el contenido del boletín. Como en todo boletín, tendrás decenas de noticias, por lo

que debes crear unaregla CSS

para modificar rápidamente cada parte (fecha, título y cuerpo),

según sus propias características.

Para ello, identifica las 3 partes de esta entrada:

Luego, realiza los siguientes pasos:

Paso 1: Edita primero la fecha.

Paso 2: En el panel de Inspección marcando la opción CSS, Crea una Nueva regla CSS para

tu fecha (previamente seleccionada):

Paso 3: Con esta opción seleccionada, le das clic en Editar regla.


Crear una regla CSS

Lunes 3 de marzo de 2014

¡¡Comenzando la primera semana de clases!!

Ha empezado este nuevo año escolar, con muchas novedades y mucho

entusiasmo. Es inevitable no sentir una gran emoción de reencontrarte con los

amigos y amigas para verlos todos los días nuevamente. Se ven caras nuevas y

también ha otras ue no vemos ero ue los llevamos en nuestro corazón . El

__________

__________

__________


14/92

3

Luego, aparece una nueva ventana en donde a la nueva regla le nombrarás fecha y luego da

clic en Aceptar.

En la nueva ventana, llamada Definición de regla para título, tendrás todas las opciones de

edición CSS disponibles para el objeto seleccionado (serán diferentes de acuerdo a la

naturaleza del objeto: texto, imagen, video, tabla, etcétera).

Paso4: Modifica las opciones tal como se muestran en la imagen y luego da clic a Aceptar.

Manteniendo seleccionado el texto, observa que en el Inspector de propiedades, se muestra

la nueva regla que se ha creado fecha.

fecha


15/92

4

Siguiendo el mismo procedimiento, crea una regla para el título de la entrada, nómbrala

“tituloe”. Para definir la regla realiza lo siguiente:

Paso 5: coloca en categoría Tipo, la fuente: Tahoma, el Tamaño: 14, el Grosor: bold y el Color:

blanco

Paso 6: cambia el color de fondo del texto, debes cambiar la categoría a Fondo y para finalizar

y salir de la ventana, le das clic en Aceptar.

Observa el resultado:


16/92

5

Para completar debes definir una regla para el cuerpo de la entrada, considera lo siguiente:

Para volver a utilizar las reglas CSS que hemos creado, debes crear una nueva entrada en el

blog.

Paso 1: Crea la nueva entrada con la fecha, título y contenido relacionado al tema

“vacaciones”.

Paso 2: Ahora que ya se ha introducido el texto, marca la fecha de la entrada y en el inspector

de propiedades selecciona la clase “fecha”.

1. Nombra a la nueva regla: “cuerpo”

2. Realiza todos los pasos, de acuerdo a lo explicado

anteriormente.

3. Edita lo siguiente, teniendo en cuenta:

— Font: Comic Sans

— Font size: 14

— Font weight: lighter

— Color : a tu elección

— En la categoría Bloque, colocas Text align: justificar

Aplicar una regla CSS

Martes 5 de Marzo de 2014

Pero que buenas vacaciones…

Creo que estos meses de vacaciones nos han repuesto a todos, pero claro nos han dejado con ganas de nás

tiempo libre, sobre todo porque hemos podido realizar todas nuestras actividades que nos interesan más

allá del colegio, como ir al cine, al teatro, viajar, o simplemente descansar en la comodidad del hogad sin

preocupación de tareas y estudios. Bueno, no en todos los casos, donde algunos deben de haber

aprovechado en estudiar inglés, francés u otra lengua, u otros cursos o talleres, como el de clown, de teatro,

de música, percusión, etc.


17/92

6

Observa que se aplicó el formato que se había definido con

esa regla CSS.

Realiza la misma secuencia para aplicar las otras reglas “cuerpo” y “tituloe” a la partecorrespondiente de la nueva entrada.

Aplicación 1.5.: Crear una página web navegadores.html. Investiga información

referente a los navegadores web considerando los siguientes títulos: Introducción,

Historia y Referencias.

Aplicación 1.6.: Ordena la secuencia de pasos que se debe seguir para establecer

una regla CSS.

Aplica lo aprendido


18/92

1



Capítulo I:

Aprendiendo sobre Dreamweaver

Tema: Creando listas y sub listas


Crea listas y sub listas para darle más orden a su diseño.

Cuando estás realizando un documento, ¿Para qué sirve hacer una lista? ¿Cómo la realizas?

Si lo haces en Word, ¿qué herramientas utilizas para hacer listas?

En esta ficha vas a aprender a crear listas, para ello debes abrir el blog de estudiantes de tu

carpeta de trabajo (blog.html) y agregar a la última entrada, una lista de actividades que

hayas realizado en tus vacaciones. Por ejemplo:

Creando una lista

Creando una sub

lista

Retornar a una

lista



Mapa de Contenidos



19/92

2

Paso 1: Haz clic en el ícono de Lista ordenada en el Inspector de propiedades (esta opción

está disponible en la sección HTML): Lista sin ordenar (símbolos) y Lista ordenada (numérica o

alfabética)

En la ventana Documento, verás cómo aparece el número “1” espaciado con sangría:

Paso 2: Ingresa el texto y luego das Enter y se

creará el número que continúa la lista

Paso 3: Luego de ingresar el segundo elemento presiona al mismo tiempo la combinación

Enter +SHIFT (o Enter +”Mayusculas”).

Creando una lista

BA


20/92

3

Paso 4: Luego de colocar el texto en la línea sin número, si se presiona Enter , continúa la

numeración anterior.

Paso 1: Ingresa un

nuevo elemento para el

cual tendrás que utilizar

una sublista.

Paso 2: Presiona Enter y saldrá un nuevo número. Luego para crear la sub lista, dirígete al

Inspector de propiedades y haz clic en Sangría de texto.

Cambio de línea sin

numeración

Creando una sub lista

Enter

Enter + Shift

GLOSARIO

Sangría: establece ladistancia del párrafo

respecto al margenizquierdo o derecho.


21/92

4

Paso 3: Para tener una sub lista con símbolos, le das clic en el ícono Lista no ordenada

(ubicada en el Inspector de propiedades).

Luego, tienes una sub lista

diferenciada con símbolos.

Completa la sub lista con tres o cuatro elementos adicionales. Recuerda que para crear un

nuevo elemento solo tienes que dar Enter .

Tendrás que seguir los siguientes pasos:

Paso 1: Primero, presiona Enter para crear un

nuevo espacio.

Paso 2: Luego, haz clic en el ícono de Lista ordenada. Verás cómo el símbolo fue

reemplazado por un número.

Paso 3: Para finalizar, le das clic en el ícono de Anular sangría de texto

(ubicada en elInspector de propiedades). Como resultado, regresarás a la lista de origen.

Retornar a una lista


22/92

5

,

Para continuar escribiendo párrafos sin numeración, dar Enter y luego hacer clic en el icono

Anular sangría de texto. Recuerda que puedes aplicar la regla CSS cuerpo al nuevo texto

ingresado.

Aplicación 1.7.: Crear una página web campamento.html; que va brindar consejos

sobre cómo prepararse para ir a un día de campo.

Aplicación 1.8.: Selecciona uno de los elemento de la lista que creaste y ubica en el

inspector de propiedades el botón “Elemento de lista” (opción HTML) explora sus

opciones y modifica el formato de la lista.

¿De este primer módulo qué tema es el que más te intereso?

¿Qué tema te pareció más sencillo y cual más complejo?

¿Te resultó sencillo realizar las aplicaciones?

Aplica lo aprendido

Investiga ¿Por qué el programa te da a escoger “familias de

fuentes” en vez de “fuentes individuales”?

Reflexiona


23/92

1



Capítulo II: Configuración inicial

Tema: Configurando nuestro sitio web


Configura la web donde trabajará.

Organiza la información en subcarpetas

Edita su propio sitio.

¿Has observado páginas web con diferentes enlaces, diferentes páginas, imágenes, texto?

¿Sabes dónde está alojada toda la información que contienen estas páginas Web?

Creando un

nuevo sitio

Creando sub

carpetas en un

nuevo sitio

Edición de un

sitio



Mapa de Contenidos


24/92

2

Al crear el boletín escolar, no realizaste ninguna configuración, pues el documento que creaste

era una página aislada. Ahora será diferente, pues crearás una web con varias páginas y

elementos multimedia enlazados. En la configuración, elegirás el lugar donde guardarás todos

los documentos, las imágenes, archivos, fotos, audios, etcétera que usarás en tu página.

Para que aprendas a configurar la web en donde trabajarás, sigue los siguientes pasos:

Paso 1: Ingresa a Dreamweaver la ventana de bienvenida, ubica el menú de Crear nuevo yescoge la opción Sitio de Dreamweaver .

Paso 2: Se abre una ventana, en la cual debes colocar un nombre a tu sitio, en este caso le

llamarás Naturaleza y la carpeta la guardarás en el Escritorio con el mismo nombre.


Creando un nuevo sitio


25/92

3

Por ahora solo ingresarás los datos en la opción Sitio como se

indica arriba, pero existen otras opciones más para configurar

como: Servidor , en caso de que se trabajará la página web en otra

PC, la opción Control de versión que se utilizaría cuando se

están realizando modificaciones a un sitio web existente y laopción Configuración Avanzada que permite personalizar más el

site.

Las carpetas serán útiles para organizar la información, realiza lo siguiente:

Paso 1: En el panel Archivos, le das clic derecho a la carpeta Sitio-Naturaleza y selecciona

Nueva carpeta.

Paso 2: A esta nueva subcarpeta creada la denominarás imágenes:

Creando subcarpetas en tu nuevo sitio

Recuerda

Cuando nombres las carpetas o

archivos que subirás a Internet

no debes utilizar tildes ni

espacios.

Paso 3: Luego, selecciona la primera opción

Guardar y se mostrará la carpeta del nuevo site

en el Panel de Archivos.


26/92

4

Realiza el mismo procedimiento para crear las carpetas fotos y multimedia.

.

Paso 1: Dirígete a la barra de aplicaciones y

busca el menú Sitio, ahí selecciona Administrar

sitios.

Paso 2: Se abrirá una nueva ventana donde encontrarás una lista de los sitios web creados y

en la parte inferior las opciones para: eliminar, editar y crear.

Edición de tu sitio

Si deseas editar tu sitio porque ya tienes un host ing (donde subir tus archivos en la web),

actualizar los datos o quieres modificar algo, solo debes seguir estos pasos.

Eliminar

Editar Duplicar

Exportar

GLOSARIOHosting: es el alojamiento

web para almacenar

información, imágenes,

videos o cualquier contenido.


27/92

5

Aplicación 2.1: Utiliza el sitio web Naturaleza y crea una página web incio.htmldonde explicaras porque es importante cuidar la naturaleza y que debemos hacer

para ello.

Aplicación 2.2. Crea el site historia, guárdalo en una carpeta con el mismo nombre

dentro de tu carpeta de trabajo DREAMWEAVER. Utilizando el Panel de Archivos

agrega la carpeta “imagenes” (sin tilde)

Aplica lo aprendido


28/92

1



Capítulo II:

Configuración inicial

Tema: Plantillas


Crear páginas a partir de plantillas.

Modifica el contenido de las plantillas.

Inserta imágenes en las plantillas.

¿Sabes lo que es una plantilla?

¿Has utilizado alguna vez una plantilla al elaborar algún trabajo o tarea?

Crear un documento a partir

de la plantillaEditar texto de plantilla



Mapa de Contenidos


29/92

2

En el sitio web historia, se va crear la página culturas.html pero a partir de una plantilla.

Sigue los pasos que te presentamos a continuación:

Paso 1: Luego de crear el sitio web, ve a la barra de

aplicaciones y en Archivo selecciona Nuevo.

Paso 2: Verás emerger la ventana Nuevo documento. En la sección de Página en blanco,

selecciona Plantilla HTML. Luego, en Diseño la segunda opción.

Paso 3: Da clic en Crear y se mostrará el espacio de trabajo con la plantilla cargada.


Crear un documento a partir de una plantilla

Ejemplo

Descripción y

detalles del

diseño

Subtítulo

Cuerpo

Título


30/92

3

Observa el inspector de propiedades, encontrarás que ya hay

reglas CSS definidas para cada sección de la página.

Colócate en el área de trabajo y realiza la modificación del contenido, utiliza el contenido del

archivo culturas.txt que puedes descargar de la plataforma.

Utiliza el inspector de propiedades para colocar la regla CSS que corresponda a cada parte.

En esta plantilla se incluye una imagen, que ya tiene definido un tamaño predeterminado.

Descarga la imagen culturas.jpg de la plataforma y guárdala en la carpeta “imágenes” que

creaste en el site.

Editar texto de plantilla

Insertar imagen de plantilla

Encabezado 1

Encabezado 2

Encabezado 3


31/92

4

Esta imagen tiene las medidas y tamaño necesario para que la puedas utilizar con la plantilla.

Es muy importante que la imagen se adapte al sitio web que estamos diseñando, esto se

explicará con más detalle en otra ficha del curso.

Paso 1: Selecciona la zona donde va la imagen y luego da clic en el ícono de imagen del panel

Insertar

Paso 2: Ubica el archivo culturas.jpg en la carpeta imagen de tu sitio web.

Paso 3: En la siguiente ventana, no

coloques ningún dato y da clic en

Aceptar. Luego la imagen se debe

ubicar en la zona seleccionada.


32/92

5

Aplicación 2.3.: Elabora una página sobre la cultura Nazca en el web site historia.

Debes crea el archivo nazca.html usando una de las plantillas y la imagen

nazca.png que debes descargar de la plataforma y copiarla en la carpeta

“imágenes” del web site.

Aplicación 2.4.: En el mismo web site historia crea la página Incas.html. Para

crearla, utiliza una plantilla HTML.

Aplica lo aprendido

http://colegios.pucp.edu.pe/colegios/draftfile.php/327/user/draft/799248277/nazca.pnghttp://colegios.pucp.edu.pe/colegios/draftfile.php/327/user/draft/799248277/nazca.png


33/92

1



Capítulo II:

Configuración inicial

Tema: Marcos


Realizar creaciones haciendo uso de marcos.

Editar los marcos que necesite

Guarda los marcos realizados.

Comenta con tus compañeros ¿cuántos marcos crees que se hayan utilizado en esta página?



Referencia: www.ubunturoot.wordpress.com


34/92

2

Los marcos sirven para distribuir la web eficazmente y su funcionalidad se da principalmente

en páginas donde hay elementos repetitivos como menús, títulos o banners.

Vamos a trabajar una web sobre el “Efecto invernadero”. Realiza lo siguiente:

Paso 1: Crea primero un web site “medioambiente” y

guárdalo en una carpeta del mismo nombre.

MARCOS

Crear marcos Editando marcos Guardar marcos

Mapa de Contenidos


Crear marcos

GLOSARIO

Marcos: son áreas

rectangulares,

independientes, que en su

conjunto forman una web.


35/92

3

Paso 2: Ingresa a la aplicación y crea un nuevodocumento HTML.

Paso 3: Dirígete a la barra de aplicaciones y selecciona el menú Insertar , luego la opción

HTML y luego Marcos.

Paso 4: Se mostrará un menú con opciones, a modo de

ejemplo escoge: izquierdo anidado inferior.

Paso 5: Cada marco debe tener un título con el cual el programa lo relaciona e independiza de

los otros espacios, por ello, en la nueva ventana Atributos de accesibilidad de la etiqueta de

marco, selecciona el bottomFrame y lo denominarás temas.

Repite el paso 4 con los otros dos marcos: leftframe

(título) y mainframe (contenido). Terminado lo

anterior, haz clic en Aceptar. El resultado será:


36/92

4

Paso 1: En el menú ventana, selecciona la opción Marcos y se

abrirá un panel que mostrará la distribución de los marcos de la

página.

Paso 2: Selecciona con el mouse el marco título y modifica las propiedades del marco en el

Inspector de propiedades

Paso 3: Para modificar el ancho de las columnas de los marcos, selecciona todos los marcos

en el panel de marcos y utiliza el inspector de propiedades. Modifica el ancho de la primera

columna a 150 pixeles.

Ahora que ya tenemos la estructura, ingresa los textos correspondientes al efecto invernadero,

que puedes descargar de la plataforma e ingrésalos en los marcos tal como se muestra en la

imagen.

Editando marcos

Definir tamaño Elegir columna

También puedes cambiar el ancho o alto de los macros

al hacer clic en las líneas y arrastrar con el cursor hasta

la medida deseada, para que tu texto se pueda ver conclaridad.

Arrastrar


37/92

5

Cada marco se guarda en una página independiente y el conjunto de marcos en otra página.

Realiza lo siguiente:

Paso 1: en el menú Archivo encontraras varias opciones, coloca el cursor en el marco con el

título y da clic en la opción Guardar marco como.

De la misma forma guarda los otros marcos con sus respectivos

nombres tema.html y contenido.html. Para guardar la página que

contiene los marcos utiliza la opción Guardar todo y guárdalo como

efectoinv.html

Guardar marcos

titulo.html


38/92

6

Aplicación 2.5.: Agrega un fondo de página a algunos de los marcos y reglas deestilo para los textos de la página efectoinv.html. Recuerda que cada marco hace

referencia a una página web diferente.

Aplicación 2.6.: Utilizando marcos crea la página cambioclima.html, dentro del

mismo web site medioambiente. La página debe contener información sobre el

cambio climático, investiga sobre el tema en internet.

¿Al hablar de plantillas y marcos, con qué otros programas los relacionaste?

¿Qué tema te pareció más sencillo y cuál más difícil de comprender?

Aplica lo aprendido

Investiga sobre la ergonomía digital y por qué es necesario cierto

orden en las páginas web

Reflexiona


39/92

1



Capítulo III:

Tablas y multimedia

Tema: Crear tablas


Crea tablas, modificando su estilo y el alto y ancho de las celdas.

Cuéntale a tus compañeros ¿cuáles son las utilidades que les das a las tablas? ¿Para qué es

lo que más las utilizas?

Creando una tabla

Creando una tabla

dentro de otra

Modificando el alto

y ancho de celdas



Mapa de Contenidos


40/92

2

Crea el web site Noticias con una carpeta “imagen”, en esta ficha se va elaborar la páginainicio.html. Observa la estructura de la tabla que necesitas crear:

Sigue cada uno de los pasos:

Paso 1: Abre Dreamweaver y crea un nuevo HTML y

guárdalo como reciclaje.html

Paso 2: Dirígete al panel Insertar y haz clic enTabla y Emergerá una ventana llamada Tabla, en

donde establecerás los parámetros básicos para su

construcción.

Paso 3: considera los siguientes datos y luego da clic en aceptar.


Creando un tabla

Filas: 2

Columnas: 1

Ancho de tabla: 800 píxeles

Grosor del borde: 5 píxeles

Relleno de celda: 0

Espacio entre celdas: 5

Encabezado: Ninguno


41/92

3

Paso 4: Obtendrás una tabla con dos filas y una sola columna. La primera fila estará destinada

para el menú de la web y la segunda fila para el contenido.

Paso5: Para que la tabla se vea centrada en la pantalla, primero selecciónala, luego, dirígete al

Inspector de propiedades y en Alinear, elige Centro.

En la primera fila de la tabla que creaste, se quiere colocar una tabla con una fila y 7 columnas.

Paso 1: El menú de tu web tendrá 6 partes, pero construirás una tabla con 7

columnas porque dejarás una para el título de la web. Coloca el cursor en la

celda superior y da clic en el ícono tabla.

Paso 2: Define 1 columna y 7 filas, observa la imagen. Luego da clic en Aceptar.

Creando un tabla dentro de otra


42/92

4

Paso 1: Para modificar el ancho de la primera columna de la nueva

tabla, debes hacer clic en una celda (aparecerá el cursor dentro deella).

Paso 2: Luego, debes ir al Inspector de propiedades para variar el ancho y presionas Enter.

El resultado es el siguiente:

Otra forma de realizar modificaciones

Observa que ahora al dar clic en la celda modificada se mostrará el número 200 junto a un

indicador, en las demás celdas solo se muestra el indicador.

Estos indicadores nos permiten realizar modificaciones. Realiza lo siguiente:

Paso 1: Da clic en el indicador de que

quieres editar, verás que emerge un

pequeño menú con varias opciones que te

serán útiles más adelante. Puedes elegirSeleccionar columna.

Modificando el ancho y alto de celdas

Al modificar de esta manera una celda, las

restantes que se encuentran dentro de la

misma fila, se modificarán de manera

porcentual: las otras seis celdas mantendrán

una medida común entre ellas.


43/92

5

Paso 2: Ahora en el inspector de propiedades, edita la altura

Observa que al modificar la altura de la celda seleccionada, también se modificó la altura de

todas las otras celdas de la fila.

Crea una copia con el nombre de esquema.html y verifica tu avance en el navegador, presiona

F12 o el ícono del mundo en la Barra de Documento.

Solo verás los bordes de la tabla principal porque a la tabla secundaria (o interior) no se le

asignó ninguna cantidad de borde.

Aplicación 3.1: En la segunda fila de la tabla principal de la página inicio.html, crea

una nueva tabla.Aplicación 3.2: Dentro del mismo web site Noticias, crea la página web

deportes.html, utilizando como referencia la página esquema.html.

Aplica lo aprendido


44/92

1



Capítulo III:

Tablas y multimedia

Tema: Ingresar contenidos en una tabla


Utiliza tablas, agregando texto e imagen.

Aplicación 3.3: modifica la tabla.

Tablas

Agregando

texto

Agregando

una imagen



Mapa de Contenidos


45/92

2

En esta ficha trabajaremos el texto de la página inicio.html del web site Noticias.

Paso 1: Da clic en la celda donde ingresarás el texto, en la primera celda de la primera fila (la

que mide 200 píxeles de ancho).

Paso 2: Ingresa el siguiente texto:

Paso 3: Edita el texto creando y aplicando reglas CSS.

Obtendrás el siguiente resultado:

Si ya has realizado la Actividad 3.3 puedes continuar con el siguiente paso:


Agregando texto

1. Crea una nueva regla CSS para ambos textos:

“Blog de Noticias Escolares”

(subtítulo1)

“Noticias al día” (título1)

2. Para subtítulo1:

Font: Palatino

Font style: italic

Font weight: bold

3. Para título1:

Font: Verdana

Font size: 14

Font weight: bold

Para obtener menor

espaciado, utiliza las

teclas: Enter +Shift .


46/92

3

Paso 4: Luego de editar la cabecera, ahora debes ingresar texto a la parte del contenido. Haz

clic en la segunda celda de la segunda fila.

Paso 5: Ingresa el siguiente texto:

Paso 6: Edita ahora el contenido del “cuerpo” para lo cual crearás una regla con las siguientes

características:

1. El saludo cámbialo a Encabezado 2.

2. Para el “cuerpo”, creas una regla CSS con el mismo nombre:

Font: Trebuchet MS

Font size: 12

Text align: justify

Luego, aplica la regla al texto escogido. Para ello, selecciona el texto y en Inspector de

propiedades, dirígete a la opción Clase y escoge la regla correspondiente.

El resultado debe ser el siguiente:

cuerpo

Observa cómo la celda se

acomoda (en altura) a la

cantidad de información que

ingresas


47/92

4


Paso1: Crea una carpeta “imagen” dentro del web site Noticias y luego descarga la imagen

noticias.jpg de la plataforma y guárdala en esa carpeta:

Paso 3: Elige el archivo noticias.jpg de la carpeta imagen, luego clic en Aceptar, y en la

siguiente ventana no coloques ningún atributo y da clic en Aceptar.

Antes de ver tu avance en el navegador, no te olvides de colocar el nombre a la página.

Dirígete al espacio de título (ubicado en la barra Documento) y denomínalo: Noticias al día -

Inicio:

Agregando una imagen

Recuerda que la carpeta

Noticias se encuentra

ubicada dentro de tu carpeta

de trabajo DREAMWEAVER

Paso 2: Selecciona la primera celda de la segunda fila y da

clic en la opción imagen del panel Insertar:


48/92

5

Presiona F12, selecciona Guardar y observa tus avances en el navegador. De esta manera,

obtendrás el siguiente resultado.

Aplicación 3.4: En la página deportes.html del web site noticias coloca información

de las actividades deportivas que realiza tu colegio, utiliza fotos o imágenes

Aplica lo aprendido

GLOSARIO

Navegador: es un software que

permite el acceso a Internet,

interpretando la información de

archivos y sitios web para que

éstos puedan ser leídos.


49/92

1



Capítulo III:

Tablas y multimedia

Tema: Editar propiedades de una tabla


Editar las propiedades de una tabla.

Observa la siguiente tabla ¿Qué opciones crees que se han aplicado?

Tablas

Agregar o

eliminar filas y

columnas

Insertar

columna Insertar fila

Unir o dividir

celdas

Color de fondo

de la tabla



Mapa de Contenidos


50/92

2

Continuando con el trabajo en la página de inicio.html del web site Noticias, agregaremos una

columna de ancho diminuto que servirá de margen entre el texto y el borde de la tabla.

Insertar columna


Paso 1: Seleccionar la celda de

referencia dar clic derecho para que se

muestre un menú con opciones donde

debes elegir Tabla

Paso 2: al dar clic en la opción Tablase mostrarán otras opciones entre ellas

e insertar/eliminar filas o columnas,

elige insertar columna.

Con este método por defecto se inserta una columna a la izquierda de la celda de igual

tamaño.

Otra forma de realizar lo mismo es seleccionando el indicador verde de la columna de

referencia y ubicar la opción Insertar columna a la derecha.


Agregar o eliminar filas y columnas


51/92

3

Siguiendo el mismo procedimiento, inserta una columna al lado derecho del cuerpo de la web

Insertar fila

Para insertar una fila inferior en la tabla. Debes hacerlo desde el menú Insertar .

Para ello coloca el cursor en una celda de la última fila, luego del menú Insertar selecciona la

opción Objetos de tabla y lego Insertar fila inferior.

Resultando:

Otra herramienta es la que permite la unión de una o más celdas.

Paso 3: cambia el ancho de la nueva columna a 5 píxeles . Guarda los

cambios realizado y con F12 observa que ahora hay un espacio “en blanco”

entre la línea de la tabla y tu texto

Unir o dividir celdas

GLOSARIOPíxeles: son los puntos de

color.


52/92

4

Paso 1: Selecciona la última fila de la tabla, para unir las dos celdas.

Paso2: da clic derecho y elige la opción Tabla y luego Combinar celdas

El resultado:

De esta misma forma también puedes acceder a la opción dividir celda.

Si no se define el color de la tabla, es transparente y refleja el color que está debajo. Para

modificar el color de la tabla interior que se creó dentro de la primera fila (menú de la web),

realiza lo siguiente:

Paso 1: Selecciona la tabla, para ello colócate en una de sus celdas y con clic derecho elige

las opciones:

Paso 2: En el Inspector de

propiedades, crea una nueva regla

CSS a la que la denominarás

colortabla.

Color de fondo de la tabla


53/92

5

Paso 3: En la nueva ventana, dentro de la categoría Fondo, haz clic en la opción

Background-color y escoge un color de fondo para la tabla y das clic en Aceptar .

Paso 4: Luego con la tabla seleccionada (de acuerdo a como has aprendido), dirígete al

Inspector de propiedades y, en la opción Clase, elige colortabla:

Ahora de forma similar crea dos regla CSS más, la primera para la tabla de 800 pixeles

nómbrala colorfondotabla (usa blanco) y para la segunda colorpiepagina (usa plomo) y

aplícala solo a la última fila.

Finalmente el resultado será:


54/92

6

Aplicación 3.5: entro del mismo web site Noticias, crea la página web

calendario.html, utilizando como referencia la página esquema.html.

Aplicación 3.6: En el web site medioambiente, crea la página contenido3.html y

crea una tabla (principal) de con las siguientes características:

Aplica lo aprendido


55/92

1



Capítulo III:

Tablas y multimedia

Tema: Opciones de configuración de fotos e imágenes


Inserta imágenes, brindándoles la apariencia deseada.

Aplicación 3.8: Coloca en orden cómo es que realizas una tabla en este programa.

Imágenes

Imagen de

sustitución

Imágenes

de fondo

Modificar

imagen

Cambiar el

tamañoBorde Alinear



Mapa de Contenidos


56/92

2

Ya conoces los pasos para insertar una imagen, en esta ficha aprenderás a definir un efecto

básico con imágenes y también a realizar algunas modificaciones en ellas.

Para iniciar, descarga la imagen: colegio.jpg y temas.jpg y guárdalas en la carpeta imagen

dentro de la carpeta Noticias.

Podemos configurar un efecto básico: tener dos imágenes que se cambien automáticamenteal pasar el cursor del mouse por encima. Esto sirve para aumentar el impacto visual de tu blog

y se vea más profesional.

Abre la página inicio.html del web site Noticias.

Paso 1: Elimina la imagen que se encuentra en la segunda fila

seleccionando y presionando la tecla delete.

Paso 2: Con el cursor ubicado en la celda donde se encontraba la

imagen. Dirígete al panel Insertar e ingresa al menú de opciones

para insertar imágenes, pero da clic en la flecha que está al

costado del ícono de imagen.

Paso 3: Al dar clic en la flecha se mostraran varios opciones, selecciona la opción Imagen de

sustitución.

Paso 4: Se abrirá una ventana donde debes escoger las dos imágenes involucradas (búscalas

en la carpeta imagen), después da clic en Aceptar .


Imágenes de sustitución


57/92

3

Paso 5: En la ventana Documento solo se verá la primera imagen. Para corroborar que el

efecto esté bien programado, aprieta F12, graba y verifica en el navegador.

Para utilizar una imagen de fondo en tu web, debes considerar la estética y evitar saturar de

colores la página, aunque ello finalmente depende de la temática de esta. Realiza lo siguiente:

Paso 1: Continúa trabajando con el documento inicio.html. Haz clic en cualquier espacio fuerade la tabla.

Paso 2: Dirígete al Inspector de propiedades y en las opciones CSS, dale clic a Propiedades

de la página.

Imágenes de fondo

GLOSARIO

Blog: es un sitio web en el

que varios autores o uno

publican artículos de interés.


58/92

4

Paso 3: En la categoría

Apariencia, dirígete a Imagende fondo y busca la imagen

correspondiente. En la opción

Repetir, escoge Repeat . De

esta forma sin importar su

tamaño, la imagen se repetirá

hasta llenar todo el fondo

definido.

Observa cómo la imagen de fondo ha sido

insertada.

Paso 4: Luego, dirígete al Inspector de propiedades, CSS, donde se ha creado una regla

llamada body , selecciónala y dale clic a Editar regla.

Paso 5: En la nueva ventana, busca la categoría Fondo y completa las siguientes opciones. Al

final le das clic en Aceptar . Esto te servirá para mantener el orden centrado en todas las

resoluciones de pantalla.


59/92

5

Paso 6: Presiona F12 y guarda. Revisa el resultado

final.

Al seleccionar la imagen, se puede observar en el Inspector de propiedades, las distintas

opciones que podemos configurar entre ellas editar, definir tamaño, aplicar estilos CSS.

Edición

Las opciones de edición permiten hacer modificaciones a las fotografías o imágenes que

utilicemos. Se pueden hacer modificaciones básicas sin utilizar otra aplicación o si se prefiere

también nos da la opción de realizar modificaciones avanzadas usando un editor fotográfico

que se encuentre instalado en nuestra computadora.

Cambiar el tamaño

Para modificar el tamaño de una imagen realiza lo siguiente:

Paso 1: Para modificar el tamaño de una imagen, sin alterar sus

proporciones, damos clic al candado para que se cierre y así se

mantenga la relación entre el ancho y el alto.

Paso 2: Podemos digitar manualmente una de las medidas y la otra se acomodará para

mantener la proporción o desde el borde de la imagen se le puede estirar o encoger.

Modificar imagen

Abre la imagen en un

editor como Photoshop

Editar configuración. Aumentar o

disminuir calidad (tamaño)

Recortar

Volver a

muestrear

Brillo y

contraste

Perfilado

(acentúa bordes)


60/92

6

Borde

Para colocar un borde a la imagen, podemos definir una regla CSS. Para crea una regla CSS,

nómbrala imagen. Luego aplica la regla creada usando el Inspector de propiedades.

Alinear

Si queremos que la imagen quede centrada en la celda, debemos crear una regla CSS para

alinear al centro los objetos que esta contenga. Para ello crea la regla CSS centrarobj y en la

opción Bloque define la propiedad Text-align en center. Luego selecciona la celda que

contiene la imagen y aplica la regla CSS.

Encoger


61/92

7

Presiona F12 y guarda. Observa que todos los

cambios que se han realizado a la imagen que se

muestra en la opción de Diseño de Dreamweaver,

también se han aplicado a la imagen de sustitución

que se definió.

Aplicación 3.7: Ordenar los pasos para realizar una tabla con el programa.

Aplicación 3.8: En el web site Naturaleza, crea la página reciclaje.html.

Aplica lo aprendido


62/92


63/92

2

Colocar vídeos o música en Dreamweaver demanda que tengamos nociones básicas de

lenguaje html, de tal manera que, por lo menos, podamos reconocerlo.

Los diversos reproductores de multimedia (para vídeos, música, etcétera) en línea (You Tube,

Vímeo, Google Vídeo, Grooveshark, etcétera), permiten enlazar el contenido que ofrecen a

nuestra propia web por medio del código embebido (embed code), que es código html cuya

estructura posee ciertas directivas.

Preparando la página para vídeos

Ingresa al web site Noticias y crea un nuevo documento HTML al que llamarás videos.html.Utiliza el esquema básico que creaste en la ficha 8 (esquema.html).


Paso 1: Ubica el cursor en la zona de

contenido (la celda más grande de todas), da

medio espacio (Shift +Enter ) e inserta el texto.


Código embebido

Cómo insertar un vídeo en una web

GLOSARIO

Embeber: significa insertar o

incrustar un código de un

lenguaje dentro de otro

lenguaje


64/92

3

Paso 2: Selecciona lo ingresado y para

editar este texto no utilizarás reglas

CSS, simplemente en Regla de destino

selecciona la opción Nuevo estilo de

línea.

Paso 3: Vas a editar el texto en el Inspector de

propiedades, usando las secciones HTML y CSS,

según sea necesario. Para ello, ten en cuenta las

siguientes características:

Lucida Console

Color: #F00

Encabezado 2

Sangría de texto (unespacio)

Paso 4: Presiona Enter e inserta

una tabla de:

5 filas x 1 columna

ancho de 760 píxeles

centrado

Paso 5: En la primera y quinta fila, ingresa el siguiente texto y crea las reglas CSS para darles

formato.

1. Regla CSS para el título

Nombre: “.titulo2” (sin comillas), Palatino,

Bold, Font size: 14, Italic, Underline, Text

align: center.

2. Regla CSS para el cuerpo

Nombre: “.cuerpo2”, Trebuchet MS, Font

size: 12, Text align: justify

TITULO

CUERPO


65/92

4

Paso 6: Selecciona la 2ª y 4ª fila para medir su altura en 5 píxeles.

Insertando el código de vídeos

Ahora insertarás un vídeo en tu web, para ello, sigue los 10 pasos que te presentamos a

continuación. En este caso, utilizaremos uno de Youtube como ejemplo.

Paso 1: Abre una pestaña en cualquier navegador e ingresa esta URL:

http://www.youtube.com/watch?v=dao0LipHBSE#t=14

Paso 2: Busca y haz clic en la opción Compartir donde aparecerán nuevas opciones. Haz clic

en Insertar y podrás ver el código embebido. Verifica que este marcada la opción Usar el

antiguo código de inserción. Selecciona y copia el código HTML que está en azul, puedes

elegir entre diferentes tamaños del reproductor o personalizar el tamaño. Recuerda elegir

siempre un tamaño adecuado, menor (en ancho y alto) a la tabla donde colocarás el vídeo.

Paso 3: Luego, regresa a Dreamweaver y haz clic en la 3ª celda de la tabla para posicionar el

cursor.

Código

embebido

Tamaño

http://www.youtube.com/watch?v=dao0LipHBSE#t=14http://www.youtube.com/watch?v=dao0LipHBSE#t=14http://www.youtube.com/watch?v=dao0LipHBSE#t=14


66/92

5

Paso 4: Ahora, selecciona la opción de Dividir .

Paso 5: La ventana Documento se dividirá en dos: la parte inferior con el diseño de tu web y la

parte superior con el código HTML. Observa cómo el cursor se posiciona sobre un determinadolugar en la ventana de código, que es exactamente el mismo lugar que aparece en la ventana

de diseño.

Paso 6: Dirígete hacia donde apareció el cursor en la ventana de HTML, antes de &nbsp, y

borra todo ese código y luego, pega el código copiado de Youtube.

Paso 7: Para que el video pueda ser visto desde una computadora de forma local, debes

ubicar y modificar los siguientes textos:

Paso 8: Regresa al modo Diseño y observa un espacio

plomo que es el vídeo, solo que no se puede visualizar enDreamweaver.

value="//www.youtube.com

src="//www.youtube.com/

value="http://www.youtube.com

src=" http://www.youtube.com/

Modificar por

Borrar


67/92

6

Para finalizar agrégale a tu trabajo un título a la página y una imagen de fondo, luego presiona

F12, guarda y comprueba si se puede ver en el navegador. El resultado final debería ser como

se muestra en la imagen.

Recuerda que trabajar con el código es muy delicado, por lo que no debes borrar ni agregar

nada más allá de lo especificado aquí porque podrías desconfigurar toda tu página.

Aplicación 3.9: En el sitio web Noticias, inserta dos videos más en la página

video.html, para ello debes agregar más filas a la tabla, para que coloques el título,

el enlace al video y una pequeña descripción por cada video, tal como el ejemplo

explicado en esta ficha.

Aplicación 3.10: En el sitio web Naturaleza, crea un página web videosnat.html

incluye en ella dos videos que estén relacionados a lo importante que es el cuidado

de la naturaleza. Utiliza tablas, estilos CSS y todo lo que has aprendido para darle

una estructura ordenada y un diseño atractivo a tu página

Aplica lo aprendido


68/92

1


Curso: Creación de páginas Web con Adobe Dreamweaver.

Capítulo III: Tablas y multimedia

Tema: Insertando música de la web


Inserta música de la web en sus diseños.

¿Cuál es el estilo de música que te gusta? ¿Sueles escucharla de alguna dirección en la web?

Comparte tus respuestas con tus compañeros.

Insertando música

en la web

¿Cómo insertar

música en la web?

Insertando el

código de música



Mapa de Contenidos


69/92

2

Preparando la página para música

Paso 1: Crea un nuevo documento HTML al que denominarás musica.html. Utiliza el mismo

esquema básico esquema.html

Paso 2: Coloca como título “Música recomendada”, edita el texto con el Inspector de

propiedades, con las mismas características de “Vídeos de la semana”.

Paso 3: Agrega un espacio con Enter e inserta una tabla, con las siguientes características:

7 filas x 2 columnas

700 píxeles de ancho

Alineado al centro

Paso 4: En la primera fila inserta una foto, pero siobservas bien, hay dos celdas en vez de una. Para

ello, selecciona las dos celdas de la primera fila y

dirígete al Inspector de propiedades y allí escoge

Combinar celdas.

Paso 5: De esta manera ya tienes la celda lista, entonces, descarga de la plataforma el archivo

“music.jpg”, ubícalo en la carpeta de imagen. Luego inserta la imagen.


Cómo insertar música en una web


70/92

3

Paso 6: Une también la tercera fila (de acuerdo a cómo te hemos explicado en el paso4) y

escribe los textos que se muestran en la imagen.

Insertando el código de música

Usaremos básicamente los mismos pasos que cuando insertamos un código de vídeo, solo queesta vez, te enseñaremos a colocar música de Grooveschark.

Paso 1: Ingresa a http://www.grooveshark.com y busca las siguientes canciones:

Muse, Starlight

Juanes, Un día normal

Paso 2: Elige el ícono Compartir canción y se mostrará una ventana donde debes escoger la

opción Incrustar y copiar el código embebido.

Código

embebido

http://www.grooveshark.com/http://www.grooveshark.com/http://www.grooveshark.com/http://www.grooveshark.com/


71/92

4

Paso 3: Regresa a Dreamweaver y utiliza la opción Dividir para poder ver el Diseño y el código

html a la vez. Luego selecciona la celda correspondiente y en la ventana código inserta el

código embebido.

Paso 4: Presiona F12 y guarda. Verifica si el resultado es igual al que observas en la imagen.

Con el código html, no solo puedes agregar vídeos y música, sino también muchas otras cosas

más, como tu gadget de Facebook, tus tweets, entre otros.


72/92

5

Aplicación 3.11: Inserta dos canciones más en la web música.html

Aplicación 3.12: Agregar una música de fondo a la página reciclaje.html

¿Crees que el colocar algún imágenes, audios y videos haces más llamativa la

presentación? ¿Por qué? ¿Cómo lo prefieres tú?

Aplica lo aprendido

Reflexiona

¿Qué tipo de archivos puedes embeber en el programa?


73/92

1



Capítulo IV: Hipervínculos

Tema: Hipervínculos conceptos y como insertarlos a un texto


Inserta hipervínculos internos y externos a un texto

Aplicación 4.1.: Indica cuáles de los siguientes enunciados son verdaderos.

Hipervínculos

Tipos

Hipervínculos en un texto

Insertando hipervínculos internos en

un texto

Insertando hipervínculos externos en un

texto



Mapa de Contenidos


74/92

2

Sirven para:

Hacer referencia a un punto específico diferente al que el usuario se encuentra, dentro

de la misma web o hacia un enlace externo.

Ver el enlace de correo y enviarlo rápidamente

Para el caso que se te presenta en este manual, los hipervínculos tendrán dos funciones:

Interna: enlazar las diferentes páginas que conforman tu web (menú).

Externa: hacer referencias a otras webs de dónde has sacado información o están

relacionadas al tema.

Tipos de hipervínculos

Básicamente hay tres tipos: Enlaces a páginas web, Enlaces para enviar correos electrónicos

y Enlaces a PDF o contenidos descargables

Crea un nuevo documento HTML al que llamarás data_enero.html, que debes incluir en el

web site Noticias, básate en la página esquema.html.


Hipervínculos

Hipervínculos en un texto

GLOSARIO

Hipervínculos: Son conocidos también como

“vínculos”, “enlaces” o “links”. Son usados

en varios tipos de documentos electrónicos:Excel, Word, Power Point, páginas web,

etcétera.


75/92


76/92

4

Paso 1: Abre en Dreamweaver el documento data_enero.html y luego selecciona el texto

“febrero” y dirígete al Inspector de propiedades. En la sección HTML, haz clic en el ícono de

carpeta de la opción Vínculo.

Luego, selecciona el documento data_febrero.html. Obtendrás el

siguiente resultado:

Paso 2: Luego, regresa y selecciona el texto “febrero”, para editar aspectos básicos. Dirígete al

Inspector de propiedades y en la opción Destino, escoge self (recomendado para vínculos

internos).

Ten en cuenta lo siguiente:

_blank: Para que el enlace abra una nueva ventana del navegador.

_self: Para que el enlace se abra en la misma pestaña o ventana del navegador.

Paso 3: Crea los enlaces para los demás meses siguiendo los mismos pasos aprendidos hasta

el momento. También inserta enlaces a los demás meses de cada documento. Luego regresa

al documento data_enero.html y deberás tener lo siguiente:


77/92

5

Paso 4: Para ediciones de formato y color para los

vínculos, debes ir a Propiedades de la página (en el

Inspector de propiedades).

Paso 5: En la nueva ventana, dirígete a la sección Vínculos (CSS) y realiza los cambios

correspondientes. Te recomendamos no modificar ni la fuente ni el tamaño porque estos

cambios afectarán a todos los hipervínculos del documento, no solo de lo seleccionado. Edita

la siguiente información:

Paso 6: Ahora realiza las ediciones a todos los documentos creados por cada mes.

Paso 7: Guarda todo y comienza con la prueba. Abre el documento data_enero.html.

Comprueba que funcionen todos los hipervínculos. Viaja de una página a otra; el título de lapágina en la pestaña del navegador te confirmará qué mes estás viendo sin ningún problema.

Insertando hipervínculos externos en un texto

Realiza lo siguiente para crear hipervínculos externos:

Paso 1: Abre nuevamente el documento data_enero.html. Coloca el cursor en el espacio

vacío, encima de la tabla donde están los meses. Crea una tabla con las siguientes

características: 1 fila x 2 columnas, 780 píxeles, centrada

Luego, selecciona la celda de la izquierda de la nueva tabla y le das el ancho de 300 píxeles.

color de vínculo:

#00F

vínculos visitados:

#666 estilo de subrayado:

“siempre subrayar”

estilo de fuente:

“itálica”


78/92

6

Paso 2: Inserta una imagen en la primera celda de la nueva

tabla. Selecciona la imagen y haz clic en Aceptar . La imagen

seleccionada se ubicará en la celda como observas a

continuación:

Paso 3: Luego, inserta un texto similar, colocando las películas que están por estrenarse.

Paso 4: Crea las reglas CSS para la fecha, título y cuerpo de la entrada.

regla “.fechas”: regla “.titulo2” regla “.cuerpo”

Font: Lucida Sans Unicode Font weight: lighter Font size: 12 Font style: italic Text align: right

Font: Comic Sans MS Font size: 18 Font weight: bold Color: #F90 Text align: right

Font: Verdana Font size: 12 Text align: justify

Paso 5: Inserta una nueva columna entre el texto y la imagen a la que le darás 10 píxeles de

ancho y presiona F12. Obtendrás el siguiente resultado:


79/92

7

Paso 6: Ahora, para insertar el hipervínculo, selecciona el texto que quieras que tenga el

enlace, en este caso es la siguiente dirección electrónica:

Paso 7: Dirígete al Inspector de propiedades y, en la sección HTML, completa el espacio

vacío de Vínculo con la dirección completa de la web a la cual vincularás tu página.

Paso 8: En la opción Destino, selecciona “_blank”:

Paso 9: Ahora prueba tu enlace: presiona F12, guarda y haz clic al hipervínculo en el

navegador. Se debería abrir una nueva ventana con la página deseada.

Aplicación 4.2: En el sitio web Naturaleza, se han creado variaspáginas. Adiciona en la parte superior de cada una de ellas un menú.

Luego crea los hipervínculos correspondientes a cada título en cada

una de las páginas.

Aplica lo aprendido

No olvides llenar la dirección

completa incluyendo http://.


80/92


81/92

2

Pasos previos

Paso 1: En el documento que has trabajado la inserción de hipervínculos internos y externos,

crearás una nueva entrada, es decir, otra tabla.

El cursor se mostrará como en la imagen. Luego, presiona Shift + Enter .

Paso 2: Ahora tienes una nueva fila, en la cual puedes ingresar una nueva tabla con las

características de la anterior: 1 fila x 2 columnas, 780 píxeles, centrada.

Paso 3: Descarga la imagen pucp.jpg de la plataforma, guárdala en la carpeta imagen del web

site Noticias y luego insértala en la celda de la izquierda de la nueva tabla.


Insertando hipervínculo a una imagen


82/92

3

Paso 4: Ingresa un texto y trabaja el contenido con los mismos estilos de la entrada anterior.

Recuerda que solo debes seleccionar el texto, luego dirígete hacia el Inspector depropiedades (en la sección HTML) y en las opciones de clase selecciona la regla que

corresponde al texto elegido.

Paso 5: Antes de insertar el vínculo en la imagen, vincula el texto “PUCP” que se encuentra en

el texto, con la página principal de esta universidad.

Para ello, debes seguir los siguientes pasos y recordar lo aprendido en la ficha anterior:

1. Selecciona el texto que se titula “PUCP”.

2. Inserta el vínculo: “http://www.pucp.edu.pe”.

3. Especifícalo como “_blank”.

Paso 6: Ahora trabajaremos con la imagen, selecciónala y en el Inspector de propiedades

escoge lo siguiente:

vínculo: http://www.pucp.edu.pe

destino: _blank

Paso 7: Presiona F12, guarda y revisa el resultado obtenido, es decir, al hacer clic en la

imagen, debe abrirse otra ventana con la web de la PUCP y de la misma forma debe suceder

con las palabras seleccionadas.

No te olvides de agregar una pequeña columna entre el texto y la imagen, de no más de 10

píxeles de ancho.

http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/http://www.pucp.edu.pe/


83/92

4

Antes de desarrollar la actividad, es importante que sepas que las zonas interact ivas son

creadas sobre todo dentro de una imagen. En la imagen que observas, que ha sido trabajada

con Photoshop (pero que también puedes realizar en Paint u otro programa de diseño), en la

parte inferior derecha, se encuentra la lista del menú principal de la web, eso es lo que

generarás al desarrollar la actividad.

Sigue los pasos que te presentamos a continuación a fin de que realices la actividad.

Paso 1: Ingresa al web site Noticias y abre el documento inicio.html, modifica la foto actual

por la imagen: imagen_inicio.jpg que debes descargar de la plataforma.

Paso 2: Dirígete a la barra Insertar y en las opciones de Imágenes selecciona Dibujar zona

interactiva rectangular .

Insertando un hipervínculo mediante zonas interactivas

Interacción: que permite unainteracción, a modo de un diálogo, entreun ordenador y el usuario.


84/92

5

Paso 3: El cursor se volverá una cruz con la cual debes dibujar el rectángulo donde se

colocará el hipervínculo. Lo dibujas alrededor de la palabra “Inicio”.

Paso 4: Dirígete al Inspector de propiedades ycompleta la siguiente información.

Paso 5: Presiona F12, guarda y verifica que el vínculo funcione en el

navegador. Cuando pases el cursor por encima de la zona trabajada,

aparecerá una mano que confirmará que ese espacio sirve como

hipervínculo.

Sigue el mismo procedimiento para “data” y lo vinculas a data_enero.html, “Video” con

video.html y “música” con música.html.

Aplicación 4.4: En el web site Naturaleza, modifica la página inicio.html para que el

encabezado este centrado y la información este contenida en una tabla, entre el menú y

el primer sub título coloca las filas necesarias para colocar la imagen

arboles_zonas.jpeg. Crea dos zonas interactivas en esa imagen para que enlacen las

páginas videosnat.html y reciclaje.html.

Aplica lo aprendido

Ten en cuenta:

Para editar una zona interactiva, simplemente haz clic en la zona

verde y cambia lo deseado en el Inspector de propiedades.

También puedes modificar el tamaño del rectángulo con tan solo

llevar el cursor a una esquina y modificarlo manualmente.


85/92

1



Capítulo IV: Hipervínculos

Tema: Insertar hipervínculos de correo electrónico y menú principal


Inserta hipervínculos de correo electrónico y menú principal

Observa atentamente el siguiente anuncio:

Centro de Información y Educación

para la Prevención del Abuso de Drogas

Av. Roca y Boloña 271, San Antonio - Miraflores.

Telf.: (+51 1) 446 6682 - 446 7046 - 447 0748

Fax.: (+51 1) 446 0751

[email protected] - www.cedro.org.pe

Imagen tomada de: http://www.cedro.org.pe/cedro/

¿Cómo puedes hacer que al colocar el mouse sobre la dirección electrónica o sobre la

dirección de la URL puedas ingresar directamente a la página? Convérsalo con tus

compañeros



mailto:[email protected]://www.cedro.org.pe/http://www.cedro.org.pe/cedro/http://www.cedro.org.pe/cedro/http://www.cedro.org.pe/mailto:[email protected]


86/92

2

Es casi igual que insertar los anteriores hipervínculos, pues también puede conectarse a untexto o una imagen. Lo único que varía es el código del enlace.

Sigue los siguientes pasos:

Paso 1: Abre el documento inicio.html y selecciona la dirección de correo electrónico

mencionada.

Paso 2: En el Inspector de propiedades busca la opción Vínculo, coloca: mailto:elcorreo y

como destino seleccionas blank .

Hipervínculos

Insertando

hipervínculo de

correo electrónico

Insertando

hipervínculo del

menú principal

Creando una barra

de menú

horizontal

Mapa de Contenidos


Insertando hipervínculo de correo electrónico


87/92

3

Paso 3: Presiona F12 y graba. Prueba haciendo clic en el enlace. Para utilizar esta función,

deberías utilizar un programa predeterminado para enviar correos electrónicos, como Microsoft

Outlook.

Para finalizar con la creación de tu blog , aprenderás a instalar el menú principal de navegación

de tu página.

Sigue cada uno de los pasos que te presentamos a continuación:

Paso 1: En el documento inicio.html, ubícate en la tabla correspondiente al menú, ingresa los

textos tal como en la gráfica y coloca el ancho de cada celda utilizada en 100.

Observa que se ha dejado en blanco un espacio entre Inicio y Videos. Allí se creará un menú

desplegable.

Paso 2: Crea una regla CSS llamada barramenu que incluirás al menú creado, con las

siguientes características: Comic Sans, 18px, bolder , color blanco, Text align: center . El

resultado es el siguiente:

Paso 3: Crea los hipervínculos correspondientes a cada título de menú mostrado. En el caso

del menú Nosotros crearas el hipervínculo hacia una página nosotros.html, que desarrollarás

como ejercicio práctico más adelante.

Insertando hipervínculo del menú principal


88/92

4

Paso 1: Ubícate en la celda de la barra de menú continua a Inicio, luego selecciona el menú

Insertar , da clic en la opción Spry y luego en la opción Barra de menú Spry.

Paso 2: Se mostrará una ventana y deberás escoger la

opción Horizontal.

Paso 3: Se creará una barra de menú horizontal que

podemos editar desde el inspector de propiedades.

Paso 4: Debes eliminar los Elementos del 2 al 4 seleccionando cada uno y dando clic al signomenos.

Paso 5: Luego modificar el nombre del Elemento 1 por Data y en el segundo nivel coloca el

nombre de los meses. A modo de ejemplo se ha colocado hasta Mayo, puedes agregar más

elementos con el signo más.

Creando una barra de menú horizontal


89/92

5

Paso 6: Luego selecciona cada mes y coloca el link correspondiente.

Paso 7: Para uniformizar el menú, selecciona la celda Data y modifica la regla de estilo,

colocando el color de fondo en #6699cc, el color del texto en blanco y Text align: center .

Paso 8: Realiza una vista previa con F12,

acepta la inclusión de los archivos

correspondientes a la barra de menú Spry.

Paso 9: Para cambiar los colores de los enlaces, debes ir a Propiedades de página, Vínculos

CSS, y editar la información. Color de vínculo: #FFF, vínculo de sustitución: #0033CC, vínculos

activos: #06C y vínculos visitados: #CCC.


90/92

6

Ahora tienes que llevar el nuevo esquema del encabezado a todas las demás páginas de tu

web, para que sea uniforme. Asimismo, no te olvides de colocar el fondo en todas tus páginas.

Aplicación 4.5: Crear la página nosotros.html en esta página debes colocar el

nombre y una foto de tu colegio o de tus compañeros en el colegio. Luego coloca

información del grado y sección que cursas y explica a los visitantes del sitio web

porque consideras que es importante la creación de un blog de noticias escolares.

Aplicación 4.6: En el sitio web Historia, abre la página culturas.html y en la parte

superior sobre el título, inserta un menú horizontal con Spry.

¿Te resultó sencillo aplicar lo que aprendiste? ¿Por qué?

Aplica lo aprendido

Reflexiona

Investiga que otras páginas, que sean de tu interés, te permiten

acceder al correo electrónico o la página web


91/92

7

El proyecto será un trabajo individual que consistirá en elaborar un blog informativo sobre un

tema de interés.

1. Sobre el tema:

a. Para la selección del tema busca en la web, blog que contengan diversas temáticas,

ello te orientará en la elaboración y diseño. Sugerencias de temas son: “Derechos

humanos”, “Cambio climático” o “Aspectos que fundamentan la peruanidad: costumbres

y tradiciones”. Coordina con tu profesor y escoge un tema de tu interés.

b. De acuerdo al tema escogido, define un nombre para tu blog .

c. Considera que por lo menos deberás elaborar 5 páginas web y una de ellas debe

presentar el tema que vas a tratar.

d. Busca fotografías, videos o música que puedas colocar en tu blog y que estén

relacionadas al tema.

2. Sobre la elaboración:

a. Configura un nuevo sitio web para tu blog , incluye las carpetas que necesitaras para

ordenar la información que vas a mostrar (fotos, imágenes, etc.).

b. Determina un esquema básico usando tablas, ubica la posición para el título, el menú

etc. Guarda este esquema básico como esquema.html para que te sirva como base

para crear las distintas páginas de tu web site.

c. Utiliza reglas de estilo para definir los distintos formatos de texto, colores y alineación de

elementos como tablas e imágenes.

d. Identifica dónde puedes colocar enlaces exteriores y crea el hipervínculo hacia otras

páginas.

e. Busca las zonas interactivas que quieras realizar en tu boletín.

f. Crea el menú del esquema principal y ubica los enlaces para navegar por tu blog .

Proyecto Integrador


92/92

3. Sobre la presentación:

El blog lo entregarás a tu profesor en un CD o DVD, donde colocarás toda la carpeta que

contenga tu web site.