viernes, 7 de diciembre de 2012

Cortar header en partes y colocar texto, imágenes, efectos (html)

Hola mis amorcitos. Volvi devueltaaa jajajajaa. Y para explicarles algo bien fácil. ¿Siempre quisieron poner un mensaje de bienvenida escrito con texto en el header? ¿O quisiste incluir el ADD en él? ¿O quisiste agregar a los útlimos onliners con CMPFETCH? ¿O simplemente un textito? Etc. Te voy a enseñar cómo hacer ésto.

Haz click en el botón de abajo para poder disfrutar completamente del tuto ;)






  1. Primero y principal, crear el header a gusto. Blah, y una vez que terminamos, seleccionamos esta herramienta:

Cortamos las partes correctamente, y cortamos PERFECTAMENTE las partes que queremos agregarle el texto. Por ejemplo, si hicimos un cuadradito para escribir el welcome message, cortaremos el cuadradito en su forma completa. ¿Me explico?
Luego de hacer esto, vamos a ARCHIVO /GUARDAR PARA WEB...

Una vez que estamos allí, seleccionaremos cada partecita y las convertiremos en PNG-24. Por ejemplo:


Una vez que hicimos esto, vamos a donde dice "Previsualizar en navegador predeterminado" o algo así... lo que te pido que busques es un boton que te lleve a previsualizar lo que acabás de modificar. En mi photoshop, aparece esto:


Hacen click alli y copian el codigo que se les aparece en su navegador predeterminado... Pero OJO! Lo copian desde donde dice: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> hasta  <!-- End ImageReady Slices -->

¿Hasta acá me siguen? ;) Bien, sigamos...
Una vez que lo pegamos donde corresponde, GUARDAMOS las imágenes en photoshop(las imagenes cortadas). Las subimos a un servidor y las reemplazamos en el codigo que nos dio el navegador, ya que no tiene URL's válidas.

Una vez reemplazado todo, llegó la hora de colocar el contenido deseado... MUAJAJAJA! xd . Y hacemos lo siguiente. OJO presen mucha atención.
este es un ejemplo de un codigo que YO obtuve.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Sin título-2) -->
<table id="Tabla_01" width="1300" height="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Sin-t%edtulo-2_01.png" width="1300" height="446" alt=""></td>
</tr>
<tr>
<td>
<img src="Sin-t%edtulo-2_02.png" width="1300" height="204" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->

OK. Suponganse que el contenido lo quiero colocar en la primer imagen. Voy a tomar el fragmento donde está la imagen.


<td>
<img src="Sin-t%edtulo-2_01.png" width="1300" height="446" alt=""></td>
</tr>

Lo que vamos a hacer, es borrar el >
<img src y lo vamos a reemplazar por background. Quedaría algo así:

<td background="Sin-t%edtulo-2_01.png" width="1300" height="446" alt=""></td>
</tr>

 ¡Genial!  Ahora, ¿como colocaré el texto o código HTML que quiero insertar? Mmmm... abajo te voy a indicar donde tenes que colocar el texto / codigo:

<td background="Sin-t%edtulo-2_01.png" width="1300" height="446" alt="">AQUI ESCRIBES UN TEXTO QUE DESEAS O CODIGO, POR EJEMPLO CONTADOR DE VISITAS</td>
</tr>

Espero que esto les haya servido :) si tienen alguna duda, por favor COMENTEN!

4 comentarios:

  1. Respuestas
    1. Ojala te sirva! :) es un placer publicar tutos y ayudar a la gente ;) si tienes alguna duda o problema por favor házmelo saber

      Eliminar
  2. Dios Daniela eres una genia por favor!!!.
    Llevaba mucho tiempo queriendo saber esto y no entendía como, muchisimas gracias en serio, voy a probarlo!!!

    ResponderEliminar
    Respuestas
    1. Que bueno que sea de ayuda!!!!!!!!! Ya sabes, si no entendés algo, venis y me preguntas ;)

      Eliminar

Gracias por querer comentar. Comentá cosas agradables, de lo contrario tus comentarios serán eliminados. Si te sirvió el contenido, puedes comentar lo que sientes en ese momento y me pondré contenta y publicaré más cosas. Si tienes dudas sobre algo que he publicado, COMENTA! Te contestaré lo más rápido que pueda para solucionar tus problemas.

Gracias. Hazte seguidor! :)