Ahora que hemos definido un poco lo que es CSS y lo que representa
vamos a crear una de ellas para utilizar en nuestro sitio JSP.
1. Ingresa a NetBeans y crea un nuevo proyecto web de nombre
webJSPCSS.
2. Una vez creado el proyecto pulsa con el botón derecho del mouse
sobre el nombre del proyecto y selecciona Nuevo, Hoja de Estilos
en Cascada (CSS)… Nombra este archivo como [Link]. El código
correspondiente es el siguiente:
root {
display: block;
}
ul.menu_color2{
list-style:none;
}
ul.menu_color2 li{
display:block;
position:relative;
padding:0px 20px;
background-color: #000000;
font-size: small;
font-family: "Bookman Old Style";
text-align:center;
vertical-align:middle;
color:white;
width:60px; /* Ancho de los li debajo de los ul */
}
ul.menu_color2 ul{
position:absolute;
left:-40px;
top:20px;
display:none;
list-style:none; }
ul.menu_color2 > li > ul{
position:absolute;
left:-40px;
top:20px;/* Ubicación de los ul debajo de los li*/
display:none;
list-style:none;}
ul.menu_color2 li:hover{
background:#CCCD34;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff; }
ul.menu_color2 li:hover > ul{
display:block; }
ul.menu_color2 > li{
display:inline; }
.borde {
border:0; }
.slogan {
border:40px;
position: absolute;
top: 0px;
left: 0px;
width:179px;
height:67px;
padding:0 0 0 0;
margin : 0 0 1em 0;}
.principal {
border: 0px;
position: absolute;
top: 0px;
left: 179px;
width:581px;
height:67px;
padding:0 0 0 0;
margin : 0 0 1em 0; }
.linea {
border:0px;
background-color:#000000;
position: absolute;
top: 67px;
left: 0px;
width:760px;
height:105px;
padding:0 0 0 0;
margin : 0 0 1em 0;}
/*Área inferior de la página*/
.bottom {
border-right:1px solid #000000;
border-bottom:30px solid #000000;
border-top:1px solid #000000;
border-left:1px solid #000000;
position: absolute;
top: 426px;
left: 0px;
width: 760px;
height: 50px;
background-color: #CCCD34;
font-size: small;
font-family: "Bookman Old Style";
text-align:center;
vertical-align:middle;
color:white; }
.sub1 {
border: 0px;
position: absolute;
top: 170px;
left: 0px;
bottom: 319px;
right: 0px;
width:180px;
height:319px;
background-color:#CCCCB3; }
/*Seccion 5 según documento guía, corresponde al área donde
podrá escribir y
situar información al público*/
.sub2 {
border: 0px;
position: absolute;
top: 170px;
left: 180px;
width: 300px;
height: 319px;
background-color: #CCCCB3; }
/*Seccion 6 según documento guía, corresponde al área donde se
colocan las
opciones de menú al estilo botón con imagen*/
.sub3 {
border: 0px;
position: absolute;
top: 170px;
left: 436px;
right: 0px;
width: 324px;
height: 319px;
background-color: #CCCCB3;}
3. Ahora vamos a implementar el código en [Link]. Sustituye el
código que crea esta página por el siguiente:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido(a) a Servicios y Veterinaria E&D!</title>
<link href="[Link]" rel="stylesheet" type="text/css"/>
<link rel="stylesheet"
href="[Link]
[Link]" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7
x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="[Link]
awesome/4.7.0/css/[Link]" rel="stylesheet"
integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH
3Sl0sibVcOQVnN" crossorigin="anonymous">
<body>
<div class="slogan">
<img src="img/[Link]" class="dibujoArriba"
alt="dibujo">
</div>
<div class="principal">
<img src="img/[Link]" class="borde"
alt="dibujoDerecha">
</div>
<div class="linea">
<ul class="menu_color2">
<li>Actividades
<ul>
<li>Exhibicion</li>
<li>Campeonato</li>
</ul>
</li>
<li>Alimentos
<ul>
<li><a href=[Link]>Cachorros</a></li>
<li><a href=[Link]>Adultos</a></li> </ul>
</li>
<li>Servicios
<ul>
<li>Cortes</li>
<li>Pedicure</li>
<li>Limpieza</li>
</ul>
</li>
<li>Acerca de
<ul>
<li>Mision</li>
<li>Vision</li>
<li>Objetivos</li>
</ul>
</li>
<li>Contacto</li>
</ul>
</div>
<div class="sub1">
<p align="center"><img src="img/[Link]" alt="imagenB"></p>
<p align="center"></p>
<p align="center"><img src="img/[Link]" alt="perro2"></p>
<p align="center">Buscar información sobre mascotas</p>
</div>
<div class="sub2">
<p align="center"><img src="img/[Link]" alt="dibujo
sub2"></p>
<p align="center"></p>
<p align="center"><img src="img/[Link]" alt="perro 1"></p>
<p align="center">Gracias por visitar nuestro sitio...!
</div>
<p align="center"><a href='[Link]' title=''>
<img src="img/[Link]" alt=""></a></p>
<div class="sub3">
<p align="center"><img src="img/[Link]" alt=""></p>
<p align="center"><a href='' title=''><img src="img/[Link]"
alt=""></a></p>
<p align="center"><a href='' title=''><img src="img/[Link]"
alt=""></a></p>
<p align="center"><a href='' title=''><img src="img/[Link]"
alt=""></a></p>
</div>
<div class="bottom"><br>Todos los derechos reservados</div>
</body>
</html>
4. Descargue las imágenes que van en el formulario, renómbrelas con
el nombre que aparece en el documento.
5. Cree una carpeta img, en la carpeta WEP PAGES.
6. Copie todos los archivos de imagen dentro de la carpeta img
7. Cree los archivos jsp, que se muestran.
