De PSD a HTML

De PSD a HTML

Con esta guía vamos a aprender a pasar nuestra página web de un formato PSD (Photoshop Document) a HTML. Este es uno de los problemas más comunes que enfrentan las personas que se inician en el mundo de las webs, el hecho de que todo quede igual que cuando lo diseñamos es un poco difícil, vamos a aprender a hacerlo paso a paso.

Diseño

Lo primero que debemos tener es nuestro diseño, en este caso en formato PSD, El nuestro va a lucir de la siguiente manera:

lay1

Es un diseño simple con un header, un sidebar, un contenido y un footer bien definido. Una vez que tenemos el diseño lo primero que debemos hacer es conseguir las imágenes que van a comprender nuestro tema.

Imágenes

Es importante que seleccionemos solo las imágenes que vamos a usar, es decir, saber que podemos conseguir con CSS y que no podemos.

Crea en la carpeta de tu web, una nueva carpeta llamada “Imágenes” dónde vas a colocar todas las imágenes usadas en tu Layout.

Comenzamos con el fondo de tu pagina (Background), oculta todas las capas de manera que quede seleccionado el resplandor que esta detrás, Haz clic en EDICIÓN>>COPIAR, crea un nuevo documento con fondo transparente y haz clic en EDICIÓN>>PEGAR, vas a tener algo como lo siguiente:

lay2

Haz clic en ARCHIVO>>GUARDAR PARA WEB Y DISPOSITIVOS y guárdalo como “PNG-24″ teniendo la casilla “Transparencia” activada:

lay3

Es el turno del logo, el menú (tanto en hover como normales), del botón de seguir leyendo y de los títulos del footer (autores de tu web y tu opinión es importante). Finalmente estas son todas las imágenes que tenemos dentro de nuestra carpeta de imágenes:

lay4

Ahora necesitamos una imagen para el background (fondo) de la web, me refiero a la que se extiende por el header, vamos a hacerlo así:

lay6

Una vez que tenemos las imágenes, lo siguiente es comenzar con la maquetación

Estructura HTML

Lo primero que debes hacer es visualizar que etiqueta le vas a colocar a cada elemento de tu diseño, por ejemplo yo imagine algo así:

lay5

Como ves están diferenciadas tres partes, el header, el contenido y el footer. Lo que vamos a hacer es lo siguiente: Vamos a hacer un div grande donde vamos a colocar el header, el sidebar y el contenido central y otro grande donde vamos a colocar el footer, al final tendremos algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tu P&aacute;gina Web</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wraper"><!--Comienza Wraper-->
		<div id="header"><!--Comienza header-->
 
		</div><!--Termina header-->
		<div id="contenido"><!--Comienza contenido-->
 
			<div id="sidebar"><!--Comienza sidebar-->
 
			</div><!--Termina sidebar-->
			<div id="contenido-central"><!--Comienza contenido central-->
 
			</div><!--Termina contenido central-->
 
		</div><!--Termina contenido-->
	</div><!--Termina Wraper-->
	<div id="footer"><!--Comienza footer-->
 
	</div><!--Termina footer-->
</body>
</html>

Comenzamos con el header, aquí vamos a tener el menú y el logo, vamos a hacerlo de la siguiente manera:

1
2
3
4
5
6
7
8
9

		<div id="header"><!--Comienza header-->
			<div id="logo"><a href="#">Tu página web</a></div><!--Logo de la web-->
			<ul id="menu"><!--Comienza menu-->
				<li><a href="#" id="menu-home">Home</a></li>
				<li><a href="#" id="menu-web">Web</a></li>
				<li><a href="#" id="menu-tutoriales">Tutoriales</a></li>
				<li><a href="#" id="menu-contacto">Contacto</a></li>
			</ul><!--Termina menu-->
		</div><!--Termina header-->

Como vemos tenemos una lista no ordenada para el menú y un simple div para nuestro logo.

Ahora seguimos con el contenido, debemos colocar la imagen que es el mensaje sobre el sidebar y el contenido central, vamos a hacerlo así:

