domingo, 6 de febrero de 2011

Creacion del codigo CSS para una pagina web utilizando NetBeans

Vamos a crear el estilo de nuestro sitio web. Lo primero para ello es seleccionar la carpeta raiz de nuestro proyecto y hacer click derecho; vamos a new -> Cascading Style Sheet.


Luego nos aparece la siguiente ventana donde colocamos el nomre de nuestro estilo en este caso es "estilo".


Lo siguiente que de bemos hacer es pegar el siguiente codigo en el archivo "estilo.css", este codigo es un RESET.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-size:13px;
line-height: 1.4;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/*CLASES*/

.clear {
clear:both;}

.l.img {
margin:10px;
float:left;}

.r.img {
margin:10px;
float:right;}

.alpha {
margin-left:0px;}

.omega {
margin-right:0px;}



/*HTML*/

ul, ol {
list-style:none;}

a:link {
color:#f33;
text-decoration:none;}

a:visited {
text-decoration:none;
color:#f33;}

a:hover {
text-decoration:underline;
color:#f33;}

a:active {
text-decoration:none;
}

h1 {font-size:26px;}

h2 {font-size:30px;
color:#81aa48;
}

h3 {font-size:16px;}

h4 {font-size:14px;}

h5 {font-size:12px;}

h6 {font-size:10px;}

li {list-style:none;}

a {text-decoration:none;}

a:hover {text-decoration:underline;}

Luego de lo anterior escribimos el siguiente codigo CSS, para maquetar nuestro sitio web por completo, le daremos estilo al "wrapper", "header" y a el "logo".


Con lo siguiente daremos estilo a nuestra barra de navegacion "menu" .



Luego el estilo a los campos, "soporte","global","seguridad" y "ecologico." 


Luego, el estilo del mensaje, y de las redes sociales. 


Y por utimo a nuestro pie de pagina "footer".


Hay que tener en cuenta que nuestra carpeta raiz debe de existir una carpeta llamada imagenes donde ira contenida las siguientes imagenes. 


Con ello ya podemos ver en su totalidad nuestra pagina web terminada, podemos abrirla en nuestro navegador.
Espero este tutorial sea de ayuda para todos, cualquier cosa no duden en preguntar, y espero sus comentarios.

14 comentarios:

  1. todo bien, solo que no se donde poner la carpeta imagenes, donde la ponga no vincula a ellas.

    ResponderEliminar
  2. Hola mira en el documento raiz de Netbeans, que llamamos "sito_web" creas una carpeta llamada "imagenes", en donde guardas las imagenes del tutorial, de esta forma ya deberian vicularse las imagenes. Espero te funcione Saludos!!

    ResponderEliminar
  3. Que buen tuto, estare practicando y comentadno mis avances, thanks sebaspa...

    ResponderEliminar
  4. ingenieroo, es que eh probado con google chrome, mozilla y IE pero no me abre la ultima parte del tutorial, la pagina final... http://sebaspa.byethost7.com/Tutorial%20Web/

    ResponderEliminar
  5. A MI NO ME SALE EL PROGRAMA OSEA NO CORRE
    ME SALE UN ERROR AL EJECUTARLO, NO SE QUE SEA
    ESTE ES EL ERROR QUE SALE, "could no acces the URL the external browser configuration"
    BUENO LA CARPETA DE LAS IMAGENES LA GUARDE DENTRO DE LA MISMA CARPETA QUE SE CREA EN NETBEANS CON EL NOMBRE DEL PROYECTO NO SE SI SEA EN ESA PARTE DONDE HAY QUE GUARDARLA
    GRACIAS Y ESPERO SU COLABORACION PLEASE

    ResponderEliminar
  6. Hola disculpa por el error este ya fue solucionado, y por la parte de donde colocar la carpeta de las imagenes es donde tu dices, es decir dentro de la carpeta con el nombre del proyecto (Carpeta raiz)

    ResponderEliminar
  7. OK MUCHAS GRACIAS..
    OYE JUAN SEBASTIAN TU DE CASUALIDAD
    NO TIENES UNA PAGINA WEB MEJOR DICHO UN SITE EN NETBEANS ASI COMO ESTE ESTILO QUE NOS PRESENTASTE Y GRACIAS POR EL EJEMPLO..
    DONDE SE LE PUEDA AGREGAR DIFERENTE INFORMACION COMO REDES SOCIALES, NOTICIAS, AVNACES DE INFORMACION Y ASI SUCESIVAMENTE....
    TE AGRADEZO POR LA INFORMACION QUE PUEDAS BRINDAR...
    GRACIAS..

    ResponderEliminar
  8. Hola mira yo hice este tutorial con el fin de que las personas pudieran hacer el diseño que quisieran, soportandose en software libre, y si quieres puedes tomar este diseño de ejemplo para que puedas hacer lo que necesitas.

    ResponderEliminar
  9. como hago para incrustar esa hoja de estilo en un documento html

    ResponderEliminar
    Respuestas
    1. Hola mira, en el blog la parte de "Creacion del HTML de una pagina Web usando Netbeans" ahi podras verlo.

      Eliminar
  10. como le hago para que me aparezcan las imagenes ya que le pongo url¨y el nombre de la imagen y no me puede compilar nada

    ResponderEliminar
    Respuestas
    1. Hola Rosa Pioquinto, fijate muy bien como tengo la explicacion, primero creas la carpeta raiz, luego dentro de ella una carpeta llamada "imagenes", y dentro de esta van a ir las imagenes, luego en el archivo "css", debes poner la ruta correcta, de no cumplir con esto no te va a funcionar, si lo tienes diferente a como esta mi explicacion, solo es que coloques la ruta correcta a las imagenes, espero te sirva esta exiplacion, de no ser asi hazlo saber para colaborarte.

      Eliminar
  11. amigo.. como le ago para llamar al estilo.css desde el index??

    ResponderEliminar
    Respuestas
    1. Hola mira, en este blog la parte de "Creacion del HTML de una pagina Web usando Netbeans" ahi podras verlo.

      Eliminar