Adaptar plantillas para PWG
No quería dejar de dar mi versión de este tutorial y tratar de conseguir un objetivo que veo que muchos no logran respecto a este tema y se trata de hacer un tutorial para que sepan como adaptar cualquier plantilla a PaginaWebGratis.es. PaginaWebGratis.es es un sitio web para crear páginas de manera muy sencilla lo que trae aparejado algunos limites y complicaciones en otros aspectos más avanzados como el de colocar cualquier diseño. Pero no es imposible y con este tutorial trataré de explicártelo de la manera más simple
1º Paso: Edita tu diseño
Antes de empezar a trabajar con la plantilla externa es fundamental que te dirijas a tu Kit de construcción y en la pestaña "Editar diseño" selecciones el diseño "CSS Design":
Nosotros vamos a adaptar el diseño Equivalency de FreeCSSTemplates.org, tu puedes elegir el que gustes. Debes descargar el diseño para conseguir la carpeta con los archivos:
Los archivos que utilizaremos serán los marcados en celeste y suelen ser los más frecuentes ya que style.css contiene los estilos en código CSS, index.html incluye los códigos HTML y la carpeta "images" las imágenes que componen el diseño. Puede que la plantilla que tu descargues contenga otro tipo de archivos como por ejemplo archivos .js en caso de que requiera de algún script. Recuerda que en PWG no pueden utilizarse códigos PHP.
3º Paso: Sube las imágenes e instala el código CSS
Ahora debes subir cada una de las imágenes a la web y obtener su dirección. Te dejo algunos tutoriales por si no sabes como hacerlo:
http://www.paginawebgratis.es/forum/viewtopic.php?t=29577
Una vez que las hayas subido todas y cuentes con sus URL de enlace directo es hora de instalar el código CSS. Para eso abre el archivo de estilos (en nuestro caso se llama style.css) con cualquier programa de edición de texto como Bloc de Notas o Adobe Dreamweaver. Ahora copia todo el contenido que incluye y pégalo en tu Kit de construcción en la pestana "Editar diseño"/"Configuraciones avanzadas"/"CSS-Code
sin Style Tags":
Además de todos esos códigos añade esto al final de la última "}":
Estos 3 códigos son para quitar el menú, titulo y encabezado que trae por defecto la plantilla. ¡Pero atención! Debes chequear que ni el CSS que acabas de pegar ni el HTML que vamos a pegar más tarde contengan las etiquetas "header", "title" ni "nav_container" ya que no se mostrarán por el código que acabamos de introducir. En caso de que si estén deber cambiarles de nombre tanto en el CSS (por ejemplo ponerle header2 en vez de header) como en el HTML.
Para terminar con el código CSS debes reemplazar las direcciones de las imágenes que acabas de subir por las que están incompletas, por ejemplo si te encuentras con algo así en tu CSS:
Código:
background: url(images/fondo.png);
Deberás reemplazar images/fondo.png por la URL correspondiente a la imagen subida a Internet, por ejemplo:
4º Paso: Define el contenido que irá por encima y por debajo de la página.
Estas es una de las partes que más conflictos trae ya que no todos los diseños están construidos de la misma manera, pero si lo piensas de la siguiente manera será muy sencillo.
A- Identifica el espacio donde se ubicará el contenido de tus páginas (las que editas desde "Controlar páginas"). En nuestro ejemplo es este:
B- Dirígete al archivo .html de tu plantilla (en nuestro caso es index.html). Solo utilizaremos los códigos que estén escritos entre las etiquetas <body> y </body> por lo tanto es importante que encuentres esos 2 códigos entre todos los demás ya que el resto no servirá. Ahora debes buscar entre todos los códigos que están entre <body> y </body> la parte que corresponde al contenido que identificamos en el paso anterior. En mi caso buscaré el texto "Welcome to equivalency".
C- Todo lo que se encuentre antes del texto "Welcome to equivalency" lo vamos a pegar en "Editar diseño"/"Configuraciones avanzadas"/"Texto por encima de la página" y todo lo que sobra en "Texto por encima de la página" sin incluir las etiquetas <body> y </body>. En mi caso sería:
Esta imagen te dejará mucho más claro como funciona "Texto por encima de la página" y "Texto por debajo de la página":
D- Después de probar como se ve tu diseño deberás eliminar todo lo que es el texto que viene escrito por defecto para que ese espacio esté ocupado solamente por el contenido de "Controlar páginas". Si tu diseño tiene box o sidebar deberás editar su contenido desde "Texto por encima (...)" o "Texto por debajo (...)" dependiendo de donde se encuentre el código.
- Conclusión:
Como verán es todo muy relativo, pero solo debes apuntar a practicar tu habilidad en estos puntos:
- Identificar URLs de imágenes incompletas para reemplazarlas por URLs correspondientes a la ruta en Internet.
- Identificar el espacio de contenido para poder hacer la división de "Texto por encima (...)" y "Texto por debajo (...)".
- Probar borrando las partes inútiles de una en una para no borrar partes que deformen nuestro diseño.
Manipular códigos les hará mejorar sus habilidades para conseguir entender lo que estamos haciendo y poder personalizarlo a nuestro gusto mediante un método rápido y efectivo. Asi que solo me resta decirles ¡a practicar!.
------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
Ultima edición por tokarg el Mie Dic 05, 2012 10:22 pm; editado 2 veces
Excelente tutorial, lo leí todo y está muy completo. Concuerdo con @entra-yaa, es muy complicado de explicar, porque como lo dijiste en el tutorial, el cuarto paso es mayormente el mas confuso, por mas que sea muy fácil.
wow, buena explicacion :D ______________ PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Muy detallado y completo, aunque como tu y algunos usuarios lo sabemos no todas las estructuras son iguales, pero con un poco de paciencia, tiempo y dedicacion se puede adaptar sea cual sea
Buen Tutorial Sr. Tokarg
Salu2 ______________ Miguel García | Desarrollador web freelance
xD, medio tarde lo publicaste en PWG tokarg. En tu foro ya no se hace cuanto tiempo que esta
Esta bien explicado, después como dijiste es sólo cuestión de práctica. ______________
Ultima edición por kilometro6 el Sab Ene 01, 2011 10:26 pm; editado 1 vez
Hola Tokarg...qué puedo decir...solamente que s te agradece tu aporte, la verdad que nos has ayudado un buen... ami se me complicaba mucho este asunto...jeje! Xd!! 100 Puntos!!
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.