1
2
3
4
5
6
7
8
9
10

		<div id="contenido"><!--Comienza contenido-->
			<div id="imagen-contenido"></div><!--Imagen que esta sobre el sidebar y el contenido-->
			<div id="sidebar"><!--Comienza sidebar-->
 
			</div><!--Termina sidebar-->
			<div id="contenido-central"><!--Comienza contenido central-->
 
			</div><!--Termina contenido central-->
			<div class="clear"></div>
		</div><!--Termina contenido-->

Como vez en la segunda línea coloque un div que va a ser la imagen sobre el sidebar y el contenido.

El sidebar es muy simple, solo títulos y párrafos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

			<div id="sidebar"><!--Comienza sidebar-->
				<h1>Bienvenida</h1>
				<p>Bienvenidos a tupagina web, aqui puedes encontrar todo lo que quieras sobre diseño y mucho mas, espero que disfrutes el contenido de esta pagina</p>
				<h1>Afiliados</h1>
				<p>Carlos, Luis, Pedro, Carmen, Alberto, Steven, Jose Luis, Maickol, Jesus.</p>
				<h1>Paginas</h1>
				<ul id="menu-sidebar"><!--Comienza menu sidebar-->
					<li><a href="#" class="menu-paginas">Home</a></li>
					<li><a href="#" class="menu-paginas">Web</a></li>
					<li><a href="#" class="menu-paginas">Tutoriales</a></li>
					<li><a href="#" class="menu-paginas">Photoshop</a></li>
					<li><a href="#" class="menu-paginas">WordPress</a></li>
					<li><a href="#" class="menu-paginas">CuteNews</a></li>
					<li><a href="#" class="menu-paginas">Coppermine</a></li>
				</ul><!--Termina menu sidebar-->
				<h1>Copyrigth</h1>
				<p>Todo el contenido que se encuentra en esta pagina es 100% original, esta prohibida la copia parcial o total de la misma sin permiso previo del <a href="#">Administrador</a></p>
			</div><!--Termina sidebar-->

Para hacer el menú del sidebar usamos una vez mas las listas no ordenadas.

Lo siguiente es el contenido central, donde van a estar las entradas de nuestra página, me ha quedado de la siguiente manera:

1
2
3
4
5
6
7
8
9
10

			<div id="contenido-central"><!--Comienza contenido central-->
				<div class="entrada"><!--Comienza entrada-->
					<h1>Nuevo Tema</h1>
					<div class="imagen-entrada"><img src="Imagenes/entrada.png" alt="" /></div>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<p>Esta es una pagina web creada por skyandstars para hacer un tutorial de como hacer una pagina web desde cero puedes ver el resultado visitando <a href="#">http://www.skyandstars.net</a>, que esperas para hacerlo?. Esta es una pagina web creada para mostrarte como debes hacer tu propia pagina, que esperas para ingresar?</p>
					</div><!--Termina entrada contenido-->
					<p class="seguir-leyendo"><a href="#">Seguir Leyendo</a></p><!--Seguir leyendo-->
				</div><!--Termina entrada-->
			</div><!--Termina contenido central-->

Suponemos que lo que está en la línea dos hasta la línea nueve se va a repetir dependiendo del número de entradas q se muestren en la pagina.

Luego que termine el “contenido central” y antes que termine el “contenido” vamos a agregar lo siguiente:

1
2
3

			</div><!--Termina contenido central-->
			<div class="clear"></div>
		</div><!--Termina contenido-->

Una línea con un div que sirve para poner en orden nuestras columnas cuando estemos agregándole estilo a nuestra página, mas adelante explico para que sirve con más detalle.

Seguimos con nuestro footer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	<div id="footer"><!--Comienza footer-->
		<div id="footer-contenido"><!--Comienza footer contenido-->
			<div id="footer-izquierda"><!--Comienza footer izquierda-->
				<div id="tu-opinion"></div>
				<div id="footer-izquierda-contenido"><!--Comienza footer izquierda contenido-->
				<p>Nombre:</p> <input type="text" class="formulario-footer" /><br />
				<p>Email:</p> <input type="text" class="formulario-footer" /><br />
				<p>Comentario:</p> <textarea id="texto-footer"></textarea>
				</div><!--Termina footer izquierda contenido-->
			</div><!--Termina footer izquierda-->
			<div id="footer-derecha"><!--Comienza footer derecha-->
				<div id="autores-web"></div>
				<p><b>Esteban:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
				<p><b>Luis:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
			</div><!--Termina footer derecha-->
			<div class="clear"></div>
		</div><!--Termina footer contenido-->
	</div><!--Termina footer-->

Usamos divs para agregar las imágenes de “tu opinión es importante” y para “autores de tu web” y como te puedes dar cuenta, usamos una vez más el div con el class “clear”.

Al final toda nuestra estructura HTML va a quedar de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tu P&aacute;gina Web</title>
</head>
<body>
	<div id="wraper"><!--Comienza Wraper-->
		<div id="header"><!--Comienza header-->
			<div id="logo"><a href="#">Tu página web</a></div><!--Logo de la web-->
			<ul id="menu"><!--Comienza menu-->
				<li><a href="#" id="menu-home">Home</a></li>
				<li><a href="#" id="menu-web">Web</a></li>
				<li><a href="#" id="menu-tutoriales">Tutoriales</a></li>
				<li><a href="#" id="menu-contacto">Contacto</a></li>
			</ul><!--Termina menu-->
		</div><!--Termina header-->
		<div id="contenido"><!--Comienza contenido-->
			<div id="imagen-contenido"></div><!--Imagen que esta sobre el sidebar y el contenido-->
			<div id="sidebar"><!--Comienza sidebar-->
				<h1>Bienvenida</h1>
				<p>Bienvenidos a tupagina web, aqui puedes encontrar todo lo que quieras sobre diseño y mucho mas, espero que disfrutes el contenido de esta pagina</p>
				<h1>Afiliados</h1>
				<p>Carlos, Luis, Pedro, Carmen, Alberto, Steven, Jose Luis, Maickol, Jesus.</p>
				<h1>Paginas</h1>
				<ul id="menu-sidebar"><!--Comienza menu sidebar-->
					<li><a href="#" class="menu-paginas">Home</a></li>
					<li><a href="#" class="menu-paginas">Web</a></li>
					<li><a href="#" class="menu-paginas">Tutoriales</a></li>
					<li><a href="#" class="menu-paginas">Photoshop</a></li>
					<li><a href="#" class="menu-paginas">WordPress</a></li>
					<li><a href="#" class="menu-paginas">CuteNews</a></li>
					<li><a href="#" class="menu-paginas">Coppermine</a></li>
				</ul><!--Termina menu sidebar-->
				<h1>Copyrigth</h1>
				<p>Todo el contenido que se encuentra en esta pagina es 100% original, esta prohibida la copia parcial o total de la misma sin permiso previo del <a href="#">Administrador</a></p>
			</div><!--Termina sidebar-->
			<div id="contenido-central"><!--Comienza contenido central-->
				<div class="entrada"><!--Comienza entrada-->
					<h1>Nuevo Tema</h1>
					<div class="imagen-entrada"><img src="Imagenes/entrada.png" alt="" /></div>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<p>Esta es una pagina web creada por skyandstars para hacer un tutorial de como hacer una pagina web desde cero puedes ver el resultado visitando <a href="#">http://www.skyandstars.net</a>, que esperas para hacerlo?. Esta es una pagina web creada para mostrarte como debes hacer tu propia pagina, que esperas para ingresar?</p>
					</div><!--Termina entrada contenido-->
					<p class="seguir-leyendo"><a href="#">Seguir Leyendo</a></p><!--Seguir leyendo-->
				</div><!--Termina entrada-->
			</div><!--Termina contenido central-->
			<div class="clear"></div>
		</div><!--Termina contenido-->
	</div><!--Termina Wraper-->
	<div id="footer"><!--Comienza footer-->
		<div id="footer-contenido"><!--Comienza footer contenido-->
			<div id="footer-izquierda"><!--Comienza footer izquierda-->
				<div id="tu-opinion"></div>
				<div id="footer-izquierda-contenido"><!--Comienza footer izquierda contenido-->
				<p>Nombre:</p> <input type="text" class="formulario-footer" /><br />
				<p>Email:</p> <input type="text" class="formulario-footer" /><br />
				<p>Comentario:</p> <textarea id="texto-footer"></textarea>
				</div><!--Termina footer izquierda contenido-->
			</div><!--Termina footer izquierda-->
			<div id="footer-derecha"><!--Comienza footer derecha-->
				<div id="autores-web"></div>
				<p><b>Esteban:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
				<p><b>Luis:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
			</div><!--Termina footer derecha-->
			<div class="clear"></div>
		</div><!--Termina footer contenido-->
	</div><!--Termina footer-->
