Dreamweaver Fichasdeaprendizaje2014 PDF

Ficha de Aprendizaje N 1
Curso: Creacin de pginas Web con Adobe Dreamweaver

Captulo I: Aprendiendo sobre Dreamweaver
Tema: Descubriendo el espacio de trabajo
Duracin: 2 horas pedaggicas
Logros de aprendizaje
Ingresa al programa y reconoce los elementos del entorno
Conocimientos previos
Observa el entorno,
qu se puede
realizar en l? Qu
sabes sobre
Dreamweaver?
Mapa de Contenidos
Dreamweaver
Ingresar al
programa
Barra de
herramientas
Documento
Barra de
aplicaciones
Elementos del
entorno
Ventana de
documento
Creando un
nuevo
documento
Grupo de
paneles
Inspector de
propiedades
Panel de
archivos
Contenidos de aprendizaje
Dreamweaver es un software que nos permite disear, crear y editar una web de manera
sencilla sin la necesidad de ser un experto en lenguaje HTML.
Ingresar al programa
Al ingresar, veremos la pantalla de bienvenida
en 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 continuacin:
A. Barra de herramientas Documento B. Barra de la aplicacin C. Ventana de documento D.

Grupos de paneles E. Inspector de propiedades F. Panel Archivos
2
Elementos del entorno

Ahora te explicaremos cada uno de los elementos:
A. Barra de herramientas Documento:
Muestra principalmente las pestaas con todos los documentos actualmente abiertos y te da la
posibilidad de variar la vista del documento.
Multi plantilla
Vistas del documento
Vista previa
B. Barra de aplicaciones:
En ella, encuentras todas las funciones que se pueden realizar con Dreamweaver. Muestra
tambin el tipo de espacio de trabajo que ests utilizando e inclusive te brinda un buscador on
line tipo Google.
Buscador
Tipo de espacio de trabajo
Men
C. Ventana de documento
En esta parte, ingresars el texto, imagen y cualquier otro elemento. El modo de visualizacin y
trabajo es similar al de Word.
D. Grupo de paneles
Entre los paneles que se pueden mostrar en esta seccin, estn el de
Insertar, Estilos CSS, de Archivos.
Por ejemplo en el panel Insertar se muestran conos para insertar
hipervnculos, imgenes, tablas, multimedia, plantillas, etctera.
E. Inspector de propiedades:
Siempre que selecciones cualquier texto, imagen, vdeo, cuadro u otro elemento de tu web, en
esta parte se mostrarn las propiedades de dicho objeto seleccionado. Con l, puedes realizar
modificaciones bsicas as como establecer vnculos e hipervnculos.
F. Panel Archivos:
Con este panel podrs monitorear las carpetas que forman parte de
tu proyecto: las imgenes, vdeos, archivos de sonido, los
documentos HTML que ests trabajando, etctera.
Creando un nuevo documento
Es importante crear una carpeta de trabajo, puedes crear esta carpeta en el Escritorio y
nombrarla como DREAMWEAVER. All guardars todos tus archivos y documentos del curso.
Paso 1: Ingresa a la aplicacin y crea un nuevo

documento
Paso 2: Gurdalo en la carpeta Dreamweaver y nmbralo web,

luego selecciona como tipo de archivo la opcin HTML
Documents.
Copiando texto de fuente externa

Descarga el archivo web.docx de la plataforma y realiza lo siguiente:
Paso 1: Abre el archivo con Word, selecciona y copia el texto,
Paso 2: Luego ubcate en Dreamweaver y coloca el cursor al inicio y selecciona el men

Edicin y luego Pegado especial. En la ventana Pegado especial elige la opcin Texto con
estructura y formato completo.
Observa que se han conservado los colores y formatos del texto
Paso 3: Colcate al final de cada prrafo y presiona la combinacin de teclas SHIFT + ENTER
para crear un espaciado simple entre cada prrafo.
Paso 4: En la barra de herramientas de documento, coloca el ttulo de la pgina.
Paso 5: Para visualizar la pgina web ubica el cono con el mundo en la barra de herramientas
del documento.
Aplica lo aprendido
Aplicacin 1.1: Arrastra y une las imgenes con el texto correspondiente.

Aplicacin 1.2: Establece que elementos del entorno se relacionan entre s. Arrastra
y une los textos.
Tema: Ingreso y edicin de texto
Ingresa texto al programa y lo edita.
Observa la siguiente imagen:
Cmo crees que se realiz? Qu otros documentos similares podras realizar?
Mapa de Contenidos
Dreamweaver
Ingresando texto
Editando el
encabezado
Tamao de letra
Color de letra
Extras
En esta ficha se trabajar en el desarrollo de un boletn de noticias escolares, tal como el que
se mostr en la imagen inicial. Primero crea el nuevo documento, nmbralo boletn.html y
gurdalo en tu carpeta de trabajo.
Paso 1: Comienza ingresando el ttulo y subttulo de tu blog, para lo cual debes hacer
clic en la ventana Documento (espacio en blanco). Verifica que usas el tipo de vista
de Diseo.
Paso 2: Ya tienes el encabezado, ahora contina con la primera entrada del boletn. Cada
noticia podr tener tres partes: fecha, ttulo y cuerpo.
Primero, editars el encabezado y, en una segunda parte, el resto del cuerpo del boletn. Si
deseas, puedes cambiar el ttulo de tu boletn para hacerlo ms atractivo o colocar todo el ttulo
en maysculas.
ENCABEZADO
ENTRADA
Paso 1: Selecciona el ttulo del blog:
Paso 2: Luego, dirgete al Inspector de

propiedades y en la opcin Formato
selecciona Encabezado 1.
Con esta opcin, puedes diferenciar

rpidamente el ttulo de un prrafo. Tienes
varias opciones de encabezado.
Editando el encabezado color de letra
Paso 1: Selecciona
nuevamente el ttulo
Paso 2: Luego, dirgete al Inspector de propiedades y haz clic en CSS (el programa est
predeterminado en HTML). En las opciones de CSS, dirgete a Regla de destino y
selecciona Nuevo estilo en lnea.
Paso 3: A continuacin, da un solo clic en

selecciona el que quieras.
para acceder a la paleta de colores y
Paso 4: Como resultado, puedes marcar la opcin En vivo, vers el resultado que se mostrara
en un navegador
Para continuar realizando modificaciones debes desmarcar la opcin En vivo.
Editando el encabezado extras
Tambin se pueden agregar otros formatos al texto como posicin, tipo de fuente, tamao 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 ubicacin del subttulo a la derecha y modifica su color a plomo, siguiendo los
mismos pasos.
Aplica lo aprendido
Aplicacin 1.3: Abre el documento boletn.html que trabajaste en la ficha y

elige el modo de vista de Dividir, observa el cdigo HTML e identifica que etiquetas
corresponden con los siguientes elementos:
Aplicacin 1.4: Crear pgina web sobre viajes

Tema: Edicin utilizando reglas CSS
Utiliza la regla CSS para modificar los diseos, segn sus propias caractersticas.
Aplica la regla CSS en los diversos diseos.
Para qu crees que te puede servir el uso de reglas en un formato de texto?
Mapa de Contenidos
Edicin utilizando
reglas
Crear una regla

CSS
Aplicar una regla

