Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje14-12-2009, 19:24 (UTC)    
Título del mensaje: [Aporte]Como editar/crear cualquier 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:
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

-Tutoriales acerca de editores de imágenes.

-Tutoriales de Photoshop:


¿Qué es?: http://es.wikipedia.org/wiki/Photoshop
Página web oficial: http://www.adobe.com/es/products/photoshop/photoshop/
Descarga gratuita(versión evaluable): http://adobe-photoshop.softonic.com/
Recursos:
http://www.photoshop-designs.com/
http://www.photoshop-designs.net/
http://www.solophotoshop.com/
http://www.canalphotoshop.com/
http://www.todo-photoshop.com/
http://www.tutorialesphotoshop.org/
http://tutoriales-photoshop.es/
http://www.caminocreativo.com/tutoriales-photoshop/category/efectos/en-textos/

-Tutoriales de Gimp:

¿Qué es?: http://es.wikipedia.org/wiki/Gimp
Página web oficial: http://www.gimp.org/
Descarga gratuita(versión gratuita): http://the-gimp.softonic.com/
Recursos:
http://www.gimp.org.es/modules/downloadse/
http://hachemuda.com/video-tutoriales-gimp/
http://www.jesusda.com/docs/tutoriales-gimp/
http://www.portafolioblog.com/2008/08/10-paginas-web-con-tutoriales-para-gimp/
http://www.taringa.net/posts/linux/4053540/60-tutoriales-para-gimp.html

-Tutoriales acerca de editores de flash

-Swish max

¿Qué es?: http://es.wikipedia.org/wiki/SWiSH_Max
Página web oficial: http://www.swishzone.com/index.php
Descarga gratuita(versión evaluable): http://swish.softonic.com/
Recursos:
http://www.tutorial-enlace.net/tutoriales-Swish%20max.html
http://swishmaxtutorials.com/smt/
http://www.ejemplosswish.com/
http://www.aulaclic.net/cursos/mostrar.php?id=48&texto=Swish&clase=c
http://www.swishzone.com/
http://www.paginawebgratis.es/forum/viewtopic.php?t=2435

-Adobe Flash

¿Qué es?: http://es.wikipedia.org/wiki/Adobe_Flash
Página web oficial: http://www.adobe.com/es/
Descarga gratuita(versión evaluable): http://adobe-flash.softonic.com/
Recursos:
http://www.estiloflash.com/
http://www.pixeros.com/2009/05/los-mejores-tutoriales-de-adobe-flash/
http://milrecursos.com/2009/09/tutoriales-de-adobe-flash/
http://www.emudesc.net/foros/cafeteria/93318-tutoriales-de-adobe-flash.html
http://www.conceptopixel.com/aprende-a-usar-adobe-flash-como-en-el-kinder

-Gran cantidad de recursos web:
http://www.paginawebgratis.es/forum/viewtopic.php?t=3889

-Primeros pasos en PWG:
http://www.paginawebgratis.es/forum/viewtopic.php?t=3624

-Haga esto si su encabezado sale en mosaicos:
http://www.paginawebgratis.es/forum/viewtopic.php?t=2600

-Como colocar el menú de iceblue en flash:
http://www.paginawebgratis.es/forum/viewtopic.php?t=2429

-Favicon en su página web
http://www.paginawebgratis.es/forum/viewtopic.php?t=2383

-Como poner encabezado(solo en algunos diseños):
http://www.paginawebgratis.es/forum/viewtopic.php?t=2594

-Sacar número hexadecimal de los colores(le servirá para editar el diseño:
http://www.paginawebgratis.es/forum/viewtopic.php?t=9691

-Recopilación de tutoriales[by todobanners]:
http://www.paginawebgratis.es/forum/viewtopic.php?t=14147

[b]-Sitios para descargar plantillas css gratuitas.
www.solucija.com/free-templates
www.templatefusion.org
www.styleshout.com/free-templates.php
www.templatemo.com/page/1
www.opensourcetemplates.org
www.getcsstemplates.com
www.free-css-templates.com/css-templates
www.csstemplatesfree.org
www.csstemps.info/templates.php
www.freecsstemplates.org
www.my-free-css-templates.com/CSS_Templates/index.html
www.sixshootermedia.com/free-templates
www.mitchbryson.com/free-css-templates
www.templates.arcsin.se/category/website-templates
www.zeroweb.org
www.csstemplates.net
www.mycelly.com
www.freecsstemplate.net/free-css-templates.php
www.csscreme.com/freecsstemplates
www.openwebdesign.org
www.bestfreetemplates.info
www.templateworld.com/free_templates.html
www.ramblingsoul.com/downloads
www.spyka.net/web-templates
www.freetemplates4u.co.cc
www.cssdesigncenter.com
www.csstemplateheaven.com
www.freecssxhtmltemplates.com
www.infscripts.com
www.templatesrain.com/free-templates/css-templates
www.templateyes.com/css-templates.htm
www.atemplatefree.com
www.free-css-layouts.com/free-layouts
www.css4free.com
www.csstemplatesfree.net


Ultima edición por vfcorporation el Sab Ene 02, 2010 6:36 pm; editado 26 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group