</body>
</html>

Agregando estilo

Lo que necesitas ahora es crear una nueva pagina css, guárdala con el nombre de “style” en la carpeta de tu web y agrega la siguiente línea antes del cierre de la etiqueta head.

1

<link href="style.css" rel="stylesheet" type="text/css" />

Lo primero a lo que siempre le agrego estilo es al famoso asterisco, “*” lo que hace es que cualquier estilo que le coloquemos será tomado por cada uno de los elementos de la web. Solo le quito el borde, el outline, el margen y el padding a todos los elementos:

1
2
3
4
5
6

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

Lo siguiente a lo que le debes agregar estilo es al body, aquí colocas el color de fondo y la imagen de fondo de tu web así como la configuración completa del texto en la misma.

1
2
3
4
5
6
7

body {
	background: url(Imagenes/bg.png) repeat-x #64b1cd;
	color: #545b5d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}

En background, configuramos el color de fondo y la imagen de fondo, el resto de las propiedades son configuración del texto.

El color de fondo de nuestra web lo seleccionamos con nuestro photoshop:

Seleccionamos la herramienta “cuentagotas” y hacemos clic en el fondo de nuestra web, hacemos doble clic en “configurar color frontal” y vamos a tener lo siguiente:
lay11

Hasta ahora nuestra página se va a ver así:

lay7

Lo siguiente es centrar toda nuestra web, eso lo vamos a conseguir, añadiéndole el siguiente estilo al wraper:

1
2
3
4

#wraper {
	width: 968px;
	margin: auto;
}

*Puedes aprender más a detalle este estilo visitando este tutorial.

Al header simplemente le vamos a agregar lo siguiente:

1
2
3
4

#header {
	background-color: #333333;
	height: 40px;
}

Para conseguir que se inserte el logo, vamos a agregar el siguiente estilo:

1
2
3
4
5
6
7
8
9
10
11

#logo {
	float: left;
}
	#logo a, #logo a:visited, logo a:hover {
		background: url(Imagenes/logo.png) no-repeat;
		width: 187px;
		height: 23px;
		display: block;
		text-indent: -5000px;
		margin-top: 13px;
	}

Con esto lo que vamos a conseguir es que el div muestre la imagen y que el link esté presente en todo el mismo.

Vamos a tener lo siguiente:
lay8

El menu lo vamos a hacer de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

#menu {
	margin-left: 330px;
	padding-top: 8px;
	padding-left: 160px;
}
	#menu li {
		float: left;
		list-style: none;
		margin-left: 10px;
	}
			#menu li #menu-home {
				background: url(Imagenes/home_hover.png) no-repeat;
				width: 81px;
				height: 28px;
				display: block;
				text-indent: -5000px;
			}
				#menu li #menu-home:hover {
					background: url(Imagenes/home.png) no-repeat;
				}
			#menu li #menu-web {
				background: url(Imagenes/web_hover.png) no-repeat;
				width: 58px;
				height: 28px;
				display: block;
				text-indent: -5000px;
			}
				#menu li #menu-web:hover {
					background: url(Imagenes/web.png) no-repeat;
				}
			#menu li #menu-tutoriales {
				background: url(Imagenes/tutoriales_hover.png) no-repeat;
				width: 149px;
				height: 28px;
				display: block;
				text-indent: -5000px;
			}
				#menu li #menu-tutoriales:hover {
					background: url(Imagenes/tutoriales.png) no-repeat;
				}
			#menu li #menu-contacto {
				background: url(Imagenes/contacto_hover.png) no-repeat;
				width: 140px;
				height: 28px;
				display: block;
				text-indent: -5000px;
			}
				#menu li #menu-contacto:hover {
					background: url(Imagenes/contacto.png) no-repeat;
				}