CSS
En esta ficha continuaremos trabajando el boletn
escolar.
Al abrir la aplicacin, se mostrar el ltimo trabajo
realizado, si no se muestra puedes utilizar la opcin
abrir y ubicar la carpeta con tu trabajo.
Crear una regla CSS

Ahora edita el contenido del boletn. Como en todo boletn, tendrs decenas de noticias, por lo
que debes crear una regla CSS para modificar rpidamente cada parte (fecha, ttulo y cuerpo),
segn sus propias caractersticas.
Para ello, identifica las 3 partes de esta entrada:
Lunes 3 de marzo de 2014
__________
__________
Comenzando la primera semana de clases!!
Ha empezado este nuevo ao escolar, con muchas novedades y mucho

entusiasmo. Es inevitable no sentir una gran emocin de reencontrarte con los
amigos y amigas para verlos todos los das nuevamente. Se ven caras nuevas y
tambin hay otras que no vemos (pero que los llevamos en nuestro corazn). El
__________
Luego, realiza los siguientes pasos:

Paso 1: Edita primero la fecha.
Paso 2: En el panel de Inspeccin marcando la opcin CSS, Crea una Nueva regla CSS para
tu fecha (previamente seleccionada):
Paso 3: Con esta opcin seleccionada, le das clic en Editar regla.
Luego, aparece una nueva ventana en donde a la nueva regla le nombrars fecha y luego da
clic en Aceptar.
fecha
En la nueva ventana, llamada Definicin de regla para ttulo, tendrs todas las opciones de
edicin CSS disponibles para el objeto seleccionado (sern diferentes de acuerdo a la
naturaleza del objeto: texto, imagen, video, tabla, etctera).
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.
Siguiendo el mismo procedimiento, crea una regla para el ttulo de la entrada, nmbrala
tituloe. Para definir la regla realiza lo siguiente:
Paso 5: coloca en categora Tipo, la fuente: Tahoma, el Tamao: 14, el Grosor: bold y el Color:
blanco
Paso 6: cambia el color de fondo del texto, debes cambiar la categora a Fondo y para finalizar
y salir de la ventana, le das clic en Aceptar.
Observa el resultado:
Para completar debes definir una regla para el cuerpo de la entrada, considera lo siguiente:
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 eleccin
En la categora Bloque, colocas Text align: justificar
Aplicar una regla CSS

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, ttulo y contenido relacionado al tema
vacaciones.
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 ns
tiempo libre, sobre todo porque hemos podido realizar todas nuestras actividades que nos interesan ms
all del colegio, como ir al cine, al teatro, viajar, o simplemente descansar en la comodidad del hogad sin
preocupacin de tareas y estudios. Bueno, no en todos los casos, donde algunos deben de haber
aprovechado en estudiar ingls, francs u otra lengua, u otros cursos o talleres, como el de clown, de teatro,
de msica, percusin, etc.
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.
Observa que se aplic el formato que se haba 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.
Aplica lo aprendido
Aplicacin 1.5.: Crear una pgina web navegadores.html. Investiga informacin
referente a los navegadores web considerando los siguientes ttulos: Introduccin,
Historia y Referencias.
Aplicacin 1.6.: Ordena la secuencia de pasos que se debe seguir para establecer
una regla CSS.
Tema: Creando listas y sub listas
Crea listas y sub listas para darle ms orden a su diseo.
Cuando ests realizando un documento, Para qu sirve hacer una lista? Cmo la realizas?
Si lo haces en Word, qu herramientas utilizas para hacer listas?
Mapa de Contenidos
Creando una lista
Creando una sub

lista
Retornar a una
lista
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
Paso 1: Haz clic en el cono de Lista ordenada en el Inspector de propiedades (esta opcin
est disponible en la seccin HTML): Lista sin ordenar (smbolos) y Lista ordenada (numrica o
alfabtica)
A B
En la ventana Documento, vers cmo aparece el nmero 1 espaciado con sangra:
Paso 2: Ingresa el texto y luego das Enter y se

crear el nmero que contina la lista
Paso 3: Luego de ingresar el segundo elemento presiona al mismo tiempo la combinacin

Enter+SHIFT(o Enter+Mayusculas).
Cambio de lnea sin

numeracin
Enter + Shift
Paso 4: Luego de colocar el texto en la lnea sin nmero, si se presiona Enter, contina la
numeracin anterior.
Enter
Creando una sub lista
Paso 1: Ingresa un
nuevo elemento para el
cual tendrs que utilizar
una sublista.
Paso 2: Presiona Enter y saldr un nuevo nmero. Luego para crear la sub lista, dirgete al
Inspector de propiedades y haz clic en Sangra de texto.
GLOSARIO
Sangra:
establece
la
distancia
del
prrafo
respecto
al
margen
izquierdo o derecho.
Paso 3: Para tener una sub lista con smbolos, le das clic en el cono Lista no ordenada
(ubicada en el Inspector de propiedades).
Luego, tienes una sub

diferenciada con smbolos.
lista
Completa la sub lista con tres o cuatro elementos adicionales. Recuerda que para crear un
nuevo elemento solo tienes que dar Enter.
Retornar a una lista
Tendrs 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. Vers cmo el smbolo fue
reemplazado por un nmero.
Paso 3: Para finalizar, le das clic en el cono de Anular sangra de texto (ubicada en el
Inspector de propiedades). Como resultado, regresars a la lista de origen.
Para continuar escribiendo prrafos sin numeracin, dar Enter y luego hacer clic en el icono
Anular sangra de texto. Recuerda que puedes aplicar la regla CSS cuerpo al nuevo texto
ingresado.
Aplica lo aprendido
Aplicacin 1.7.: Crear una pgina web campamento.html; que va brindar consejos
sobre cmo prepararse para ir a un da de campo.
Aplicacin 1.8.: Selecciona uno de los elemento de la lista que creaste y ubica en el
inspector de propiedades el botn Elemento de lista (opcin HTML) explora sus
opciones y modifica el formato de la lista.
Investiga Por qu el programa te da a escoger familias de

fuentes en vez de fuentes individuales?
Reflexiona
De este primer mdulo qu tema es el que ms te intereso?
Qu tema te pareci ms sencillo y cual ms complejo?
Te result sencillo realizar las aplicaciones?
5
Captulo II: Configuracin inicial
Tema: Configurando nuestro sitio web
Configura la web donde trabajar.

Organiza la informacin en subcarpetas
Edita su propio sitio.
Has observado pginas web con diferentes enlaces, diferentes pginas, imgenes, texto?
Sabes dnde est alojada toda la informacin que contienen estas pginas Web?
Mapa de Contenidos
Creando un
nuevo sitio
Creando sub
carpetas en un
nuevo sitio
Edicin de un
sitio
Al crear el boletn escolar, no realizaste ninguna configuracin, pues el documento que creaste
era una pgina aislada. Ahora ser diferente, pues crears una web con varias pginas y
elementos multimedia enlazados. En la configuracin, elegirs el lugar donde guardars todos
los documentos, las imgenes, archivos, fotos, audios, etctera que usars en tu pgina.
Creando un nuevo sitio
Para que aprendas a configurar la web en donde trabajars, sigue los siguientes pasos:
Paso 1: Ingresa a Dreamweaver la ventana de bienvenida, ubica el men de Crear nuevo y
escoge la opcin Sitio de Dreamweaver.
Paso 2: Se abre una ventana, en la cual debes colocar un nombre a tu sitio, en este caso le
llamars Naturaleza y la carpeta la guardars en el Escritorio con el mismo nombre.
Por ahora solo ingresars los datos en la opcin Sitio como se

