Tutoriales HTML

Lección 20. Más retoques

En la lección anterior nos quedaron algunas imágenes por insertar y mejorar ese fondo que dimos al menú, e incluir la base que también tenemos reservada

La base

Para insertar la base vamos a crear una nueva capa, esta ira justo despues de la capa pie, asi que abrimos nuestra plantilla y nuestra hoja de estilos

En nuestra plantilla recordar que para crear capas usamos la etiqueta div, pues justo detras de la capa pie añadimos la capa base de la siguiente manera

Esta claro que no veremos ningún cambio, salvo que le demos propiedades a esa capa nueva que hemos creado, recordar que como es una capa nueva con nombre inventado por nosotros en la hoja de estilos ponemos delante la almohadilla, analizamos que características queremos ponerle, por un lado el tamaño, o sea 900px x 56px que es el tamaño de nuestra imagen, por otro lado el fondo y claro esta vez quiero poner mi imagen de fondo, y como esa imagen la quiero fija y no queremos que se repita también se lo comentaremos, escribimos por tanto las muevas propiedades

#base{background-image: url(imagenes/base.jpg) ;background-repeat: no-repeat ;width:900px ; height: 56px; }

Si vamos a vista previa vemos que le falta un detalle, se nos ha olvidado que a todas nuestras capas les habíamos puesto un borde de un px en color negro, pues vamos a añadírselo, me faltan los bordes de los dos lados y el de abajo

# base{background-image: url(imagenes/base.jpg) ;background-repeat: no-repeat ;width:900px ; height: 56px; border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid;}

Se nos sale un poquito por los laterales, asi que al igual que hicimos en la cabecera la restaremos dos pixeles al ancho y al alto, ya que el borde de 1 px lo completa

# base{background-image: url(imagenes/base.jpg) ;background-repeat: no-repeat ;width:898px ; height: 54px; border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid;}

vamos a irnos a la vista previa y tendremos esto

El Menú

Vamos ahora a poner el encabezado del fondo que preparamos para nuestro menú, abrimos nuestra plantilla, borramos la palabra Menú y en su lugar ponemos "h1""/h1", es decir lo sustituimos por un título, ficticio, porque no vamos a escribir nada ya que nuestro encabezado de imagen ya esta escrita la palabra menu, aunque si el encabezado es con fondo liso se puede escribir en medio de esa h1

Aparentemente tampoco veremos nada, y eso es porque no hemos definido características para ese elemento, el cual sería para todos los h1 de nuestra capa menu, asi que donde teniamos todas nuestras propiedades del menu añadimos las de este elemento; un detalle que puede variar respecto al mio, el alto de mi imagen menu-sup.jpg es de 39 px, asi que tengo que especificarle esa distancia con el padding-top, por lo tanto ponemos esto a continuación:

#menu h1 {text-decoration:none ; background-image: url(imagenes/menu-sup.jpg); padding-top:39px; }

Ya solo nos queda adaptar el fondo para que la parte baja de nuestro menú cuadre con nuestra imagen, y eso no lo vemos, por lo que le decimos la posición de nuestro fondo empleado en el menú, si le decimos que empiece por abajo lo veremos mucho mejor así que incluimos esa propiedad a nuestro menú de la siguiente manera

#menu {background-image:url(imagenes/menu-fondo.jpg); width:160px; float:left; text-align: left; margin-right: 10px; margin:10px 10px 10px 10px;background-position: bottom;}

Ahora lo vemos casi perfecto jeje

Hablando de navegadores

Es lógico que cuando se define un bloque de cierto tamaño su contenido puede exceder el tamaño del bloque, para controlar la conducta que tomará el browser (navegador que visite nuestra página, como opera, explorer , firefox...) se usa la propiedad "overflow" con uno de cuatro valores posibles:

"hidden", "visible", "auto", "scroll".

overflow: hidden. lo que exceda queda oculto, por ejemplo, si ponemos una imagen en una capa cuyas dimensiones son 800x200, si insertamos una un poco mayor no se vera el sobrante
overflow: visible. puede deformar la pagina, por lo que habra que darle las medidas exactas
overflow: auto, si sobra aparece la barra de desplazamiento
overflow: scroll, sobre o no sobre aparece barra de desplazamiento

Para que nuestra base se cuadre a la medida que le hemos dado y solucionando posibles cambios que podamos realizar en nuestra web vamos a incluir esta propiedad a nuestra base

#base { background-image: url(imagenes/base.jpg) ;background-repeat: no-repeat ;width:898px ; height: 54px;border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; overflow : hidden; }

Y para que sepáis en todo momento como verían nuestra página en los distintos navegadores os paso una página y os cuento que tenemos que hacer para imaginarlos lo que verían los demás:

Entramos en la siguiente página

http://browsershots.org/

La primera imagen que nos sale es esta:

Meter la URL de la página que queréis comprobar, activar solo las casillas de los navegadores que queréis explorar, y pulsar submit

Tener paciencia que tardan mucho en aparecer todas las imágenes, (lo gratis tiene esas pegas ) pero así os haréis una idea de como nos verían desde otros navegadores

Resumiendo

Esto es lo que tengo escrito de momento en mi plantilla:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>El rincon de Ener</title>
<link href="estilo-general.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="general">
	<div id="cabecera"><img src="imagenes/cabecera.jpg" width="898" height="223"></div>
    <div id="navegacion">
    	<ul>
        	<li>Desplegable 1</li>
            <li>Desplegable 2</li>
            <li>Desplegable 3</li>
            <li>Desplegable 4</li>
    	</ul>
    </div>
    <div id="contenido">
    	<div id="menu">
        	<h1></h1>
        	<ul>
                <li><a href="#" target="_blank">Enlace 1</a></li>
                <li><a href="#">Enlace 2</a></li>
                <li><a href="#">Enlace 3</a></li>
            </ul>
        </div>
        <h1>Primer título, el más importante</h1>
      <p>Empiezo a escribir mi primer párrafo, pero vamos a escribir varios párrafos hasta conseguir un texto bastante largo. Usaremos los puntos, las comas,.......
    los puntos y aparte aqui no es como estamos acostumbrados, cerramos el parrafo donde estamos escribiendo y abrimos un parrafo nuevo y vamos a ver que observamos 
    despues de todo este escrito</p>
    <h2>Título nº2, para mi segundo párrafo</h2>
    <p>Este es otro párrafo, recordamos que cada punto y aparte aqui no tienen sentido. 
    Para que aparezca en la linea siguiente tendríamos que insertar un nuevo párrafo abriendo y 
    cerrando la etiqueta correspondiente </p>
    <h3> Título nº3, el de menor importancia</h3>
   <p>Sigo con un tercer párrafo y la historia continua, 
   segun escribo voy observando los resultados en mi vista previa 
   y despues veremos como mejorar el aspecto de la misma, tener en cuenta que no hemos dado propiedades aun a esta etiqueta en nuestra hoja de estilos ni tampoco 
   a los elementos de la capa de contenido</p>
   
   <p>Yo creo que ya escribi bastante, he superado el espacio de mi menú</p>
   <a target="_blank" href="http://www.energiaelca.es/"><img src="../imagenes/023222.gif" width="120" height="150"></a> 
   </div>
    <div id="pie">el pie de página</div>
    <div id="base"></div>
</div>

</body>
</html>

Y esto lo que tengo en mi hoja de estilos

*{margin: 0px;
  padding:0px;
  border:0px;
  text-indent:0px;
}
body {text-align: center;
	  background-image:url(imagenes/fondo2.jpg);
}

img { border-style:none;
}
#general {width:900px;
		  margin:10px auto;
}
#cabecera {background-color :#FFD39B;
		   border: 1px #000000; 
		   border-style:solid;
}
#navegacion{background-image :url(imagenes/navegacion.jpg);
	        border-bottom:#000000 1px solid;
			border-left: #000000 1px solid;
		    border-right: #000000 1px solid;
			height:20px;
}
#navegacion li {list-style: none;
				float:left;
				margin: 0px 25px 0px 25px;
}
#navegacion ul {margin-left:180;
}

#contenido {background-color : #f2cc7b;
			width:auto;
			border-bottom: #000000 1px solid; 
			border-left: #000000 1px solid;
			border-right: #000000 1px solid;
}
#contenido p {padding: 5px 15px 5px 15px;
			  text-indent: 20px;
}
#menu {background-image:url(imagenes/menu-fondo.jpg);
	   width:180px; 
	   float:left;
	   text-align: left;
	   margin: 10px;
	   background-position: bottom;
}
#menu h1 {text-decoration:none ; 
		  background-image: url(imagenes/menu-sup.jpg); 
		  padding-top:39px; 
}
#menu li {list-style:none;
		  margin: 4px 0px 4px 10px;	
}
#pie {background-color :#f2cc7b;
	  border-bottom: #000000 1px solid; 
	  border-left: #000000 1px solid; 
	  border-right: #000000 1px solid;
}
#base{background-image: url(imagenes/base.jpg) ;
	   background-repeat: no-repeat ;
	   width:898px ;
	   height: 54px;
	   border-bottom: #000000 1px solid;
	   border-left: #000000 1px solid;
	   border-right: #000000 1px solid;
	   overflow : hidden;
}
.centrado{text-align:center;
}
p { text-align: justify;
 	text-indent: 20px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif ;
	font-size:14px;
}
h1 {font-size: 1.4em; 
	color:#FFFFE0 ; 
	font-weight: bold ; 
	text-decoration: underline 
	;text-align: center;
}
h2{font-size: 1.2em; 
	color:#FFFFE0 ; 
	font-weight: bold ; 
	text-decoration: none ;
	text-align: center ;
}
h3{font-size: 1.1em; 
	color:#FFFFE0 ; 
	font-weight: 600 ;
	font-style:oblique ;
	text-align: center ;
}
a{color: #352c23;
  font-size:1.2em;
  text-decoration: none;
}
a: link{}
a:visited{}
a:hover{color:#f2cc7b;
		font-size:1.2em;
		text-decoration:underline
}
a:active{}

Nuestra vista previa ahora seria esta: AQUI

***

Tutorial realizado por Energiaelca