P g i n a | 1

Fundamentacin
Los documentos web son creados en base al lenguaje HTML y existen
diversas aplicaciones que generan de forma fcil. Son formatos empleados
para navegar en internet.
Esta Unidad proporciona informacin sobre cmo crear una cuenta, la
naturaleza de las pginas web, la creacin de blogs, la creacin de entradas,
la implementacin con gadgets y la administracin en general de la cuenta de
blog.
Capacidad
El participante al final de esta unidad estar en capacidad de administrar una
cuenta de blog y los componentes internos de la pgina web.
Contenidos
1. Pginas Web y cdigos HTML.
2. Creacin de una cuenta de blog.
3. Implementacin de componentes internos.
4. Publicacin del blog.

Actividades
UNIDAD

2
GUIA DIDCTICA

P g i n a | 2

Las actividades a desarrollar en la Unidad son:
Asumiendo que la empresa ABC en la cual trabajas necesita publicitar
un Sistema de pginas web enlazadas que puedan compartir con sus
clientes informacin de la empresa y que este proyecto est a tu
mando. Considera crear 03 pginas con las caractersticas que te
indican:

Pgina1
o Utilizar Microsoft Word
o Crear un contenido que muestre la MISIN Y VISIN de
la empresa.
o Usar tablas, bordes, imgenes de archivo (las fotos deben
estar en su carpeta), fondo, etc.
Pgina2
o Utilizar el block de Notas
o Buscar en internet RECURSOS RELACIONADOS con las
empresas y copiar sus cdigos externos (msica, videos,
gif animados, contadores de pginas, etc.) y pegar en su
documento.
Pgina 3
o Utilizar Dreamweaver
o Crear una interfaz APROPIADA que muestre algunas fotos
institucionales y texto vinculado a la Pgina1 y Pgina2.


Utilizar los nombre de los archivo a su criterio.
Comprimir su carpeta de trabajo.
Publicar en su aula virtual o remitir al docente para su calificacin.

P g i n a | 3



Estrategias Metodolgicas
Para desarrollar la presente unidad llevaremos a cabo dos tipos de
actividades:
1. Lectura Inicial de Contenidos, la realizaremos de manera ordenada,
presenta los aspectos tericos. Si se presenta alguna Duda se puede
realizar lecturas sobre puntos especficos en la seccin de Material
Complementario.
2. Actividades a Desarrollar en la Unidad, se encuentran en el apartado de
Actividades, donde constan: las consignas o indicaciones.

Recuerde que el Aula Virtual de la UCV, se emplear como medio de
comunicacin entre el docente y los estudiantes, para efectos de mensajera
interna, foros, evaluaciones virtuales, acciones de tutora acadmica y
comunicacin de resultados de evaluacin de los aprendizajes.

Evaluacin
En esta Unidad Ud., ser evaluado en:
1. Creacin de una cuenta blog usando el servidor www.blogger.com
2. Implementacin de un blog sobre el tema propuesto con una entrada
como mnimo y otros componentes como fotos, estadsticas, cdigos
externos, etc.
3. Publicacin en la web y compartir su direccin URL.

Es importante que Ud., este en constante comunicacin con su docente Tutor,
ya sea para informar de dificultades, avances de las tareas, etc. Recuerde
que ser calificado de acuerdo a las rbricas de evaluacin de cada actividad;
por ejemplo: se le evaluar por la entrega oportuna de sus actividades.
Material Complementario

P g i n a | 4

A continuacin se te presentan algunos enlaces donde encontrars
informacin complementaria para ampliar y profundizar tus conocimientos.
Manual de Dreamweaver Cs5.Pdf
Video:
formatos web





http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe






P g i n a | 5







Estructura de Contenidos:
1. Entorno Adobe Dreamweaver
2. Formatos HTML.
3. Formatos y Estilos.
4. Creacin de Tablas.
5. Estructuracin web.





http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe





UNIDAD
2
Diseo de Sitios Web: Dreamweaver

P g i n a | 6


Introduccin

Estimado participante:
En esta oportunidad le damos la bienvenida a esta nueva unidad de
aprendizaje, donde aprender los fundamentos necesarios para el diseo de
Sitios Web usando Dreamweaver que le servir en diferentes circunstancias
de su vida profesional.
Dreamweaver es un software especializado en diseo y control de
Sitios Web que tiene en la pgina Web a su principal componente y el curso te
brinda la oportunidad de convertirla en una herramienta colaborativa en tu
mbito profesional.
Iniciaremos con el reconocimiento del entorno Adobe, de las
propiedades bsicas y los estilos disponibles. Aplicaremos tablas como un
contenedor bsico y finalmente mostraremos los trabajos en internet.
Te deseamos xitos en el desarrollo de esta Unidad.


Importante:
Si deseas investigar ms sobre diseos de sitios Web, podrs encontrar material
adicional en los enlaces web de las referencias.
!

P g i n a | 7


DISEO DE SITIOS WEB : DREAMWEAVER
.- ENTORNO ADOBE DREAMWEAVER
El entorno Adobe es similar para todas las aplicaciones que brinda esta
suite, esta ventaja permite adaptarse rpidamente y facilita el uso de
los archivos generados. Dreamweaver es la generadora de la pgina
web y alberga a todos los componentes soportados por la web.
Ej.
01. Clic en botn Inicio, clic en Programas y ubicar la suite Adobe
Design Premiun CS5. Clic en Adobe Dreamweaver CS5

02. Reconocer que dispone de una barra de men (parte superior), un
men rpido (panel de presentacin), paneles de herramientas (zona
derecha) y una zona de propiedades (parte inferior)

P g i n a | 8


03. Para crear una nueva pgina web debe hacer clic en: men
Archivo, opcin Nuevo, opcin Pgina en blanco, categora HTML,
diseo <ninguno>, botn Crear.

P g i n a | 9


04. Para guardar la pgina web en una carpeta llamada Unidad02 debe
hacer: clic en men Archivo, opcin Guardar, botn Crear nueva
carpeta; escribir Unidad02 como nombre de carpeta; clic en botn
Abrir; escribir el nombre ejemplo01; clic en Guardar

P g i n a | 10



P g i n a | 11


05. Escribir una frase clebre y su autor. Seleccione el texto y buscar
entre las propiedades CSS el formato de fuente: Arial Black, Gadget,
Sans-serif. Registrar con el nombre frase a ese estilo. Clic en
Aceptar para guardar ese estilo.


P g i n a | 12


06. Agregar nuevos formatos en el estilo frase como se indica: clic
en negrita (B), en centrado; elegir tamao 24 px y color rojo.

07. Aplicar un color de fondo Amarillo a la pgina como se indica: clic
en men Modificar; elegir el color de fondo Amarillo y clic en Aceptar

P g i n a | 13



08. Guardar los cambios y cerrar: clic en men Archivo, opcin
Guardar; clic en men Archivo y opcin Salir.


Consulta el siguiente material para incrementar tus conocimientos:
Manual de Dreamweaver Cs5
!

P g i n a | 14

.- FORMATOS HTML
Es el formato que utilizan todos documentos en internet. Se
caracteriza por generar etiquetas HTML con distintos propsitos. Abobe
Dreamweaver genera por defecto sus archivo con este formato. Sin
embargo existen otras aplicaciones que tambin pueden generar
pginas web como son los editores nativos (Ej. Block de Notas) y los
editores profesionales de texto (Ej. Microsoft Word). Adobe
Dreamweaver puede editar cualquier documento web sin importar el
origen donde fue creado.
Ej.
01. Comprobar que todas las pginas web utilizan este formato: cargar
la pgina de la ucv (http://www.ucv.edu.pe) o la que desea; botn
derecho sobre alguna zona libre en la pgina y clic en opcin Ver
cdigo fuente.


P g i n a | 15


02. Crear una pgina usando el editor Block de Notas: Clic en Inicio,
Programas, Accesorios, Block de Notas; escribir el cdigo indicado; Clic
en men Archivo, opcin Guardar (utilizar la carpeta Unidad02
destinada para este clase); escribir el nombre ejemplo02.htm (no
olvidar la extensin htm); clic en botn Guardar

P g i n a | 16




P g i n a | 17


03. Verificar que se ha creado. Abrirlo con doble clic para verlo en su
navegador.


P g i n a | 18


04. Crear una pgina web usando Microsoft Word: clic en Inicio,
Programas, Microsoft Office, Microsoft Word; clic en Archivo, Guardar;
elegir tipo Pgina Web; escribir como nombre ejemplo03; clic en botn
Guardar.


P g i n a | 19



04. Crear un contenido apropiado y guardar cambios: agregar un
ttulo, una tabla, un texto e imagen copiados desde internet, colores

P g i n a | 20

de celda y color de fondo, como se indica. Luego, clic en Archivo,
Guardar.


05. Verificar que se genera una carpeta que contiene los archivos
empleados en la pgina web

P g i n a | 21


06. Cargar Adobe Dreamweaver y verificar que puede editar cualquier
formato HTM usando sus vistas Cdigo y Diseo: clic en Inicio,
Programas, Adobe Design Premium CS5, Adobe Dreamweaver CS5;
clic en men Archivo, opcin Abrir; elegir el archivo ejemplo01, luego
repetir para archivos ejemplo02 y ejemplo03


P g i n a | 22




P g i n a | 23




P g i n a | 24





P g i n a | 25

.- FORMATOS Y ESTILOS
Los formatos son comandos que tienen como objetivo el cambio de
apariencia de un componente (Ej. Negritas, fuentes, tamao,
alineacin, etc.). El conjunto de formatos que se pueden agrupar y ser
utilizado en bloque mediante un nombre identificados se le conoce
como Estilo.
Ej.
01. Ubicarse en la pgina ejemplo02, activar la vista Dividir y verificar
que los formatos HTM son universales y no necesitan guardarse:
<b></b> equivale a Negrita


02. Si al texto Nombre: se le agrega otros formatos distintos a
HTML, es decir CSS nos pedir registrar el estilo: aplicar color Rojo y
asignar como nombre MiFormato, luego Aceptar

P g i n a | 26


03. Verificar que el texto toma ese color y en sus cdigos aparece la
etiqueta <style></style> donde el nombre es .MiFormato. Adems
verificar que el formato negrita ahora usa ese estilo como adicional <b
class=MiFormato></b>

04. Agregar ms formatos al mismo estilo: seleccionar texto con estilo
actual, agregar otro formato (fuente: Courier New y tamao: 18) y

P g i n a | 27

verificar que se agrega automticamente comandos debajo de
.MiFormato

05. Aplicar el mismo estilo a otros textos: seleccionar el texto y
escribir el argumento class=MiFormato o elegir de la lista de estilos
disponibles


P g i n a | 28




Afianza tus conocimientos con el siguiente Video:
formatos web


.- CREACIN DE TABLAS
Las tablas son contenedores de componentes web que facilitan su
ubicacin en filas y columnas. Son muy tiles cuando de distribucin
tabular se trata. Para crearlas se debe definir su tamao (nro de filas x
nro de columnas) y luego aplicar formatos para alinear, colorear,
combinar, etc.
Ej.
01. Crear una tabla de 4x2 en el ejemplo01 con las indicaciones
dadas: ubicar el cursor debajo del contenido actual; clic en men

P g i n a | 29

Insertar, Tabla; definir los valores Filas=4, Columnas=2, Ancho=600,
Borde=2, Relleno=0, Espacio=0. Clic en Aceptar


02. Ubicar el nombre del autor en la celda1 y su frase clebre en la
celda2 (en la fila1): seleccionar, arrastrar y soltar.

P g i n a | 30


03. Completar la tabla con otras frases: buscar en internet, copiar y
pegar.

04. Aplicar el mismo estilo a las frases nuevas: use la lista de estilos
disponibles.

P g i n a | 31


05. Alinear la tabla: clic en su borde, elegir el valor Centro de la lista
Alinear.




P g i n a | 32

.- ESTRUCTURACIN WEB
Cuando se tiene varias pginas que desea mostrar ya no le ser til
informar del link de cada una sino pensar en la mejor forma de
mostrarlas usando una pgina principal que pueda acceder a todas de
la manera ms agradable posible. El orden de los links (accesibilidad) y
la facilidad de usarla (usabilidad) no tiene regla porque depender de
su gusto, pero si podemos establecer un modelo recomendable.

Ej.

01. Crear una pgina web llamada index: volver a Dreamweaver,
men Archivo, Nuevo, Pgina en blanco, HTML, <ninguno>, botn
Crear; clic en men Archivo, Guardar; escribir el nombre index; clic en
Guardar

P g i n a | 33




P g i n a | 34


02. Crear una tabla de 2x3, 300 de ancho, sin bordes y alineada al
centro: pulsar dos veces ENTER para alejarse del lmite superior; clic
en men Insertar, tabla; definir Filas=2, Columnas=3, Ancho=300,
Borde=0, Espacio=0, Relleno=0; clic en Aceptar; clic en su borde y
entre sus propiedades, elegir valor Centro de la lista Alinear.

P g i n a | 35





P g i n a | 36

03. Descargar desde internet dos fotos (personal y fondo web) o copiar
a su carpeta si la tiene como archivo: cargar google.com; clic en
Imgenes; escribir texto apropiado; ubicar la imagen; botn derecho
en la imagen y clic en Guardar imagen como (asuma como nombre
foto y fondo)



P g i n a | 37




P g i n a | 38



P g i n a | 39


04. Insertar la imagen foto en la celda2 de la fila1: clic en la celda
indicada para ubicar el cursor; clic en men Insertar, opcin Imagen;
buscar la imagen foto; clic para seleccionar; clic en Insertar; clic en
Aceptar


P g i n a | 40




05. Definir la dimensin de las celdas y la imagen (Ancho: 100 y Alto:
200): clic en celdas y escribir en la propiedad An=100, Al=200 para
cada celda; luego clic en la imagen y volver a especificar los mismo
valores An y Al.

P g i n a | 41




06. Agregar textos en las celdas de la fila2 como se indica: FRASES,
FICHA, FAVORITA


07. Vincular los textos a las pginas respectivas segn el modelo
sugerido: clic en estilos HTML; seleccionar texto FRASES; ubicar la
propiedad Vnculo; clic en icono de carpeta de esa propiedad y buscar
la pgina web ejemplo01. Repetir el texto FICHA con el ejemplo02 y
texto FAVORITAS con el ejemplo03

P g i n a | 42





P g i n a | 43





P g i n a | 44





08. Agregar la imagen de fondo: clic en men Modificar, Propiedades
de la pgina; ubicar y clic en el botn Examinar; seleccionar el archivo

P g i n a | 45

fondo y clic en botn Aceptar. Clic en Aceptar del dilogo Propiedades
de la pgina.



P g i n a | 46






P g i n a | 47

09. Alinear las celdas de la fila2: clic al inicio de la fila2, ubicar el
formato botn Centrar en los formatos CSS; registrar con el nombre
MiAlinea.



10. Guardar los cambios y verificar la navegacin: clic en men
Archivo, Guardar todo; clic en Archivo, Salir. Ubicar el archivo index en
su carpeta y abrirlo con doble clic. Verificar en el navegador con un clic
en FAVORITAS


P g i n a | 48





P g i n a | 49




Glosario de Trminos

Suite: Conjunto de aplicaciones que contiene un paquete fabricado o patentado por una
empresa de software.
Diseo: Forma grfica de cmo se distribuyen los objetos en la pgina web.
Cdigo fuente: Conjunto de etiquetas HTML con que se construye una pgina web.
Estilo: Conjunto de formatos registrados con un nombre.
Vnculo: Recurso Web para poder mostrar una pgina web a partir de otra activa.
Referencias:

Aprender a usar dreamweaver cs5 - YouTube
http://www.youtube.com/watch?v=o7rnbkDwqiQ 14 Ene. 2012 - 6
min. - Subido por designporcomputadora


P g i n a | 50


Prctica Desarrollada

01. Crear una carpeta de trabajo en la unidad deseada con el nombre
PRACTICA02.
Ej.



02. Cargar Word y crear una pgina sobre su fruta favorita: buscar
Microsoft Word, crear un documento, men Archivo, Guardar
como.MiFrutaFavorita, elegir el tipo Pgina web, aplicar un color de
fondo, crear un documento como se indica (puede utilizar informacin
de internet). Guardar cambios y cerrar.



P g i n a | 51







03. Cargar el block de Notas, Guardar como MiDeporteFavorito.htm y
escribir el siguiente cdigo. Guardar cambios y cerrar.

P g i n a | 52

Ej.





P g i n a | 53


04. Cargar Dreamweaver y crear un portal que vincule a las pginas
anteriores: buscar Adobe Dreamweaver, Crear nuevoHTML, men
Archivo y clic en Guardar, asignar como nombreindex y clic en
guardar.







05. Insertar una foto personal y agregar dos opciones vinculadas:
copiar una foto en su carpeta, volver a Dreamweaver, men Insertar,

P g i n a | 54

clic en opcin Imagen, seleccionar la foto, Aceptar dilogos. Escribir 2
textos como prrafos. Seleccionar el texto y ubicar la propiedad
Vnculo. Clic en la carpeta amarilla y seleccionar el archivo que
corresponda.






P g i n a | 55






P g i n a | 56



06. Alinear al centro: men Edicin, clic en opcin Seleccionar todo,
elegir la categora CSS en la barra de propiedades y clic en botn
Centrar. Aceptar las opciones del dilogo y verificar que se alinean.


P g i n a | 57







P g i n a | 58

07. Guardar los cambios, salir y verificar: men Archivo, clic en
Guardar todo. Archivo, Salir. Ver la carpeta de trabajo y abrir el
archivo llamado index.








P g i n a | 59


AUTOEVALUACIN

Leer las instrucciones y marque la opcin correcta

01. Adobe Dreamweaver se especializa en
a) Fotos b) Pgina Web c) Pelculas d)
Todos

