Post on 13-Jul-2016
description
transcript
CIS INSTRUCTOR: HILDA FREYRE CORDOVA | 2016
Diseño de un Proyecto Web
Instructor: Hilda Freyre C.
Página | 1
CO
MP
UTA
CIO
N II
I
ISEÑO DE UN ROYECTO EB
PASO 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 diseñar
Para crear el banner abrir el programa de Firework. Crear un nuevo documento desde
el menú Archivo - Nuevo
Tamaño del documento nuevo: Ancho: 1200 px. ; Alto: 420 px ; Resolución: 150
También 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
Inst
ruct
or:
Hil
da
Fre
yre
C
Instructor: Hilda Freyre C.
Página | 2
CO
MP
UTA
CIO
N II
I
PASO 2
Para facilitar la diagramación ir al Menú Ver- Reglas, luego Menú Ver – Guías. Activar la regla y
guías
PASO 3
Procedemos a crear una Tira de Imágenes. Así como en la muestra en la parte inferior. Importa
una por una las imágenes y coloca como se visualiza. (puede utilizar una guía para diseñar)
Paso A:
Ir al menú Archivo – Importar
Selecciona de la carpeta img , la imagen construcción así sucesivamente cada imagen
formando una Tira de imágenes como aprecias en la muestra en la parte superior.
Instructor: Hilda Freyre C.
Página | 3
CO
MP
UTA
CIO
N II
I
De la ventana Importar selecciona la imagen Construcción
Va incorporando las imágenes con archivo importar acomódalas hasta forma una tira de
imágenes, como se visualiza en la muestra, y las otras dos imágenes en la parte superior.
A
C
d
Instructor: Hilda Freyre C.
Página | 4
CO
MP
UTA
CIO
N II
I Dibuje una línea de color rojo tipo de línea CERAS – GORDO, así deberá quedar como en la
muestra.
Para completar el diseño digita el Texto: FORMANDO PROFESIONALES COMPROMETIDOS CON
EL PAIS.
Terminas de crear el Baner ir al Menú Ventana – Optimizar, selecciona la extensión
JPG.
Luego Archivo - exportar--- digita en nombre Baner1 en el nombre del archivo en la
carpeta imágenes de tu Proyecto Web
E
F
G
G
G2 Digita el Texto
G3 Menú ventana –Estilos,
selecciona el estilo
Instructor: Hilda Freyre C.
Página | 5
CO
MP
UTA
CIO
N II
I
PASO 3
Diseñando el 2do Baner para el cual seguiremos los siguientes pasos que
a continuación te vamos a guiar:
a. Abrir un nuevo documento de nuevo con las medidas del documento anterior ancho:
1200 px. Alto: 420 px. Resolución 150
H
I
I
J
K
Digita el nombre BANER1
Instructor: Hilda Freyre C.
Página | 6
CO
MP
UTA
CIO
N II
I
b. Se desea crear el siguiente diseño como se muestra en la imagen
Paso A:
a. Ir a la Caja de herramientas selecciona la herramienta rectángulo dibuja un rectángulo
sobre el lienzo,
b. Selecciona el rectángulo panel Propiedades en color de relleno solido dar el siguiente
color celeste #00BFFF
c. Luego importa la imagen del logo de la universidad, colócalo en la parte inferior.
Diseñar como se muestra en la imagen
Instructor: Hilda Freyre C.
Página | 7
CO
MP
UTA
CIO
N II
I
Paso B:
El siguiente paso será importar la imagen de la dama ir al menú Archivo -Importar
A
B
C
Digita este código de color
d
Selecciona la imagen clic Abrir
Menu
Archivo
Importar
Asi quedara
puesta la
imagen
Instructor: Hilda Freyre C.
Página | 8
CO
MP
UTA
CIO
N II
I
PASO 4
Paso A:
Creando en la imagen una selección elíptica 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 opción Borde – Fundido -15
Dibuja sobre la imagen quedando así la selección como se muestra en la imagen
A
B
C
Instructor: Hilda Freyre C.
Página | 9
CO
MP
UTA
CIO
N II
I
PASO 5
Para eliminar el fondo y tener la selección elíptica, ir al Menú Seleccionar –Seleccionar Inverso
a. Luego presiona dos veces la tecla SUPR (suprimir), observaras que la nueva selección quedara difuminada en la imagen
b. Para cancelar la selección CTRL + D
Observaras que así quedara en la imagen
PASO 6
Creación de una máscara de forma elíptica: Recuerda las máscaras pueden tener cualquier
forma poligonal.
Para este caso dibujaremos una elipse
Puedes darle cualquier color de relleno
A
B
C
Presiona la Tecla SUPR para
eliminar fondo
C
C
A
B C
Selecciona un color
Instructor: Hilda Freyre C.
Página | 10
CO
MP
UTA
CIO
N II
I Quedará así:
Paso B:
Archivo –Importar selecciona una imagen del edificio colócala encima de la elipse esta imagen
debe ser del tamaño 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 Edición – Pegar dentro
Selecciona la
elipse
A
B
Instructor: Hilda Freyre C.
Página | 11
CO
MP
UTA
CIO
N II
I Aplicar sombra a la mascara
Así quedara luego coloca la imagen encima de la máscara, desde el panel capas puedes mover.
Paso d:
Diseñe una una autoforma de nube de Word y luego cópiela a Fireworks
En Fireworks, seleccione la autoforma y luego aplíquele el efecto de sombra.
C Selecciona
D
Aplica sombra
a la elipse
Instructor: Hilda Freyre C.
Página | 12
CO
MP
UTA
CIO
N II
I
Para terminar digite el Texto ….que visualizas en la imagen con el efecto de sombra
Inserta las imágenes que visualizas en la imagen y colocas en forma de tira,
Dibuja una línea de color blanco, aplica a la línea el efecto de sombra.
EJERCICIO PRÁCTICO – DE - REPASO
Diseña el siguiente banner con los conocimientos que tiene tal como se visualiza en la imagen.
A
Selecciono
B
Instructor: Hilda Freyre C.
Página | 13
CO
MP
UTA
CIO
N II
I
PASO 7
Cambiando el tamaño de las imágenes
Vamos abrir la imagen 7 originalmente la imagen tiene este tamaño, esto se visualiza en el
menú Modificar – Lienzo – Tamaño de la imagen
Para cambiar el tamaño de la imagen
Ir al Menu Modificar –
Tamaño de la imagen
Aparece la ventana de
dialogo
Desactiva la casilla de
verificación – Restringir
Proporciones
Digite los tamaños ancho
y alto
Instructor: Hilda Freyre C.
Página | 14
CO
MP
UTA
CIO
N II
I Luego menú Archivo – Exportar
Hacer el mismo procedimiento con la siguiente imagen de nombre 4002
Instructor: Hilda Freyre C.
Página | 15
CO
MP
UTA
CIO
N II
I
Luego exportarla hacia la carpeta imagen del sitio web
Instructor: Hilda Freyre C.
Página | 16
CO
MP
UTA
CIO
N II
I
PARTE II
Configurando nuestro Proyecto Web en Dreamweaver.
PASO 8
Abrir el programa de
Dreamweaver
A
Menú Sitio –
Nuevo Sitio
B
Digita el nombre del Sitio- Proyecto Web
c Da clic en el icono de la carpeta para seleccionar la carpeta del Proyecto
Instructor: Hilda Freyre C.
Página | 17
CO
MP
UTA
CIO
N II
I
PASO 9
Crear un nuevo documento Html
Ir al Menú Archivo – Nuevo – Pagina en Blanco – HTML – 1 Columna fija centrada
Encabezado y Pie
Así quedara la ventana de dialogo, de configuración del sitio
Instructor: Hilda Freyre C.
Página | 18
CO
MP
UTA
CIO
N II
I
Quedará así
Guardar el documento ir al Menú archivo – guardar como – en la sección del nombre
digitar index
Instructor: Hilda Freyre C.
Página | 19
CO
MP
UTA
CIO
N II
I
Así deberá de quedar la estructura (Menú – Ventana - Archivos
Instructor: Hilda Freyre C.
Página | 20
CO
MP
UTA
CIO
N II
I
PASO 10
Configurando el ancho de nuestra Página Web
Activar el Panel Estilos desde el – Menú Ventana – Estilos
Clic en todo
PASO 11
Para saber cómo 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
Dar clic en el Botón Todo
Instructor: Hilda Freyre C.
Página | 21
CO
MP
UTA
CIO
N II
I
A
Dar clic en el CONTORNO
B
Panel Propiedades en CLASE CONTAINER
C
C En width digita 1200 px.
Instructor: Hilda Freyre C.
Página | 22
CO
MP
UTA
CIO
N II
I
PASO 12
a. Selecciona y elimina el marcador de imagen
b. Elimínalo presionando la tecla SUPR O DEL
c. Luego en esa posición Digita el texto AQUÍ
d. Guarda el documento.
PARTE III
DISEÑANDO UNA ANIMACION EN EL PROGRAMA WOW SLIDER
a. Abrir el programa de WOW SLIDER
Selecciona elimina
el marcador de
imagen
A
B
Digita el
texto AQUI
Instructor: Hilda Freyre C.
Página | 23
CO
MP
UTA
CIO
N II
I
Para la versión Wow slider 5.6 la ventana aparecerá de la siguiente manera
Tenemos dos versiones
instaladas
Wow slider 5.6
Wow slider 8
Das clic al
Botón más +
Instructor: Hilda Freyre C.
Página | 24
CO
MP
UTA
CIO
N II
I Selecciona las 3 imágenes que creaste los de nombre Baner1, Baner2, y Baner3 para
seleccionar las tres emplea la tecla Ctrl
Así se va a
visualizar la
ventana con las
imágenes
Das clic al Botón
Properties
Instructor: Hilda Freyre C.
Página | 25
CO
MP
UTA
CIO
N II
I
PASO 13
Nuestro último paso va ser insertar la animación en el documento de nombre índex, seguir los
siguientes pasos:
a. Seleccionar el Botón PUBLISH
b. Luego dar clic en el Botón de opción INSERT TO PAGE
c. Vas a al carpeta de nuestro Proyecto Web seleccióna el archivo INDEX
d. Aparece la ventana de Wow Slider
e. Das un clic en AQUÍ,
f. Luego en la parte inferior das un clic en el botón INSERT BEFORE
Cambia las
medidas 1200 y
420 px.
A
B
Selecciona y
visualiza un modelo
de marco para la
animación c
Luego un efecto
de transición de
imagenes
d
Instructor: Hilda Freyre C.
Página | 26
CO
MP
UTA
CIO
N II
I
A
B
B
C
Selecciona la carpeta Proyecto
Web
Instructor: Hilda Freyre C.
Página | 27
CO
MP
UTA
CIO
N II
I
Aparecerá así como se visualiza en la pantalla.
c
d
Selecciona el archivo
index
Aparece ventana de
Wow Slider
Dar clic en el texto
que digito AQUI
Dar clic en el BOTON
INSERT BEFORE
Instructor: Hilda Freyre C.
Página | 28
CO
MP
UTA
CIO
N II
I
Eliminar el texto aquí en el programa de Dreamweaver.
Publica para que visualices presionando la tecla F12
Se Visualizara Así
Selecciona el
texto AQUÍ
ELIMINA
Instructor: Hilda Freyre C.
Página | 29
CO
MP
UTA
CIO
N II
I
PASO 14
Creando el Menú con SPRY en Dreamweaver
Presionar la tecla ENTER, donde se encuentra el texto INSTRUCCIONES
Donde estas posicionando el cursor inserta una Tabla, ir al Menú Insertar - Tabla
Coloca los
valores como se
muestran en la
imagen
A
B
Instructor: Hilda Freyre C.
Página | 30
CO
MP
UTA
CIO
N II
I Seleccionada la celda, ir al Panel Propiedades – Alinear - Centro
Creando el Menú de SPRY dentro de la Tabla
C
d
d
d
Instructor: Hilda Freyre C.
Página | 31
CO
MP
UTA
CIO
N II
I Luego visualizaras el Menú de la siguiente manera insertado en la tabla
Crear el menú Proyectos
e Dar clic en la zona
celeste.
e
En esta zona elimina,
los Submenús.
Aquí digita el texto
del Menú f
g
Dar clic en la carpeta, en
la ventana selecciona el
archivo index
g
Instructor: Hilda Freyre C.
Página | 32
CO
MP
UTA
CIO
N II
I Así sucesivamente vas creando el menú como se aprecia en las imágenes de captura para crear
el Menú
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 botón +
Instructor: Hilda Freyre C.
Página | 33
CO
MP
UTA
CIO
N II
I
PASO 15
Deseamos Personalizar el Menú
Amplié el ancho de la tabla a 1160 px
Ir al Menú Ventana – Estilos
Para cambiar el color de fondo del botón
a
b
Instructor: Hilda Freyre C.
Página | 34
CO
MP
UTA
CIO
N II
I
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
c
Estos cambios son
para personalizar los
botones del Menú
cuando cargue la
pagina
Estos cambios es
para la opción 1
Instructor: Hilda Freyre C.
Página | 35
CO
MP
UTA
CIO
N II
I
Publica y visualiza puedes presionar F12 para visualizar en el navegador
PASO 16
Este diseño va a servir como plantilla para crear las otras páginas del Menú
Estando en la página 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 página proyectos , coloca algún texto para que puedas ver la diferencia
al publicar, hacer este mismo proceso con las otras páginas.
Estos cambios es
para la opción 2
Instructor: Hilda Freyre C.
Página | 36
CO
MP
UTA
CIO
N II
I
Así sucesivamente
Instructor: Hilda Freyre C.
Página | 37
CO
MP
UTA
CIO
N II
I
PASO 17
Diseñando el contenido de la página INDEX
Ubique su cursor debajo del menú cree una tabla de 2 columnas y 1 fila
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.
Página | 38
CO
MP
UTA
CIO
N II
I
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
También crea un SPRY ACORDENON DENTRO DEL DISEÑO DE TU PAGINA WEB