Dreamweaver - Fichas de Aprendizaje 2014

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
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
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
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
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 con
estructura y formato completo.
Observa que se han conservado los colores y formatos del texto
Copiando texto de fuente externa

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

1
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?

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 y
guárdalo en tu carpeta de trabajo.
Dreamweaver
Ingresando texto
Editando 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.

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

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.

5
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, 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

1
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

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 una regla 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 hay otras que no vemos (pero que los llevamos en nuestro corazón). El
__________
__________
__________

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

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:

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.

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 parte
correspondiente 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

1
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

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

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 la
distancia del párrafo
respecto al margen
izquierdo o derecho.

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 el
Inspector de propiedades). Como resultado, regresarás a la lista de origen.
Retornar a una lista

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

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

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 y
escoge 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

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 la
opció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.

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 hosting (donde subir tus archivos en la web),
actualizar los datos o quieres modificar algo, solo debes seguir estos pasos.
Eliminar
Editar Duplicar
Exportar
GLOSARIO
Hosting: es el alojamiento
web para almacenar
información, imágenes,
videos o cualquier contenido.

5
Aplicación 2.1: Utiliza el sitio web Naturaleza y crea una página web incio.html
donde 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

1
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 plantilla
Editar texto de plantilla
Mapa de Contenidos

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
visual
Descripción y
detalles del
diseño
Subtítulo
Cuerpo
Título

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

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.

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

1
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

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.

3
Paso 2: Ingresa a la aplicación y crea un nuevo
documento 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á:

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 con
claridad.
Arrastrar

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

6
Aplicación 2.5.: Agrega un fondo de página a algunos de los marcos y reglas de
estilo 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

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

2
Crea el web site Noticias con una carpeta “imagen”, en esta ficha se va elaborar la página
inicio.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 en
Tabla 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

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

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 de
ella).
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 elegir
Seleccionar 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.

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

1
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

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
Para obtener menor
espaciado, utiliza las
teclas: Enter+Shift.

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

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:

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.

1
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

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 Tabla
se 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

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
GLOSARIO
Píxeles: son los puntos de
color.

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

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á:

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

1
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ño
Borde Alinear
Mapa de Contenidos

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áticamente
al 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

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 fuera
de 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.

4
Paso 3: En la categoría
Apariencia, dirígete a Imagen
de 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.

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)

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

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

1
Tema: Insertando videos de la web
Inserta videos en una web.
 Inserta videos en una web.
¿Cómo realizarías la acción de colocar una canción que te gusta mucho al trabajo que estás
desarrollando? Convérsalo con tus compañeros.
Insertar videos
o música
Código
embebido
Cómo insertar
un video en
una web
Mapa de Contenidos

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

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 (un
espacio)
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

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

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 determinado
lugar 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 en
Dreamweaver.
value="//www.youtube.com
src="//www.youtube.com/
value="http://www.youtube.com
src=" http://www.youtube.com/
Modificar por
Borrar

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

1
Curso: Creación de páginas Web con Adobe Dreamweaver.
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

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 si
observas 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

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 que
esta 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

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.

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?

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

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.

3
En base a data_enero.html, donde subirás las noticias, eventos o ideas que deseas compartir
en tu web, se organizarán los demás meses. Para ordenar la información, la posicionarás en
forma horizontal.
Paso 1: Coloca el cursor en la segunda fila de la tabla principal, presiona Shift + Enter (para un
interespaciado menor) y crea una tabla con las siguientes características: 1 fila x 1 columna,
780 píxeles de ancho, Sin bordes ni espacio entre celdas, Alinear al centro
Regla CSS para esta tabla a la que llamarás “.tablameses”:
 Background color (en la categoría fondo): #F90
 Text align (en la categoría Bloque): center
 Font: Lucida Console
 Font size: 16
 Color: blanco
Selecciona la tabla y aplica la regla.
Paso 2: Ingresa como texto los meses del año en dos filas y separados por guiones. Luego
presiona F12 y verifica los cambios.
Paso 3: Con la opción Guardar como graba 12 versiones de esta página, una con el nombre
de cada mes: data_febrero.html, data_marzo.html, así sucesivamente. Recuerda ponerle
título a cada uno de los documentos: “Data de enero, Noticias al Día”, como observas en la
imagen y así consecutivamente.
Insertando hipervínculos internos en un texto
Con los 12 documentos creados, comenzarás a crear los hipervínculos internos y externos. En
este caso, crearás los hipervínculos internos, los cuales te permitirán ir de un lugar a otro
dentro de la misma

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:

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 la
pá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”

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
 Text align: right
 Font: Comic Sans MS
 Font size: 18
 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:

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 varias
pá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://.

1
Capítulo IV Hipervínculos
Tema: Insertando hipervínculos en imágenes y zonas interactivas
 Inserta hipervínculos en imágenes y zonas interactivas
Aplicación 4.3. Ordena los pasos que debes realizar para colocar los hipervínculos
internos en un texto.
Insertando
hipervínculo a una
imagen
Pasos previos
Insertando un
hipervínculo
mediante zonas
interactivas
Mapa de Contenidos

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

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

4
Antes de desarrollar la actividad, es importante que sepas que las zonas interactivas 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 una
interacción, a modo de un diálogo, entre
un ordenador y el usuario.

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 y
completa 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.

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
postmast@cedro.org.pe - 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

2
Es casi igual que insertar los anteriores hipervínculos, pues también puede conectarse a un
texto 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

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

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 signo
menos.
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

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.

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

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

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

Dreamweaver - Fichas de Aprendizaje 2014

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Dreamweaver - Fichas de Aprendizaje 2014

Similar a Dreamweaver - Fichas de Aprendizaje 2014 (20)

Más de jorgequiat

Más de jorgequiat (20)

Último

Último (20)

Dreamweaver - Fichas de Aprendizaje 2014