Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje09-03-2010, 05:11 (UTC)    
Título del mensaje: [Tutorial-Css]aprendé a adaptar tu plantilla descargada

He visto que muchos preguntan como adaptar diseños css design.
Por eso hoy hago este tutorial para que adapten su plantilla ya previamente descargada de alguna pagína de plantillas gratuitas:

1.- Nos descargamos la plantilla, una vez descargada nos aparecera en nuestra computadora la carpeta con los archivos de la plantilla.



En la carpeta encontraremos subcarpetas con las ímagenes para el archivo css, el archivo style.css.

2.- Abrimos el ya mencionado archivo index.html en nuestro navegador.



Ya abierto en nuestro navegador hacemos click derecho en el y escojemos ver codigo fuente de la pagína.

3.- Ya que hicimos eso nos debe haber salido el codigo fuente en una ventana externa del navegador.



En el codigo fuente es donde dividiremos el código para que se adapte a pagína web gratis.

4.- Dividimos el codigo tomando desde la etiqueta <html>
hasta la etiqueta </div> en algunas ocasiones llega a salir así pero eso no cambia el hecho de que hasta esa zona será lo que pondremos en por encima de la pagína.



Como pueden ver se marcó de la etiqueta html hasta el cierre de la etiqueta div. Siempre tomar de referencia la etiqueta content o main que sigue despues.

5.- Marcamos desde la etiqueta <div id="footer"> hasta el cierre de la etiqueta </html>.



Esto que marcamos se colocara por debajo de la pagína.

6.- Marcamos de la etiqueta <div class="content">
hasta el cierre de la etiqueta div tomar de referencia que despues sigue la etiqueta <div id="footer">



La zona que marcamos será lo que colocaremos en nuestra pagína home. eso si así se desea es opcional, aunque muchas veces es importante hacerlo para que se vea tal cual la bajastes.

7.- Ahora tomamos el archivo style.css y lo abrimos en bloc de notas.



Ya abierto en nuestro bloc de notas, nos dedicaremos a colocar las imagenes que se encuentran en la carpeta ya mencionada en un principio.



Para ello las subimos previamente a un hosting de ímagenes como
imageshack

Una por una las subimos al hosting...Recomendado primero subir una y poner la url de la imagen que te dio imageshack en el css que tienes en tu bloc de notas.

Importante revisar muy bien la url que te pide el archivo css para no caer en el error de subir una imagen que no es la que va en dicha parte.

Ejemplo:





Hacer lo mismo con cada url que te pidé el archivo css.

8.- Ya colocadas todas las url de las ímagenes en el archivo css lo guardas para evitar problemas.

Ya con nuestro codigo dividido en las 3 partes nos íremos a --->> editar diseño.



Colocamos los codigos en los recuadros.

Importante en el recuadro css debemos colocar esto al principio del recuadro.




aquí el codigo:


Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}


Ya con todo esto hecho como se ha mencionado en este tutorial, tendremos nuestra plantilla adaptada de una forma correcta.

Espero les seá de utilidad este tutorial.


un saludo
______________

Administradormartinp
ModeradoresLadiscoteka |Enplenovuelomx |Tokarg |Alfasite |Luupa |Cssplantillas
Normas del foroAquí
Dudas o denuncias support-es@webme.com
flyweb
pueden opinar sobre nuestra web aqui


Mensaje09-03-2010, 14:47 (UTC)    
Título del mensaje:

ya hay muchos tutos y la verdad NINGUNO esta bien explicado, siempre dejan codigos inecesarios
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Mensaje09-03-2010, 17:12 (UTC)    
Título del mensaje:

tienes razón, solo se centran el un esquema de adaptacion...

Sabían que los tags: html, body, meta y muchos mas ya los tiene incluido nuestra web... y lo único que aran con eso es q su web sea mas difícil de indexar?
______________
Quieres mi web? Yo también :P
Mensaje09-03-2010, 17:33 (UTC)    
Título del mensaje:

hola,

el tutorial lo hicé de la mejor manera de entender está un 99% garantizado que este tutorial te hara adaptar cualquier diseño css para tu web.

sobre que ya tiene los tags las pagína, puede que tengas razon, pero yo siempre borro todo lo que tiene la pagína e introduzco mi código.

un saludo
______________

Administradormartinp
ModeradoresLadiscoteka |Enplenovuelomx |Tokarg |Alfasite |Luupa |Cssplantillas
Normas del foroAquí
Dudas o denuncias support-es@webme.com
flyweb
pueden opinar sobre nuestra web aqui


Mensaje09-03-2010, 20:21 (UTC)    
Título del mensaje:

dedydamy0 escribió:
ya hay muchos tutos y la verdad NINGUNO esta bien explicado, siempre dejan codigos inecesarios

Concuerdo mucho , ya aburre tantos tutoriales de lo mismo , no se le quita el desprestigio a ningu o pero hasta cuando va ser lo mismo

De todos modos no critico tu aporte como dicen gracias por el aporte! solo te sugiero que no te centres en cosas que ya estan repetidas :l
______________
@JuanjoApps
JuanjoApps


Ultima edición por wariocodes el Mar Mar 09, 2010 5:05 pm; editado 1 vez
Mensaje09-03-2010, 20:35 (UTC)    
Título del mensaje:

