Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 3

Publicado por Samuel | 07.18.2009
Tutoriales

Bienvenido a la parte final del tutorial que te muestra como crear una página web con Photoshop y Dreamweaver CS4, en esta parte final veremos el código CSS y HTML válidos para crear nuestra página web. Si aun no lees la primera y segunda entrega te lo recomiendo pues asi llevarás mejor el hilo de lo que escribiré en este tutorial.

Nota: Necesitarás conocimiento básico de CSS y HTML para seguir este tutorial.

Paso 1

Abre Dreamweaver y crea un nuevo documento HTML y guardalo en el la carpeta donde esta la carpeta de la imágenes que creamos con Photoshop, Ejemplo: Crea una carpeta llamada Website dentro de ella deberá estar la carpeta images con las imágenes de la página y el archivo HTML que acabamos de crear.
image1

Paso 2

Abre bloc de notas y guarda el documento asi en blanco, guardalo con el nombre style.css en el mismo directorio donde guardaste el documento HTML eso creará el archivo CSS o la hoja de estilos ncesesaria para la página. También descarga el siguiente favicon y también guardalo en el directorio principal.
favicon

con eso tendremos todos nuestros archivos listos y podremos dedicarnos al código.

Paso 3

Vamos a relacionar nuestra hoja de estilos (CSS) con nuestro archivo, Dreamweaver ha creado el siguiente código HTML.

1
2
3
4
5
6
7
8
9
10

<!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=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
</body>
</html>

Ahora entre entre las etiquetas head agregaremos el código siguiente.

6
7
8
9
10
11
12
13

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<title>Interesting Stuff | Does not matter what you want, we have it!.</title>
</head>
 
<body>

Donde el primer Link es para agregar el favicon, el segundo la hoja de estilos y el tercero el titulo de la página web, ahora presiona F12 en Dreamweaver lo que abrirá tu explorador predeterminado y además adjuntará el archivo CSS a la vista de Código.
image2
De este modo nada más bastará con dar clic en el botón style.css y Código fuente para alternar entre ambos archivos.

Paso 4, Estilos básicos..

Agregaremos nuestra primera parte de código CSS, algunas reglas básicas para dar formato al texto, imágenes y enlaces.

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

body{
 background:url(images/bg.jpg) no-repeat 52% 0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#000;
 padding:0; margin:0;
}
 
img{
 border:none;
}
 
a{
 color:#000;
 text-decoration:none;
}
 
a:hover{
 text-decoration: underline;
}

Paso 5, Creando la Cabecera.

Primero te mostraré el código HTML necesario para estructurar el Header y luego te lo explicaré dejando de último el código CSS.

13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
<div class="header">
 
<img class="logo" src="images/logo.png" alt="Interesting Stuff" />
 
<div class="searchform">
<form action="">
<h3>Looking For Something?</h3>
<input type="text" name="search" value="" />
<input type="submit" name="send" value="GO"/>
</form>
</div>
 
</div><!--Termina Header-->

Donde primero después de abrir la etiqueta body hemos creado un Div que contendrá el header por lo que le asignamos la clase "header", luego tenemos la imagen del logo con su respectiva clase "logo", por último tenemos el formulario de búsqueda.

Ahora agregamos el código CSS del Header.

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

/*---Cabecera--*/
 
.header{
	height:112px;
	width:1000px;
	margin: 0 auto; padding:0;
}
 
.logo{
	margin-left:50px;
}
 
.searchform{
	float:right;
	width:auto;
	margin:0 20px 0px 0;
	color:#626262;
}
 
.searchform h3{
	margin: 30px 0 4px 0;
	font-size: 18px;
}
 
.searchform input[type="text"]{
	width:256px;
	height:22px;
	padding:6px;
	font-size:20px;
	border:solid 1px #B4B4B4;
	background:#E6E6E6;
}
 
.searchform input[type="submit"]{
	margin-left: 5px;
	background:url(images/gobutton.png);
	border:none;
	cursor:pointer;
	width:37px;
	height:37px;
	font-size:13px;
	font-weight:bold;
	color:#92C90D;
}

Las últimas dos reglas quizá sea lo más llamativo de esta porcón de codigo css pues especificamos que tipo de input deseamos formatear en este caso los de tipo text y submit que corresponden al formulario de búsqueda el primero el área de escritura y el segundo el botón enviar.

Paso 6, Creando el área principal..

Debido a que no tenemos un contenedor de página porque no lo consideré necesario (lo que no significa que no se pueda usar..) debemos aplicar el margin y padding a 0 para cada uno de los div principales de la página, pero primero veamos el código HTML del área principal.

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div class="mainarea">
<div class="wrapper">
 
<div class="left">
<img src="images/iphone.png" alt="featured_article" />
</div>
 
<div class="right">
<p class="ftext">Today featuring..</p>
<img src="images/text1.png" alt="text1" />
<p>Check out our store, there are a lot of interesting stuff that might 
be useful for you.</p>
<a href="" title="Go"><img src="images/gonow.png" alt="go now" /></a>
</div>
 
</div><!--Termina Wrapper-->
</div><!--Termina MainArea-->

Donde primero abrimos un nuevo Div par crear el rectangulo que atravesaba la página web aquel negro, lo recuerdas? bueno ese será creado a partir de css y no de una imagen como quizá pensaste, luego tenemos un div mas con la clase “wrapper” lo que nos dice que el área principal tendrá un contenedor donde se hubicará el contenido del mismo. Luego tienes el contenido en si primero el div con la clase “left” donde hubicaremos nuestro iPhone y el otro div con la clase “right” donde aparecerá el texto del área principal, ahora el CSS.

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

/*---Área Principal--*/
 
.mainarea{
	width:100%;
	background-color:#313131;
}
 
.mainarea .wrapper{
	width:1000px;
	margin: 0 auto; padding:0;
	height:362px;
	color:#EEEEEE;
}
 
.left{
	float:left;
	margin:39px 0 0 142px;
	position:absolute;
	width:auto;
}
 
.right{
	float:right;
	width:auto;
	margin:55px 92px 0 0;
}
 
.right p{
	width:345px;
	margin:5px 0 10px 35px;
	line-height:1.5em;
}
 
.right p.ftext{
	font-weight:bold;
	margin:0 0 5px 10px;
}
 
.right a{
	margin:0px 0 0 35px;
}

Este código esta bastante claro, no hay mucho que explicar como podrás ver todo es intuitivo y puedes ir checando el código css y html juntos.

Paso 7, creando el footer o pie de página..

Seguiremos con nuestra metodología primero te muestro el código HTML y su explicación.

44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<div class="footer">
 
<div class="sidebar">
<img src="images/hwa.png" alt="How We Are?" />
<p>We are a little team of one web design student
that want to make a pleasant website design from
scratch.</p>
</div>
 
<div class="sidebar">
<img src="images/wwd.png" alt="What We Do?" />
<p>We bring to your hand all kind of interesting 
things, we believe in “The garbage of one is 
the treasure of other”.</p>
</div>
 
<div class="sidebar2">
<img src="images/suggenstions.png" alt="Suggestions?" />
<p>We want to be better, please submit a 
suggestions to us, you ideas are our
bussines.</p>
</div>

Otra pieza de código sencilla, en ella simplemente creamos el contenedor del footer y luego creamos 3 divs que corresponden a las tres porciones de texto que aparecen después del área principal, Who we are? What we do? Suggestions? si lo notas el primer y segundo div comparten la clase “sidebar” no así el úlimo que debe tener unas reglas especiales debido al alto de imagen que contiene la palabra Suggestions? esto debido a que las dos anteriores no tienen letras que vayan más allá del borde inferior del texto en cambio esta posee las dos “g” por lo que la imágen se hace más alta. Ahora el código CSS.

108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

/*---Pie---*/
 
.footer{
	height:320px;
	width:1000px;
	margin: 0 auto; padding:0;
	line-height:20px;
	font-size:14px;
}
 
.sidebar{
	margin:110px 0 0 35px;
	float:left;
	width:30%;
}
 
.sidebar2{
	margin:110px 0 0 35px;
	left:50px;
	float:left;
	width:25%;
}
 
.sidebar2 p{
	margin-top:8px;
}

Ahora podrás notar más claramente las diferencias entre la clase “sidebar” y “sidebar2 p“, donde hemos aplicado un margen superior de 8 pixeles a todas las etiquetas “p” que se encuentren dentro de un div con la clase “sidebar2” que en este caso solo es uno, la clase sidebar no especifica un valor de margen superior para las etiquetas “p” que contenga asi con eso reparamos un pequeño error que siendo sincero no considere al principio, si deseas ver mejor en que afecta la clase “sidebar p“, solo borrala temporalmente y observa lo que secede con el último grupo de texto: Suggestions?.

Paso 8, Links y cierre de la página..

Pasos sencillos de eso se trata este tutorial, pero con grandes resultados, ahora te muestro el codigo HTML final.

66
67
68
69
70

<div class="links"><a href="" title="">About Interesting Stuff</a> | <a href="" title="">Announcements</a> | <a href="" title="">Security Center</a> | <a href="" title="">Resolution Center</a> | <a href="" title="">Policies</a> | <a href="" title="">Site Map</a> | <a href="" title="">Help</a></div>
 
</div><!--Termina Footer-->
</body>
</html>

Aquí aparece un div con la clase “links” el cual contiene los enlaces de la página y por último las etiquetas de cierre “body” y “html“, con eso terminamos el el código HTML de nuestra página web. Ahora las reglas CSS.

134
135
136
137
138

.footer .links{
	margin:65px 0 0 150px;
	clear:left;
	display:inline-block;
}

Aqui especificamos las reglas para el div con “links” nada más el coneder pues a los enlaces ya les dimos formato desde el principio en el código básico.

Codigo HTML Completo.

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
71
72

<!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=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<title>Interesting Stuff | Does not matter what you want, we have it!.</title>
</head>
 
<body>
 
<div class="header">
 
<img class="logo" src="images/logo.png" alt="Interesting Stuff" />
 
<div class="searchform">
<form action="">
<h3>Looking For Something?</h3>
<input type="text" name="search" value="" />
<input type="submit" name="send" value="GO"/>
</form>
</div>
 
</div><!--Termina Header-->
 
<div class="mainarea">
<div class="wrapper">
 
<div class="left">
<img src="images/iphone.png" alt="featured_article" />
</div>
 
<div class="right">
<p class="ftext">Today featuring..</p>
<img src="images/text1.png" alt="text1" />
<p>Check out our store, there are a lot of interesting stuff that might 
be useful for you.</p>
<a href="" title="Go"><img src="images/gonow.png" alt="go now" /></a>
</div>
 
</div><!--Termina Wrapper-->
</div><!--Termina MainArea-->
 
<div class="footer">
 
<div class="sidebar">
<img src="images/hwa.png" alt="How We Are?" />
<p>We are a little team of one web design student
that want to make a pleasant website design from
scratch.</p>
</div>
 
<div class="sidebar">
<img src="images/wwd.png" alt="What We Do?" />
<p>We bring to your hand all kind of interesting 
things, we believe in “The garbage of one is 
the treasure of other”.</p>
</div>
 
<div class="sidebar2">
<img src="images/suggenstions.png" alt="Suggestions?" />
<p>We want to be better, please submit a 
suggestions to us, you ideas are our
bussines.</p>
</div>
 
<div class="links"><a href="" title="">About Interesting Stuff</a> | <a href="" title="">Announcements</a> | <a href="" title="">Security Center</a> | <a href="" title="">Resolution Center</a> | <a href="" title="">Policies</a> | <a href="" title="">Site Map</a> | <a href="" title="">Help</a></div>
 
</div><!--Termina Footer-->
 
</body>
</html>

Código CSS Completo

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

body{
	background:url(images/bg.jpg) no-repeat 52% 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	padding:0; margin:0;
}
 
img{
	border:none;
}
 
 
a{
	color:#000;
	text-decoration:none;
}
 
a:hover{
	text-decoration: underline;
}
 
/*---Cabecera--*/
 
.header{
	height:112px;
	width:1000px;
	margin: 0 auto; padding:0;
}
 
.logo{
	margin-left:50px;
}
 
.searchform{
	float:right;
	width:auto;
	margin:0 20px 0px 0;
	color:#626262;
}
 
.searchform h3{
	margin: 30px 0 4px 0;
	font-size: 18px;
}
 
