Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje26-02-2011, 17:03 (UTC)    
Título del mensaje: [Tutorial CSS] Tu primer diseño CSS

Hola,
este es un tutorial sencillo para aprender a crear estructuras css. Es facíl de hacer y no lleva tiempo e intente explicar las cosas lo mejor posible.
Explique cada regla en el css en forma de comentario ej: /*esto es un comentario en CSS*/

Resultado final:


Lo primero es crear un contenedor donde ira el cabezal, el menu, el contenido y el footer.
Código:
#contenedor {
width: 750px; /*es el ancho del contenedor, la altura de adaptara al contenido de este */
max-width: 750px;
margin: 0 auto /*esto centra el diseño*/
}


Ahora que tenemos el contenedor, crearemos las cosas que van en el.

El contenido:
Código:
#contenido {
width: 740px; /*ancho contenido*/
margin: 2px 0px 2px 0px; /*margen que sirve para separar los demás contenedores (header y footer)*/
padding: 5px; /*sirve para dejar un espacio entre el texto y el borde del contenido*/
float: left; /*así ubicamos el contenedor*/
background-color: #E6ECEF; /*el color del fondo del contenido */
}


El header o cabezal:

Código:
#header {
clear: both; /*ubicamos el header*/
background: url (url de la imgen del cabezal) no-repeat; /*el "no-repeat" sirve para que el cabezal no se repita y el "background: url" es para ima imagen en el cabezal.*/
min-height: 100px; /*el tamaño mínimo del cabezal*/
margin-bottom: 2px; /*es para dejar un espacio de 2px entre el cabezal y el menu*/
}


Si en lugar de una imagen en el cabezal quieres un fondo con color cambia el "background: url" por "background-color: #E6ECEF;"
Cambia lo que esta en color rojo para cambiar el color del cabezal. Tienes que usar colores RGB. Puedes obtener los valores RGB en mi web: http://kilometro6.es.tl/Tabla-de-colores.htm

El footer o pie:

Código:
#footer {
clear: both; /*ubicación del footer*/
overflow: hidden;
min-height: 20px; /*tamaño mínimo del footer*/
background-color: #E6ECEF; /*el color del fondo del footer*/
}


El menu:

Código:
.menu { /*no voy a explicar cada parte porque se confundiran*/
background-color: #E6ECEF;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
}
#menu li {
   float: left;
   margin: 0;
   padding: 0;
}
#menu a {
background-color: #E6ECEF;
   display: block;
   float: left;
   margin: 0;
   padding: 8px 12px;
   text-decoration: none;
}
#menu a:hover {
   background-color: #D4E7F1;
   color: #fff;
   padding-bottom: 8px;
}


Luego de terminar el css tenemos que crear los textos en formato HTML que "llamarán" a las características que pusimos en el CSS para que se visualicen. Este texto HTML en PWG se divide en 2 partes el "Texto por encima de la página" y el "Texto por debajo de la página".
Se dividen en la etiqueta o div donde comienza el contenido. La apertura queda en el texto por encima y el cierre en el texto por debajo. Entonces, entre esas 2 etiquetas ira el contenido.

Texto por encima de la página:
Código:
<div id="contenedor">
<div id="header">
</div>
<ul class="menu">
  <li><a href="#" title="Enlace genérico">Elemento 1</a></li>
  <li><a href="#" title="Enlace genérico">Elemento 2</a></li>
  <li><a href="#" title="Enlace genérico">Elemento 3</a></li>
  <li><a href="#" title="Enlace genérico">Elemento 4</a></li>
  <li><a href="#" title="Enlace genérico">Elemento 5</a></li>
  <li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
<div id="contenido"> <!--apertura contenido-->



Texto por debajo de la página:
Código:
</div> <!--cierre contenido-->
<div id="footer">
</div>
</div>


Dudas o problemas decirlas en el tema porfavor.

Saludos!
______________


Ultima edición por kilometro6 el Sab Feb 26, 2011 1:13 pm; editado 3 veces
Mensaje26-02-2011, 17:17 (UTC)    
Título del mensaje:

Olaaa

Buen tutorial . Kilometro6 , Felicidades =D
______________
Mensaje26-02-2011, 17:40 (UTC)    
Título del mensaje:


______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Mensaje26-02-2011, 18:10 (UTC)    
Título del mensaje:

Gracias Aver si me animo
Hacer una planilla.
xD
Mensaje26-02-2011, 18:18 (UTC)    
Título del mensaje:

Muy bueno, creo que esto es único en el foro
______________
Luciano Jmz
Luciano Jmz
Mensaje26-02-2011, 20:24 (UTC)    
Título del mensaje:



Ultima edición por m3sg el Sab Feb 26, 2011 4:45 pm; editado 2 veces
Mensaje26-02-2011, 20:42 (UTC)    
Título del mensaje:

m3sg escribió:


WTF!!!!
______________
Luciano Jmz
Luciano Jmz
Mensaje26-02-2011, 20:47 (UTC)    
Título del mensaje:

Muy buen post :D
______________
We miss you Cliff Burton :-(
Mensaje26-02-2011, 21:17 (UTC)    
Título del mensaje:

Que bien explicado Kilometro6 Grazias.
______________

http://radiovijaer.es.tl/
Mensaje26-02-2011, 21:37 (UTC)    
Título del mensaje: Buen Tutorial

Buen Tutorial Kilometro6
Mensaje26-02-2011, 23:23 (UTC)    
Título del mensaje:

Gracias a todos por sus comentarios. Me dan más ganas de sacar otro tuto saber que el tutorial sirve de algo.
Por cierto, la imagen del perro me mato de risa xD -.- xD

Saludos!
______________
Mensaje26-02-2011, 23:25 (UTC)    
Título del mensaje:

Muy buen tutorial, está bien explciado aunque creo que se tendría que detallar y colocar más imágenes para cada código.
Mensaje27-02-2011, 01:30 (UTC)    
Título del mensaje:

Nesbet, sinceramente ya no se como detallar mejor cada paso. Puse para que sirve cada línea de código de css (alguna que otra no ya que puse reglas un poco avanzadas). Quizas poner que con el . (punto) se usa class y con la # (almoadilla) se utiliza id y las diferencias de cada uno pero no quería hacer el tuto muy pesado.
Y luego puse una imagen al principio del tutorial donde nombraba cada parte del diseño para que al nombrar los códigos se tenga una referencia de que es cada código y como se va a ver.
Decime que parte te parecio que no esta bien explicada y con gusto puedo ver como la puedo mejorar
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group