Anda di halaman 1dari 39

Diseo de un

Proyecto Web

CIS
INSTRUCTOR: HILDA FREYRE CORDOVA | 2016

EB

PASO 1

Pgina | 1
Copiar al escritorio la carpeta PROYECTO WEB que se encuentra en la carpeta
compartida
Como primer paso vamos a proceder para crear varios banners para colocar en el
proyecto que vamos a disear
Para crear el banner abrir el programa de Firework. Crear un nuevo documento desde
el men Archivo - Nuevo
Tamao del documento nuevo: Ancho: 1200 px. ; Alto: 420 px ; Resolucin: 150
Tambin puedes ingresar desde
Dar clic aqu para
crear un nuevo
documento

Las medidas de este


documento son:
ancho:1200 px.
alto:420 px.
resolucion:150

Instructor: Hilda Freyre C.

Instructor: Hilda Freyre

COMPUTACION III

ISEO DE UN ROYECTO

COMPUTACION III

PASO 2
Para facilitar la diagramacin ir al Men Ver- Reglas, luego Men Ver Guas. Activar la regla y
guas
Pgina | 2

PASO 3
Procedemos a crear una Tira de Imgenes. As como en la muestra en la parte inferior. Importa
una por una las imgenes y coloca como se visualiza. (puede utilizar una gua para disear)

Paso A:

Ir al men Archivo Importar


Selecciona de la carpeta img , la imagen construccin as sucesivamente cada imagen
formando una Tira de imgenes como aprecias en la muestra en la parte superior.

Instructor: Hilda Freyre C.

COMPUTACION III

A
Pgina | 3

De la ventana Importar selecciona la imagen Construccin

Va incorporando las imgenes con archivo importar acomdalas hasta forma una tira de
imgenes, como se visualiza en la muestra, y las otras dos imgenes en la parte superior.

Instructor: Hilda Freyre C.

COMPUTACION III

Dibuje una lnea de color rojo tipo de lnea CERAS GORDO, as deber quedar como en la
muestra.

Pgina | 4

E
G

Para completar el diseo digita el Texto: FORMANDO PROFESIONALES COMPROMETIDOS CON


EL PAIS.
G3
G2

Digita el Texto

Men ventana Estilos,


selecciona el estilo

Terminas de crear el Baner ir al Men Ventana Optimizar, selecciona la extensin


JPG.
Luego Archivo - exportar--- digita en nombre Baner1 en el nombre del archivo en la
carpeta imgenes de tu Proyecto Web

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 5

Digita el nombre BANER1


K

PASO 3

Diseando el 2do Baner para el cual seguiremos los siguientes pasos que
a continuacin te vamos a guiar:
a. Abrir un nuevo documento de nuevo con las medidas del documento anterior ancho:
1200 px. Alto: 420 px. Resolucin 150

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 6

b. Se desea crear el siguiente diseo como se muestra en la imagen

Disear como se muestra en la imagen

Paso A:
a. Ir a la Caja de herramientas selecciona la herramienta rectngulo dibuja un rectngulo
sobre el lienzo,
b. Selecciona el rectngulo panel Propiedades en color de relleno solido dar el siguiente
color celeste #00BFFF
c. Luego importa la imagen del logo de la universidad, colcalo en la parte inferior.

Instructor: Hilda Freyre C.

COMPUTACION III

Digita este cdigo de color


C
A
B

Paso B:
El siguiente paso ser importar la imagen de la dama ir al men Archivo -Importar

Menu
Archivo
Importar

Selecciona la imagen clic Abrir

Asi quedara
puesta la
imagen

Instructor: Hilda Freyre C.

Pgina | 7

COMPUTACION III

PASO 4
Paso A:
Creando en la imagen una seleccin elptica
difuminada. Para este efecto debemos de
tener en cuenta los siguientes pasos:

Ir al Men Ver Bordes


Debe estar activo. Ver Bordes

Paso B:
Ir al Panel Propiedades, seleccione la opcin Borde Fundido -15

B
C

Dibuja sobre la imagen quedando as la seleccin como se muestra en la imagen

Instructor: Hilda Freyre C.

Pgina | 8

COMPUTACION III

PASO 5
Para eliminar el fondo y tener la seleccin elptica, ir al Men Seleccionar Seleccionar Inverso

Pgina | 9

a. Luego presiona dos veces la tecla


SUPR (suprimir), observaras que la
nueva seleccin quedara difuminada
en la imagen
b. Para cancelar la seleccin CTRL + D

Presiona la Tecla SUPR para


eliminar fondo
C

Observaras que as quedara en la


imagen
PASO 6
Creacin de una mscara de forma elptica: Recuerda las mscaras pueden tener cualquier
forma poligonal.
Para este caso dibujaremos
una elipse

Puedes darle cualquier color de relleno


C

Selecciona un color

Instructor: Hilda Freyre C.