.searchform input[type="text"]{
	width:256px;
	height:22px;
	padding:6px;
	font-size:20px;
	border:solid 1px #B4B4B4;
	background:#E6E6E6;
}
 
.searchform input[type="submit"]{
	margin-left: 5px;
	background:url(images/gobutton.png);
	border:none;
	cursor:pointer;
	width:37px;
	height:37px;
	font-size:13px;
	font-weight:bold;
	color:#92C90D;
}
 
/*---Área Principal--*/
 
.mainarea{
	width:100%;
	background-color:#313131;
}
 
.mainarea .wrapper{
	width:1000px;
	margin: 0 auto; padding:0;
	height:362px;
	color:#EEEEEE;
}
 
.left{
	float:left;
	margin:39px 0 0 142px;
	position:absolute;
	width:auto;
}
 
.right{
	float:right;
	width:auto;
	margin:55px 92px 0 0;
}
 
.right p{
	width:345px;
	margin:5px 0 10px 35px;
	line-height:1.5em;
}
 
.right p.ftext{
	font-weight:bold;
	margin:0 0 5px 10px;
}
 
.right a{
	margin:0px 0 0 35px;
}
 
/*---Pie---*/
 
.footer{
	height:320px;
	width:1000px;
	margin: 0 auto; padding:0;
	line-height:20px;
	font-size:14px;
}
 
.sidebar{
	margin:110px 0 0 35px;
	float:left;
	width:30%;
}
 
.sidebar2{
	margin:110px 0 0 35px;
	left:50px;
	float:left;
	width:25%;
}
 
.sidebar2 p{
	margin-top:8px;
}
 
.footer .links{
	margin:65px 0 0 150px;
	clear:left;
	display:inline-block;
}

demo

Valid XHTML 1.0 Transitional¡CSS Válido!

Palabras Finales

Con esto terminamos esta serie de tres tutoriales dedicados a el proceso que lleva tras de si una página web, hay cosas que no se han tomado en cuenta como el uso e inserción de jQuery o PHP quizá un poco más adelante veamos más acerca de este tema, por ahora solo me resta esperar que hayas disfrutado este tutorial y que estes pendiente de los próximos. Gracias.

Acerca del Autor

Samuel Bran es estudiande de Diseño Gráfico, tiene una gran pasión por el diseño gráfico y web, fan de Adobe y la edición de video. Originario de El Salvador, autor y creador de Photodesigner.Net un blog dedicado a publicar Tutoriales en Español para Adobe Photoshop, Recursos e Inspiración.