02. La etiqueta <hr> representa a un(a)
a) Botn b) lnea horizontal c) tabla d)N.A

03. Es un conjunto de caracterstica identificada por un nombre
a) Formatos b) Estilos c) Imagen d)N.A


04. Facilita la ubicacin de contenidos tabulares
a) Prrafo b) Tabla c) Pgina Web d) Todos


05. No es una vista permitida en Dreamweaver para la pgina seleccionada
a) Cdigo b) Diseo c) Marcos d) N.A.



P g i n a | 60







Prctica de Reforzamiento
Con la presente prctica, el alumno podr reforzar sus conocimientos en la
creacin y edicin de pginas web enlazadas.

CASO:
Asumiendo que la empresa ABC en la cual trabajas necesita publicitar un
Sistema de pginas web enlazadas que puedan compartir con sus clientes
informacin de la empresa y que este proyecto est a tu mando. Considera
crear 03 pginas con las caractersticas que te indican:

Pgina1
o Utilizar Microsoft Word
o Crear un contenido que muestre la MISIN Y VISIN de la
empresa.
o Usar tablas, bordes, imgenes de archivo (las fotos deben estar
en su carpeta), fondo, etc.
Pgina2
o Utilizar el block de Notas
o Buscar en internet RECURSOS RELACIONADOS con las
empresas y copiar sus cdigos externos (msica, videos, gif
animados, contadores de pginas, etc.) y pegar en su
documento.
Pgina 3
UNIDAD
2

P g i n a | 61

o Utilizar Dreamweaver
o Crear una interfaz APROPIADA que muestre algunas fotos
institucionales y texto vinculado a la Pgina1 y Pgina2.


Utilizar los nombre de los archivo a su criterio.
Comprimir su carpeta de trabajo.
Publicar en su aula virtual o remitir al docente para su calificacin

CONSIGNA:
1) Cargar Word y guardar el documento con el tipo Pginas Web
2) Desarrollar con las herramientas de Word el portal solicitado
3) Cargar el Block de Notas y guardar con extensin HTM
4) Copiar los cdigos HTML solicitados
5) Cargar Adobe Dreamweaver y guardar como index
6) Crear una interfaz apropiada para que 2 textos o imgenes se
vinculen a las pginas anteriores.
RBRICA DE EVALUACIN
CRITERIOS
Deficiente
(1)
Regular
(2)
Bueno
(3)
Excelente
(4)
Edicin de
las pginas
web.
No crea nada.
Crea solo una
pgina.
Crea solo dos
pginas.
Crear las tres
pginas
solicitadas.
Implementac
in de las
pginas web
Crea pginas
en blanco.
Crea solo
textos..
Crear solo texto
y objetos
locales.
Crear texto,
objetos locales
y cdigos
externos.
Enlazar las
pginas web
No utiliza
hipervnculos.
Solo enlaza a
una pgina
web.
Enlaza a las
dos pginas
web sin
retorno.
Enlaza a las
dos pginas
web con
retorno.

P g i n a | 62






http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe