Autor Tema: Codificar layout by tio!  (Leído 4882 veces)

Desconectado ferri

  • PHPero Experto
  • *****
  • Mensajes: 642
  • Karma: 40
  • Sexo: Masculino
    • Ver Perfil
Codificar layout by tio!
« en: 14 de Noviembre de 2009, 16:29:17 pm »
Bueno aquí esta despues de ver como tanta gente lo necesitaba un tutorial de como codear tu layout Habbo o no Habbo.
Para empezar necesitas:

- Un layout.
- Paint.
- Fireworks.
- Cualquier programa de edición web.

Veamos el tutorial con mi ejemplo:
Tenemos un layout:

Ese es el layout que yo utilizaré, ahora bien, vemos como tiene menus introducidos (EL CONTENIDO) que tambien querremos expandibles para poder introducir todo lo que querramos y que se alargen cuanto sea necesario.
Por lo tanto el primer paso que haremos será retirar los menus para poder primero codear el layout en tres partes:


Aquí el layout sin los menus que previamente guardé cada uno por separado fuera aparte para luego codearlos tambien y hacerlos expansibles.



Ahora este layout sin menus vamos a abrirlo con Fireworks, una vez abierto vamos a dirigirnos a esta herramienta:


Y con esta herramienta vamos a seleccionar porqué partes vamos a dividir nuestro layout, como dijimos previamente, este layout base sin menus ni nada lo diviremos en - ENCABEZADO - CUERPO (BOX GENERAL) - COLA DE LA WEB.

Más o menos así:



Bien una vez dividido el layout base (sin menus ni ningun contenido) lo vamos a exportar para pasarlo a HTML y así poder tener codeado el layout.
Para eso nos dirigimos a Archivo y seguidamente a Exportar.



Le ponemos un nombre y lo exportamos como HTML y imágenes.
Esto nos guardará un archivo HTML y una cantidad de imágenes.

Ahora para poder utilizar este layout y poder meter estructuras en su interior utilzaremos, cualquier editor web, en mi caso, dreamweaver.

Lo abrimos y la parte del layout llamada Box general le vamos a quitar la imagen que aparece y la insertaremos en la misma tabla como fondo.








Y porfín tenemos nuestro archivo HTML codeado y con posibilidad de incluir en su interior todo el contenido deseado.

PARA QUE FUNCINE EN TU HOSTING, DEBERAS SUBIR EN EL MISMO DIRECTORIO EL ARCHIVO HTML Y LAS IMAGENES =).

Aquí la previa final:



¡Saludos y ojalá les sirva!

Vía: Habbutil.net (Foro)
« Última modificación: 01 de Marzo de 2010, 22:06:55 pm por TLX »

Comunidad PHPeros

Codificar layout by tio!
« en: 14 de Noviembre de 2009, 16:29:17 pm »

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #1 en: 15 de Noviembre de 2009, 12:17:11 pm »
:) Buenisimo el tutorial. Una duda que tengo, ¿Como se haría en Phostoshop?.

Esque yo no manejo Fireworks :S

#Fdo. Physlet

Desconectado ..TheSkate..

  • PHPer@ Fijo
  • ***
  • Mensajes: 148
  • Karma: 5
  • Sexo: Masculino
  • Be Happy
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #2 en: 22 de Noviembre de 2009, 01:20:34 am »
nada mal...

Desconectado nac

  • PHPer@ Fijo
  • ***
  • Mensajes: 139
  • Karma: 2
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #3 en: 06 de Diciembre de 2009, 17:40:59 pm »
Este es un método pero no es nada recomendable, mejor hacerlo por su cuenta :)

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #4 en: 07 de Diciembre de 2009, 00:56:43 am »
La box no sera expandible, el tamaño ese sera fijo.

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #5 en: 07 de Diciembre de 2009, 17:02:25 pm »
¿Sabesi como hacerlo mediante CS2?

#Fdo. Physlet

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #6 en: 07 de Diciembre de 2009, 21:10:49 pm »
¿Sabesi como hacerlo mediante CS2?

¿CSS o CS2?

Pones la imagen como backround y le agregas margenes y ya.

Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #7 en: 07 de Diciembre de 2009, 21:12:41 pm »
Bueno, sería mejor que pusieras un tutorial que sea con divs, ya que no se usan tablas porque al validarlas estan incorrectas.
Mixtiqueros.net

<?PHP
define
(_miNombre'Focux');
if(
_miNombre == 'Focux'): printf('%s es un programador avanzado'_miNombre); else: printf('Tu no eres %s'_miNombre); endif;
?>

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #8 en: 08 de Diciembre de 2009, 14:39:35 pm »
¿CSS o CS2?

Pones la imagen como backround y le agregas margenes y ya.

Photoshop CS2, ¿Como lo puedo hacer?

#Fdo. Physlet

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #9 en: 08 de Diciembre de 2009, 22:35:02 pm »
Photoshop CS2, ¿Como lo puedo hacer?

No uso Photoshop para hacer layouts tan simples, ¿porque no cortas las partes del layout y lo haces con CSS?

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #10 en: 09 de Diciembre de 2009, 18:24:57 pm »
Por que yo de esos no sé xDDD No tengo ni puñetera idea de CSS y diseño.

#Fdo. Physlet

Desconectado 10GO

  • PHPerit@
  • *
  • Mensajes: 13
  • Karma: 0
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #11 en: 24 de Diciembre de 2009, 19:00:29 pm »
Guau me uviera gustado ver un tutorial como ese en unos años atras! tanto trabajo que me dio para adivinar como se hacia eso! busque todas las formas y no podia hasta que pague vips para que me enseñen a codear un diseño!, Buen Aporte si pudiera darte una Karma ya la tuvieras ;D  :D.. :bstar:
« Última modificación: 24 de Diciembre de 2009, 19:02:35 pm por 10GO »

Desconectado Rastrillox

  • PHPero Experto
  • *****
  • Mensajes: 592
  • Karma: 25
  • Sexo: Masculino
    • Ver Perfil
    • Forhabbo.es
Re:[Tutorial] Codificar layout by tio!
« Respuesta #12 en: 24 de Diciembre de 2009, 19:05:47 pm »
Hay Varias Formas de codear, pero esta es mas complicada, la otra es mil veces mas facil, solo es crear teblas y tablas, talvez cre un Videito  ;)

Desconectado ferri

  • PHPero Experto
  • *****
  • Mensajes: 642
  • Karma: 40
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #13 en: 30 de Diciembre de 2009, 12:58:03 pm »
Hay Varias Formas de codear, pero esta es mas complicada, la otra es mil veces mas facil, solo es crear teblas y tablas, talvez cre un Videito  ;)

¡Esperamos tu tutorial!  ;)

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Codificar layout by tio!
« Respuesta #14 en: 31 de Diciembre de 2009, 08:43:03 am »
Es mucho mas facil con DIVS y queda mejor.
Haces 3 DIVS, les pones el tamaño, les pones como background la imagen y ya.