“Año de la Universalización de la Salud”

GUIA DE LABORATORIO 08
DE LENGUAJE DE PROGRAMACIÓN
ORIENTADO A WEB

HOJAS DE ESTILO CSS

(CONTINUACION)
 “Año de la Universalización de la Salud”

Los Recursos para trabajar el presente diseño lo puedes descargar en el

respectivo drive:

1) Desarrollar un diseño de una página web utilizando html, css, boopstrab,

jquery con las siguientes características que a continuación vamos a
observar.

Aquí observamos una página que en la parte superior existe una imagen que es
un encabezado y de bajo un menú comprendido por la opción Principal,
 “Año de la Universalización de la Salud”

Mantenimiento. Además, en la parte inferior central tenemos una slider que

muestra una seria de imágenes cada 1 segundo.
A medida que uno va reduciendo el navegador el diseño de ajusta a la resolución
de este y el menú de opciones de la parte superior desaparece para aparecer
un botón ubicado en la parte suprior derecha.

Ahora si presionamos el botón que se muestra en la imagen anterior,

entonces va a aparecer un menú, pero ajustado a la resolución de la pantalla
de la siguiente manera:
“Año de la Universalización de la Salud”

Solución
 “Año de la Universalización de la Salud”

Paso 1:
Crear un proyecto web:

Paso 2:
Del proyecto creado se deberá de realizar lo siguiente:
 Crear una carpeta de nombre css y dentro de ella se tiene que crear un
archivo de nombre stylepersonal.css

 Crear una carpeta de nombre imágenes y dentro de ella se tendrá que

agregar una imagen de nombre encabezado.jpg

 Crear una página Ejemplo001.jsp que se encuentra a la altura de la

carpeta Web Pages.
 “Año de la Universalización de la Salud”

A continuación vamos a observar cómo queda el respectivo proyecto de la

siguiente manera:

Carpeta css con una

hoja CSS

Carpeta de nombre imagen

con una imagen

Página JSP

Paso 3:
Ahora dentro de la carpeta css existe un archivo de nombre stylepersonal.css que se
tiene que colocar el siguiente código:

stylepersonal.css

Paso 4:
Luego dentro de la página de nombre Ejemplo001.jsp se tiene importar el archivo
stylepersonal.css y un código html de la siguiente manera:

Ejemplo001.jsp
 “Año de la Universalización de la Salud”

Paso 5:
Ahora vamos a ejercutar la aplicación web

Paso 6:
Ahora vamos a crear otro proyecto web de nombre EjemploDiseño002
copiamos la carpeta css (incluido stylepersonal.css), carpeta imágenes (incluido
 “Año de la Universalización de la Salud”

encabezado.jpg) del proyecto anterior y además creamos una página JSP de

nombre Ejemplo002.jpg

Paso 7:

Ahora del proyecto anterior copiamos todo el código HTML de la página

EjemploDiseño001.jsp y lo pegamos en la página EjemploDiseño002.jsp del
proyecto actual.

Paso 8:
Ahora vamos a colocar la librería bootstrap.min_personal.css en la carpeta css
 “Año de la Universalización de la Salud”

Paso 9:
Ahora regresemos a la página Ejemplo002.jsp e importemos la librería
bootstrap.min_persona.css y agreguemos unas líneas de código html de la
siguiente manera:

Paso 10:
 “Año de la Universalización de la Salud”

Ahora vamos a ejecutar la página web

Paso 11:
Ahora existe una variante en combinar el contenedor en un solo div de la
siguiente manera:

Paso 12:
Ejecutamos nuevamente la página web
 “Año de la Universalización de la Salud”

Paso 13:
Ahora vamos a crear otro proyecto web de nombre ProyectoWeb003 y
copiamos todas las carpetas y archivos que se realizaron en el
ProyectoWeb002 para poder continuarlo.

Paso 14:
 “Año de la Universalización de la Salud”

Ahora vamos agregarle en la carpeta imágenes una imagen img-sprite.png y

otro archivo img-sprite.psd

Paso 15:
Ahora se tendrá que crear una página JSP de nombre Ejemplo003.jsp

Paso 16:
 “Año de la Universalización de la Salud”

Ahora dentro del archivo stylepersonal.css se le tendrá que agregar el siguiente

estilo:

Paso 17:
Ahora en la página JSP Ejemplo003.jsp vamos a agregarle un div que contenga
lo siguiente:

Paso 18:
Ahora vamos a ejecutar la página web
 “Año de la Universalización de la Salud”

Paso 19:
Ahora regresemos nuevamente al archivo stylepersonal.css y le agregamos un
estilo más.

Paso 20:
 “Año de la Universalización de la Salud”

Ahora en la página Ejemplo003.jsp dentro del div container_footer se le

agregara un conjunto de div’s que contenga un párrafo con respecto a los
derechos reservados.

Paso 21:
Ahora ejecutamos la página web

Paso 22:
 “Año de la Universalización de la Salud”

Ahora vamos al archivo stylepersonal.css y agregamos varios estilos de la

siguiente manera:

Paso 23:
Ahora vamos a la página Ejemplo003.jsp y modificamos el siguiente código
HTML

Paso 24:
 “Año de la Universalización de la Salud”

Ahora vamos a ejecutar la página web

Paso 25:
Ahora en el archivo stylepersonal.css de los estilos que ya existen hasta el
momento vamos a mostrarle nuevos estilos que tendrán que agregarle de la
siguiente manera:
 “Año de la Universalización de la Salud”

Paso 26:
Ahora vamos a la página Ejemplo003.jsp y agregamos una lista no ordenada en
html de la siguiente manera:

Paso 27:
 “Año de la Universalización de la Salud”

Ahora vamos a ejecutar la página web

Paso 28:
Ahora vamos a crear otro proyecto web de nombre ProyectoWeb004 y
copiamos todas las carpetas y archivos que se realizaron en el
ProyectoWeb003 para poder continuarlo.

Paso 29:
Ahora sobre el proyectoDiseño004 dentro de la carpeta imágenes vamos a
agregarle una nueva de nombre principal2.png de la siguiente manera:
 “Año de la Universalización de la Salud”

El archivo de nombre principal2.png constituido por la siguiente imagen:

 “Año de la Universalización de la Salud”

Paso 30:
Ahora en la página Ejemplo004.jsp vamos a agregarle el siguiente código HTML
de la siguiente manera:

Paso 31:
Ejecutando la página web
 “Año de la Universalización de la Salud”

Paso 32:
Ahora vamos a agregarle una nueva imagen de nombre bg.jpg

El archivo bd.jpg está representado por la siguiente imagen:

Paso 33:
Ahora en el archivo stylepersonal.css tenemos un conjunto de estilos que en
proyectos anteriores ya hemos agregado ahora vamos adicionar un nuevo estilo
de la siguiente manera:
 “Año de la Universalización de la Salud”

Paso 34:
Ahora vamos a ejecutar la página web

Paso 35:
Ahora regresemos al archivo stylepersonal.css y agregamos otro nuevo estilo
de la siguiente manera:
 “Año de la Universalización de la Salud”

Paso 36:
En la página Ejemplo004.jsp vamos a agregarle un código HTML de la siguiente
manera:

Paso 37:
Ejecutando la página web de la siguiente manera:
 “Año de la Universalización de la Salud”

Paso 38:
Ahora vamos a crear otro proyecto web de nombre ProyectoWeb005 y
copiamos todas las carpetas y archivos que se realizaron en el
ProyectoWeb004 para poder continuarlo.

Paso 39:
 “Año de la Universalización de la Salud”

Ahora en el proyecto actual vamos a agregarle 2 imágenes nuevas de la

siguiente manera:

Paso 40:
Ahora vamos a crear la carpeta js y dentro de ella las librerías
jquery_personal.js y bootstrap.min.js
 “Año de la Universalización de la Salud”

Paso 41:
Ahora en la página Ejemplo005.jsp vamos a importar las librerías de la siguiente
manera:
 “Año de la Universalización de la Salud”

Paso 42:
Ahora vamos agregarle un código en Jquery que representa una slider de
imágenes de la siguiente manera:

Paso 43:
Agregar el código de implementación del slider
 “Año de la Universalización de la Salud”

Paso 44:
Terminado de agregar el código de implementación del slider de la siguiente
manera:

Paso 45:
Ejecutando la página web
 “Año de la Universalización de la Salud”

Paso 46:
Ahora vamos a crear el último proyecto de nombre EjemploDiseño006 y
copiamos todos los recursos creados del proyecto anterior.
 “Año de la Universalización de la Salud”

Paso 47:
Ahora agregamos nuevas imágenes al proyecto actual

Paso 48:
Ahora vamos agregarle un menú de la siguiente manera:
 “Año de la Universalización de la Salud”

Paso 49:
Ejecutando la página web

Paso 50:
Ahora vamos agregar otro menú y dentro de ellos sus respectivos sub menús de
la siguiente manera :
 “Año de la Universalización de la Salud”

Paso 51:
Ejecutando la página web