indica arriba, pero existen otras opciones ms para configurar
como: Servidor, en caso de que se trabajar la pgina web en otra
PC, la opcin Control de versin que se utilizara cuando se
estn realizando modificaciones a un sitio web existente y la
opcin Configuracin Avanzada que permite personalizar ms el
site.
Paso 3: Luego, selecciona la primera opcin

Guardar y se mostrar la carpeta del nuevo site
en el Panel de Archivos.
Creando subcarpetas en tu nuevo sitio

Las carpetas sern tiles para organizar la informacin, 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 denominars imgenes:
Recuerda:
Cuando nombres las carpetas o
archivos que subirs a Internet
no debes utilizar tildes ni
espacios.
Realiza el mismo procedimiento para crear las carpetas fotos y multimedia.
Edicin 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.
GLOSARIO
Hosting: es el alojamiento
web
para
almacenar
informacin,
imgenes,
videos o cualquier contenido.
Paso 1: Dirgete a la barra de aplicaciones y

busca el men Sitio, ah selecciona Administrar
sitios.
Paso 2: Se abrir una nueva ventana donde encontrars una lista de los sitios web creados y
en la parte inferior las opciones para: eliminar, editar y crear.
Exportar
Eliminar
Editar
Duplicar
4
Aplica lo aprendido
Aplicacin 2.1: Utiliza el sitio web Naturaleza y crea una pgina web incio.html
donde explicaras porque es importante cuidar la naturaleza y que debemos hacer
para ello.
Aplicacin 2.2. Crea el site historia, gurdalo 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)
Tema: Plantillas
Crear pginas a partir de plantillas.

Modifica el contenido de las plantillas.
Inserta imgenes en las plantillas.
Sabes lo que es una plantilla?

Has utilizado alguna vez una plantilla al elaborar algn trabajo o tarea?
Mapa de Contenidos
Crear un documento a partir

de la plantilla
Editar texto de plantilla
Crear un documento a partir de una plantilla
En el sitio web historia, se va crear la pgina culturas.html pero a partir de una plantilla.
Sigue los pasos que te presentamos a continuacin:
Paso 1: Luego de crear el sitio web, ve a la barra de
aplicaciones y en Archivo selecciona Nuevo.
Paso 2: Vers emerger la ventana Nuevo documento. En la seccin de Pgina en blanco,

selecciona Plantilla HTML. Luego, en Diseo la segunda opcin.
Ejemplo
visual
Descripcin y
detalles del
diseo
Paso 3: Da clic en Crear y se mostrar el espacio de trabajo con la plantilla cargada.
Ttulo
Cuerpo
Subttulo
Observa el inspector de propiedades, encontrars que ya hay

reglas CSS definidas para cada seccin de la pgina.
Editar texto de plantilla

Colcate en el rea de trabajo y realiza la modificacin del contenido, utiliza el contenido del
archivo culturas.txt que puedes descargar de la plataforma.
Encabezado 1
Encabezado 2
Encabezado 3
Utiliza el inspector de propiedades para colocar la regla CSS que corresponda a cada parte.
Insertar imagen de plantilla

En esta plantilla se incluye una imagen, que ya tiene definido un tamao predeterminado.
Descarga la imagen culturas.jpg de la plataforma y gurdala en la carpeta imgenes que
creaste en el site.
Esta imagen tiene las medidas y tamao necesario para que la puedas utilizar con la plantilla.
Es muy importante que la imagen se adapte al sitio web que estamos diseando, esto se
explicar con ms 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 ningn dato y da clic en
Aceptar. Luego la imagen se debe
ubicar en la zona seleccionada.
Aplica lo aprendido
Aplicacin 2.3.: Elabora una pgina 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
imgenes del web site.
Aplicacin 2.4.: En el mismo web site historia crea la pgina Incas.html. Para
crearla, utiliza una plantilla HTML.
Tema: Marcos
Realizar creaciones haciendo uso de marcos.

Editar los marcos que necesite
Guarda los marcos realizados.
Comenta con tus compaeros cuntos marcos crees que se hayan utilizado en esta pgina?
Referencia: www.ubunturoot.wordpress.com
Mapa de Contenidos
MARCOS
Crear marcos
Editando marcos
Guardar marcos
Crear marcos
Los marcos sirven para distribuir la web eficazmente y su funcionalidad se da principalmente
en pginas donde hay elementos repetitivos como mens, ttulos o banners.
GLOSARIO
Marcos:
son
reas
rectangulares,
independientes, que en su
conjunto forman una web.
Vamos a trabajar una web sobre el Efecto invernadero. Realiza lo siguiente:
Paso 1: Crea primero un web site medioambiente y

gurdalo en una carpeta del mismo nombre.
Paso 2: Ingresa a la aplicacin y crea un nuevo

documento HTML.
Paso 3: Dirgete a la barra de aplicaciones y selecciona el men Insertar, luego la opcin

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 ttulo 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 denominars temas.
Repite el paso 4 con los otros dos marcos: leftframe

(ttulo) y mainframe
(contenido). Terminado lo
anterior, haz clic en Aceptar. El resultado ser:
Editando marcos
Paso 1: En el men ventana, selecciona la opcin Marcos y se

abrir un panel que mostrar la distribucin de los marcos de la
pgina.
Paso 2: Selecciona con el mouse el marco ttulo 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.
Definir tamao
Tambin puedes cambiar el ancho o alto de los macros

al hacer clic en las lneas y arrastrar con el cursor hasta
la medida deseada, para que tu texto se pueda ver con
claridad.
Elegir columna
Arrastrar
Ahora que ya tenemos la estructura, ingresa los textos correspondientes al efecto invernadero,
que puedes descargar de la plataforma e ingrsalos en los marcos tal como se muestra en la
imagen.
Guardar marcos
Cada marco se guarda en una pgina independiente y el conjunto de marcos en otra pgina.
Realiza lo siguiente:
Paso 1: en el men Archivo encontraras varias opciones, coloca el cursor en el marco con el
ttulo y da clic en la opcin Guardar marco como.
titulo.html
De la misma forma guarda los otros marcos con sus respectivos

nombres tema.html y contenido.html. Para guardar la pgina que
contiene los marcos utiliza la opcin Guardar todo y gurdalo como
efectoinv.html
Aplica lo aprendido
Aplicacin 2.5.: Agrega un fondo de pgina a algunos de los marcos y reglas de

estilo para los textos de la pgina efectoinv.html. Recuerda que cada marco hace
referencia a una pgina web diferente.
Aplicacin 2.6.: Utilizando marcos crea la pgina cambioclima.html, dentro del
mismo web site medioambiente. La pgina debe contener informacin sobre el
cambio climtico, investiga sobre el tema en internet.
Investiga sobre la ergonoma digital y por qu es necesario cierto

orden en las pginas web
Reflexiona
Al hablar de plantillas y marcos, con qu otros programas los relacionaste?
Qu tema te pareci ms sencillo y cul ms difcil de comprender?
Captulo III: Tablas y multimedia
Tema: Crear tablas
Crea tablas, modificando su estilo y el alto y ancho de las celdas.
Cuntale a tus compaeros cules son las utilidades que les das a las tablas? Para qu es
lo que ms las utilizas?
Mapa de Contenidos
Creando una tabla
Creando una tabla

