Este post que se me dio por titular “Ejemplos de paginas web en html y css + Tutorial de edicion“, constara sobre 2 zonas. En una de ellas te dare comunicacion a 14 plaginas web en html y css listas de utilizar. La otra sera un tutorial sobre impresion sobre html asi como css. Hexaedro que alguno sea la plantilla que vallas a descargar, vas a precisar adaptarla a tu esquema, empezare con el tutorial.
De mas esta decirte que si eres un entendido en html y no ha transpirado css te sea posible saltarte Durante la reciente parte. ??
Tabla de contenidos
?Cual seria la mision del html desplazandolo hacia el pelo css?
Antes sobre meternos a repleto deseo asegurarme que entiendas bien cual seria la funcion del html y no ha transpirado css. No te voy a aburrir con ninguna de esas definiciones tediosas que solo expertos entienden. Basicamente quiero que entiendas que el html seria un habla sobre traumatizado con el que le das la organizacion an una pagina web. Entretanto que el css es un estilo sobre Modalidad que define la presentacion sobre un documento html.
“Con el html definiras los componentes y su ubicacion en la pagina. Mientras que con las hojas de garbo css podras dar colores, tamanos, vinculacion, margenes, etc.”
Por tanto con el html definiras las componentes y su ubicacion en la pagina (imagenes, menus, titulos, parrafos, etc). Entretanto que con las hojas de moda css podras dar colores, tamanos, vinculacion, margenes, etc a cada factor.
?Que es B tstrap?
Como la mayor pieza de las plantillas que te dejare igual que modelo, utilizan b tstrap, me veo obligado a introducirte en el tema. Ademas adentro del inminente apartado voy a tocar un par de veces el asunto, y no ha transpirado no quiero que te pierdas. jejej
Te lo hago bien resumido. B tstrap es un framework css desarrollado por Twitter, que facilita hacer tu web adaptable al medida de pantalla sobre tus usuarios. En otras palabras convierte la pagina en absolutamente responsive (si lo aplicas bien. jejej).
B tstrap seria un framework css desarrollado por Twitter, que permite hacer tu web adaptable al medida sobre pantalla sobre tus usuarios
Trabaja con un diseno rejilla de 12 columnas, permitiendo al disenador, precisar cuantas columnas debes utilizar un aspecto en cada mecanismo.
Como podria ser, de disenar alguna cosa que se mire mismamente en tu pc. (ver imagen)
Debes definir, mediante b tstrap, que cada factor ocupe 4 de las 12 columnas en un ordenador. Luego, de efectuarlo adaptable, podrias decirle que ocupe 6 de las 12 para la tablet (es declarar habria 2 columnas), desplazandolo hacia el pelo para un movil tome 12/12 columnas.
Por si no te quedo claro, te aviso que tengo programado un post total en este argumento. Aunque mientras tanto te recomiendo que pases por este excepcional articulo de el blog AyudaWP. ??
Estampacion de paginas web en html y css
Este tutorial sobre edicion goza de igual que fin, que te familiarices con la edicion de el html y no ha transpirado css sobre una web. Con el fin de ello ire cambiando determinados componentes sobre la plantilla Creative Agency. Descargala aqui para seguirme el transito. ??
Luego de descargada te hallaras con un archivo .zip, descomprimelo y veras lo que sigue.
Abre con tu navegador el archivo index.html, para ver la web original.
Los archivos que editaremos sera el index.html, asi como adentro la carpeta css el archivo style.css. Los demas archivos .css no los tocaremos. Dentro de dichos .css esta el que controla el framework de b tstrap (b tstrap.min), el cual nunca debes editar, a excepcion de seas un programador entendido. jeje. Aparte hay otros archivos de moda como el owl.carousel, el cual da Modalidad a un carrusel sobre imagenes que Existen en la pagina. Sin embargo como debido a te dije, yo unico me metere en el style.css, bien tendras tiempo tu sobre rozar lo demas. jeje
En mi caso usare el editor de escrito notepad++, pero podras seguirme con cualquier editor. ??
Ya con los dos archivos (index.html y no ha transpirado style.css) abiertos con tu editor sobre escrito, podemos comenzar a trabajar. Dado que el autor sobre esta plantilla nos organizo el css sobre modo llamativo, seguiremos el orden de su tabla de editar determinados sobre las puntos.
Iremos cambiando cada contenido desde el html y no ha transpirado editando su moda desde el css. Comencemos por los aspectos generales.
General
Son diversos los puntos que se editan en el apartado general de la hoja style.css. Veremos igual que editar determinados de ellos. ??
Publicacion sobre textos
Comencemos con las textos, tanto titulos (title, h2. h5) como tronco (body).
Por ejemplo podemos efectuar algunas ediciones igual que las subsiguientes
Cambios de volumen de el cadaver sobre texto (font-family en body), causa sobre las titulos (font-family) y color. Como de este modo ademas marchas de envergadura, individual sobre cada titulo (title, h2.. h5).
Debido a realizados los cambios guardalos.
Luego ve a la pestana sobre html y no ha transpirado ejecuta el documento en tu navegador favorito, mi caso Chrome.
Una oportunidad ejecutado podras contrastar los cambios. En este ej veras que en el inicio de la website nunca se cambio el color sobre titular (WE ARE CREATIVE AGENCY). Siendo que dentro sobre las sitio mГіvil minder cambios se realizo un cambio sobre color en los titulos title,h2. h5. Eso seria por que en el html dicho titular se lo realizo pequeno la clase white-text.
En caso de que quieres que refran titular tome el color sobre todo el mundo los titulos, no precisas mas que quitar el O producir la novedosa especie con el color que quieras darle al titular principal de tu pagina web.
Eso en cuanto a la estampacion sobre clases de escrito, las cambios de las textos en si, deberias efectuarlo desde el documento html. Por ejemplo en titular del home podrias editarlo como sigue.
Lo que acabo sobre apuntar semejante oportunidad se cae de sensato y esta casi sobre mas, aunque bueno nunca se que tan novato eres.. jejeje
Edicion de enlaces
Siguiendo en el apartado general podemos editar las caracteristicas sobre las enlases. Con el fin de eso en el archivo style.css debes encontrar la etiqueta “a”.
Entre las lineas 83 asi como 96 del archivo .css se encuentras las ediciones de garbo sobre los enlaces. Como podria ser en la camino 83 editas el color original, mientras que en la linea 94 el color cuando pasamos el cursor. En la linea 93 puedes Canjear la opacidad de el casamiento cuando pasamos el cursor.
Alguno sea el casamiento, de cambiar su contenido deberas hacerlo desde su html. El que seria el siguiente
Asi que bueno seria bien sencillo editar tanto el contenido como el esbozo sobre tus enlaces. ??
