7

Unidad
DISEÑO PÁGINAS WEB DE
NUESTRO ARTE PERUANO EN
DREAMWEAVER CS6

E
NT
CE
DO Logros:
• Diseño páginas web de personajes
peruanos .
• Diseño páginas web con plantillas.
• Empleo tablas para elaborar
páginas de nuestro arte milenario.
L
• Uso etiquetas Div PA para crear
DE

páginas web.
ÍA
GU

Valores para la vida:

Tolerancia Es vivir en armonía con quienes piensan distinto que yo.

Sesión UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

25 PROYECTO:
DISEÑO PÁGINAS WEB DE PERSONAJES PERUANOS

E
NT
CE
DO
Modelo Final
ACTIVIDADES: Aprendo:
a. Identifico las partes de Dreamweaver. Dreamweaver es un
b. Aplico formato de textos al documento. programa orientado al
c. Guardo el documento como página web. diseño de páginas web.
L

a. Identifico las partes de Dreamweaver.

2
DE

Para identificar las

1 partes de Dreamweaver:
3 1. Haz clic en la Barra de
menús.
2. Barra de título.
4
ÍA

8 3. Barra de documentos.
4. Vista diseño del
documento
GU

5. Selector de etiquetas.
5 6. Inspector de
propiedades.

6 7 7. Grupo de paneles.
8. Panel activo.
90
 UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Sesión 25 Proyecto: Diseño páginas web de personajes peruanos.

b. Aplico formato de textos al documento.

Para aplicar formato de textos al

E
documento:
1. Ingresa a Dreamweaver y copia un

NT
texto de los artistas peruanos que
destacan en el extranjero.

1 2. Haz clic en el selector de etiqueta Body.

3. Selecciona el tipo de fuente del panel

CE
propiedades.
4. Haz clic en Aceptar para confirmar el
selector de etiquetas.
5. Selecciona el título de la página.
6. Haz clic en el menú Formato.
DO
7. Selecciona la opción formato de 2
párrafo Encabezado 1.
8. Haz clic en el botón Propiedades de 3
página.
9. Selecciona el color de fuente y color
de fondo haciendo contraste.
L
10. Haz clic en Aceptar.
4
DE

5
7
ÍA

6
9
GU

8 10
91
 UNIDAD UNIDAD
7 7 PÁGINAS
DISEÑO DISEÑO
WEB
PÁGINAS
DE NUESTRO
WEB DE
ARTE
NUESTRO
PERUANO
ARTEENPERUANO
DREAMWEAVER
EN DREAMWEAVER
CS6 CS6

Sesión 25 Proyecto: Diseño páginas web de personajes peruanos.

c. Guardo el documento como página web.

Para guardar el documento

E
como página web:
1

NT
1. Haz clic en Insertar imagen.
2. Selecciona la imagen de un
2 artista peruano previamente
guardada en una carpeta.
3. Haz clic en Aceptar.

CE
4. Escribe un texto alternativo
3 para identificar el objeto
imagen.
DO 5. Haz clic en Aceptar. Inserta
otras imágenes de artistas.
6. Haz clic en el menú Archivo.
4 7. Haz clic en Guardar.
5 8. Crea una carpeta para
guardar la imagen.
9. Escribe un nombre de
L
archivo.
10. Haz clic en Guardar.
DE

6 8
7 Recuerda:
ÍA

La vista diseño
tiene un entorno
similar a Word,
puedes editar
GU

textos e insertar
10 objetos.
9

92
UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6 Sesión

PROYECTO:
DISEÑO PÁGINAS WEB CON PLANTILLAS 26

E
NT
CE
Modelo Final
ACTIVIDADES: Aprendo:
DO
a. Utilizo plantillas para crear páginas web. Las plantillas son modelos
b. Creo un sitio web para la página. profesionales prediseñados para
c. Guardo la página web como plantilla. sitios Web que se pueden editar y
personalizar fácilmente.
a. Utilizo plantillas para crear páginas web.
Para utilizar plantillas en la
L
creación de páginas:
DE

1. Inicia
1 Dreamweaver
selecciona Nuevo del menú
y

Archivo.
2. Haz clic en Plantilla en blanco.
2 3. Selecciona Plantilla HTML.
4. Haz clic en 2 columnas
4
ÍA

3 5
flotantes y barra lateral
7 izquierda.
5. Selecciona las opciones HTML
GU

5 y Crear nuevo archivo.

6 6. Haz clic en Aceptar.
7. Crea la carpeta CSS.
8. Escribe el nombre “Estilos”.
8 9 9. Haz clic en Guardar.
93
 UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Sesión 26 Proyecto: Diseño páginas web con plantillas.

b. Creo un sitio web para la página.

E
Aprendo:
1

NT
Un sitio de
Adobe
Dreamweaver
es el conjunto
de archivos y
2

CE
activos del sitio
web.
Para crear un sitio web para
la página: DO
1. Ingresa a Dreamweaver y
haz clic en Nuevo sitio. 3 4
2. Escribe el nombre del sitio, 6
para este caso “Animes
famosos”. 5
3. Haz clic en Examinar para
ubicar el sitio en una carpeta.
L
4. Haz clic en Guardar. 7
DE

5. Modifica el contenido de
la página sobre los animes
famosos. 8 9
6. Haz clic en la pestaña Activos
del panel Archivos.
7. Arrastra la imagen fondo
ÍA

hacia la parte superior de la

página.
8. Escribe el atributo ”Logo”
GU

para la imagen.
9. Haz clic en Aceptar.
10. Selecciona un color de texto 10
para el contenido de la página.

94
UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Sesión 26 Proyecto: Diseño páginas web con plantillas.

c. Guardo la página web como plantilla.

E
Para guardar la página web como
plantilla:

NT
1. Haz clic en cada imagen.
2. Arrastra una por una las imágenes
2 1 y modifica su tamaño.
3 3. Haz clic en el menú Archivo.

CE
4. Haz clic en la opción Guardar
como plantilla.
5. Haz clic en Aceptar para
continuar.
4 DO 6. Escribe el nombre “Animes” para
la plantilla.
7. Haz clic en Guardar.
8. Presiona la tecla F12 para
visualizar en el navegador
predeterminado.
L
DE

7
ÍA

8
F12
GU

95
Sesión
Sesión UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

27
7 PROYECTO:
EMPLEO TABLAS PARA ELABORAR PÁGINAS DE NUESTRO
ARTE MILENARIO

E
NT
CE
DO
Modelo Final
ACTIVIDADES:
Aprendo:
a. Utilizo tablas para distribuir el contenido de la página. Dreamweaver permite
b. Inserto imágenes en la celda activa. manipular columnas,
L
c. Creo una sustitución de imágenes. filas y celdas.
a. Utilizo tablas para distribuir el contenido de la página.
DE

Para utilizar tablas en la

distribución de contenido:
3 1. Inicia Dreamweaver y
2 1 selecciona el panel insertar.
2. Haz clic en Tabla.
ÍA

6 3. Modifica el número de filas

a 4 y columnas a 1.
4 7 4. Haz clic en Aceptar.
GU

5. Haz clic en la segunda celda

5 y luego en Dividir celdas.
6. Selecciona columnas y el
número 5.
7. Haz clic en Aceptar.
96
 UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Proyecto: Empleo tablas para elaborar páginas de nuestro arte

Sesión 27 milenario.

b. Inserto imágenes en la celda activa.

E
NT
1

CE
2
Para insertar imágenes en la
celda activa:
DO
1. Haz clic en la primera celda.
2. Haz clic en la opción
Imagen.
3. Selecciona una imagen 3
como logo previamente
L
descargada.
4. Haz clic en Aceptar.
DE

5. Escribe en cada celda de

la fila 2 las épocas del arte. 4
6. Selecciona el menú Formato.
7. Haz clic en la opción
6
ÍA

encabezado 2 para el
tamaño de las épocas.

Aprendo:
7
GU

Cada vez que insertas un

objeto, éste se muestra en el 5
selector de etiquetas.

97
 UNIDAD UNIDAD
7 7 PÁGINAS
DISEÑO DISEÑO
WEB
PÁGINAS
DE NUESTRO
WEB DE
ARTE
NUESTRO
PERUANO
ARTEENPERUANO
DREAMWEAVER
EN DREAMWEAVER
CS6 CS6

Proyecto: Empleo tablas para elaborar páginas de nuestro arte

Sesión 27 milenario.

c. Creo una sustitución de imágenes.

E
NT
3 1

CE
DO
2
4 5
Para crear una sustitución de imágenes:
L
1. Haz clic en la opción Imagen de sustitución.
DE

6 2. Haz clic en Examinar para seleccionar la

imagen original.
3. Haz doble clic en la primera imagen.
4. Haz clic en Examinar junto a Imagen de
7 sustitución para la segunda imagen.
ÍA

5. Haz clic en Aceptar.

6. Selecciona la primera celda.
7. Cambia el color de fondo.
GU

8. Pulsa F12 para mostrar la página en un

F12
8 navegador.
Recuerda:
Para imágenes de sustitución se
trabaja con dos imágenes.

98
UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6 Sesión

PROYECTO:
USO ETIQUETAS DIV PA PARA CREAR PÁGINAS WEB 28

E
NT
CE
DO Modelo Final
ACTIVIDADES: Aprendo:
a. Creo un diseño Div PA para insertar imágenes. Después de insertar una etiqueta
b. Inserto nuevos diseños Div PA para el contenido. div, puede manipularla o añadirle
c. Inserto nuevas imágenes a la página. contenido.
L
a. Creo un diseño Div PA para insertar imágenes.
Para crear un diseño Div PA:
DE

1 1. Ingresa a Dreamweaver y
2 selecciona el menú insertar.
2. Haz clic en la opción objetos
de diseño Div PA.
3 3. Se dibuja el objeto y
ÍA

modifica su tamaño.
4 4. Haz clic en Imagen del panel
5 Insertar.
GU

5. Selecciona la imagen
comidas típicas descargada
previamente para el
6 encabezado.
6. Haz clic en Aceptar.

99
 UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Sesión 28 Proyecto: Uso etiquetas Div PA para crear páginas web.

b. Inserto nuevos diseños Div PA para el contenido.

E
Para insertar nuevos diseños Div PA para el
contenido:
1

NT
1. Inserta un Div PA para crear el enlace ceviche.
2. Modifica su tamaño de fuente a 24.
3. Selecciona con clic derecho.

CE
4. Haz clic en la opción Copiar.
5. Pega con CTRL + V tres veces para y modifica su 2
contenido por otros platos.
6. Escribe un texto de bienvenida referente a la
comida típica peruana.
DO
7. Modifica del panel propiedades el color de
fuente del texto. 3
8. Haz clic en el menú Formato.
9. Selecciona la opción encabezado 2 para el
título “Presentación”.
L
DE

8
9 4
ÍA

6 5
+
GU

Aprendo:
Las etiquetas div que
7 tienen una posición
absoluta se convierten
en elementos PA.

100
 UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Sesión 28 Proyecto: Uso etiquetas Div PA para crear páginas web.

c. Inserto nuevas imágenes a la página.

E
Recuerda:

NT
Cuando se pasa
el puntero por
encima de una
etiqueta div,
Dreamweaver la 2

CE
resalta.

3
DO
1
L
Para insertar nuevas
imágenes a la página:
4
DE

1. Inserta un Div PA debajo

de la presentación.
2. Haz clic en la opción
Imagen del panel
Insertar.
ÍA

3. Haz doble clic en la

imagen de un plato
5 típico.
4. Agrega otros Div PA
GU

para cada imagen.

5. Haz clic en la pestaña
En vivo para observar
la página web en un
navegador.

101
UNIDAD 7 DISEÑO PÁGINAS WEB DE NUESTRO ARTE PERUANO EN DREAMWEAVER CS6

Zona Clic

Refuerzo lo aprendido Recuerda que...

E
Responde oralmente: Guarda tu trabajo en un
dispositivo de almacenamiento,
¿Para qué sirve Adobe dreamweaver?

NT
así no perderás tu información.

Conociendo más

CE
Barra de la aplicación: Se encuentra a lo largo de la parte superior de la
ventana de la aplicación y contiene un conmutador de espacios de trabajo,
menús (solo Windows) y otros controles de la aplicación.
DO
Barra de herramientas Documento: Contiene botones con opciones para las
diferentes vistas de la ventana Documento (como la vista Diseño, la vista En vivo
y la vista Código).
Barra de herramientas Estándar: Para mostrar la barra de herramientas
Estándar, seleccione Ventana > Barras de herramientas > Estándar. La barra de
herramientas contiene botones para realizar las operaciones más habituales
L
de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir
código, Cortar, Copiar, Pegar, Deshacer y Rehacer.
DE

Sabías que...
Usando combinaciones de teclas hacemos más fácil el trabajo:
ÍA

Acercar: + Rehacer:
+ Mayús
+ Z

+ Copiar: +
GU

Alejar:

Deshacer:
+ Z Pegar: +
102