dentro de otra
Modificando el alto
y ancho de celdas
Creando un tabla
Crea el web site Noticias con una carpeta imagen, en esta ficha se va elaborar la pgina
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
gurdalo como reciclaje.html
Paso 2: Dirgete al panel Insertar y haz clic en

Tabla y Emerger una ventana llamada Tabla, en
donde establecers los parmetros bsicos para su
construccin.
Paso 3: considera los siguientes datos y luego da clic en aceptar.
Filas: 2
Columnas: 1
Ancho de tabla: 800 pxeles
Grosor del borde: 5 pxeles
Relleno de celda: 0
Espacio entre celdas: 5
Encabezado: Ninguno
Paso 4: Obtendrs 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 seleccinala, luego, dirgete al
Inspector de propiedades y en Alinear, elige Centro.
Creando un tabla dentro de otra

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 construirs una tabla con 7
columnas porque dejars una para el ttulo 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.
Modificando el ancho y alto de celdas
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:
Al modificar de esta manera una celda, las

restantes que se encuentran dentro de la
misma fila, se modificarn de manera
porcentual: las otras seis celdas mantendrn
una medida comn entre ellas.
Otra forma de realizar modificaciones

Observa que ahora al dar clic en la celda modificada se mostrar el nmero 200 junto a un
indicador, en las dems 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, vers que emerge un
pequeo men con varias opciones que te
sern tiles ms adelante. Puedes elegir
Seleccionar columna.
Paso 2: Ahora en el inspector de propiedades, edita la altura
Observa que al modificar la altura de la celda seleccionada, tambin 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 vers los bordes de la tabla principal porque a la tabla secundaria (o interior) no se le
asign ninguna cantidad de borde.
Aplica lo aprendido
Aplicacin 3.1: En la segunda fila de la tabla principal de la pgina inicio.html, crea

una nueva tabla.
Aplicacin 3.2: Dentro del mismo web site Noticias, crea la pgina web
deportes.html, utilizando como referencia la pgina esquema.html.
5
Tema: Ingresar contenidos en una tabla
Utiliza tablas, agregando texto e imagen.
Aplicacin 3.3: modifica la tabla.
Mapa de Contenidos
Tablas
Agregando
texto
Agregando
una imagen
Agregando texto
En esta ficha trabajaremos el texto de la pgina inicio.html del web site Noticias.
Paso 1: Da clic en la celda donde ingresars el texto, en la primera celda de la primera fila (la
que mide 200 pxeles de ancho).
Para obtener menor

espaciado, utiliza las
teclas: Enter+Shift.
Paso 2: Ingresa el siguiente texto:
Paso 3: Edita el texto creando y aplicando reglas CSS.

1. Crea una nueva regla CSS para ambos textos:
Blog de Noticias Escolares
(subttulo1)
Noticias al da (ttulo1)
2. Para subttulo1:
Font: Palatino
Font style: italic
Font weight: bold
3. Para ttulo1:
Font: Verdana
Font size: 14
Font weight: bold
Obtendrs el siguiente resultado:
Si ya has realizado la Actividad 3.3 puedes continuar con el siguiente paso:
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:

Observa cmo la celda se
acomoda (en altura) a la
cantidad de informacin que
ingresas
cuerpo
Paso 6: Edita ahora el contenido del cuerpo para lo cual crears una regla con las siguientes
caractersticas:
1. El saludo cmbialo 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, dirgete a la opcin Clase y escoge la regla correspondiente.
El resultado debe ser el siguiente:
Agregando una imagen

Paso1: Crea una carpeta imagen dentro del web site Noticias y luego descarga la imagen
noticias.jpg de la plataforma y gurdala en esa carpeta:
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 opcin imagen del panel Insertar:
Paso 3: Elige el archivo noticias.jpg de la carpeta imagen, luego clic en Aceptar, y en la
siguiente ventana no coloques ningn atributo y da clic en Aceptar.
Antes de ver tu avance en el navegador, no te olvides de colocar el nombre a la pgina.

Dirgete al espacio de ttulo (ubicado en la barra Documento) y denomnalo: Noticias al da Inicio:
Presiona F12, selecciona Guardar y observa tus avances en el navegador. De esta manera,
obtendrs el siguiente resultado.
GLOSARIO
Navegador: es un software que
permite el acceso a Internet,
interpretando la informacin de
archivos y sitios web para que
stos puedan ser ledos.
Aplica lo aprendido
Aplicacin 3.4: En la pgina deportes.html del web site noticias coloca informacin
de las actividades deportivas que realiza tu colegio, utiliza fotos o imgenes
Tema: Editar propiedades de una tabla
Editar las propiedades de una tabla.
Observa la siguiente tabla Qu opciones crees que se han aplicado?
Mapa de Contenidos
Tablas
Agregar o
eliminar filas y
columnas
Insertar
columna
Unir o dividir
celdas
Insertar fila
Color de fondo
de la tabla
Agregar o eliminar filas y columnas

Continuando con el trabajo en la pgina 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 opcin Tabla

se mostrarn otras opciones entre ellas
e insertar/eliminar filas o columnas,
elige insertar columna.
Con este mtodo por defecto se inserta una columna a la izquierda de la celda de igual
tamao.
Otra forma de realizar lo mismo es seleccionando el indicador verde de la columna de

referencia y ubicar la opcin Insertar columna a la derecha.
Paso 3: cambia el ancho de la nueva columna a 5 pxeles. Guarda los

cambios realizado y con F12 observa que ahora hay un espacio en blanco
entre la lnea de la tabla y tu texto
Siguiendo el mismo procedimiento, inserta una columna al lado derecho del cuerpo de la web
GLOSARIO
Pxeles: son los puntos de
color.
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
opcin Objetos de tabla y lego Insertar fila inferior.
Resultando:
Unir o dividir celdas