Con los primeros estilos (#menu y #menu li) lo que hacemos es ubicar a nuestro menú en la posición correcta además de quitarles los puntos al principio de cada elemento de lista. Con los otros estilos lo que hacemos es algo parecido que con el logo solo que agregamos la propiedad “hover” para que sea como una imagen cambiante.

Para seleccionar la ubicación exacta de tus elementos usa tu programa de diseño, en este caso con photoshop:

lay9

Con la herramienta marco rectangular, selecciona el ancho aproximado del espacio entre los elementos, cópialo y el ancho que tenga esa selección es que el vas a colocar para ubicar tu elemento.

Hasta ahora tenemos nuestro header listo, ahora es el turno del contenido, aquí es donde agregaremos el resplandor que esta de fondo, debe ser algo así:

1
2
3
4
5

#contenido {
	background: url(Imagenes/bgresplandor.png) no-repeat;
	background-position: 50% 0;
	padding-top: 17px;
}

Con el “background-position” lo que hicimos fue ubicar el fondo justo en el medio de nuestro “wraper”.

Para insertar la imagen que esta sobre el sidebar y el contenido central, usamos el siguiente estilo:

1
2
3
4
5
6

#imagen-contenido {
	background: url(Imagenes/mensaje.png) no-repeat;
	width: 835px;
	height: 39px;
	margin-left: 67px;
}

Simplemente le colocamos un fondo al div y lo abrimos dependiendo del ancho y alto de la imagen y con el “margin” lo ubicamos en la posición correcta.

Hasta ahora nuestra web debe estar así:

lay10

Con el sidebar vamos a usar un poquito de CSS3 para hacer los bordes redondeados (Exploradores como IE no admiten CSS3 aun). Veamos cómo queda el estilo de nuestro sidebar:

1
2
3
4
5
6
7
8
9
10

#sidebar {
	width: 247px;
	background-color: #eeeeee;
	border: 3px solid #b3b3b7;
	padding: 10px;
	-moz-border-radius: 20px;
	margin-right: 10px;
	display: inline;
	float: left;
}

Utilizamos el display: inline y el float: left para poder ubicar el contenido central al lado de nuestro sidebar (por defecto la organización de los elementos es uno debajo del otro).

Ahora simplemente vamos a configurar los títulos (h1) y los párrafos de nuestro sidebar:

1
2
3
4
5
6
7
8
9

h1 {
	font-family: Georgia,"Times New Roman",Times,serif;
	font-size: 21px;
	color: #333333;
	margin-bottom: 13px;
}
#sidebar p {
margin-bottom: 10px;
}

Ahora el menú del sidebar vamos a agregarle el siguiente estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13

#menu-sidebar {
	margin-bottom: 10px;
}
	#menu-sidebar li {
		list-style: none;
	}
		.menu-paginas, .menu-paginas:hover, .menu-paginas:visited {
			color: #64b1cd;
			list-style-type: none;
			text-decoration: none;
			text-transform: uppercase;
			font-weight: bold;
		}

Es solo ubicación y configuración del texto lo que hacemos con este estilo.

Nuestra web se debe ver así:

lay12

Es el turno del contenido, va a ser muy parecido al sidebar, aquí también vamos a usar CSS3.

1
2
3
4
5
6
7
8
9

#contenido-central {
	background-color: #eeeeee;
	border: 3px solid #b3b3b7;
	padding: 10px;
	-moz-border-radius: 20px;
	width: 650px;
	display: inline;
	float: left;
}

Configuramos la sección de entradas de la web de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.entrada {
	margin-bottom: 10px;
	border-bottom: 1px solid #b3b3b3;
}
.imagen-entrada {
	margin-bottom: 10px;
	margin-left: 10px;
	border: 1px solid #333333;
	width: 628px;
	height: 95px;
}
p.seguir-leyendo {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 420px;
}
p.seguir-leyendo a, p.seguir-leyendo a:hover, p.seguir-leyendo a:visited {
	background: url(Imagenes/sigueleyendo.png) no-repeat;
	width: 218px;
	height: 29px;
	display: block;
	text-indent: -5000px;
}

Es simple ubicación y los últimos dos son la configuración del botón de seguir leyendo que es muy parecido a lo que hicimos con el logo.

Tu página se va a ver así:

lay13

Como te das cuenta el footer está colocado a la derecha de nuestro contenido central, aquí es donde vamos a usar nuestro div llamado “clear”, agrega lo siguiente en tu estilo:

1
2
3

.clear {
	clear: both;
}

Y vas a ver como tu footer se coloca debajo de nuestro contenido y no a la derecha.

Para el footer vamos a agregar lo siguiente:

1
2
3
4
5
6
7

#footer {
	width: 100%;
	background-color: #333333;
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

El widht con el valor “100%” lo que hace es que el ancho va a abarcar toda la pantalla de nuestra web.

Para el “footer-contenido” vamos a hacer algo parecido que con el wraper para que quede centrado en nuestra página:

1
2
3
4

#footer-contenido {
	margin: auto;
	width: 968px;
}

Ahora vamos a configurar la sección izquierda de nuestro footer, donde está el “tu opinión es importante”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

#footer-izquierda {
	background-color: #545454;
	float: left;
	display: inline;
	padding: 10px;
	margin-right: 10px;
	width: 495px;
}
#tu-opinion {
	background: url(Imagenes/tuopinion.png) no-repeat;
	width: 315px;
	height: 31px;
	margin-bottom: 20px;
}
#footer-izquierda-contenido {
	margin-left: 30px;
}
#footer-izquierda-contenido p {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #f7f5f5;
	font-size: 18px;
	display: inline;
	float: left;
	margin-right: 80px;
	margin-bottom: 10px;
}
.formulario-footer {
	width: 300px;
	height: 27px;
	background: #f7f5f5;
	padding-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #333333;
	font-weight: bold;
	margin-bottom: 10px;
}
#texto-footer {
	width: 300px;
	height: 86px;
	background: #f7f5f5;
	padding-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #333333;
	font-weight: bold;
}

Y ahora lo que hacemos es configurar nuestro footer izquierda, donde esta “autores de tu web”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#footer-derecha {
	background-color: #545454;
	padding: 10px;
	margin-right: 10px;
	width: 410px;
	height: 254px;
	display: inline;
	float: left;
}
#autores-web {
	background: url(Imagenes/autores.png) no-repeat;
	width: 218px;
	height: 26px;
	margin-bottom: 20px;
}
#footer-derecha p {
	color: #f7f5f5;
	line-height: 25px;
}

Siempre debes modificar y configurar etiquetas comunes, como por ejemplo los links (a), las negritas (b, strong) las cursivas (em). aquí te dejo como quedaron mis links:

1
2
3
4
5
6
7
8

a, a:visited {
	color: #64b1cd;
	text-decoration: none;
}
a:hover {
	color: #97c1d0;
	text-decoration: underline;
}

Con eso debes tener lista tu página web, te dejo la carpeta final para que te descargues el resultado de esta plantilla web.

DESCARGA LA PLANTILLA

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

5 Comentarios en "De PSD a HTML"

  1. Hadabell

    2 Septiembre 2009

    Respuesta

    Hola Mijael, excelente tutorial!! te felicito por la pagina, porque es genial! mira… ayer te escribí, tengo un pequeñito problema (y disculpa que lo ventile por aquí) me registré en tu web, y al culminar sale “espere un correo con su password”. Ese correo nunca me llega!! :( estoy enrollada!! quiero entrar en el foro, y no he podido hacerlo aún. Gracias de antemano, un fuerte abrazo.

  2. Mijael

    3 Septiembre 2009

    Respuesta

    Hola Hadabell que bien que te guste el tutorial y la pagina, de hecho estoy teniendo ese problema con los registros, no se que sucede creo que tiene q ver con mi hoting…pero ya te envio tu informacion de registro.

  3. Hadabell

    3 Septiembre 2009

    Respuesta

    Graaaacias Mijael!!! :) ya recibí la información! un besito ;)

  4. Marie]

    11 Septiembre 2009

    Respuesta

    Gracias deverdad antes no sabia hacer layouts y ahora si! estoy muy contenta siempre que tenga alguna duda me pasare

  5. Mijael

    11 Septiembre 2009

    Respuesta

    Que bien Marie!! espero verte pronto esos layouts :)..Saludos.

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar