Guia Laboratorio Hojas Estilo CSS 02 PDF

“Año de la Universalización de la Salud”
GUIA DE LABORATORIO 02
DE LENGUAJE DE PROGRAMACIÓN
ORIENTADO A WEB
HOJAS DE ESTILO CSS

(CONTINUACION)
Dr.Ing.Ivan Petrlik Azabache

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

drive:
https://unfvpe-
my.sharepoint.com/:f:/g/personal/ipetrlik_unfv_edu_pe/EozyCNmj1NBLg_x8dS-
ZEp4BCM6SMKoINna0AmG6Ic-Thg?e=fheVdu
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,
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 achicando 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:
Solución
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 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
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
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
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:
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
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:
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:
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:
Paso 19:
Ahora regresemos nuevamente al archivo stylepersonal.css y le agregamos un
estilo más.
Paso 20:
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:
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:
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:
Paso 26:
Ahora vamos a la página Ejemplo003.jsp y agregamos una lista no ordenada en
html de la siguiente manera:
Paso 27:
Paso 28:
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:
El archivo de nombre principal2.png constituido por la siguiente imagen:

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
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:
Paso 34:
Paso 35:
Ahora regresemos al archivo stylepersonal.css y agregamos otro nuevo estilo de
la siguiente manera:
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:
Paso 38:
continuarlo.
Paso 39:
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
Paso 41:
Ahora en la página Ejemplo005.jsp vamos a importar las librerías de la siguiente
manera:
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
Paso 44:
Terminado de agregar el código de implementación del slider de la siguiente
manera:
Paso 45:
Paso 46:
Ahora vamos a crear el último proyecto de nombre EjemploDiseño006 y copiamos
todos los recursos creados del proyecto anterior.
Paso 47:
Ahora agregamos nuevas imágenes al proyecto actual
Paso 48:
Ahora vamos agregarle un menú de la siguiente manera:
Paso 49:
Paso 50:
Ahora vamos agregar otro menú y dentro de ellos sus respectivos sub menús de
la siguiente manera :
Paso 51:

Guia Laboratorio Hojas Estilo CSS 02 PDF

Cargado por

Copyright:

Formatos disponibles

Guia Laboratorio Hojas Estilo CSS 02 PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Laboratorio Hojas Estilo CSS 02 PDF

Cargado por

Copyright:

Formatos disponibles

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

HOJAS DE ESTILO CSS

Dr.Ing.Ivan Petrlik Azabache

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

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

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

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

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

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

Carpeta css con una

Carpeta de nombre imagen

Luego dentro de la página de nombre Ejemplo001.jsp se tiene importar el archivo

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

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

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

También podría gustarte