A mi me parecen bárbaros estos tutoriales, es lo que la gente más busca y mientras más variedad mejor. Yo creo que está muy bien explicado.
A nosotros puede que nos aburra verlos porque ya sabemos hacerlo, pero los tutoriales apuntan al otro polo, a los que no saben hacerlo, a ellos les es muy útil y ese es el fin de este foro.

Un saludo!


Ultima edición por tokarg el Mar Mar 09, 2010 4:35 pm; editado 1 vez
Mensaje09-03-2010, 20:40 (UTC)    
Título del mensaje:

tokarg escribió:
A mi me parecen bárbaros estos tutoriales, es lo que la gente más busca y mientras más variedad mejor. Yo creo que está muy bien explicado.
A nosotros puede que nos aburra verlos porque ya sabemos hacerlo, pero los tutoriales apuntan al otro polo, a los que no saben hacerlo, a ellos les es muy útil y ese es el fin de este foro.

Un saludo!


muchas gracias,

y tienes mucha razon yo lo hice pensando en eso como pusé al principio del tutorial que mucha gente sigue preguntando sobre como adaptar diseños css o sobre donde van los códigos es por ello que me puse a realizar este tutorial.

un saludo
______________

Administradormartinp
ModeradoresLadiscoteka |Enplenovuelomx |Tokarg |Alfasite |Luupa |Cssplantillas
Normas del foroAquí
Dudas o denuncias support-es@webme.com
flyweb
pueden opinar sobre nuestra web aqui


Mensaje09-03-2010, 21:03 (UTC)    
Título del mensaje:

Pues yo pienso sinceramente hasta cuando se van a interesar en los novatos y dejar de lado a los avanzados ? , ya no veo pwg avanzar , siempre se queda en lo mismo nos dejan de lado ya aburre ver lo mismo siempre de lo mismo , cuando el 90 % de las dudas ya estan resueltas ,uno debe usar el buscador cuando era novato eso usaba y encontraba lo que buscaba porque los demas no??, es mi sincera opinión todos tienen diferente pero en fin buen aporte
______________
@JuanjoApps
JuanjoApps


Ultima edición por wariocodes el Mar Mar 09, 2010 5:05 pm; editado 1 vez
Mensaje09-03-2010, 21:11 (UTC)    
Título del mensaje:

wariocodes escribió:
Pues yo pienso sinceramente hasta cuando se van a interesar en los novatos y dejar de lado a los avanzados ? , ya no veo pwg avanzar , siempre se queda en lo mismo nos dejan de lado ya aburre ver lo mismo siempre de lo mismo , cuando el 90 % de las dudas ya estan resueltas ,uno debe usar el buscador cuando era novato eso usaba y encontraba lo que buscaba porque los demas no??, es mi sincera opinión todos tienen diferente pero en fin buen aporte



tienes razon wario mediante el buscador se encuentra ya cualquier cosa que ocupes....yo soy de las personas que buscan algo y lo encuentra pero siempre trato de mejorar lo que ya es creado o trato de hacer algo mejor...

muchas gracias
______________

Administradormartinp
ModeradoresLadiscoteka |Enplenovuelomx |Tokarg |Alfasite |Luupa |Cssplantillas
Normas del foroAquí
Dudas o denuncias support-es@webme.com
flyweb
pueden opinar sobre nuestra web aqui


Mensaje16-06-2010, 16:38 (UTC)    
Título del mensaje:

Me encanta! Por fin un tutorial BIEN explicado. ¿Tantos tutoriales de lo mismo? Mucha gente busca estos tutoriales, ¿Saben por qué? Hay gente, que no entiende algunos tutoriales, ya que o están mal explicados o ellos no saben entenderlo (Soy uno ) Este tutorial, está barbaro. Muchas gracias.
______________

¿Qué haré en el proximo Torneo PWG? ¡Incribirme!
Utiliza el Buscador del Foro
No publiques diseños que no son tuyos sin poner la fuente
No plagies códigos sin poner la fuente
No hables en mayuscula, en el lenguaje de un foro esto se toma como gritar
Si un código no funciona, informa a un moderador
Mensaje16-06-2010, 18:32 (UTC)    
Título del mensaje:

wariocodes escribió:
Pues yo pienso sinceramente hasta cuando se van a interesar en los novatos y dejar de lado a los avanzados ?


PaginaWebGratis no deja de lado a nadie, deberias saberlo eso, es un foro de soporte de ayuda, si cada vez llegan más usuarios nuevos, es porque PWG está avanzando, y Wario, si sos un usuario superior a los otros, porque no haces un tutorial jamás visto que no sea para novatos, me gustaría verlo. Este tema, te resultará innecesario, pero para otros usuarios, es interesante.


Ultima edición por nesbet el Mie Jun 16, 2010 2:33 pm; editado 1 vez
Mensaje20-06-2010, 03:28 (UTC)    
Título del mensaje: muy bien explicado

que bien explicado esta vieron las plantillas css de www.procssdesign.es.tl.
las personas siempre ponen cosas innecesarias y este ttuto esta bien explicado felicidades pasate por mi web y ve la plantilla.


Mensaje20-05-2013, 00:35 (UTC)    
Título del mensaje:

Tengo una duda, yo hice todos los pasos y me quedo con los menú abajo, osea los link, y la plantilla que hice cuando hago click en ello no hace nada para avanzar, como lo hago para que esos link juntarlo con lo del diseño?... eh buscado arto por aka y nada...

vean:

http://cqnpro.es.tl/Inicio.htm
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group