Mister PwG

Adaptar CSS (parte 1)

¡Hola cybernauta! Hoy te enseñaré a adaptar un CSS a página web gratis. Es tan sencillo, que en unos simples pasos te acordarás toda la vida. Empecemos pues. El tutorial va por partes, para poder explicar tus problemas si la parte ''x'' no te ha funcionado. Empecemos:
PD: ¡El link del notepad ++ no es descarga, si no de búsqueda google!

REQUISITOS:

>> Plantilla CSS (Free-CSS)
>> Hosting de imágenes (Controlador de imágenes de Pwg)
>> Editor de CSS (Block de notas ó Notepad ++)

PASOS GENERALES:

(Parte 1) Editando CSS
(Parte 2) Separando HTML
(Parte 3) Aplicando diseño

PARTE 1 # EDITANDO CSS
Bien, primero, tras haber escogido el diseño y descargártelo (Free-CSS) aprenderemos a escojer el CSS con cuidado. Abriremos el diseño CSS, yo usaré una llamada Enormus, la que actualmente poseo en mi website. La descargaremos, descomprimiremos y abriremos. Tras esto te saldrá algo tal que así:
http://img251.imageshack.us/img251/7008/tp1f.png
Salen varios archivos, deberemos ir al de images, y subirlas al host una a una. Tal como esta imágen indica, desde el Controlador de imágenes de Pagina web gratis. ¡Es el más fiable!
(Esta imágen excede los límites, para verla, haz clic aquí)
Bien, una vez hayamos subido las imágenes, procederemos a cambiarlas por las que en el CSS tenemos, abriremos en este caso el archivo CSS Style.
http://img826.imageshack.us/img826/9807/tp3.png
Cuando lo abramos, saldrá una gran lista de códigos CSS. Nos interesan los que se llamen por ejemplo /images/img03.jpg ó otras. Esas, las editarás por las que tienes en tu Controlador de imágenes (Véase la imágen 2) o sea, la que tú tienes será: https://img.webme.com/pic/m/tupaginaweb/img03.jpg  Sólo tendrás que cambiar el /images/ por el https://img.webme.com/pic/m/tupaginaweb/ en todas las imágenes. He aquí una imágen
http://img266.imageshack.us/img266/5404/tp4.png
Aquí termina la parte uno, si has tenido algún problema en esta parte, por favor, dejanos un comentario con tu problema y lo solucionaremos lo antes posible.


Parte 1 # Editando CSSParte 2 # Separando HTMLParte 3 # Aplicando Diseño

 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis