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:
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
@JuanjoApps
JuanjoApps
Utiliza el Buscador del Foro
