Home-theater-designers
El disseny web és més accessible que mai, però, tot i això, necessita molta feina i molta habilitat per obtenir resultats d’aspecte professional.
Afortunadament, no cal començar de zero cada vegada. Hi ha milers de plantilles CSS gratuïtes disponibles en línia, totes elles amb tendències i tecnologies de disseny modernes. Els podeu utilitzar en la seva forma original o personalitzar-los per fer-los vostres.
En aquesta guia veurem més de prop les plantilles CSS i on trobar-les.
Què és una plantilla CSS?
Una plantilla CSS no només conté CSS: us proporciona tot el necessari per crear un lloc web que funcioni completament. Quan en baixeu una, normalment obtindreu una carpeta que conté el següent:
- Fitxers HTML - Rebreu un fitxer HTML per a cada pàgina del lloc web. Contindrà text i imatges de mostra que haureu de substituir pel vostre propi contingut. També haureu de poder ajustar les meta dades, relacionades amb aspectes com la descripció del lloc.
- Fitxer CSS - Normalment s'obté un fitxer CSS principal que conté tot l'estil del lloc, a més de tots els extres com un full d'estil de restabliment o un de tipus de lletra web.
- Fitxer Javascript - Si el lloc conté funcions Javascript, haurien d'incloure's idealment al seu propi fitxer separat, en lloc d'incorporar-los als documents HTML.
- Imatges, tipus de lletra i icones - També s’ha d’incloure qualsevol imatge que s’utilitzi a la plantilla. És possible que vulgueu conservar coses com les icones i els fons, però haureu de substituir les altres imatges de marcador de posició per les vostres. També es poden incloure alguns tipus de lletra personalitzats.
A diferència de la majoria dels altres tipus de plantilles que trobareu, ja sigui Wordpress, Excel o Plantilles InDesign - Les plantilles CSS requereixen una certa quantitat de coneixements tècnics.
No hi ha cap interfície amigable per editar-los, de manera que haureu de saber, com a mínim, com podeu trobar un document HTML només per afegir el vostre propi contingut. Per fer les vostres pròpies personalitzacions, necessitareu un coneixement decent de CSS.
com carregar la bateria del portàtil amb usb
Què cal cercar en una plantilla CSS
Hi ha tantes plantilles CSS gratuïtes per triar. Llavors, com se sap quin és el millor per a vostè? Aquí hi ha algunes coses que cal tenir en compte:
- Disseny - viouslybviament, voleu un lloc que sembli agradable i que reflecteixi la imatge que vulgueu representar. Però també considereu si la plantilla és adequada per a les vostres necessitats tant ara com en el futur. Molts són per a llocs web d’una sola pàgina; alguns estan dissenyats per a diverses pàgines. Si necessiteu aquest últim, considereu si és millor utilitzar un CMS com Wordpress.
- Optimitzat per a mòbils - L’ús de la web mòbil ara és superior a l’escriptori, de manera que és essencial que el vostre lloc funcioni correctament als telèfons intel·ligents. Qualsevol plantilla CSS decent hauria d’utilitzar un disseny responsiu perquè el lloc funcioni perfectament en qualsevol pantalla de mida. Si el que escolliu no, canvieu a un que ho faci.
- Ben escrit - Descarregueu la plantilla i mireu el codi abans de comprometreu-vos a utilitzar-la. Ha de ser net, ben estructurat i fàcil d’editar. També hauria de tenir en compte el SEO, amb un ús correcte de les etiquetes de títol i encapçalament.
- Llicència - Assegureu-vos de comprovar la llicència de la plantilla CSS escollida. Molts estan disponibles sota una llicència Creative Commons , però diferents versions d'aquesta llicència determinen si podeu editar la plantilla, si la podeu utilitzar comercialment i si heu d'abonar el dissenyador original.
- Complements - Alguns desenvolupadors de plantilles CSS ofereixen el seu treball sobre una base 'freemium'. Obteniu la plantilla de forma gratuïta, però teniu l’opció de pagar per personalitzacions addicionals per fer-la única al vostre lloc.
Amb tot això explicat, fem una ullada als millors llocs per trobar plantilles CSS gratuïtes.
1. Templated.co
Aquesta impressionant col·lecció de més de 800 plantilles CSS conté estils per a cada classe de lloc web. Tots estan creats especialment per al lloc, de manera que no els hauríeu de veure sorgir en cap altre lloc.
Totes les plantilles són sensibles i estan construïdes amb HTML5. Són petites i lleugeres, amb funcions Javascript addicionals, com ara una caixa de llum de vídeo o efectes de desplaçament, que només s’utilitzen quan aporten un valor real a l’experiència.
2. Styleshout.com
Styleshout ofereix una àmplia gamma de plantilles gratuïtes i premium, les primeres publicades sota llicència Creative Commons.
Les plantilles gratuïtes cobreixen una àmplia gamma de categories, des de llocs web complets fins a pàgines Coming Soon, i fins i tot la pàgina d’errors 404 que sovint es passa per alt. Podeu personalitzar-los vosaltres mateixos i adaptar-los a l'estil del lloc existent o bé podeu pagar per aconseguir que Styleshout ho faci per vosaltres.
3. HTML5Up.net
Aquesta col·lecció de plantilles molt elegant també és molt popular. La majoria s’han descarregat centenars de milers de vegades i és fàcil veure per què.
S'atenen totes les categories habituals de llocs, com ara el bloc i la pàgina del producte, i hi ha alguns dissenys particularment agradables perquè els fotògrafs mostrin el seu treball. Les plantilles bàsiques d’estil de quadrícula són extremadament personalitzables, mentre que les més vistoses solen utilitzar Javascript amb força, de manera que poden ser menys adequades per als vostres ajustaments.
4. Freebiesbug.com
Allò que a Freebiesbug li falta en quantitat ho compensa més que en qualitat. Un lloc on els joves desenvolupadors mostren les seves habilitats, inclou molts dissenys de gamma alta.
La impressionant col·lecció de plantilles gratuïtes del lloc és perfecta per a agències, fotògrafs, desenvolupadors d’aplicacions i altres missatges publicitaris. Amb efectes i animacions Javascript i CSS, podeu personalitzar els llocs, tot i que sovint són tan agradables que potser no ho desitgeu.
A més, Freebiesbug.com inclou tot tipus de recursos gratuïts per a dissenyadors web, inclosos tipus de lletra, fotos d’estoc, esbossos d’Illustrator i fitxers PSD i molt més.
5. Free-CSS.com
Free-CSS.com és un lloc web senzill que ofereix, en el moment d’escriure-ho, unes 2503 plantilles gratuïtes, a més de moltes de primera, per si encara no trobeu el que busqueu.
Amb tants per triar, pot resultar una mica difícil decidir-se pel disseny perfecte. La qualitat és generalment bona, tot i que l’existència de deu anys del lloc significa que encara allotja plantilles escrites en XHTML. Voldreu evitar-los. L’altra cosa és assegurar-vos que comproveu la llicència de la plantilla escollida. Totes són gratuïtes, però algunes són de domini públic, d’altres Creative Commons i d’altres utilitzen una llicència específica per a l’autor.
6. OS-Templates.com
28 pàgines de plantilles CSS gratuïtes, principalment amb dissenys moderns basats en quadrícules en una sola pàgina. Si és simple el que busca, aquest és el lloc on cal buscar-lo. Els dissenys són nets, atractius i fàcils de personalitzar.
OS-Templates.com també ofereix una gran col·lecció de 'plantilles bàsiques'. Aquests us proporcionen l'estructura bàsica per a un lloc web en diversos esquemes de disseny populars (de dues columnes, tres columnes, etc.), mentre que estan completament desestilitzats. Igual que utilitzar el tema predeterminat a Wordpress, el llenç en blanc us permet convertir el vostre lloc en qualsevol cosa que vulgueu.
7. boag.online [Ja no està disponible]
Maglev és una plantilla de lloc web d'una sola pàgina que pot ser-ho previsualitzat en acció a boag.online .
És una plantilla ràpida i neta, ideal per a una pàgina de producte. El disseny minimalista només s’incrementa amb alguns efectes Jquery per ajudar-vos a desplaçar-vos entre seccions. El disseny senzill funciona per si mateix, però també constitueix un gran punt de partida per a les vostres pròpies personalitzacions.
8. Pixel Buddha
Les plantilles de Pixel Buddha no només es limiten a llocs web, sinó que també inclouen algunes per a butlletins de correu electrònic.
Sigui com sigui, tots estan dissenyats amb HTML5 i CSS3 i són sensibles, de manera que es veuen molt bé en qualsevol dispositiu. Els aspectes més destacats són Howdy HTML, una bonica plantilla de portafoli / currículum, i SOHO HTML, una pàgina de comerç electrònic d’aspecte impressionant que inclou els fitxers PSD d’origen a la part superior de l’HTML i CSS.
lloc web on podeu veure vídeos de youtube amb amics
9. Templatemo.com
Prop de 500 plantilles gratuïtes estan disponibles a Templatemo. Alguns dels millors són els que s’alliberen del sistema de quadrícula d’estil Bootstrap per provar alguna cosa diferent.
La majoria de les plantilles són senzilles i clares, tot i que s’inclouen funcions com lightboxs i carrusels de contingut on són necessàries. També ens agrada el fet que diverses de les plantilles estiguin configurades per funcionar amb fins a sis pàgines per defecte. Això fa que sigui més fàcil si el vostre contingut no s’adapta al disseny d’una pàgina cada vegada més comú.
10. Startbootstrap.com
Bootstrap és un marc de treball extremadament popular que us permet crear llocs web d’alta qualitat en un tres i no res. No obstant això, es necessita una mica de temps per aprendre, que és on entra Start Bootstrap.
Aquesta col·lecció de plantilles de codi obert i gratuïtes es construeixen mitjançant el sistema de quadrícula de Bootstrap. N’hi ha més de 30 per triar. Alguns estan totalment dissenyats i estan pensats per a aplicacions, blocs i pàgines de destinació, mentre que d'altres són dissenys en blanc que us esperen.
11. Bootswatch.com
Finalment, alguna cosa una mica més pràctic. Bootswatch ofereix 16 temes de codi obert per dissenyar llocs creats amb Bootstrap.
Podeu crear el disseny del vostre lloc mitjançant Bootstrap o descarregar una de les plantilles en blanc des de Start Bootstrap. El que fa Bootswatch és canviar els tipus de lletra, els colors de fons i l'estil de botons, menús i altres elements. Dóna al vostre lloc un aspecte únic mentre es manté fidel a l’ethos ultra net de Bootstrap.
És fàcil crear junts un lloc web bàsic amb Bootstrap i Bootswatch li proporciona una mica d’esmalt instantani.
Com s'utilitzen les plantilles CSS
A grans trets, hi ha dues maneres d’utilitzar les plantilles. Els utilitzeu tal qual o els utilitzeu com a base per al vostre propi disseny.
El perill en utilitzar plantilles és que acabeu amb un lloc web idèntic al d’un altre. Trieu una plantilla popular i hi pot haver literalment desenes de milers de llocs idèntics. Aquest és el principal argument a favor de personalitzar-los.
com fer un iso d'arrencada
Les plantilles CSS són una drecera excel·lent per a dissenyadors web experimentats que tenen en compte un disseny bàsic i que volen començar a dissenyar-lo.
També són perfectes per a qualsevol persona nova en disseny web. Si coneixeu el vostre entorn HTML i CSS però encara no teniu la confiança ni el coneixement necessaris per crear un lloc des de zero, una plantilla CSS serveix tant com una manera fàcil d’obtenir un lloc amb un aspecte fantàstic com una eina d’aprenentatge increïble.
Podeu tractar-lo com un treball en curs. Comenceu per canviant els tipus de lletra i canviant l’esquema de colors i, amb el pas del temps, podeu redissenyar elements existents, afegir-ne de nous, etc. No hi ha millor manera d’aprendre res que mitjançant una experiència pràctica i pràctica.
Feu servir plantilles CSS a l’hora de crear llocs web? Quins són els vostres llocs preferits per trobar-los? Comparteix les teves experiències i consells amb nosaltres als comentaris.
Compartir Compartir Tweet Correu electrònic Com netejar el vostre PC amb Windows mitjançant el símbol del sistemaSi el vostre PC amb Windows es queda sense espai d’emmagatzematge, netegeu la brossa amb aquestes ràpides utilitats de símbol del sistema.
Llegiu a continuació Temes relacionats- Programació
- Web Design
- CSS
Andy és un ex-periodista imprès i editor de revistes que fa 15 anys que escriu sobre tecnologia. En aquest temps ha col·laborat en innombrables publicacions i ha realitzat treballs de redacció per a grans empreses tecnològiques. També ha proporcionat comentaris d'experts als mitjans de comunicació i ha organitzat panells en esdeveniments de la indústria.
Més d'Andy BettsSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us