CREAR UN LAYOUT PARA TU WEB

 

Voy a intentar esplicaros, lo mejor que pueda, como hacer un layout para vuestra página web.

Lo primero que tenemos que hacer, antes de hacer nuestro layout, es tener claro como va a ser nuestra página y que funcionalidad le vamos a dar, yo recomiendo sobre todo en las primeras veces, hacer un boceto en papel, y luego llevar a cabo nuestro diseño, así sabremos, por ejemplo, la cantidad de botones que vamos a necesitar, este es un tema muy personal, así que cada uno diseñe su sitio a su gusto. En un principio, lo normal es hacer la pagina como si se tratase de un dibujo, con nuestro programa PSP, es decir, tenemos que hacer la página, tal y como queremos que se vea, incluyendo botones, imagenes, etc...

Un vez que ya tenemos nuestro diseño completo, vamos a elaborar nuestro layout, para ello vamos a utilizar la herramienta que nos proporciona el PSP, es muy sencilla de manejar, y nos convertirá nuestro diseño en una página html, con sus correspondientes archivos.

Vamos a buscar esa herramienta:

Hacemos click en archivo, y exportamos nuestro "REBANADOR DE IMAGENES" tal y como indica la imagen.

Nos saldrá una ventanita con varias opciones y nuestro diseño en la parte superior de la misma.

Lo primero que debemos hacer es fijarnos en el formato del archivo, puedes elejir entre gif, jpeg, o png, esto ya a gusto de cada cual, yo me quedo con png, seguido de jpeg.

Hacemos clik en nuestro rebanador de imagenes:

Y dividimos nuestro diseño en tantas partes como sea necesario, creando "cortes" con la herramienta rebanador:

Por ejemplo, si queremos hacer un botón, tendremos que cortarlo pos todos sus lados, para así luego poder darle una url (enlazarlo), así lo haremos con todo el diseño de la pagina.

Voy a explicar un poquito todas las herramientas de nuestro rebanador de imagenes:

Herramienta REBANADOR: para rebanar (cortar) nuestro layout por donde sea necesario.

Herramienta FLECHA: para seleccionar un area determinada de nuestro diseño.

Herramienta CUADRICULA: divide tu diseño en tablas, con las celdas que tu le indiques.

Herramienta ELIMINAR: Elimina una rebanada (corte) de nuestro diseño, bien porque lo hayamos echo mal, o bien porque al hacer lineas rectas nuestro rebanador, puedes preciasar

Herramienta MANO: sirbe para movernos por nuestro diseño y así poder trabajarlo mejor.

Una vez que ya tengamos nuestro diseño ya "rebanado" por donde nos hace falta, vamos a enlazar las partes que queramos de nuestro diseño, por ejemplo los botones, para ello con la herramienta flecha seleccionamos la celda (boton) donde tenemos que enlazar y seguidamente rellenamos los datos necesarios:

URL: direccion de nuestro enlace por ejemplo http://almaweb.es esto lo podeis dejar en blanco, y luego modificarlo desde vuestro programa editor ya sea dreamweaver, frontpage, o cualquier otro.

Texto Alt: Aquí pondremos un texto que solo se verá cuando pongamos el cursor encima de la imagen, por ejemplo: Almaweb

Destino: Aqui seleccionas donde quieres que se abra el enlace.

 

Una vez hayamos terminado todo nuestro layout, vamos a guardar nuestro trabajo, click eh guardar como:

Buscamos la carpeta donde queremos guardar nuestro documento (debe ser una carpeta especial para nuestro layout)

Una vez guardado, nuestro layout se verá así:

Bueno con unas poquitas mas de imagenes ;)

Si damos doble click sobre nuestro html, se abre una vista previa de nuestro layout, ahora solo te queda retocar si quieres alguna cosilla (enlaces, botones, el fondo del docuemento...) y subirlo a tu servidor.

 

Espero que este tutorial sea de tu agrado, cualquier duda o consulta me podeis mandar un mail



2007©By Almaweb.es

subir

Ir al menú de tutoriales de PSP.

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

Free Counters  

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation