Tutorial Profgafgyecto Web FINAL

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


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.


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


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


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


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


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


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


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


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


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


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


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


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


Página | 15

CO

MP

UTA

CIO

N II

I

Luego exportarla hacia la carpeta imagen del sitio web


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


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


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


Página | 19

CO

MP

UTA

CIO

N II

I

Así deberá de quedar la estructura (Menú – Ventana - Archivos


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


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.


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


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 +


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


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


Página | 26

CO

MP

UTA

CIO

N II

I

A

B

B

C

Selecciona la carpeta Proyecto

Web


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


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


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


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


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


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 +


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


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


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


Página | 36

CO

MP

UTA

CIO

N II

I

Así sucesivamente


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.


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

Tutorial Profgafgyecto Web FINAL

Documents

Transcript of Tutorial Profgafgyecto Web FINAL