Como editar una Plantilla
¿Cómo crear/editar cualquier plantilla?
Para saber esto primero voy a definir algunos puntos:
[+]¿Qué es una plantilla?
Digamos que es la parte gráfica de la página web. Es la estructura que se le da a la página en la que en su interior estará el contenido. Cuanto más bonita sea la plantilla, despertará más interés en el visitante, por lo que tendrá más visitas.
[+]¿Cómo creo/edito la plantilla?
En PWG disponemos de un kit de construcción que nos facilita todo el trabajo. Primero tendremos que ir a la sección "Editar diseño" y a partir de ahí seguir los tutoriales y recursos que le voy a facilitar.
[+]Requisitos para poder editar/crear una plantilla
Ya que este tutorial es en gran parte para principiantes, no hace falta saber apenas nada, pero algunas cosas ayudan:
-Saber de HTML. No se preocupe, si no sabe puede aprender:
http://www.paginawebgratis.es/forum/viewtopic.php?t=28689
-Saber de CSS. La mayoría de los códigos que utilizaremos para editar la plantilla serán css, por lo que ayudaría mucho que sepa de este lenguaje.
¿Qué es CSS?Aquí se explica: http://www.paginawebgratis.es/forum/viewtopic.php?t=11356
No se preocupe si no sabe, solo busque en google aprender css o manual de css y le saldrán muchos resultados. Aquí le dejo uno muy bueno:
http://www.manualdecss.com/ o http://www.webestilo.com/css/
-Saber diseño gráfico. Saber utilizar bien los editores de imágenes como photoshop o gimp, es una ventaja muy grande a la hora de editar un diseño. Le dará a la página un toque muchísimo profesional, podrá añadirle los efectos que quiera, etc. Si no sabe puede encontrar tutoriales sobre este tema en el foro o en otros sitios(al final del foro proporcionaré algunos sitios de ayuda de diseño gráfico).
-Tener habilidad con internet y con PWG. Esto no se aprende, se coge experiencia con el tiempo. Así podrá utilizar por ejemplo el kit de construcción con más rapidez.
[+]Descripción de la sección "Editar diseño"
La sección "Editar diseño" consta de tres partes: diseño básico, ajustes de diseño y configuraciones avanzadas.
Diseño básico-> Ahí podrá elegir la plantilla que después editaremos. Entre las más utilizadas están Iceblue, CSS-Design,Red y Butterfly.
Ajustes de diseño-> Va unido con configuraciones avanzadas. Aquí principalmente podrá cambiar el título de los box, el contenido de los boxs,el título de la navegación, el tamaño y el color de los links,etc. También dependerá de la plantilla que tenga en uso.
Configuraciones avanzadas-> Ahí es principalmente donde añadiremos los códigos para editar el diseño. Según que plantilla podrá también agregar contenido a los boxs, por debajo de la página, por encima, poner una imágen/color de fondo,posicionar el contador,etc.
Para un mejor entendimiento le dejo un videotutorial hecho por tokarg:
http://www.fileden.com/files/2008/8/4/2033890/KitDise%C3%B1o.swf
Ya que tenemos una idea de que se trata cada parte, empezaremos con lo más importante, editar el diseño.
Cada plantilla tiene su propio código para poder editarla. La que puede tener cualquier código es la hasta hace poco muy conocida "CSS-Design".
Empezaremos por orden:
[+]Diseño Iceblue
Este diseño es junto con el CSS-Design uno de los más utilizados.
-¿Cómo editarla?
Aquí le dejo algunos tutoriales de como hacerlo.
http://www.paginawebgratis.es/forum/viewtopic.php?t=2381
http://www.paginawebgratis.es/forum/viewtopic.php?t=3625
http://www.paginawebgratis.es/forum/viewtopic.php?t=26602
http://tokarg.es.tl/Ice-Blue-Interactivo.htm
En los posts ya dicen las medidas de cada imágen del diseño.
Además puede quitar los box del menú de iceblue:
http://www.paginawebgratis.es/forum/viewtopic.php?t=2498
Y se puede poner un box debajo del menú:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21631
[+]Diseño Butterfly
Esta plantilla es conocida, pero no tanto como la de Iceblue. Esta plantilla es más dificil de editar, aunque poco más y existen menos recursos para ello. Aquí le dejo los que encontré:
http://tokarg.es.tl/Butterfly-Interactivo.htm
http://www.paginawebgratis.es/forum/viewtopic.php?t=21659
En el tutorial hecho por tokarg salen todas las medidas de las imágenes.
[+]Diseño Red
Esta plantilla es tan conocida como la de Butterfly. Igual que en la de Butterfly, no existen muchos recursos para editarla. Le dejo los que encontré:
http://www.paginawebgratis.es/forum/viewtopic.php?t=32711
http://www.paginawebgratis.es/forum/viewtopic.php?t=5373
Lamentablemente, de este diseño solo proporcionan el código.
[+]Diseño Colourful
[/img]http://theme.webme.com/designs/colourful/screen.PNG[/img]
Es una plantilla poco conocida, de la que han averiguado el código pero no hay tutoriales acerca de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=13356
[+]Diseño Yellow
Esta plantilla no me gusta nada. Además todavía no se ha averiguado el código por lo que es una tontería utilizarla.
[+]Diseño Holidays
Este diseño es muy poco conocido y se sabe el código pero poco más.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21662
[+]Diseño Skater
Pasa lo mismo que con el diseño "Holidays", no es muy conocida aunque un poco más que esa y se solo se sabe el código.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21675
[+]Diseño Cars
Este diseño también es muy poco conocido. Pero de este no se sabe ni el código. Por no poder ni se puede editar el cabezal:
http://www.paginawebgratis.es/forum/viewtopic.php?t=36065
[+]Diseño Anime
Como la plantilla anterior es muy poco conocida y no se conoce ni el código.
[+]Diseño Animals
Esta plantilla ni me suena de haberla visto nunca, pero por lo menos se tiene el código para editarla:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21670
[+]Diseño CSS-Design
Por fin hemos llegado a una plantilla interesante. Esta plantilla es 100% editable, por lo que no hay un código fijo, se pueden crear muchas estructuras. Aquí le dejo algunos tutoriales:
http://www.paginawebgratis.es/forum/viewtopic.php?t=13042
http://www.paginawebgratis.es/forum/viewtopic.php?t=13582
http://www.paginawebgratis.es/forum/viewtopic.php?t=16012
http://www.paginawebgratis.es/forum/viewtopic.php?t=16549
http://www.paginawebgratis.es/forum/viewtopic.php?t=29106
http://www.paginawebgratis.es/forum/viewtopic.php?t=36358
Aquí un tutorial de como colocarlo:
http://www.paginawebgratis.es/forum/viewtopic.php?t=19957
También puede crear su web desde cero:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21199
Además, ultimamente está de moda eso de los diseños adaptados, para adaptar un diseño externo le dejo estos tutoriales:
http://www.paginawebgratis.es/forum/viewtopic.php?t=26514
http://www.paginawebgratis.es/forum/viewtopic.php?t=43974
Al final del post, dejaré algunos sitios webs con plantillas gratuitas.
[+]Diseño Love
Esta plantilla como otras que he mencionado es muy poco conocida, aunque existe el código para editarla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21671
[+]Diseño Flash
Esta es una plantilla que cada vez se utiliza menos pero siempre ha sido bastante conocida. Una de las desventajas es que para visualizar esta plantilla los vistantes necesitan flash, pero ¿quién no tiene el plugin de flash en estos tiempos?.Hay que decir que es difícil de editar, como se dice en este post:http://www.paginawebgratis.es/forum/viewtopic.php?t=36981
Aunque es posible, pero no es recomendable para usuarios inexpertos.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21728
[+]Diseño Football
Es una plantilla poco conocida como otras que nombrado, sencilla pero a mi parecer es bonita. No existe ningún tutorial acerca de esta plantilla pero si proporcionan el código:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21676
[+]Diseño Music
Esta plantilla la he visto en poco sitios web y tampoco es muy conocida, además no existe ningún tutorial ni tampoco ningún código acerca de esta plantilla.
[+]Diseño Girls/Women
Esta plantilla no me parece haberla visto nunca, quizás alguna vez, pero es rarísimo. Como en el diseño anterior, no existe ningun tutorial acerca de esta plantilla pero si se proporciona el código.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21673
[+]Diseño Games
Lo he visto en alguna página web, pero tampoco es muy conocida. Se proporciona solo el código de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21669
[+]Diseño Men
No recuerdo haberlo visto nunca puesto en una página web de PWG y no se sabe nada al respecto de esta plantilla.
[+]Diseño Cats
De este diseño mejor ni hablar, no sabía ni que existía.
[+]Diseño Kaki
No se ha desarrollado mucho acerca de las modificaciones de este diseño. Se ha posteado su código, pero no se sabe si funciona.
http://www.paginawebgratis.es/forum/viewtopic.php?t=13503
[+]Diseño Simple
Este diseño no me gusta, se puede hacer con html algo mejor, es demasiado simple, como su palabra lo dice. Nunca lo he visto en ninguna página web de PWG.
De todas maneras si se ha posteado el código de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21666
[+]Diseño Beige
Esta plantilla es algo más conocida que algunas de las anteriores plantillas que hemos visto. Esta plantilla me gusta salvo porque es algo pequeña de anchura. De esta plantilla se ha proporcionado su código:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21664
[+]Diseño Green
Esta plantilla se parece a la anterior, es pequeña y tiene más o menos la misma estructura. No hay ningún avance de como editar esta plantilla.
Recuerde que lo importante a la hora de aprender a crear plantillas es no quedarse quieto. Modifique su código todo lo que pueda(se aprende a base de errores), innove todo lo que pueda, intente editar las plantillas que hasta el momento no se pueden,etc.
Algunos webmaster hacen su web en otros hostings de páginas web, y ponen su página web externa en su página web de PWG. Para ello utilizan un llamado iframe:
Y modificar lo que está en rojo por la url de su web externa.
Y lo que está en verde y azul es para editar el ancho y el alto.
Además muchos hacen sus webs en flash, para eso necesitan un editor de flash como los que proporcionaré aquí debajo, y luego subirlo a un hosting que soporte flash. Y luego para ponerlo en PWG utilizan el código de iframe que he mencionado arriba.
Ahora voy a proporcionar algunos recursos acerca de este tema.
[+]Más recursos
-Consejos a la hora de crear una página web:
http://www.lawebera.es/de0/hacer-crear-web.php
-Plantillas hechas para PWG y códigos CSS. Para eso mire la sección CSS:
http://www.paginawebgratis.es/forum/viewforum.php?f=19
-Códigos HTML probados en PWG:
http://www.paginawebgratis.es/forum/viewforum.php?f=5
-Códigos JAVASCRIPT probados en PWG:
http://www.paginawebgratis.es/forum/viewforum.php?f=25
-Indice de códigos de la sección CSS:
http://www.paginawebgratis.es/forum/viewtopic.php?t=42475
Fuente :
http://www.paginawebgratis.es/forum/viewtopic.php?t=44287
Para saber esto primero voy a definir algunos puntos:
[+]¿Qué es una plantilla?
Digamos que es la parte gráfica de la página web. Es la estructura que se le da a la página en la que en su interior estará el contenido. Cuanto más bonita sea la plantilla, despertará más interés en el visitante, por lo que tendrá más visitas.
[+]¿Cómo creo/edito la plantilla?
En PWG disponemos de un kit de construcción que nos facilita todo el trabajo. Primero tendremos que ir a la sección "Editar diseño" y a partir de ahí seguir los tutoriales y recursos que le voy a facilitar.
[+]Requisitos para poder editar/crear una plantilla
Ya que este tutorial es en gran parte para principiantes, no hace falta saber apenas nada, pero algunas cosas ayudan:
-Saber de HTML. No se preocupe, si no sabe puede aprender:
http://www.paginawebgratis.es/forum/viewtopic.php?t=28689
-Saber de CSS. La mayoría de los códigos que utilizaremos para editar la plantilla serán css, por lo que ayudaría mucho que sepa de este lenguaje.
¿Qué es CSS?Aquí se explica: http://www.paginawebgratis.es/forum/viewtopic.php?t=11356
No se preocupe si no sabe, solo busque en google aprender css o manual de css y le saldrán muchos resultados. Aquí le dejo uno muy bueno:
http://www.manualdecss.com/ o http://www.webestilo.com/css/
-Saber diseño gráfico. Saber utilizar bien los editores de imágenes como photoshop o gimp, es una ventaja muy grande a la hora de editar un diseño. Le dará a la página un toque muchísimo profesional, podrá añadirle los efectos que quiera, etc. Si no sabe puede encontrar tutoriales sobre este tema en el foro o en otros sitios(al final del foro proporcionaré algunos sitios de ayuda de diseño gráfico).
-Tener habilidad con internet y con PWG. Esto no se aprende, se coge experiencia con el tiempo. Así podrá utilizar por ejemplo el kit de construcción con más rapidez.
[+]Descripción de la sección "Editar diseño"
La sección "Editar diseño" consta de tres partes: diseño básico, ajustes de diseño y configuraciones avanzadas.
Diseño básico-> Ahí podrá elegir la plantilla que después editaremos. Entre las más utilizadas están Iceblue, CSS-Design,Red y Butterfly.
Ajustes de diseño-> Va unido con configuraciones avanzadas. Aquí principalmente podrá cambiar el título de los box, el contenido de los boxs,el título de la navegación, el tamaño y el color de los links,etc. También dependerá de la plantilla que tenga en uso.
Configuraciones avanzadas-> Ahí es principalmente donde añadiremos los códigos para editar el diseño. Según que plantilla podrá también agregar contenido a los boxs, por debajo de la página, por encima, poner una imágen/color de fondo,posicionar el contador,etc.
Para un mejor entendimiento le dejo un videotutorial hecho por tokarg:
http://www.fileden.com/files/2008/8/4/2033890/KitDise%C3%B1o.swf
Ya que tenemos una idea de que se trata cada parte, empezaremos con lo más importante, editar el diseño.
Cada plantilla tiene su propio código para poder editarla. La que puede tener cualquier código es la hasta hace poco muy conocida "CSS-Design".
Empezaremos por orden:
[+]Diseño Iceblue
Este diseño es junto con el CSS-Design uno de los más utilizados.
-¿Cómo editarla?
Aquí le dejo algunos tutoriales de como hacerlo.
http://www.paginawebgratis.es/forum/viewtopic.php?t=2381
http://www.paginawebgratis.es/forum/viewtopic.php?t=3625
http://www.paginawebgratis.es/forum/viewtopic.php?t=26602
http://tokarg.es.tl/Ice-Blue-Interactivo.htm
En los posts ya dicen las medidas de cada imágen del diseño.
Además puede quitar los box del menú de iceblue:
http://www.paginawebgratis.es/forum/viewtopic.php?t=2498
Y se puede poner un box debajo del menú:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21631
[+]Diseño Butterfly
Esta plantilla es conocida, pero no tanto como la de Iceblue. Esta plantilla es más dificil de editar, aunque poco más y existen menos recursos para ello. Aquí le dejo los que encontré:
http://tokarg.es.tl/Butterfly-Interactivo.htm
http://www.paginawebgratis.es/forum/viewtopic.php?t=21659
En el tutorial hecho por tokarg salen todas las medidas de las imágenes.
[+]Diseño Red
Esta plantilla es tan conocida como la de Butterfly. Igual que en la de Butterfly, no existen muchos recursos para editarla. Le dejo los que encontré:
http://www.paginawebgratis.es/forum/viewtopic.php?t=32711
http://www.paginawebgratis.es/forum/viewtopic.php?t=5373
Lamentablemente, de este diseño solo proporcionan el código.
[+]Diseño Colourful
[/img]http://theme.webme.com/designs/colourful/screen.PNG[/img]
Es una plantilla poco conocida, de la que han averiguado el código pero no hay tutoriales acerca de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=13356
[+]Diseño Yellow
Esta plantilla no me gusta nada. Además todavía no se ha averiguado el código por lo que es una tontería utilizarla.
[+]Diseño Holidays
Este diseño es muy poco conocido y se sabe el código pero poco más.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21662
[+]Diseño Skater
Pasa lo mismo que con el diseño "Holidays", no es muy conocida aunque un poco más que esa y se solo se sabe el código.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21675
[+]Diseño Cars
Este diseño también es muy poco conocido. Pero de este no se sabe ni el código. Por no poder ni se puede editar el cabezal:
http://www.paginawebgratis.es/forum/viewtopic.php?t=36065
[+]Diseño Anime
Como la plantilla anterior es muy poco conocida y no se conoce ni el código.
[+]Diseño Animals
Esta plantilla ni me suena de haberla visto nunca, pero por lo menos se tiene el código para editarla:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21670
[+]Diseño CSS-Design
Por fin hemos llegado a una plantilla interesante. Esta plantilla es 100% editable, por lo que no hay un código fijo, se pueden crear muchas estructuras. Aquí le dejo algunos tutoriales:
http://www.paginawebgratis.es/forum/viewtopic.php?t=13042
http://www.paginawebgratis.es/forum/viewtopic.php?t=13582
http://www.paginawebgratis.es/forum/viewtopic.php?t=16012
http://www.paginawebgratis.es/forum/viewtopic.php?t=16549
http://www.paginawebgratis.es/forum/viewtopic.php?t=29106
http://www.paginawebgratis.es/forum/viewtopic.php?t=36358
Aquí un tutorial de como colocarlo:
http://www.paginawebgratis.es/forum/viewtopic.php?t=19957
También puede crear su web desde cero:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21199
Además, ultimamente está de moda eso de los diseños adaptados, para adaptar un diseño externo le dejo estos tutoriales:
http://www.paginawebgratis.es/forum/viewtopic.php?t=26514
http://www.paginawebgratis.es/forum/viewtopic.php?t=43974
Al final del post, dejaré algunos sitios webs con plantillas gratuitas.
[+]Diseño Love
Esta plantilla como otras que he mencionado es muy poco conocida, aunque existe el código para editarla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21671
[+]Diseño Flash
Esta es una plantilla que cada vez se utiliza menos pero siempre ha sido bastante conocida. Una de las desventajas es que para visualizar esta plantilla los vistantes necesitan flash, pero ¿quién no tiene el plugin de flash en estos tiempos?.Hay que decir que es difícil de editar, como se dice en este post:http://www.paginawebgratis.es/forum/viewtopic.php?t=36981
Aunque es posible, pero no es recomendable para usuarios inexpertos.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21728
[+]Diseño Football
Es una plantilla poco conocida como otras que nombrado, sencilla pero a mi parecer es bonita. No existe ningún tutorial acerca de esta plantilla pero si proporcionan el código:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21676
[+]Diseño Music
Esta plantilla la he visto en poco sitios web y tampoco es muy conocida, además no existe ningún tutorial ni tampoco ningún código acerca de esta plantilla.
[+]Diseño Girls/Women
Esta plantilla no me parece haberla visto nunca, quizás alguna vez, pero es rarísimo. Como en el diseño anterior, no existe ningun tutorial acerca de esta plantilla pero si se proporciona el código.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21673
[+]Diseño Games
Lo he visto en alguna página web, pero tampoco es muy conocida. Se proporciona solo el código de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21669
[+]Diseño Men
No recuerdo haberlo visto nunca puesto en una página web de PWG y no se sabe nada al respecto de esta plantilla.
[+]Diseño Cats
De este diseño mejor ni hablar, no sabía ni que existía.
[+]Diseño Kaki
No se ha desarrollado mucho acerca de las modificaciones de este diseño. Se ha posteado su código, pero no se sabe si funciona.
http://www.paginawebgratis.es/forum/viewtopic.php?t=13503
[+]Diseño Simple
Este diseño no me gusta, se puede hacer con html algo mejor, es demasiado simple, como su palabra lo dice. Nunca lo he visto en ninguna página web de PWG.
De todas maneras si se ha posteado el código de esta plantilla.
http://www.paginawebgratis.es/forum/viewtopic.php?t=21666
[+]Diseño Beige
Esta plantilla es algo más conocida que algunas de las anteriores plantillas que hemos visto. Esta plantilla me gusta salvo porque es algo pequeña de anchura. De esta plantilla se ha proporcionado su código:
http://www.paginawebgratis.es/forum/viewtopic.php?t=21664
[+]Diseño Green
Esta plantilla se parece a la anterior, es pequeña y tiene más o menos la misma estructura. No hay ningún avance de como editar esta plantilla.
Recuerde que lo importante a la hora de aprender a crear plantillas es no quedarse quieto. Modifique su código todo lo que pueda(se aprende a base de errores), innove todo lo que pueda, intente editar las plantillas que hasta el momento no se pueden,etc.
Algunos webmaster hacen su web en otros hostings de páginas web, y ponen su página web externa en su página web de PWG. Para ello utilizan un llamado iframe:
| Cita: |
| <iframe src="AQUÍ SU WEB" width="1000px" height="1000px" frameborder="0"></iframe> |
Y modificar lo que está en rojo por la url de su web externa.
Y lo que está en verde y azul es para editar el ancho y el alto.
Además muchos hacen sus webs en flash, para eso necesitan un editor de flash como los que proporcionaré aquí debajo, y luego subirlo a un hosting que soporte flash. Y luego para ponerlo en PWG utilizan el código de iframe que he mencionado arriba.
Ahora voy a proporcionar algunos recursos acerca de este tema.
[+]Más recursos
-Consejos a la hora de crear una página web:
http://www.lawebera.es/de0/hacer-crear-web.php
-Plantillas hechas para PWG y códigos CSS. Para eso mire la sección CSS:
http://www.paginawebgratis.es/forum/viewforum.php?f=19
-Códigos HTML probados en PWG:
http://www.paginawebgratis.es/forum/viewforum.php?f=5
-Códigos JAVASCRIPT probados en PWG:
http://www.paginawebgratis.es/forum/viewforum.php?f=25
-Indice de códigos de la sección CSS:
http://www.paginawebgratis.es/forum/viewtopic.php?t=42475
Fuente :
http://www.paginawebgratis.es/forum/viewtopic.php?t=44287
Actualmente conseguimos: 31332 Visitantes (139699 número de aciertos)
![37316_4391[1]](http://themewich.com/extranews/wp-content/uploads/2012/09/37316_43911-50x50.jpg "37316_4391[1]")
Recent Comments