Tuto pag web_gimp

Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y
CSS
Muchos diseñadores de páginas web para principiantes tienen problemas para el diseño de sitios
y, a continuación, la codificación de manera adecuada y acaban de pasar a las mesas y de
Dreamweaver. En este tutorial te mostraré cómo diseñar un sitio en The Gimp y luego en el
código XHTML y CSS válidos con divs y las clases (no cuadros).
Esta es la primera parte de una serie de cuatro partes sobre este tema, esta parte se centrará en el diseño
de The Gimp, parte 2, 3 y 4 estará dedicado a la codificación listo para la web. Así que volver en el
próximo par de semanas o suscribirse a nuestro feed RSS.
Así que aquí vamos:
Paso 1
Crear una nueva imagen en The Gimp, que 960px (anchura) por 900px (altura) y lo rellenamos de color
gris oscuro (333333)
Paso 2
Ahora crear una nueva capa de 900px de ancho y lo llaman página, llenarlo con blanco (FFFFFF). Use
las teclas de flecha para mover en el centro de la imagen como esta:

Paso 3
Ir a Filtros >
Luz y Sombra >
Drop Shadow y configurar el offset Offset X y Y a 0 y desmarca
Permitir cambiar el tamaño, haga clic en Aceptar. Esto añadirá una sombra para el área de la página.
Paso 4
Crear una nueva capa llamada de cabecera y hacer 900px de ancho y 150px de altura, pasar en su lugar
como este:

Paso 5
Ajuste el color de frente a 205.974 y el color de fondo a 84a3e3 y seleccione la herramienta de mezcla.
Haga clic y arrastre desde la parte inferior de la capa a la parte superior para crear este efecto:

Paso 6
Seleccione la herramienta y haga clic en seleccionar y arrastrar un rectángulo de altura 5px en la parte
superior de la capa y la rellenamos con el color de primer plano.

Paso 7
Ahora duplicar la capa y pulse Eliminar la capa de vaciar de su contenido, esto le ahorrará tiempo ya
que no necesita crear una nueva capa y la posición de la misma. Con la herramienta Seleccionar, haga
clic y arrastre la capa a través de un rectángulo de 100% de ancho y altura de 1px y lo rellenamos de
negro (000000) y debajo de él exactamente lo mismo, esta vez llenado con blanco. A continuación,
cambiar la opacidad de la capa a 10,0. Esto producirá este efecto (si tiene dificultades para entender el
presente y, a continuación, checa mi tutorial sobre esta aquí:

Paso 8
Duplicar la capa de la página y borrar su contenido y, a continuación, utilizando la herramienta de
seleccionar dibujar un rectángulo en la parte derecha de la página con un ancho de 320px. Llenarlo con
84a3e3 y cambiar la opacidad de la capa a 15,0, lo que presenta la siguiente:

Paso 9
Ahora crear una nueva capa con un ancho de 900px y una altura de 100px y lo llaman el pie de página,
el lugar que en la parte inferior del diseño como este y lo rellenamos de 205.974:

Paso 10
Haga clic en el marco del área de grabado y añadir los elementos del menú que desea, cambiar la fuente
a Arial negrita tamaño 14 de color blanco (FFFFFF) y mover la capa para que se parezca a esta:

Paso 11
Duplicar la capa superior de cabecera y borrar su contenido, ahora bajo el grabado líneas dibuja un
rectángulo y lo rellenamos de blanco (FFFFFF) y cambiar la opacidad a 10, esto creará este efecto:

Paso 12
Por último, añadir que el logotipo utilizando la opción Abrir como capas en el menú Archivo y
colóquelo en la parte superior izquierda de la cabecera de la zona como esta:
Y
eso es todo por esta parte, hemos creado un sencillo diseño que se corte en la siguiente parte de
este tutorial y que ésta esté preparada para la codificación. Hay mucho mejor que los diseños que
se pueden realizar en The Gimp, pero sólo quiero mostrar que los fundamentos de esta serie.
Como dije al principio, volver o suscribirse a nuestro feed para ser notificado cuando las nuevas
piezas están.

CSS
Bienvenidos a la muy anticipada segunda parte. Mi agradecimiento a todos los que han sido
estimular a prisa y escribir la parte 2, así que aquí está.
En la segunda parte de esta serie de 4, voy a mostrar cómo el diseño listo el tramo para la codificación.
Este es el proceso por el cual estamos básicamente de corte en cada elemento por separado las
imágenes dispuesta a código en el sitio.
Paso 1
Crea una nueva carpeta en el equipo y dentro de esta carpeta agregar otra carpeta llamada imágenes.
Paso 2
Regresar a la imagen y abrir el diálogo de capas, seleccione un ojo al lado del logotipo de la capa, la
capa hover menú de navegación y de la capa de texto para que la imagen ahora parece esto:

Paso 3
Ahora, utilizando la herramienta Seleccionar, haga clic y arrastre desde la esquina superior izquierda a
la derecha justo encima de la línea de grabado, la región seleccionada debe 960px x 108px (busque en
la parte inferior de la ventana por el 100% mientras arrastra el botón para ver el seleccionado
dimensiones)
Paso
4
Volver al menú Edición y seleccione Pegar este momento y, a continuación, Como Nueva Imagen. Esto
abrirá una nueva imagen copiada de la región. Guardar esta imagen como en las imágenes header.png
carpeta que creó anteriormente.
Paso 5
Regresar a la lona, si la región ya no es seleccionado a continuación, pulse Ctrl y Z hasta que se
seleccione. Si coloca el ratón sobre la parte superior de la zona seleccionada, te darás cuenta de que
esta aparece:

Paso 6
Haga clic y arrastre esta barra superior en el área de la parte inferior de la zona seleccionada de todos el
camino a la parte inferior de la cabecera de la zona en la imagen para que la selección ahora parece
esto, la región seleccionada debe 960px x 42px:
Paso
7
Ahora como antes la región visible Copiar y pegar como una nueva imagen, esta vez de guardarlo como
menulinks.png
Paso
8
Vaya ahora a la capa de diálogo y volver a la capa menuhover y regresar a la lona. El área para la
menulinks debería estar aún seleccionada, ahora este tiempo, agarrar el mango de la derecha del área
seleccionada y la posición alguna dentro de la zona menuhover, hacer lo mismo manejar a la izquierda
para que la selección se ve algo como esto:

Paso
9
Copiar el área seleccionada y pegar como una nueva imagen llamándolo menuhover.png

Paso 10
Ahora selecciona a la izquierda de la imagen a la derecha de la imagen en cualquier lugar de la sección
central de este modo:
Paso
11
Copie el área visible y pegar como una nueva imagen. Guardarlo en la carpeta de imágenes llamándola
page.png
Paso 12
Vaya a la zona de pie de página y seleccione la región de pie de página, debe ser 128 100 píxeles de
alto. Y entonces, ¿adivinen qué? Sí, tienes razón, la zona visible copia y pega como una nueva imagen
y lo llaman footer.png
Paso 13
Por último, haga clic en el ojo al lado del logo de la capa y seleccione la parte superior izquierda de la
imagen a la parte inferior derecha del logotipo, la zona visible copia y pega como una nueva imagen
llamándolo logo.png

Resultados
Ahora debería tener una carpeta con imágenes de una carpeta llamada interior. La carpeta debe
contener imágenes header.png, menulinks.png, menuhover.png, page.png, footer.png y logo.png. Puede
descargar el archivo. Zip con el corte original de las imágenes y el archivo XCF aquí.
En la parte 3, yo te mostraré cómo iniciar la codificación de la plantilla en XHTML y CSS
válidos.

CSS
Bienvenido a la parte 3 de mi serie sobre el diseño y la codificación de una página web con el
Gimp, HTML y CSS. En esta parte voy a mostrarte cómo iniciar la codificación del sitio.
Paso 1
Para crear los archivos que no es necesario ningún procedimiento especial, sólo el Bloc de notas o un
editor de texto de algún tipo (no MS Word). En primer lugar, guardar ambos archivos en la carpeta que
creó anteriormente. La estructura de la carpeta debe tener este aspecto:
Paso 2
En el index.html tenemos que crear la estructura html añadir este código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD
HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
Estos se denominan etiquetas html. En la cabeza entre las etiquetas ir toda la información, como los
scripts y el estilo y en las etiquetas "body" va todo el contenido.

Paso 3
Ahora vamos a rellenar la sección de cabecera de la plantilla, de aquí vamos a añadir el título que se
muestra en la barra de título cuando ve la página y un enlace a la hoja de estilo CSS (style.css).
También puede añadir metaetiquetas aquí si lo desea.
Añadir este código entre las <head> y </ head>.
<title> SITIO WEB </ title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
- --
Paso 4
Ahora vamos a añadir a los componentes de la div archivo index.html. Un div es una etiqueta que es de
estilo en CSS y puede ser utilizado en HTML como un contenedor que posee contenido. A
continuación se muestra una imagen de cómo el divs van a ser expuestas en nuestra plantilla:

Paso 5
Añadir el siguiente código al archivo index.html entre la <body> y </ body> tags:
<div id="page">
<div id="header">
</div>
<div id="menulinks">
</div>
<div id="mainarea">
<div id="contentarea">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div>
</div>
Todos los elementos están contenidos dentro de la página div contentArea y la barra lateral y están
contenidas en un subgrupo denominado mainarea div.
Paso 6
Ahora, si usted fuera a abrir el archivo index.html ahora, usted no ve nada es porque no hemos aún
estos elementos de estilo y esto es lo que vamos a empezar a hacer ahora.
(Fuente) La sintaxis CSS se compone de tres partes: un selector, una propiedad y un valor:
selector {property: value}
Así, por ejemplo, si queríamos la cabecera para tener un ancho de 960px el código sería
#header {width:960px;} # cabecera (width: 960px;)
Cuando se refieren a un div que necesita para añadir un hash firmar delante del nombre (página #, #
cabecera etc), sin embargo, cuando usted se refiere a una clase que necesita para añadir una. frente (.
descripción. izquierda etc), vamos a entrar en más detalles sobre esto más adelante. Y para cada
declaración dentro de la (y) es necesario añadir un punto y coma (;) al final de cada línea.

Por lo tanto, existe una rápida introducción a CSS, para más de una introducción le sugiero que se lea
esta introducción.
Paso 7
Vaya a su archivo style.css y agregue el siguiente código CSS. Voy a tratar de explicar a cada paso lo
que hace:
body {
background-color:#333333;
margin:0;
padding:0;
text-align:center;
font-family:Arial;
font-size:12px;
color:#555555;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:left;
}
#header { #
width:960px;
height:108px;
background-image:url(images/header.png);
clear:both;
}

#menulinks {
width:960px;
height:44px;
background-image:url(images/menulinks.png);
clear:both;
}
#mainarea {
width:960px;
clear:both;
padding-top:10px;
}
#contentarea {
float:left;
width:560px;
padding-left:45px;
margin-bottom:10px;
}
#sidebar { #
float:right;
width:290px;
padding-right:45px;
}
#footer {
width:960px;
height:100px;
background-image:url(images/footer.png);

clear:both;
}
#footer p {
padding-top:30px;
color:#FFFFFF;
padding-left:50px;
line-height:20px;
}
body styling
El cuerpo es básicamente la página, yo he puesto el margen y el relleno a 0, porque esto significa que
no existan lagunas en la parte superior o inferior de la página. El color de fondo se ha establecido en
gris oscuro, he usado un código de colores html para este (333333), puede ver los códigos de color para
todos los colores aquí. Y, finalmente, yo he puesto la página para alinear texto al centro, lo que hará es
hacer que el centro de la página en el centro. También he creado la familia de fuentes, por defecto el
tamaño de la letra y el color de fuente.
#page styling
La página tiene un ancho de 960px y el margen de relleno y se han establecido para auto, esto hace de
la página centrado en la web. También he añadido una imagen de fondo, se trataba de la imagen de la
página que hemos creado en la segunda parte de esta serie y, por último, yo he puesto el texto alinear de
nuevo a la izquierda, más todos los elementos que han centrado el texto. La claridad de la propiedad
significa que se agrega debajo y por encima del anterior y siguiente componentes.
#header, #menulinks and #footer styling
He establecido una anchura y una altura adecuada, y añadió la imagen de fondo.
#mainarea styling
Este es un simple contenedor para la barra lateral y contentArea así que simplemente han creado un
ancho de 960px. También hay un principio de propiedadde
relleno para que el contenido de la página
no está demasiado cerca de la cabecera de la zona.
#contentarea styling
El contentArea se ha dejado a flote, lo que significa que está en la columna de la izquierda de dos
columnas. También he añadido un relleno izquierda porque de lo contrario la propiedad cuando
agreguemos el contenido, no se mostrará en la zona blanca de la imagen.
#sidebar styling
El lateral derecho ha sido flotaba por lo que es en la columna de la derecha y también he añadido un
paddingderecho
de propiedad para que el contenido aparece en la barra lateral área.

#footer p styling
El relleno y relleno superior izquierda de la posición de pie de página de propiedades contenido, el
color cambia a blanco (FFFFFF) y la línea está el espacio para el espacio de cada línea.
Paso 8
Finalmente, para esta parte, tenemos que añadir algunos contenidos a la contentArea, barra lateral y pie
de página, a fin de añadir el siguiente código html <br/> es el separador línea, sin que todos los de este
texto sería agrupado en un párrafo:
Contentarea:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud
exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en
reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/> <br/> <br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim
Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo
veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> Duis
Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/>
<br/><br/> <br/> <br/>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure
dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor

sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco
laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/> <br/> <br/>
dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/> <br/> <br/>
dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sidebar:
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/>
Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/> <br/>

Footer:
<p>Copyright (c) 2008 SITE NAME. <br/> <p> Copyright (c) 2008 NOMBRE DEL SITIO. <br/>
All Rights Reserved.</p> Todos los Derechos Reservados. </ P>
Resultados
Ahora debería tener una página que se ve algo como esto:
En la parte final me va a añadir el logotipo, estilo links, H1, H2 y la creación de etiquetas en el menú
rollover enlaces. Puede descargar todo el trabajo que hemos hecho hasta ahora aquí.

CSS
Bienvenidos a la cuarta y última parte de mi serie sobre el diseño y la codificación de un sitio web
en el Gimp, HTML y CSS. En este punto quiero dar las gracias a todos los que ha estado siguiendo
esta serie y espero que continúe el uso Ayuda para desarrolladores. En esta parte voy a mostrar cómo
acabar con la plantilla que hemos venido creando, vamos a estilo de los elementos textuales, como la
H1, H2 y etiquetas de enlace y vamos a crear la tan esperada renovación menú.
Paso 1
En primer lugar vamos a añadir el logotipo de la cabecera de la zona. Abra el archivo style.css y añadir
el texto siguiente:
a.logo {
width:353px;
height:102px;
float:left;
background-image:url(images/logo.png);
}
Esto estilo en el hipervínculo que tiene un atributo de clase "logo". Cambiar el ancho de valor a la
anchura del logotipo de la imagen que cortar antes.
Paso 2
Abra el archivo index.html y añadir la siguiente línea entre la <div id="header"> y </ div>:
<a href="./index.html" class="logo"></a>
Ahora debería tener este aspecto:

Paso
3
Ahora vamos a la h2 etiquetas estilo que vamos a utilizar para crear los títulos de las páginas y la barra
lateral. Ir al archivo style.css y agregar el siguiente código:
h2 {
font-size:20px;
color:#333333;
font-weight:bold;
}
y esto a la index.html archivo directamente debajo de la etiqueta <div id="contentarea">:
<h2>Welcome</h2>
Esto creará algo como esto:

El uso de etiquetas h2 es bueno para SEO porque robot de Google analiza el h2 etiquetas para
determinar lo que su sitio se trata. Observe también que no hay ningún punto (.) O hash (#) antes de la
h2 en el CSS, esto se debe a que se trata de una opción de formato y no se trata de un div (#) o una
clase (.)
Paso 4
Siguiente es el estilo de los hipervínculos en el texto, en primer lugar añadir un hipervínculo al archivo
index.html. (<a href=”link_here”>text_to_display_here</a>), la notificación se utilizará la
configuración del navegador por defecto:
Para este estilo de añadir lo siguiente al archivo style.css:
a {
font-weight:bold;
color:#333333;
text-decoration:none;
}
Ahora se ve como este:
Puede estilo aún más mediante la adición de un estilo hover, por ejemplo, he añadido el siguiente
código:
a:hover {
color:#389ccb;
text-decoration:underline;
}
y este fue el resultado cuando se ciernen sobre el vínculo:

Asimismo, sólo una pequeña nota, si quieres cambiar el estilo de un elemento como un hipervínculo en
un área determinada, por ejemplo al pie de página en el área luego cambiar el archivo style.css a{ a
footer # {
Paso 5
Y ahora, lo que tiene para todos los que se espera, el vuelco del vehículo menú enlaces.Esto se hace de
una manera similar a lo que ves arriba en el paso 4 utilizando la una y una: flotar en las opciones de
CSS.
Al hacer esto en su propio sitios / templates necesitará usar ensayo y error para obtener el derecho de
las mediciones para que se vea bien, pero en este ejemplo los elementos son todos los mismos que el
tutorial (si usted ha sido el siguiente otras partes correctamente, por supuesto).
Añadir lo siguiente en el archivo index.html en el marco del <div id="menulinks">:
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
Aquí está la CSS para la renovación menulinks artículo:
#menulinks a {
padding-top:15px;
padding-left:15px;
padding-right:15px;
height:27px;
float:left;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;

font-size:14px;
margin-top:1px;
}
Bien, un poco de una explicación para el código de más abajo. Utiliza el relleno para que el texto dentro
de la relación centrada en la altura y la propiedad sólo es llenar el área. Cuando se utiliza este en otras
plantillas de relleno superior y la altura de propiedad van a ser las propiedades que usted necesita para
mantener el cambio hasta que se vea bien. He utilizado flotar: izquierda, de modo que los elementos
que se muestran junto a la otra.He cambiado el color a blanco (FFFFFF), el tipo de letra negrita y el
tamaño de 14px. También he añadido un margen superior de 1pxporque,
por alguna razón, parecía
fuera de lugar sin él, el margen superior de propiedad sólo empujó el elemento hacia abajo o hacia
arriba si usa un valor negativo.
Para añadir el efecto hover todo lo que tienes que hacer es esto:
#menulinks a:hover { # menulinks a: hover (
background-image:url(images/menuhover.png); background-imagen: url (images /
menuhover.png);
} )
Simple! ¡Simple!
Ahora debería tener algo como esto:
Unhovered
Hovered
Paso 6
Por último, es todo lo que queda por hacer es pasar los enlaces a la derecha un poco, como usted puede
ver en las imágenes por encima de los enlaces que salen del borde. Para mover los enlaces a la derecha
vaya a la style.css y encontrar el archivo # menulinks propiedad y cambiarlo por:
#menulinks { # (menulinks
width:930px; ancho: 930px;
padding-left:30px;
height:44px;

background-image:url(images/menulinks.png);
clear:both;
}
He añadido un relleno izquierda atributo con un valor de 30px y con el fin de no estropear su diseño,
asegúrese de quitar la misma cantidad de la anchura atributo de relleno porque se añade a la anchura.
Resultados
Eso es todo, ahora debería tener algo parecido a éste:
Puede descargar todos los archivos haciendo clic aquí.
Por último, quisiera dar las gracias a todos ustedes por seguir este tutorial y espero que le ha ayudado
considerablemente en el aprendizaje de cómo diseñar un sitio web en el Gimp y luego el código mismo.
Usted podrá ahora llegar a más sitios web que utilizan las mismas técnicas utilizadas en este tutorial y
mantener un ojo en tutoriales de ayuda para los desarrolladores de técnicas más avanzadas tales como
efectos hover agradable. Puede suscribirse a mi feed RSS aquí.

Tuto pag web_gimp

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Tuto pag web_gimp

Último

Tuto pag web_gimp