Otra herramienta es la que permite la unin de una o ms celdas.
3
Paso 1: Selecciona la ltima fila de la tabla, para unir las dos celdas.
Paso2: da clic derecho y elige la opcin Tabla y luego Combinar celdas
El resultado:
De esta misma forma tambin puedes acceder a la opcin dividir celda.
Color de fondo de la tabla

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 colcate 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 denominars
colortabla.
Paso 3: En la nueva ventana, dentro de la categora Fondo, haz clic en la opcin

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), dirgete al
Inspector de propiedades y, en la opcin Clase, elige colortabla:
Ahora de forma similar crea dos regla CSS ms, la primera para la tabla de 800 pixeles
nmbrala colorfondotabla (usa blanco) y para la segunda colorpiepagina (usa plomo) y
aplcala solo a la ltima fila.
Finalmente el resultado ser:
Aplica lo aprendido
Aplicacin 3.5: entro del mismo web site Noticias, crea la pgina web
calendario.html, utilizando como referencia la pgina esquema.html.
Aplicacin 3.6: En el web site medioambiente, crea la pgina contenido3.html y
crea una tabla (principal) de con las siguientes caractersticas:
Tema: Opciones de configuracin de fotos e imgenes
Inserta imgenes, brindndoles la apariencia deseada.
Aplicacin 3.8: Coloca en orden cmo es que realizas una tabla en este programa.
Mapa de Contenidos
Imgenes
Imagen de
sustitucin
Imgenes
de fondo
Modificar
imagen
Cambiar el
tamao
Borde
Alinear
Ya conoces los pasos para insertar una imagen, en esta ficha aprenders a definir un efecto
bsico con imgenes y tambin a realizar algunas modificaciones en ellas.
Para iniciar, descarga la imagen: colegio.jpg y temas.jpg y gurdalas en la carpeta imagen
dentro de la carpeta Noticias.
Imgenes de sustitucin
Podemos configurar un efecto bsico: tener dos imgenes que se cambien automticamente
al pasar el cursor del mouse por encima. Esto sirve para aumentar el impacto visual de tu blog
y se vea ms profesional.
Abre la pgina 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. Dirgete al panel Insertar e ingresa al men de opciones
para insertar imgenes, 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 opcin Imagen de
sustitucin.
Paso 4: Se abrir una ventana donde debes escoger las dos imgenes involucradas (bscalas
en la carpeta imagen), despus da clic en Aceptar.
2
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.
GLOSARIO
Blog: es un sitio web en el
que varios autores o uno
publican artculos de inters.
Imgenes de fondo
Para utilizar una imagen de fondo en tu web, debes considerar la esttica y evitar saturar de
colores la pgina, aunque ello finalmente depende de la temtica de esta. Realiza lo siguiente:
Paso 1: Contina trabajando con el documento inicio.html. Haz clic en cualquier espacio fuera
de la tabla.
Paso 2: Dirgete al Inspector de propiedades y en las opciones CSS, dale clic a Propiedades
de la pgina.
Paso 3: En la categora
Apariencia, dirgete a Imagen
de fondo y busca la imagen
correspondiente. En la opcin
Repetir, escoge Repeat. De
esta forma sin importar su
tamao, la imagen se repetir
hasta llenar todo el fondo
definido.
Observa cmo la imagen de fondo ha sido

insertada.
Paso 4: Luego, dirgete al Inspector de propiedades, CSS, donde se ha creado una regla
llamada body, seleccinala y dale clic a Editar regla.
Paso 5: En la nueva ventana, busca la categora 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.
Paso 6: Presiona F12 y guarda. Revisa el resultado

final.
Modificar imagen
Al seleccionar la imagen, se puede observar en el Inspector de propiedades, las distintas
opciones que podemos configurar entre ellas editar, definir tamao, aplicar estilos CSS.
Edicin
Las opciones de edicin permiten hacer modificaciones a las fotografas o imgenes que
utilicemos. Se pueden hacer modificaciones bsicas sin utilizar otra aplicacin o si se prefiere
tambin nos da la opcin de realizar modificaciones avanzadas usando un editor fotogrfico
que se encuentre instalado en nuestra computadora.
Volver a
muestrear
Editar configuracin. Aumentar o

disminuir calidad (tamao)
Perfilado
(acenta bordes)
Abre la imagen en un
editor como Photoshop
Recortar
Brillo y
contraste
Cambiar el tamao
Para modificar el tamao de una imagen realiza lo siguiente:
Paso 1: Para modificar el tamao de una imagen, sin alterar sus
proporciones, damos clic al candado para que se cierre y as se
mantenga la relacin entre el ancho y el alto.
Paso 2: Podemos digitar manualmente una de las medidas y la otra se acomodar para
mantener la proporcin o desde el borde de la imagen se le puede estirar o encoger.
5
Encoger
Borde
Para colocar un borde a la imagen, podemos definir una regla CSS. Para crea una regla CSS,
nmbrala 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
opcin Bloque define la propiedad Text-align en center. Luego selecciona la celda que
contiene la imagen y aplica la regla CSS.
Presiona F12 y guarda. Observa que todos los

cambios que se han realizado a la imagen que se
muestra en la opcin de Diseo de Dreamweaver,
tambin se han aplicado a la imagen de sustitucin
que se defini.
Aplica lo aprendido
Aplicacin 3.7: Ordenar los pasos para realizar una tabla con el programa.
Aplicacin 3.8: En el web site Naturaleza, crea la pgina reciclaje.html.
Tema: Insertando videos de la web
Logros
deweb.
aprendizaje
Inserta videos
en una
Inserta videos en una web.
Cmo realizaras la accin de colocar una cancin que te gusta mucho al trabajo que ests
desarrollando? Convrsalo con tus compaeros.
Mapa de Contenidos
Insertar videos
o msica
Cdigo
embebido
Cmo insertar
un video en
una web
Colocar vdeos o msica en Dreamweaver demanda que tengamos nociones bsicas de
lenguaje html, de tal manera que, por lo menos, podamos reconocerlo.
Cdigo embebido
Los diversos reproductores de multimedia (para vdeos, msica, etctera) en lnea (You Tube,
Vmeo, Google Vdeo, Grooveshark, etctera), permiten enlazar el contenido que ofrecen a
nuestra propia web por medio del cdigo embebido (embed code), que es cdigo html cuya
estructura posee ciertas directivas.
GLOSARIO
Embeber: significa insertar o
incrustar un cdigo de un
lenguaje dentro de otro
lenguaje
Cmo insertar un vdeo en una web
Preparando la pgina para vdeos

Ingresa al web site Noticias y crea un nuevo documento HTML al que llamars videos.html.
Utiliza el esquema bsico que creaste en la ficha 8 (esquema.html).
Paso 1: Ubica el cursor en la zona de
contenido (la celda ms grande de todas), da
medio espacio (Shift+Enter) e inserta el texto.
Paso 2: Selecciona lo ingresado y para

editar este texto no utilizars reglas
CSS, simplemente en Regla de destino
selecciona la opcin Nuevo estilo de
lnea.
Paso 3: Vas a editar el texto en el Inspector de
propiedades, usando las secciones HTML y CSS,
segn sea necesario. Para ello, ten en cuenta las
siguientes caractersticas:
Lucida Console
Color: #F00
Encabezado 2
Sangra de texto (un
espacio)
Paso 4: Presiona Enter e inserta

una tabla de:
5 filas x 1 columna
ancho de 760 pxeles
centrado
Paso 5: En la primera y quinta fila, ingresa el siguiente texto y crea las reglas CSS para darles
formato.
TITULO
CUERPO
1. Regla CSS para el ttulo

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
Paso 6: Selecciona la 2 y 4 fila para medir su altura en 5 pxeles.

Insertando el cdigo de vdeos
Ahora insertars un vdeo en tu web, para ello, sigue los 10 pasos que te presentamos a
continuacin. En este caso, utilizaremos uno de Youtube como ejemplo.
Paso 1: Abre una pestaa en cualquier navegador e ingresa esta URL:
http://www.youtube.com/watch?v=dao0LipHBSE#t=14
Paso 2: Busca y haz clic en la opcin Compartir donde aparecern nuevas opciones. Haz clic
en Insertar y podrs ver el cdigo embebido. Verifica que este marcada la opcin Usar el
antiguo cdigo de insercin. Selecciona y copia el cdigo HTML que est en azul, puedes
elegir entre diferentes tamaos del reproductor o personalizar el tamao. Recuerda elegir
siempre un tamao adecuado, menor (en ancho y alto) a la tabla donde colocars el vdeo.
Cdigo
embebido
Tamao
Paso 3: Luego, regresa a Dreamweaver y haz clic en la 3 celda de la tabla para posicionar el
cursor.
Paso 4: Ahora, selecciona la opcin de Dividir.
Paso 5: La ventana Documento se dividir en dos: la parte inferior con el diseo de tu web y la
parte superior con el cdigo HTML. Observa cmo el cursor se posiciona sobre un determinado
lugar en la ventana de cdigo, que es exactamente el mismo lugar que aparece en la ventana
de diseo.
Paso 6: Dirgete hacia donde apareci el cursor en la ventana de HTML, antes de &nbsp, y
borra todo ese cdigo y luego, pega el cdigo copiado de Youtube.
Borrar
Paso 7: Para que el video pueda ser visto desde una computadora de forma local, debes
ubicar y modificar los siguientes textos:
value="//www.youtube.com
src="//www.youtube.com/
Modificar por
value="http://www.youtube.com
src=" http://www.youtube.com/
Paso 8: Regresa al modo Diseo y observa un espacio

