Modificación de Plantillas

en ATOM
Plantillas en ATOM

Iniciamos el software con los paquetes instalados correctamente para desarrollo

web.
Plantillas en ATOM

Para descargar plantillas podemos ir a www.w3layouts.com y seleccionamos una

de muestra como esta.
Plantillas en ATOM

Para este ejemplo seleccionamos la plantilla “cat life”.

Plantillas en ATOM

Para previsualizar la plantilla vamos al botón “view demo”.

Plantillas en ATOM

Esta es la vista previa de la plantilla, regresamos a la ventana anterior para

descargarla.
Plantillas en ATOM

Le damos click en la opción “Starter” y luego se activará el botón de descarga

gratis “Download for Free”, entramos allí y seguimos los pasos.
Plantillas en ATOM

En esta ventana debemos loguearnos, por medio de las opciones que nos dan
allí, yo lo hice con Facebook, es más práctico, después pide un “like”.
Plantillas en ATOM

Luego aparece esta ventana donde debemos dar un “like” o realizar alguna de
las opciones que nos solicitan.
Plantillas en ATOM

Por fin!! Podemos descargar el paquete .zip, le damos clic en el botón “Download
Template”.
Plantillas en ATOM

Extremos el .zip, este nos entregará la carpeta con todos los archivos para
modificar el código.
Plantillas en ATOM

Podemos ver la ventana de Atom y simplemente arrastramos la carpeta, otro

método es ir a file y seleccionar la opción Open Project.
Plantillas en ATOM

Así se visualiza nuestro proyecto en Atom, ya abierto, pero en este momento no

hemos seleccionado ningún archivo.
Plantillas en ATOM

Seleccionamos el archivo index.html y se despliega una pestaña con

todo el código, solo tiene un html porque la página funciona con el
efecto parallax sencillo.
Plantillas en ATOM

Lo primero que debemos hacer es activar el servidor para ver los cambios en
vivo: Packages > atom-live-server > Start server.
Plantillas en ATOM

Se inicia automáticamente Google Chrome y solicita permiso del Firewall, este se

lo damos para que empiece a funcionar el servidor.
Plantillas en ATOM

Se inicia la página web, donde observamos la ip del servidor virtual.

Plantillas en ATOM

Dividimos la pantalla en dos secciones, y el primer cambio que haremos es del

texto del banner, dentro del html lo ubicamos.
Plantillas en ATOM

Cambiamos el texto deseado en Atom y le damos control + s para guardar los

cambios, estos se actualizan en la página web.
Plantillas en ATOM

Ahora vamos a cambiar los textos del menú horizontal, es el mismo

procedimiento, ubicamos los textos y los modificamos en Atom,
guardamos y listo
Plantillas en ATOM
Plantillas en ATOM

Vamos a modificar el color del menú horizontal, para esto vamos a aprender
como ubicar fácilmente los elementos de una página web dentro del código.
Plantillas en ATOM

En el navegador, colocamos el puntero del mouse dentro del elemento y damos

clic derecho, seleccionamos en el menú contextual la opción “Inspeccionar”
Plantillas en ATOM

1
3
2

Automáticamente la pantalla se divide en dos y nos muestra todas las

características del elemento escogido, como el nombre de la clase en CSS y las
propiedades y valores de esa clase, además el nombre del archivo y en que línea
se encuentra. Ver esto en la próxima dispositiva.
Plantillas en ATOM

1
3
2

1. Nombre de la clase en el archivo index.html

2. Propiedades de la clase en el archivo .css
3. Nombre del archivo “style.css” y línea donde se encuentra “410”. (Para
modificar)
Plantillas en ATOM

Dentro de Atom, abrimos el archivo style.css que está dentro de la carpeta css,
allí ubicamos la clase navbar para modificar el color.
Plantillas en ATOM

Ya sabemos que se encuentra en la línea 410, pero también podemos buscarla

mediante la opción Find in Buffer
Plantillas en ATOM

En este caso modificamos el

color del background

Dentro de la barra inferior escribimos el nombre y listo, nos lleva directamente a

la línea 410 donde podemos modificar todo lo que queramos de esa clase.
Plantillas en ATOM

Editamos el color html y listo, ya cambió el color del menú horizontal.

Plantillas en ATOM

Ahora vamos a modificar una foto. Realizamos el mismo proceso anterior.

Plantillas en ATOM

Clic derecho sobre la foto y vamos a “inspeccionar”

Plantillas en ATOM

De esta manera tenemos todos los datos: Nombre de la foto, tamaño y

ubicación.
Plantillas en ATOM

Ab.jpg Ab_new.jpg
540 x 450 px 540 x 450 px

La foto de reemplazo debe tener el mismo tamaño en pixeles, para mantener la

uniformidad.
Plantillas en ATOM

La nueva foto debe estar dentro de la misma carpeta, en este caso, la imágenes
se encuentran dentro de la carpeta images.
Plantillas en ATOM

Ubicamos la línea de código que vamos a modificar, usamos los métodos que ya
conocemos.
Plantillas en ATOM

Cambiamos por el nombre nuevo.

Plantillas en ATOM

Listo.