Iceblue - Aprende a crear plantillas web

Hola a todos!

Desde hace mucho que vengo estudiando la posibilidad de entregarles todo lo referido a la creación de sus propios diseños a través de códigos css.

Un alcance importante es que deben ir siguiendo con mucho cuidado todas las imágenes en forma muy cautelosa, el mal uso de estos códigos podría generar problemas irreparables en vuestras webs.

Deben recordar también que estos códigos css funcionan solo en el diseño Iceblue, dicho diseño es el que viene por defecto en sus cuentas. Si trabajan en este momento con otro, deben priméramente cambiarlo como lo muestra la imagen siguiente, usar la totalidad de estos códigos en otros diseños NO sirve
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

En Iceblue vamos a conocer la forma de crear un diseño como el mio o como el de esta web que colocaré de ejemplo www.comoempezar.es.tl.

Debo precisar que la mayoría de los efectos en los botones se pueden apreciar totalmente con navegadores como Internet Explorer 7 o Mozilla Firefox (recomendado).

Lo otro, por favor lean aténtamente todo lo que aparece en estas secciones, antes de hacer consultas a posibles dudas, quizás por error propio no se ha conseguido el objetivo buscado.

Cada paso ha sido cuidadosamente estudiado y reitero el único fin de esto es ayudar a aquellos que quieran crear sus propios diseños, estoy cierto que a través de esta ayuda aparecerán interesantes Webmasters. Bueno pero basta de charlas y vamos al grano.

Primero haremos una revisión de cada una de las imágenes que debe llevar el diseño, he usado, asumo, un "idioma" muy fácil de entender para que no se complique tanto esta ayuda, paso a paso iré describiendo la imagen antecedida de un número, es importante esto para saber de cual de ellas estamos hablando.

Para empezar hagan un click en cada una de las siguientes cuatro imágenes, serán redireccionados a otro servidor, luego con el botón derecho del ratón guardenlas en su PC, asi apreciarán su tamaño real y se guiarán de mejor manera.

Bienvenidos amigos y amigas, les invito simplemente, a divertirse creando
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

En esta parte comenzaremos a describir algunas de las herramientas muy útiles para nuestro diseño. Para empezar, acá tienen un muy buen sitio para sacar imágenes, ya sea para la creación de fondos para botones, cabezal, etc. o simplemente el fondo de nuestra web. No olviden lo importante que es el seleccionar bien el tamaño de la imagen que vamos a usar, esto para no crear conflictos posteriores

Acá está el link del sitio web
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

Hay varios buenos programas para crear botones y cabezales, uno muy simple es el por ejemplo. Ahora bien, no se preocupen si no pueden adquirir alguno, basta con el "Paint" para crear dichas imágenes, solo hay que respetar las medidas y colocar la imagen adecuada para editarla, en este caso la de un cabezal como lo explico acontinuación
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

Ven que no es complicado , en el siguiente paso les explico cada una de las imágenes que incluiremos en nuestro nuevo diseño, recuerden que lo importante es respetar las medidas de esas imágenes, esto para no deformar el diseño

Ahora comenzaremos a revisar cada imagen que debe llevar el diseño, asumo que ya descargaron estas imágenes y las tienen en vuestros PC para apreciarlas en tamaño real.

Es muy importante, recuerden, respetar los tamaños de cada imagen que crearán, he antecedido un número a cada una de estas imágenes, esto dado que en los códigos css van en ese mismo orden.
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

Revisamos ahora las primeras cinco imágenes con sus respectivas medidas y funciones dentro del diseño, para verlas en tamaño real basta con que hagan un click sobre ellas

Nota: te recomiendo ir guardando las imágenes en tu ordenador para utilizarlas con posterioridad y tenerlas a mano ante posibles dudas, sobretodo en las medidas que estas deben llevar, cada imagen está alojada en PWG


Descripción de Imágenes


01 Fondo Web (1024 X 768)



Esta imagen corresponde al fondo utilizado en nuestro diseño, al menos en estos códigos css te recomiendo que sean de ese tamaño (1024 x 768) para que salga una sola imagen de fondo y no en mosaico. Muy importante es seleccionar un fondo que no tape la autopublicidad de PWG, el ocultarla es causal de baja inmediata sin previo aviso.


02 Cabezal (984 X 250)