plomo que es el vdeo, solo que no se puede visualizar en
Dreamweaver.
Para finalizar agrgale a tu trabajo un ttulo a la pgina y una imagen de fondo, luego presiona
F12, guarda y comprueba si se puede ver en el navegador. El resultado final debera ser como
se muestra en la imagen.
Recuerda que trabajar con el cdigo es muy delicado, por lo que no debes borrar ni agregar
nada ms all de lo especificado aqu porque podras desconfigurar toda tu pgina.
Aplica lo aprendido
Aplicacin 3.9: En el sitio web Noticias, inserta dos videos ms en la pgina

video.html, para ello debes agregar ms filas a la tabla, para que coloques el ttulo,
el enlace al video y una pequea descripcin por cada video, tal como el ejemplo
explicado en esta ficha.
Aplicacin 3.10: En el sitio web Naturaleza, crea un pgina web videosnat.html
incluye en ella dos videos que estn 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 diseo atractivo a tu pgina
Curso: Creacin de pginas Web con Adobe Dreamweaver.
Tema: Insertando msica de la web
Inserta msica de la web en sus diseos.
Cul es el estilo de msica que te gusta? Sueles escucharla de alguna direccin en la web?
Comparte tus respuestas con tus compaeros.
Mapa de Contenidos
Insertando msica
en la web
Cmo insertar
msica en la web?
Insertando el
cdigo de msica
Cmo insertar msica en una web
Preparando la pgina para msica
Paso 1: Crea un nuevo documento HTML al que denominars musica.html. Utiliza el mismo
esquema bsico esquema.html
Paso 2: Coloca como ttulo Msica recomendada, edita el texto con el Inspector de
propiedades, con las mismas caractersticas de Vdeos de la semana.
Paso 3: Agrega un espacio con Enter e inserta una tabla, con las siguientes caractersticas:
7 filas x 2 columnas
700 pxeles 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
dirgete 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, ubcalo en la carpeta de imagen. Luego inserta la imagen.
Paso 6: Une tambin la tercera fila (de acuerdo a cmo te hemos explicado en el paso4) y
escribe los textos que se muestran en la imagen.
Insertando el cdigo de msica

Usaremos bsicamente los mismos pasos que cuando insertamos un cdigo de vdeo, solo que
esta vez, te ensearemos a colocar msica de Grooveschark.
Paso 1: Ingresa a http://www.grooveshark.com y busca las siguientes canciones:

Muse, Starlight
Juanes, Un da normal
Paso 2: Elige el cono Compartir cancin y se mostrar una ventana donde debes escoger la
opcin Incrustar y copiar el cdigo embebido.
Cdigo
embebido
Paso 3: Regresa a Dreamweaver y utiliza la opcin Dividir para poder ver el Diseo y el cdigo
html a la vez. Luego selecciona la celda correspondiente y en la ventana cdigo inserta el
cdigo embebido.
Paso 4: Presiona F12 y guarda. Verifica si el resultado es igual al que observas en la imagen.
Con el cdigo html, no solo puedes agregar vdeos y msica, sino tambin muchas otras cosas
ms, como tu gadget de Facebook, tus tweets, entre otros.
Aplica lo aprendido
Aplicacin 3.11: Inserta dos canciones ms en la web msica.html
Aplicacin 3.12: Agregar una msica de fondo a la pgina reciclaje.html
Reflexiona
Crees que el colocar algn imgenes, audios y videos haces ms llamativa la

presentacin? Por qu? Cmo lo prefieres t?
Qu tipo de archivos puedes embeber en el programa?
Captulo IV: Hipervnculos
Tema: Hipervnculos conceptos y como insertarlos a un texto
Inserta hipervnculos internos y externos a un texto
Aplicacin 4.1.: Indica cules de los siguientes enunciados son verdaderos.
Mapa de Contenidos
Hipervnculos
Tipos
Hipervnculos en un texto
Insertando hipervnculos internos en

un texto
Insertando hipervnculos externos en un

texto
Hipervnculos
GLOSARIO
Hipervnculos: Son conocidos tambin como
vnculos, enlaces o links. Son usados
en varios tipos de documentos electrnicos:
Excel, Word, Power Point, pginas web,
etctera.
Sirven para:
Hacer referencia a un punto especfico diferente al que el usuario se encuentra, dentro

de la misma web o hacia un enlace externo.
Ver el enlace de correo y enviarlo rpidamente
Para el caso que se te presenta en este manual, los hipervnculos tendrn dos funciones:
Interna: enlazar las diferentes pginas que conforman tu web (men).

Externa: hacer referencias a otras webs de dnde has sacado informacin o estn
relacionadas al tema.
Tipos de hipervnculos
Bsicamente hay tres tipos: Enlaces a pginas web, Enlaces para enviar correos electrnicos
y Enlaces a PDF o contenidos descargables
Hipervnculos en un texto
Crea un nuevo documento HTML al que llamars data_enero.html, que debes incluir en el
web site Noticias, bsate en la pgina esquema.html.
En base a data_enero.html, donde subirs las noticias, eventos o ideas que deseas compartir
en tu web, se organizarn los dems meses. Para ordenar la informacin, la posicionars 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 caractersticas: 1 fila x 1 columna,
780 pxeles de ancho, Sin bordes ni espacio entre celdas, Alinear al centro
Regla CSS para esta tabla a la que llamars .tablameses:
Background color (en la categora fondo): #F90

Text align (en la categora Bloque): center
Font: Lucida Console
Font size: 16
Font weight: bold
Font style: italic
Color: blanco
Selecciona la tabla y aplica la regla.
Paso 2: Ingresa como texto los meses del ao en dos filas y separados por guiones. Luego
presiona F12 y verifica los cambios.
Paso 3: Con la opcin Guardar como graba 12 versiones de esta pgina, una con el nombre
de cada mes: data_febrero.html, data_marzo.html, as sucesivamente. Recuerda ponerle
ttulo a cada uno de los documentos: Data de enero, Noticias al Da, como observas en la
imagen y as consecutivamente.
Insertando hipervnculos internos en un texto
Con los 12 documentos creados, comenzars a crear los hipervnculos internos y externos. En
este caso, crears los hipervnculos internos, los cuales te permitirn ir de un lugar a otro
dentro de la misma
Paso 1: Abre en Dreamweaver el documento data_enero.html y luego selecciona el texto

febrero y dirgete al Inspector de propiedades. En la seccin HTML, haz clic en el cono de
carpeta de la opcin Vnculo.
Luego, selecciona el documento data_febrero.html. Obtendrs el

siguiente resultado:
Paso 2: Luego, regresa y selecciona el texto febrero, para editar aspectos bsicos. Dirgete al
Inspector de propiedades y en la opcin Destino, escoge self (recomendado para vnculos
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 pestaa o ventana del navegador.
Paso 3: Crea los enlaces para los dems meses siguiendo los mismos pasos aprendidos hasta
el momento. Tambin inserta enlaces a los dems meses de cada documento. Luego regresa
al documento data_enero.html y debers tener lo siguiente:
Paso 4: Para ediciones de formato y color para los

vnculos, debes ir a Propiedades de la pgina (en el
Inspector de propiedades).
Paso 5: En la nueva ventana, dirgete a la seccin Vnculos (CSS) y realiza los cambios
correspondientes. Te recomendamos no modificar ni la fuente ni el tamao porque estos
cambios afectarn a todos los hipervnculos del documento, no solo de lo seleccionado. Edita
la siguiente informacin:
color de vnculo:
#00F
vnculos visitados:
#666
estilo de subrayado:
siempre subrayar
estilo de fuente:
itlica
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 hipervnculos. Viaja de una pgina a otra; el ttulo de la
pgina en la pestaa del navegador te confirmar qu mes ests viendo sin ningn problema.
Insertando hipervnculos externos en un texto

Realiza lo siguiente para crear hipervnculos externos:
Paso 1: Abre nuevamente el documento data_enero.html. Coloca el cursor en el espacio

vaco, encima de la tabla donde estn los meses. Crea una tabla con las siguientes
caractersticas: 1 fila x 2 columnas, 780 pxeles, centrada
Luego, selecciona la celda de la izquierda de la nueva tabla y le das el ancho de 300 pxeles.
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
continuacin:
Paso 3: Luego, inserta un texto similar, colocando las pelculas que estn por estrenarse.
Paso 4: Crea las reglas CSS para la fecha, ttulo y cuerpo de la entrada.
regla .fechas:
Font: Lucida Sans Unicode
Font weight: lighter
Font size: 12
Font style: italic
Text align: right
regla .titulo2
Font: Comic Sans MS
Font size: 18
Font weight: bold
Color: #F90
Text align: right
regla .cuerpo
Font: Verdana
Font size: 12
Text align: justify
Paso 5: Inserta una nueva columna entre el texto y la imagen a la que le dars 10 pxeles de
ancho y presiona F12. Obtendrs el siguiente resultado:
Paso 6: Ahora, para insertar el hipervnculo, selecciona el texto que quieras que tenga el
enlace, en este caso es la siguiente direccin electrnica:
Paso 7: Dirgete al Inspector de propiedades y, en la seccin HTML, completa el espacio

vaco de Vnculo con la direccin completa de la web a la cual vinculars tu pgina.
No olvides llenar la direccin
completa incluyendo http://.
Paso 8: En la opcin Destino, selecciona _blank:
Paso 9: Ahora prueba tu enlace: presiona F12, guarda y haz clic al hipervnculo en el
navegador. Se debera abrir una nueva ventana con la pgina deseada.
Aplica lo aprendido
En el sitio web Naturaleza, se han creado varias

pginas. Adiciona en la parte superior de cada una de ellas un men.
Luego crea los hipervnculos correspondientes a cada ttulo en cada
una de las pginas.
Aplicacin 4.2:
Captulo IV Hipervnculos
Tema: Insertando hipervnculos en imgenes y zonas interactivas
Inserta hipervnculos en imgenes y zonas interactivas
Aplicacin 4.3. Ordena los pasos que debes realizar para colocar los hipervnculos
internos en un texto.
Mapa de Contenidos
Insertando
hipervnculo a una
imagen
Insertando un
hipervnculo
mediante zonas
interactivas
Pasos previos
Insertando hipervnculo a una imagen
Pasos previos
Paso 1: En el documento que has trabajado la insercin de hipervnculos internos y externos,

crears 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
caractersticas de la anterior: 1 fila x 2 columnas, 780 pxeles, centrada.
Paso 3: Descarga la imagen pucp.jpg de la plataforma, gurdala en la carpeta imagen del web
site Noticias y luego insrtala en la celda de la izquierda de la nueva tabla.
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 dirgete hacia el Inspector de
propiedades (en la seccin HTML) y en las opciones de clase selecciona la regla que
corresponde al texto elegido.
Paso 5: Antes de insertar el vnculo en la imagen, vincula el texto PUCP que se encuentra en
el texto, con la pgina 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 vnculo: http://www.pucp.edu.pe.
3. Especifcalo como _blank.
Paso 6: Ahora trabajaremos con la imagen, seleccinala y en el Inspector de propiedades
escoge lo siguiente:
vnculo: 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 pequea columna entre el texto y la imagen, de no ms de 10
pxeles de ancho.
Insertando un hipervnculo mediante zonas interactivas
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 tambin puedes realizar en Paint u otro programa de diseo), en la
parte inferior derecha, se encuentra la lista del men principal de la web, eso es lo que
generars al desarrollar la actividad.
Interaccin:
que
permite
una
interaccin, a modo de un dilogo, entre
un ordenador y el usuario.
Sigue los pasos que te presentamos a continuacin 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: Dirgete a la barra Insertar y en las opciones de Imgenes selecciona Dibujar zona
interactiva rectangular.
Paso 3: El cursor se volver una cruz con la cual debes dibujar el rectngulo donde se
colocar el hipervnculo. Lo dibujas alrededor de la palabra Inicio.
Paso 4: Dirgete al Inspector de propiedades y

completa la siguiente informacin.
Paso 5: Presiona F12, guarda y verifica que el vnculo funcione en el

navegador. Cuando pases el cursor por encima de la zona trabajada,
aparecer una mano
que confirmar que ese espacio sirve como
hipervnculo.
Sigue el mismo procedimiento para data y lo vinculas a data_enero.html, Video con
video.html y msica con msica.html.
Ten en cuenta:
Para editar una zona interactiva, simplemente haz clic en la zona
verde y cambia lo deseado en el Inspector de propiedades.
Tambin puedes modificar el tamao del rectngulo con tan solo
llevar el cursor a una esquina y modificarlo manualmente.
Aplica lo aprendido
Aplicacin 4.4: En el web site Naturaleza, modifica la pgina inicio.html para que el
encabezado este centrado y la informacin este contenida en una tabla, entre el men y
el primer sub ttulo coloca las filas necesarias para colocar la imagen
arboles_zonas.jpeg. Crea dos zonas interactivas en esa imagen para que enlacen las
pginas videosnat.html y reciclaje.html.
Captulo IV: Hipervnculos
Tema: Insertar hipervnculos de correo electrnico y men principal
Inserta hipervnculos de correo electrnico y men principal
Observa atentamente el siguiente anuncio:
Centro de Informacin y Educacin

para la Prevencin del Abuso de Drogas
Av. Roca y Boloa 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/
Cmo puedes hacer que al colocar el mouse sobre la direccin electrnica o sobre la
direccin de la URL puedas ingresar directamente a la pgina? Convrsalo con tus
compaeros
Mapa de Contenidos
Hipervnculos
Insertando
hipervnculo de
correo electrnico
Insertando
hipervnculo del
men principal
Creando una barra

de men
horizontal
Insertando hipervnculo de correo electrnico

