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.

Creacion del HTML de una pagina Web usando Netbeans

En este siguiente tutorial vamos a crear el codigo HTML de la pagina que diseñamos en Gimp. Para ello vamos a utilizar Netbeans.

Cuando estemos ya en Netbeans, hacemos click en Filie -> New Project (si lo tienen en ingles), buscamos la  categoria PHP, hacemos click en PHP Aplication, luego Next, como se ve en la siguiente imagen:

 

En esta ventana escribimos el nombre que queramos, en este caso yo puse sitio_web. Damos click en siguiente.

 

En la siguiente ventana damos click en Finish.

 

Estando aca podemos esmpezar a escribir el codigo, HTML de nuestra pagina 

Comenzamos creando el titulo de nuestro sitio web, en este caso se llamara: "Mi primer sitio web", luego creamos el "wrapper" que es el area principal de nuestra pagina, seguimos con el "header", que es la cabecera de nuestra pagina; alli va a estar contenido, el logo del sitio web, y el menu de la pagina.

Luego creamos el banner que es donde ira la imagen principal, de la pagina web, luego creamos los 4 campo que vemos en el diseño grafico que son: "soporte", "global", "seguridad" y "ecologico", cada uno con su titulo, su descripcion y su boton de  Leer mas"boton_leer".

En los segundo campos van dos campos los cuales son, "mensaje", que es donde se encuentra el titulo de "Somos los mejores!!!", y el campo de "redes_sociales", que es donde estan 2 imagenes, de las2 rede sociales mas grandes del mundo "twitter" y "facebook".

Y por ultimo hacemos el "footer", o pie de pagina que es donde iran los derechos de autor, del creador del sitio web. 

  

Por ultimo guardamos nuestra pagina web con el nombre de index.php, en la carpeta raiz de nuestro sitio.

Con esto finalizamos la creacion del codigo de HTML, de nuestro sitio web, proximamente subire, el tutorial de creacion del codigo CSS, que es el encargado de dar el estilo a nuestro sitio web.

Preparando las imágenes para la maquetación con GIMP

Cuando maquetamos una página web la idea principal es hacerla lo más parecida al diseño original, y que además todas las imágenes y demás archivos utilizados tengan el menor peso posible.

En nuestro archivo de Gimp, vamos a separar las imágenes que vamos a utilizar de la siguiente manera.

Primero seleccionamos la capa de la cabecera, presionamos la tecla Shift y hacemos clic en el ojo que aparece en la capa seleccionada para que se habilite únicamente esa capa como podemos ver en la siguiente imagen.

 

Con la herramienta de selección, hacemos una selección de 1px X 100px como vemos aca:

 

Creamos un archivo nuevo con las mismas proporciones como vemos acá:

 

Del archivo original copiamos el pedacito que seleccionamos y lo pegamos en el nuevo archivo, vamos a Archivo -> Guardar Como, y estando ahí creamos una carpeta con el nombre que ustedes quieran darle al proyecto, dentro de esa carpeta crean una carpeta llamada imágenes, estando ahí en la parte inferior podemos ver un símbolo de “+” y dice “Seleccione el tipo de archivo” desplegamos las opciones y elegimos JPEG como vemos en la siguiente imagen:

 

Le colocan el nombre de “fondo_cabecera.jpg” , clic en guardar, luego en exportar, y por ultimo nos aparece una barra, la aumentamos hasta el 100% y aceptamos de esta manera guardamos nuestra imagen.

Luego seleccionamos la capa de Logo y hacemos lo mismo que hicimos anteriormente, con la herramienta selección, hacemos la selección de todo el logo, copiamos la selección creamos un nuevo archivo de 120px X 22px y pegamos el logo allí, como se ve aca:

 

 

Este logo lo guardamos pero de tipo PNG para tener transparencias en el logo. “logo.png”

Ahora seleccionamos las capas del botón ver mas y hacemos el mismo procedimiento, lo recortamos, en un nuevo archivo así como se ve acá:

 

Guardamos esta imagen como JPEG con el nombre “btn_vermas.jpg”

Por último seleccionamos la capa del pie de página y repetimos los pasos de la cabecera y hacemos la selección de 1px X 54px como se ve aca:

 

Y la guardamos con el nombre de “fondo_pie.jpg”

Y con esto tenemos todo listo para comenzar a maquetar nuestro sitio web, que ya muy pronto subiré la forma de cómo se hace esto. Espero esto les haya quedado claro y cualquier cosa no duden en preguntar.

DISEÑO GRAFICO DE UNA PAGINA WEB CON GIMP

Lo primero que haremos será descargar un paquete de archivos, para hacer nuestros diseños alineados, así que vamos a utilizar 960 Grid System, que lo podemos descargar desde acá.

Una vez descargado abrimos la carpeta y nos encontramos con esto: (Para ver las imagenes mas grandes da un clic encima de ellas)

Luego entramos a la carpeta templates -> gimp -> 960_grid_24_col

