[Tutorial] - Pasar un layout a HTML [Cuadrarlo - Actualizado

- Pasar un layout a HTML

Buenas gente.
Muchos
de los usuarios, y amigos mios en el foro, me han pedido que haga un
tutorial para cuadrar un diseño, lo mismo que decir pasarlo a HTML.

No es nada complicado, solo hay que tener un poco de imaginación, y saber bién como poner las cosas con el editor.

Es un tutorial bastante largo, ya que se trata de webmaster, y hay que seguir muchos pasos para lograrlo.

---

Bueno,
tenemos nuestro diseño, en este caso, yo he echo un diseño web muy
simple para acabar mas rápido, porque si no tardaría mas en hacerlo.
Bueno, os muestro el diseño, por si alguien quiere comprobar.

~> http://www.justupload.net/uploads/50041408Dise%F1oX.png

---

Empecemos,
creando la carpeta donde vamos a meter todos los archivos de nuestra
web, tenemos que estar bien organizados para que no se pierdan ni las
imagenes ni los archivos html.

Creamos una carpeta cuyo nombre será "Web" en el sitio que ustedes quieran, y dentro de esa carpeta, creamos otra llamada "Imagenes"

NOTA: No le pongan ni acento, ni rayas, ni números ni nada.

---

Ahora
si, esta claro que tenemos que tener bien cortado nuestro diseño, y
tenemos que cortarlo de forma en donde vayamos a escribir cada cosa,
donde vayamos a colocar las cosas de fondo, etc...

Bueno, cada imagen que cortemos, tenemos que meterla en la carpeta "Imagenes".

Aquí una muestra de como lo voy a cortar yo:

~> http://www.justupload.net/uploads/58041408Tuto2.png

---

Bueno,
ahora que ya tenemos todas las imagenes cortadas a nuestro gusto, pues
vayamos a crear un bloc de notas, y ese bloc de notas, lo guardamos con
el nombre "index.html" en la carpeta principal de la web.

---

Vamos a entrar a nuestro editor FTP, en mi caso "Dreamwaver CS3" y creamos un nuevo documento HTML:

---

Vamos
a utilizar en este proyecto muchas tablas, pero muchisimas, porque en
cada tabla tenemos que meter cada imagen que tenemos en el diseño.

Bien,
comenzamos a crear la primera tabla, habrá que pensar como hicimos el
diseño, y ponerlo, y yo voy a crear la primera tabla con " 3 Filas 1 Columna":



NOTA: Siempre tiene que tener esos datos, para que en la web la tabla no se vea.

---

Ahora
vamos a poner las 3 imagenes, pero atención, hay una 2 imagenes que las
quiero poner para poder escribir encima de ellas, pues ¿Como haré?, la
insertamos de fondo en la tabla.

---

Vamos a poner las imagenes en cada tabla, poniendo de fondo y ajustando:

~> http://www.justupload.net/uploads/23041408Tuto7.png

Ahora
como veis, se puede escribir en el medio, bueno, y ahora tenemos que
poner los menús, que irán en el medio. Insertaremos en el medio una
tabla con "1 fila 3 columnas". Seguidamente, nos ponemos con el cursor en cada columna, y abajo en propiedades ponemos en Superior:

---

Insertamos 3 filas para cada menú, y ponemos de fondo donde tengamos que escribir, y imagen simple donde no hay que escribir.

~> http://www.justupload.net/uploads/31041408Tuto9.png

---

Listo amigos, ahora ya escribimos donde queramos.

NOTA: Mas tarde, are un vídeo tutorial.