Es casi igual que insertar los anteriores hipervnculos, pues tambin puede conectarse a un
texto o una imagen. Lo nico que vara es el cdigo del enlace.
Sigue los siguientes pasos:
Paso 1: Abre el documento inicio.html y selecciona la direccin de correo electrnico
mencionada.
Paso 2: En el Inspector de propiedades busca la opcin Vnculo, coloca: mailto:elcorreo y

como destino seleccionas blank.
Paso 3: Presiona F12 y graba. Prueba haciendo clic en el enlace. Para utilizar esta funcin,
deberas utilizar un programa predeterminado para enviar correos electrnicos, como Microsoft
Outlook.
Insertando hipervnculo del men principal

Para finalizar con la creacin de tu blog, aprenders a instalar el men principal de navegacin
de tu pgina.
Sigue cada uno de los pasos que te presentamos a continuacin:
Paso 1: En el documento inicio.html, ubcate en la tabla correspondiente al men, ingresa los
textos tal como en la grfica 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 incluirs al men creado, con las
siguientes caractersticas: Comic Sans, 18px, bolder, color blanco, Text align: center. El
resultado es el siguiente:
Paso 3: Crea los hipervnculos correspondientes a cada ttulo de men mostrado. En el caso
del men Nosotros crearas el hipervnculo hacia una pgina nosotros.html, que desarrollars
como ejercicio prctico ms adelante.
3
Creando una barra de men horizontal
Paso 1: Ubcate en la celda de la barra de men continua a Inicio, luego selecciona el men
Insertar, da clic en la opcin Spry y luego en la opcin Barra de men Spry.
Paso 2: Se mostrar una ventana y debers escoger la

opcin 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 ms
elementos con el signo ms.
4
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 inclusin de los archivos
correspondientes a la barra de men Spry.
Paso 9: Para cambiar los colores de los enlaces, debes ir a Propiedades de pgina, Vnculos
CSS, y editar la informacin. Color de vnculo: #FFF, vnculo de sustitucin: #0033CC, vnculos
activos: #06C y vnculos visitados: #CCC.
Ahora tienes que llevar el nuevo esquema del encabezado a todas las dems pginas de tu
web, para que sea uniforme. Asimismo, no te olvides de colocar el fondo en todas tus pginas.
Aplica lo aprendido
Aplicacin 4.5: Crear la pgina nosotros.html en esta pgina debes colocar el

nombre y una foto de tu colegio o de tus compaeros en el colegio. Luego coloca
informacin del grado y seccin que cursas y explica a los visitantes del sitio web
porque consideras que es importante la creacin de un blog de noticias escolares.
Aplicacin 4.6: En el sitio web Historia, abre la pgina culturas.html y en la parte
superior sobre el ttulo, inserta un men horizontal con Spry.
Reflexiona
Te result sencillo aplicar lo que aprendiste? Por qu?
Investiga que otras pginas, que sean de tu inters, te permiten

acceder al correo electrnico o la pgina web
Proyecto Integrador
El proyecto ser un trabajo individual que consistir en elaborar un blog informativo sobre un
tema de inters.
1. Sobre el tema:
a. Para la seleccin del tema busca en la web, blog que contengan diversas temticas,
ello te orientar en la elaboracin y diseo. Sugerencias de temas son: Derechos
humanos, Cambio climtico o Aspectos que fundamentan la peruanidad: costumbres
y tradiciones. Coordina con tu profesor y escoge un tema de tu inters.
b. De acuerdo al tema escogido, define un nombre para tu blog.
c. Considera que por lo menos debers elaborar 5 pginas web y una de ellas debe
presentar el tema que vas a tratar.
d. Busca fotografas, videos o msica que puedas colocar en tu blog y que estn
relacionadas al tema.
2. Sobre la elaboracin:
a. Configura un nuevo sitio web para tu blog, incluye las carpetas que necesitaras para
ordenar la informacin que vas a mostrar (fotos, imgenes, etc.).
b. Determina un esquema bsico usando tablas, ubica la posicin para el ttulo, el men
etc. Guarda este esquema bsico como esquema.html para que te sirva como base
para crear las distintas pginas de tu web site.
c. Utiliza reglas de estilo para definir los distintos formatos de texto, colores y alineacin de
elementos como tablas e imgenes.
d. Identifica dnde puedes colocar enlaces exteriores y crea el hipervnculo hacia otras
pginas.
e. Busca las zonas interactivas que quieras realizar en tu boletn.
f.
Crea el men del esquema principal y ubica los enlaces para navegar por tu blog.
3. Sobre la presentacin:
El blog lo entregars a tu profesor en un CD o DVD, donde colocars toda la carpeta que
contenga tu web site.

Dreamweaver Fichasdeaprendizaje2014 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Dreamweaver Fichasdeaprendizaje2014 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Ficha de Aprendizaje N 1

Curso: Creacin de pginas Web con Adobe Dreamweaver

Ingresa al programa y reconoce los elementos del entorno

Para ingresar al espacio de trabajo de Dreamweaver, haz clic

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

A. Barra de herramientas Documento B. Barra de la aplicacin C. Ventana de documento D.

Elementos del entorno

Vistas del documento

Tipo de espacio de trabajo

Creando un nuevo documento

Paso 1: Ingresa a la aplicacin y crea un nuevo

Paso 2: Gurdalo en la carpeta Dreamweaver y nmbralo web,

Copiando texto de fuente externa

Paso 2: Luego ubcate en Dreamweaver y coloca el cursor al inicio y selecciona el men

Observa que se han conservado los colores y formatos del texto

Aplicacin 1.1: Arrastra y une las imgenes con el texto correspondiente.

Ingresa texto al programa y lo edita.

Observa la siguiente imagen:

Cmo crees que se realiz? Qu otros documentos similares podras realizar?

Paso 1: Selecciona el ttulo del blog:

Paso 2: Luego, dirgete al Inspector de

Con esta opcin, puedes diferenciar

Editando el encabezado color de letra

Paso 3: A continuacin, da un solo clic en

para acceder a la paleta de colores y

Para continuar realizando modificaciones debes desmarcar la opcin En vivo.

Editando el encabezado extras

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

Paso 2: Este es el resultado:

Aplicacin 1.3: Abre el documento boletn.html que trabajaste en la ficha y

Curso: Creacin de pginas Web con Adobe Dreamweaver

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

Crear una regla

Aplicar una regla

Crear una regla CSS

Lunes 3 de marzo de 2014

Comenzando la primera semana de clases!!

Ha empezado este nuevo ao escolar, con muchas novedades y mucho

Luego, realiza los siguientes pasos:

Paso 3: Con esta opcin seleccionada, le das clic en Editar regla.

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

1. Nombra a la nueva regla: cuerpo

Aplicar una regla CSS

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

Observa que se aplic el formato que se haba definido con

Crea listas y sub listas para darle ms orden a su diseo.

Creando una lista

Creando una sub

Creando una lista

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

Paso 3: Luego de ingresar el segundo elemento presiona al mismo tiempo la combinacin

Cambio de lnea sin

Creando una sub lista

Luego, tienes una sub

Retornar a una lista

Tendrs que seguir los siguientes pasos:

Paso 1: Primero, presiona Enter para crear un

Investiga Por qu el programa te da a escoger familias de

Configura la web donde trabajar.

Creando un nuevo sitio

Por ahora solo ingresars los datos en la opcin Sitio como se

Paso 3: Luego, selecciona la primera opcin

Creando subcarpetas en tu nuevo sitio