24 Comentarios en “Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 3”

  1. AlanCorp Dijo:

    07.18.2009

    Mi estimado eres todo un máster, acabas de ganar un espacio en mi pagina de iGoogle y en mis alertas por correos.

  2. Bitacoras.com Dijo:

    07.18.2009

    Información Bitacoras.com…

    Valora en Bitacoras.com: Bienvenido a la parte final del tutorial que te muestra como crear una página web con Photoshop y Dreamweaver CS4, ene esta parte final veremos el código CSS y HTML validos para crear la nuestra página web. Si aun no lees la …..

  3. AlanCorp Dijo:

    07.18.2009

    Aquí esta mi versión terminada.
    Click aqui

    Muchas gracias por el tutorial ahora voy a intentar hacer otra diferente por mi mismo.

  4. Javier Dijo:

    07.18.2009

    Ohhhh muy bueno el tuto esta era la parte que mas me interesa la codificacion

    excelente Samuel voy a termino el tuto y te muestro mi resultado

    SALUDOS PERUANOS…!!!

  5. Samuel Dijo:

    07.18.2009

    Muchas gracias por los comentarios y por mostrar tu resultado Alan, Javier espero ver el tuyo es emocionante saber que han seguidos estos tutoriales, se logra el objetivo.

    Gracias.

  6. Azael Dijo:

    07.18.2009

    Excelente

    xD

  7. ALEX ALEMAN Dijo:

    07.18.2009

    SALUDOS, NO ENTIENDO COMO ES EL PASO A PASO PARA HACER LOS HTML Y LOS CSS, NO LOGRÉ ENTENDER, QUIZÁS PORQUE NO SOY DISEÑADOR DE PAGINAS WEB, SOLO SOY DISEÑADOR GRAFICO PUBLICITARIO, TRABAJO DISEÑANDO REVISTAS, TARJETAS, BROUCHURES, ETC. QUISIERA QU ALGUIEN ME INICIERA EN LA REALIZACION DE SITIOS WEB Y COMO SUBIRLOS A LOS SERVIDORES. GRACIAS, SALUDOS DESDE NICARAGUA A TODOS!

  8. Jack Bach Dijo:

    07.23.2009

    ¡Muy buena serie de posts!
    Un poco largo todo eso sí. A mi me ha pasado lo mismo con un screencast que he hecho para mi blog sobre el mismo tema – se me ha ido a los 40 minutos.
    Pues eso, que me gusta ver que hay gente que se lo curra en español también.
    Hasta pronto!

  9. Samuel Dijo:

    07.23.2009

    Gracias por las impresiones, Jack creo que si es un proceso largo pero es gratificante cuando lees los comentarios no te parece? :D

    Saludos amigos.

  10. A Dijo:

    07.29.2009

    Me encantó la forma en que se desarrollo. Lamentablemente tengo que informarte que el sitio solo se puede ver correctamente en IE y no así en Mozilla Firefox (es un por ejemplo…es el navegador que uso). Sera cuestión de cambiar algunas cosas, en fin, queria comentarlo.

    ¡Saludos!

  11. Samuel Dijo:

    07.29.2009

    A: Hola!! comprendo a lo que te refieres, este trabajo fué probado solamente en Mozilla Firefox 3.5 e Internet Explorer 8 y en ambos el resultado fue positivo.

    Saludos y gracias por la observación.

  12. A Dijo:

    07.29.2009

    Así es, ahora lo veo bien, antes tenia la version 3.0.

    Saludos

  13. Lo Mejor de la Red – Julio de 2009 | Tinnta Dijo:

    07.30.2009

    [...] Ver parte 1 | Ver parte 2 | Ver parte 3 [...]

  14. Alberto Dijo:

    08.3.2009

    Fantástica serie de tutoriales!
    A ver si vuelves a hacer algún otro tutorial de diseño web más avanzado.
    Enhorabuena!

  15. stheff Dijo:

    11.11.2009

    :) _:) algo largo pero me a servido de muxoO

  16. Mauricio Dijo:

    11.12.2009

    Excelente tutorial… diste en el clavo…yo manejo fireworks y dreamweaver y hasta ahora no había encontrado un tutorial que me permitiera diseñar mi maqueta en css…seguía haciendo tablas…voy a practicarlo y te contaré…aunque sería interesante un video tutorial…

  17. Franco Rojas Dijo:

    11.29.2009

    Excelente tutorial Samuel, te Felicito

    Un Abrazo ;)

  18. Sourcegeek Dijo:

    02.15.2010

    WOW!!
    Algo tan sencillo y un resultado estilo profesional..
    Muy bueno, eres un master!

    Un favor
    Podrias hacer un tutorial para que tenga un fondo diferente al del cuerpo?
    Me explico, observa esta imagen:
    http://www.cofregrafico.com/wp-content/uploads/2009/05/plantilla-web-hermosa.jpg

    Como hacer que lo del fondo (cafe) sea diferente al fondo del cuerpo (lo blanco)

    Muchas gracias, saludos!

  19. Felipe Saavedra Dijo:

    03.4.2010

    genial, muy buen tutorial, muchas gracias….

  20. EzpLouud Dijo:

    03.26.2010

    Exelente tutorial! (Y)

  21. Antonio Dijo:

    04.7.2010

    Estimado mis felicitaciones por su aporte, yo soy programador web pero utilizo solo edit plus y php con modelo vista controlador y uso de paginas de estilos tambien, y estoy introduciendome en este mundo de photoshop (soy un poco reacio a dreamweaber xp). pero encuentro muy bueno su tutorial. felicitaciones por el aporte.!

  22. Rodrigoalemelendez Dijo:

    04.18.2010

    se ve muy bien lo tratare de aser espero q sea un exito gracias

  23. Rodrigoalemelendez Dijo:

    04.18.2010

    y gracias por el aporte bendiciones

  24. ana Dijo:

    05.3.2010

    excelente y claro

Deja un Comentario