Esta imagen corresponde al cabezal. Recuerda usar solo formatos permitidos por PWG para crear uno, respetando las medidas obviamente, esto dado que las imágenes las puedes subir, por razones de velocidad y seguridad a PWG, los servidores externos podrían fallar y sería muy perjudicial para el diseño. El formato que yo uso para el cabezal es el .png, en este ejemplo es con formato .gif


03 Botón 1 (183 X 33)



Esta imagen corresponde a la de los botones que se aprecian en el menu cuando ingresamos a ver el diseño de nuestra web, en lo posible que no sean muy animados, más bien estáticos, dependiendo de lo que quieras mostrar en tu trabajo del sitio web.


04 Botón 2 (183 X 33)



Esta imagen representa también a los botones del menu, la diferencia es que están ocultos y solo aparecen cuando pasas el ratón por encima de ellos y reemplazan al botón 1, aquí entonces podrías crear un botón distinto al primero para darle un gran efecto y lucirte ante tus visitantes, no olvidando tener cuidado de no tapar el color de texto que seleccionaste para mostrar el Menu, por ejemplo si el botón es negro, los textos no pueden ser del mismo color.


05 Fondo Box (228 X 1000)



Como se aprecia en la imagen, esta corresponde al fondo que le daremos a nuestras cajas (box), siempre debes elegir un color adecuado al diseño que estás creando, este no es el tamaño real de la imagen, por cierto no olvides respetar las medidas.

Ahora vamos a revisar las imágenes de la seis a la ocho.

06 Button1 ( 566 X 38 )



Esta imagen es muy importante como todas, la gran diferencia es que esta va en el centro del cuerpo de nuestra web, recomiendo que sea muy original, podrías escribirle un texto y hacerle algún tipo de animación, preocúpate siempre de que resalte ante las demás imágenes, si bien en gustos no hay nada escrito, es bueno ser originales.


07 Button2 ( 566 X 38 )



Como pueden apreciar, esta imagen es muy parecida a la anterior, en cuanto a su tamaño y texto, esto es modificable a gusto, la diferencia entre estas imágenes, es que en este caso aparece al final del centro en el cuerpo de la web, las opciones de animación quedan a criterio propio.


08 Fondo páginas (600 X 600)



Esta imagen es la que aparecerá como fondo en cada una de nuestras páginas, es importante que sea acorde al color de los textos para poder hacerlos visibles, te recomiendo usar imágenes sólidas en cuanto al color, sin tantos dibujos, algo así como el que aparece en el ejemplo, recuerda que la medida es de (600 X 600)


Barra Contador de Visitas ( 566 X 38 )



Esta imagen corresponde a la que aparece en la barra inferior de nuestra web, específicamente en donde aparece el contador de visitas como lo muestra la siguiente imagen, recuerden que las medidas son de ( 566 X 38 ) pixeles







Ahora revisaremos las dos últimas imágenes incluídas en los códigos css que conformarán nuestro diseño.


09 Separabox (228 X25)



Esta imagen aparecerá en la parte inferior de cada box, en el ejemplo he rellenado cada uno de ellos para que puedan apreciar su función en el diseño.


10 Sobrebox (227 X 25)



Como el nombre lo dice, esta imagen aparecerá sobre cada box y a través de los códigos css también la incluiremos para que aparezca por sobre el menu, en el ejemplo te puedes dar cuenta de ello.




He dejado para el final estas dos imágenes que te ayudarán a personalizar más el diseño y hacerlo más ancho en el caso de los box.


11 Anchar box (218 X 5)



Lo ideal es que cuentes con una imagen como esta a la hora de anchar cada box, así aprovecharás más el espacio y tu web se verá más completa, el código como este iría pegado tal cual en cada box

12 Divisor (160 X 33)



Esta imagen corresponde a los divisores o separadores de los temas en el menú, para agregar estas imágenes debes crear una nueva página, abrir las opciones y elegir la que dice "Puntos de menú sin link", como título colocas un código como este

No olvides guardar los cambios realizados, mira la imagen




Acá comenzaremos a revisar los primeros pasos importantes antes de colocar los códigos css, como una imagen dice más que mil palabras, aquí les dejo algunas
_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

_______________________________________________
_______________________________________________

Ahora ya entramos en la recta final, vamos a proceder a comenzar el trabajo pegando los códigos css de nuestro nuevo diseño.
Recuerda que esto debes hacerlo en las configuraciones avanzadas de editar diseño en la plantilla Iceblue.

Los siguientes códigos debes pegarlos en texto por encima de la página acá debemos colocar la imagen 01 y 02 que corresponde al fondo y cabezal de nuestro nuevo diseño

Nota: Si quieres puedes incluir el código completo que dejo a disposición para que pruebes.
Recuerda, solo modifica las url que están marcadas con rojo para agregar tus propias imágenes

Pegar en "Texto por encima de la página"


<style type="text/css">

<!--

body{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/01_fondoweb_1024_768.gif);background-attachment: fixed}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url();background-color:#;}
td.edit_rechts_sbg{visibility:hidden;background-color:#;}
td.edit_rechts_cbg{background-image: url();background-color:#;}
td.edit_rb_footer{background-image:url();background-color:#;}
td.edit_rechts_bottom{background-image: url();background-color:#;}
td.edit_content_bottom:hover{background-image:url();background-color:#;}

--></style></font>

<style type="text/css">
<!--
td.edit_header_full{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/02_cabezal_984_250.gif);background-color:;height:250px;}
--></style>



Para continuar los siguientes códigos debes pegarlos en texto por debajo de la página acá debemos colocar las imágenes desde la 03 a la 10, más la imagen de la barra del contador de visitas que corresponden al resto de nuestro nuevo diseño


Pegar en "Texto por debajo de la página"


<style type="text/css">


<!--
td.nav{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/03_boton_uno_183_33.gif);}
td.nav:hover{background-image: url(http://80.190.202.79/pic/e/elbacan-recargado/04_boton_dos_183_33.gif);}

--></style>

<style type="text/css">


<!--
td.shouty{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/05_fondo_box_228_1000.gif);background-color:#;}
td.shouty2{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/05_fondo_box_228_1000.gif);background-color:#;}
td.shouty3{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/05_fondo_box_228_1000.gif);background-color:#;}
td.shouty4{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/05_fondo_box_228_1000.gif);background-color:#;}
td.shouty5{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/05_fondo_box_228_1000.gif);background-color:#;}

--></style>

<style type="text/css">


<!--
td.edit_content_top{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/06_cuerpo_1_566_38.gif);background-color:;}
td.edit_content_bottom{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/07_cuerpo_2_566_38.gif);background-color:;}

--></style>

<style type="text/css">


<!--
td.edit_content{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/08_fondopaginas_600_600.gif);background-color:#;}

--></style>

<style type="text/css">


<!--
td.edit_rb_footer{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/09_separabox_228_25.gif);background-color:;}

--></style>

<style type="text/css">


<!--
td.nav_heading{background-image:url(-);background-color:;}

--></style>


<style type="text/css">


<!--
td.sidebar_heading{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/10_sobrebox_227_25.gif);}

--></style>

<style type="text/css">


<!--
td.nav_heading{background-image:url(http://80.190.202.79/pic/e/elbacan-recargado/10_sobrebox_227_25.gif);}

--></style>

<style type="text/css">
<!--
td.edit_content_bottom2{background-image:url(http://img.webme.com/pic/e/elbacan-recargado/barra_contador_de_visitas.gif);}
-->
</style>



Finalmente acá recordaremos 2 imágenes, que si bien no van incluídas en los códigos de nuestro nuevo diseño, estas nos servirán para darle un cierto nivel y atractivo a nuestra web.

La primera imagen es muy importante y nos servirá para anchar nuestros box y así aprovechar mayormente nuestro espacio, esta imagen debes pegarla en cada box que uses, esto para no deformar los otros




El código para pegar la imagen en los box en este caso sería

La última imagen corresponde a los divisores o separadores, más atrás les expliqué donde y como van pegadas



Para terminar, recuerda que puedes subir tus imágenes también a otros buenos servicios como

http://www.imageshack.us/

http://www.pixelea.com/

son una buena alternativa si el de PWG está en mantención

Espero que les haya servido de algo esta ayuda, suerte y éxito con vuestro nuevo diseño

Nota: Para centrar tanto la publicidad como el diseño otorgado en este tutorial, usar el siguiente código que deben pegar en el box "Texto por encima de la página"

pegarlo arriba de todos los códigos anteriores que incluyeron en dicho box, gracias
______________

Evite colocar sitios externos en la firma