COMPUTACION III

Quedar as:

Pgina | 10

Paso B:
Archivo Importar selecciona una imagen del edificio colcala encima de la elipse esta imagen
debe ser del tamao de la elipse tanto ancho como alto .Colocar la imagen encima de la elipse

Paso C:

Selecciona la imagen luego corta presiona CTRL + X o (EDICION CORTAR)


Seleccione la elipse Menu Edicin Pegar dentro
Selecciona la
elipse
A

Instructor: Hilda Freyre C.

COMPUTACION III

Aplicar sombra a la mascara


C

Selecciona

Pgina | 11

Aplica sombra
a la elipse

As quedara luego coloca la imagen encima de la mscara, desde el panel capas puedes mover.

Paso d:

Disee una una autoforma de nube


de Word y luego cpiela a Fireworks
En Fireworks, seleccione la
autoforma y luego aplquele el
efecto de sombra.

Instructor: Hilda Freyre C.

COMPUTACION III

A
Selecciono
Pgina | 12

Para terminar digite el Texto .que visualizas en la imagen con el efecto de sombra
Inserta las imgenes que visualizas en la imagen y colocas en forma de tira,
Dibuja una lnea de color blanco, aplica a la lnea el efecto de sombra.

EJERCICIO PRCTICO DE - REPASO


Disea el siguiente banner con los conocimientos que tiene tal como se visualiza en la imagen.

Instructor: Hilda Freyre C.

COMPUTACION III

PASO 7
Cambiando el tamao de las imgenes
Vamos abrir la imagen 7 originalmente la imagen tiene este tamao, esto se visualiza en el
men Modificar Lienzo Tamao de la imagen

Para cambiar el tamao de la imagen

Ir al Menu Modificar
Tamao de la imagen
Aparece la ventana de
dialogo
Desactiva la casilla de
verificacin Restringir
Proporciones
Digite los tamaos ancho
y alto

Instructor: Hilda Freyre C.

Pgina | 13

COMPUTACION III

Luego men Archivo Exportar

Pgina | 14

Hacer el mismo procedimiento con la siguiente imagen de nombre 4002

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 15

Luego exportarla hacia la carpeta imagen del sitio web

Instructor: Hilda Freyre C.

COMPUTACION III

PARTE II
Configurando nuestro Proyecto Web en Dreamweaver.
PASO 8

Pgina | 16

Abrir el programa de
Dreamweaver

Men Sitio
Nuevo Sitio

Digita el nombre del


Sitio- Proyecto Web

Instructor: Hilda Freyre C.

Da clic en el icono de
la carpeta para
seleccionar la carpeta
del Proyecto

COMPUTACION III

Pgina | 17

As quedara la
ventana de dialogo,
de configuracin del
sitio

PASO 9

Crear un nuevo documento Html


Ir al Men Archivo Nuevo Pagina en Blanco HTML 1 Columna fija centrada
Encabezado y Pie

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 18

Quedar as

Guardar el documento ir al Men archivo guardar como en la seccin del nombre


digitar

index

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 19

As deber de quedar la estructura (Men Ventana - Archivos

Instructor: Hilda Freyre C.

COMPUTACION III

PASO 10
Configurando el ancho de nuestra Pgina Web

Activar el Panel Estilos desde el Men Ventana Estilos


Pgina | 20

Clic en todo

Dar clic en el
Botn
Todo

PASO 11
Para saber cmo se llama el estilo que tiene el contenedor, selecciona la Base del contenedor.
a. Debes dar un clic en el contorno
b. Ir al Panel Propiedades, visualizaras en clase CONTAINER

Instructor: Hilda Freyre C.

COMPUTACION III

Panel
Propiedades en
CLASE
CONTAINER

Pgina | 21

A
Dar clic en el
CONTORNO

Instructor: Hilda Freyre C.

En width digita
1200 px.

COMPUTACION III

PASO 12
a.
b.
c.
d.

Selecciona y elimina el marcador de imagen


Elimnalo presionando la tecla SUPR O DEL
Luego en esa posicin Digita el texto AQU
Guarda el documento.

A
Selecciona elimina
el marcador de
imagen

Digita el
texto AQUI

PARTE III
DISEANDO UNA ANIMACION EN EL PROGRAMA WOW SLIDER
a. Abrir el programa de WOW SLIDER

Instructor: Hilda Freyre C.

Pgina | 22

COMPUTACION III

Tenemos dos versiones


instaladas
Wow slider 5.6
Wow slider 8

Para la versin Wow slider 5.6 la ventana aparecer de la siguiente manera

Das clic al
Botn ms +

Instructor: Hilda Freyre C.

Pgina | 23

COMPUTACION III

Selecciona las 3 imgenes que creaste los de nombre Baner1, Baner2, y Baner3 para
seleccionar las tres emplea la tecla Ctrl

Pgina | 24

As se va a
visualizar la
ventana con las
imgenes

Das clic al Botn


Properties

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 25

Selecciona y
visualiza un modelo
de marco para la
animacin

Cambia las
medidas 1200 y
420 px.

c
Luego un efecto
de transicin de
imagenes

PASO 13
Nuestro ltimo paso va ser insertar la animacin en el documento de nombre ndex, seguir los
siguientes pasos:
a.
b.
c.
d.
e.
f.

Seleccionar el Botn PUBLISH


Luego dar clic en el Botn de opcin INSERT TO PAGE
Vas a al carpeta de nuestro Proyecto Web seleccina el archivo INDEX
Aparece la ventana de Wow Slider
Das un clic en AQU,
Luego en la parte inferior das un clic en el botn INSERT BEFORE

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 26

B
B

Instructor: Hilda Freyre C.

Selecciona
la carpeta
Proyecto
Web

COMPUTACION III

Pgina | 27

Selecciona
el archivo
index

Aparece
ventana de
Wow
Slider

Dar clic en
el BOTON
INSERT
BEFORE

Aparecer as como se visualiza en la pantalla.

Instructor: Hilda Freyre C.

Dar clic en
el texto
que digito
AQUI

COMPUTACION III

Pgina | 28

Selecciona el
texto AQU
ELIMINA

Eliminar el texto aqu en el programa de Dreamweaver.


Publica para que visualices presionando la tecla F12

Se Visualizara As

Instructor: Hilda Freyre C.

COMPUTACION III

PASO 14
Creando el Men con SPRY en Dreamweaver

Presionar la tecla ENTER, donde se encuentra el texto INSTRUCCIONES


Pgina | 29
A

Donde estas posicionando el cursor inserta una Tabla, ir al Men Insertar - Tabla

Coloca los
valores como se
muestran en la
imagen

Instructor: Hilda Freyre C.

COMPUTACION III

Seleccionada la celda, ir al Panel Propiedades Alinear - Centro


C

Pgina | 30

Creando el Men de SPRY dentro de la Tabla


d

Instructor: Hilda Freyre C.

COMPUTACION III

Luego visualizaras el Men de la siguiente manera insertado en la tabla


e

Dar clic en la zona


celeste.

Pgina | 31

En esta zona elimina,


los Submens.

Aqu digita el texto


del Men

Crear el men Proyectos


Instructor: Hilda Freyre C.

Dar clic en la carpeta, en


la ventana selecciona el
archivo index

COMPUTACION III

As sucesivamente vas creando el men como se aprecia en las imgenes de captura para crear
el Men

Pgina | 32

Cree el tercer men Bolsa de trabajo

Seleccione el elemento 3.1 dar clic en menos para eliminar quedara as

Deseamos crear un Nuevo Men dentro del Principal


Para crea el men Egresados

Dar cli en la primera columna al botn +

Instructor: Hilda Freyre C.

COMPUTACION III

PASO 15
Deseamos Personalizar el Men

Ampli el ancho de la tabla a 1160 px


Pgina | 33

Ir al Men Ventana Estilos

Para cambiar el color de fondo del botn

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 34

c
Estos cambios son
para personalizar los
botones del Men
cuando cargue la
pagina

PASO 16
Para cambiar los colores del Men cuando mueva el mouse y cuando coloque el cursor del
Mouse encima. Se tiene que colocar en las dos opciones con el mismo color

Estos cambios es
para la opcin 1

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 35

Estos cambios es
para la opcin 2

Publica y visualiza puedes presionar F12 para visualizar en el navegador

PASO 16
Este diseo va a servir como plantilla para crear las otras pginas del Men

Estando en la pgina Principal de nombre index.html ir al Men Archivo Guardar


Todo

El siguiente paso ser ir al Men Archivo Guardar como Proyectos.html, luego te


ubicaras en la pgina proyectos , coloca algn texto para que puedas ver la diferencia
al publicar, hacer este mismo proceso con las otras pginas.

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 36

As sucesivamente
Instructor: Hilda Freyre C.

COMPUTACION III

PASO 17
Diseando el contenido de la pgina INDEX
Ubique su cursor debajo del men cree una tabla de 2 columnas y 1 fila
Pgina | 37

Ubique cursor en la primera celda vamos a crear en la primera celda Fichas de Spry en donde
vamos a colocar el contenido de nuestro proyecto.

Instructor: Hilda Freyre C.

COMPUTACION III

Pgina | 38

Ubique el cursor en contenido 1 cree una tabla de 2 columnas 1 fila

Ubica tu cursos en la primera celda


Inserta logo UCV (Men Insertar Imagen)
Luego para ficha 2
En contenido 2 pegar texto de MISION Y VISION

Tambin crea un SPRY ACORDENON DENTRO DEL DISEO DE TU PAGINA WEB

Instructor: Hilda Freyre C.