Abrimos el archivo, y lo guardamos con un nombre diferente para no dañar el original, después de esto cambiamos, el nombre de la capa Background, a Fondo como se ve aca: 

 

Con la herramienta de selección (R), hacemos una selección de 1020px X 100px; para hacer la selección exacta, nos podemos ayudar con los campos de tamaño en el menú izquierdo digitando los valores. Como se ve aca:

 

Colocamos una guía justo en la línea inferior de la selección para guiarnos más. (Para hacer la guía hay que hacer clic en la regla superior y sin soltar el mouse arrastrar hasta el lugar deseado la guía).

 

Hacemos doble clic en el color de frente (en este caso el negro es el frente y el blanco es el fondo), para abrir sus opciones, en ellas escribimos el código que se muestra en la siguiente imagen.

 

Creamos una nueva capa, con el botón nueva capa y la llamamos cabecera_fondo, en esta capa con opción de relleno, rellenamos el espacio seleccionado del color que elegimos anteriormente.

Tomamos la herramienta texto, la configuramos con las opciones mostradas en la siguiente imagen y escribimos el nombre de nuestro sitio web o lo que ustedes quieran.

En el color de texto haciendo doble clic escribimos el código del color también mostrado en la siguiente imagen y nos debe quedar todo esto asi:

 

Con la herramienta texto configuramos de nuevo las opciones mostradas en la siguiente imagen, y escribimos todo el menú. Si este queda corrido con la herramienta mover (M) lo pueden posicionar para que se quede viendo de la siguiente manera:

 

Creamos una nueva capa llamada, fondo_boton_menu y luego con la herramienta selección, hacemos una selección de 65px X 35px, y colocamos el siguiente color.

 

Con la herramienta mover lo posicionamos para que nos quede de la siguiente manera

 

Con la herramienta selección hacemos una selección de 960px X 430px. Y la ponemos debajo de nuestra cabecera.  E importamos una imagen de exactamente estas medidas. la imagen que yo utilicéla pueden descargar de aca

 

Trazamos una guía 50px aprox debajo de la imagen para posicionar una pequeña imagen como se muestra acá:(Las imagenes utilizadas a continuacion las puedes descargar de los siguientes links --- imagen 1 --- imagen 2 --- imagen 3 --- imagen 4)

Trazamos una guía debajo de la imagen aprox 20 px debajo luego, con la herramienta texto escribimos “Soporte” con un tamaño de 15, le aplicamos el siguiente color: #81aa48, debajo de este titulo aprox 20px, trazamos otra guía y escribimos un texto de ejemplo con un tamaño de 12, y le aplicamos el siguiente color: #2f3235.

 

Luego repetimos lo mismo hasta completar algo como esto:

 

Creamos una nueva capa llamada fondo_btn_vermas, colocamos una guía 20 px debajo de los textos, después con la herramienta selección hacemos una selección de 100px X 35px. En el color de frente ponemos el color: #66923e, y en el color de fondo ponemos #76a150. Con la herramienta mezcla (L) hacemos clic en la parte superior de nuestra selección y arrastramos hasta el final de la selección (de arriba hacia abajo), con esto nos queda un degradado que se veria asi:

 

Con la herramienta de selección elíptica (E) hacemos un circulo de 15px, ayudándonos de nuestras opciones como lo hacíamos antes con las selecciones rectangulares. Con la herramienta de relleno rellenar el circulo con el color: #4d4d4d, con la herramienta mover posicionarlo en su sitio. Con la herramienta texto escribir el símbolo “+”, de color blanco y posicionarlo encima del circulo. Con la herramienta de texto escribir con color blanco “Leer mas” y posicionarlo encima del botón quedando de la siguiente manera:

Duplicamos las capas que conforman el botón “Leer mas” haciendo clic derecho encima de las capas correspondientes y eligiendo la opción duplicar capa, esta capa duplicada se ubica correctamente para completar los botones restantes quedando asi:

Ponemos otra guía debajo de los botones y con la herramienta texto la configuramos con un tamaño de 30 y un color: #81aa48, escribimos “Somos los mejores !!”  debajo de esta ponemos otra guía y escribimos otro texto de ejemplo con el mismo color utilizado para los textos de ejemplo anteriores, y debe quedar asi:

 

En la parte derecha del diseño siguiendo las guias, y las configuraciones de los textos anteriores  escribimos como titulo “Siguenos” y nos descargamos 2 imágenes una de Twitter y otra de Facebook, las importamos y con la herramienta escalar la escalamos hasta lograr el tamaño deseado, y con la herramienta mover las posicionamos para que queden asi:

 

Creamos una nueva capa llamada “Pie_pagina”. Con la herramienta de selección hacer una selección de de un ancho de 960px x 54px. Hacemos el mismo degradado utilizado en los botones de ver mas. Con la herramienta de texto y un color blanco escribir los derechos de autor y el año actual, quedando de la siguiente manera:

 

Con esto terminamos el diseño grafico de un sitio web desarrollado en gimp, espero les guste, cualquier duda escríbanla y responderé lo más rápido posible.