Home-theater-designers
Designul web este mai accesibil ca niciodată, dar este nevoie de multă muncă - și multă abilitate - pentru a produce rezultate profesionale.
Din fericire, nu trebuie să porniți de la zero de fiecare dată. Există mii de șabloane CSS gratuite disponibile online, toate îmbrățișând tendințele și tehnologiile moderne de design. Le puteți folosi în forma lor originală sau le puteți personaliza pentru a le face proprii.
În acest ghid vom analiza mai îndeaproape șabloanele CSS și unde să le găsim.
Ce este un șablon CSS?
Un șablon CSS nu conține doar CSS: vă oferă tot ce aveți nevoie pentru a crea un site web complet funcțional. Când descărcați unul, veți obține de obicei un folder care conține următoarele:
- Fișiere HTML - Veți primi un fișier HTML pentru fiecare pagină a site-ului web. Acesta va conține exemple de text și imagini pe care va trebui să le înlocuiți cu propriul dvs. conținut. De asemenea, va trebui să puteți ajusta metadatele, legate de lucruri precum descrierea site-ului.
- Fișier CSS - De obicei, primiți un fișier CSS principal care conține tot stilul pentru site, plus orice extra, cum ar fi o foaie de stil de resetare sau unul pentru fonturile web.
- Fișier Javascript - Dacă site-ul conține funcții Javascript, acestea ar trebui în mod ideal să fie incluse în propriul fișier separat, mai degrabă decât încorporate în documentele HTML.
- Imagini, fonturi și pictograme - Orice imagine utilizată în șablon ar trebui, de asemenea, să fie inclusă. Poate doriți să păstrați lucruri precum icoane și fundaluri, dar va trebui să înlocuiți celelalte imagini de substituent cu ale dvs. Unele fonturi personalizate ar putea fi, de asemenea, incluse.
Spre deosebire de majoritatea celorlalte tipuri de șabloane pe care le veți întâlni - fie că sunt Wordpress, Excel sau Șabloane InDesign - Șabloanele CSS necesită o anumită cantitate de cunoștințe tehnice.
Nu există o interfață prietenoasă pentru a le edita, așa că va trebui să știți cel puțin cum să vă găsiți drumul în jurul unui document HTML doar pentru a adăuga propriul dvs. conținut. Pentru a vă face propriile personalizări, veți avea nevoie de o cunoaștere decentă a CSS.
cum se previne deschiderea programelor la pornirea Windows 10
Ce trebuie să căutați într-un șablon CSS
Există atât de multe șabloane CSS gratuite din care puteți alege. Deci, de unde știi care este cel mai potrivit pentru tine? Iată câteva lucruri de care trebuie să țineți cont:
- Proiecta - Evident, doriți un site care să arate frumos și să reflecte orice imagine doriți să redați. Dar luați în considerare, de asemenea, dacă șablonul este potrivit pentru nevoile dvs. atât acum, cât și în viitor. Multe sunt pentru site-uri cu o singură pagină; unele sunt concepute pentru mai multe pagini. Dacă aveți nevoie de acesta din urmă, luați în considerare dacă s-ar putea să fiți mai bine să folosiți un CMS precum Wordpress.
- Optimizat pentru mobil - Utilizarea web mobilă este acum mai mare decât desktopul, deci este esențial ca site-ul dvs. să funcționeze corect pe smartphone-uri. Orice șablon CSS decent ar trebui să utilizeze un design receptiv, astfel încât site-ul să funcționeze perfect pe orice ecran de dimensiuni. Dacă aleasa dvs. nu o faceți, comutați la una care o face.
- Bine scris - Descărcați șablonul și aruncați o privire asupra codului înainte de a vă angaja să îl utilizați. Ar trebui să fie curat, bine structurat și ușor de editat. De asemenea, ar trebui să fie conștient de SEO, cu utilizarea corectă a etichetelor de titlu și titlu.
- Licență - Asigurați-vă că verificați licența pentru șablonul CSS ales. Multe sunt disponibile sub licență Creative Commons , dar diferite versiuni ale acestei licențe determină dacă puteți edita șablonul, dacă îl puteți utiliza comercial și dacă trebuie să acordați credit designerului original.
- Addons - Unii dezvoltatori de șabloane CSS își oferă munca pe o bază „freemium”. Obțineți șablonul gratuit, dar aveți opțiunea de a plăti pentru personalizări suplimentare pentru a-l face unic pentru site-ul dvs.
Cu toate cele explicate, să aruncăm o privire la cele mai bune locuri pentru a găsi șabloane CSS gratuite.
1. Templated.co
Această colecție uimitoare de peste 800 de șabloane CSS conține stiluri pentru fiecare clasă de site web. Toate sunt create special pentru site, așa că nu ar trebui să le vedeți năvălind altundeva.
Toate șabloanele sunt receptive și sunt create cu HTML5. Sunt mici și ușoare, cu caracteristici Javascript suplimentare, cum ar fi o casetă video sau efecte de derulare, folosite numai acolo unde adaugă valoare reală experienței.
2. Styleshout.com
Styleshout oferă o gamă largă de șabloane gratuite și premium, primele lansate sub licența Creative Commons.
Șabloanele gratuite acoperă o gamă largă de categorii, de la site-uri web complete până la paginile În curând și chiar pagina de erori 404 deseori ignorată. Le puteți personaliza personal și le puteți adapta la stilul site-ului dvs. existent sau puteți plăti pentru ca Styleshout să o facă pentru dvs.
3. HTML5Up.net
Această colecție super-elegantă de șabloane este, de asemenea, super-populară. Cele mai multe au fost descărcate de sute de mii de ori și este ușor de văzut de ce.
Toate categoriile obișnuite de site-uri sunt adaptate, cum ar fi blogul și pagina produsului, și există câteva modele deosebit de frumoase pentru fotografi pentru a-și arăta munca. Șabloanele de bază în stilul rețelei sunt extrem de personalizabile, în timp ce cele mai strălucitoare tind să folosească Javascript destul de intens, astfel încât să fie mai puțin potrivite pentru modificările dvs.
Patru. Freebiesbug.com
Ceea ce îi lipsește Freebiesbug în cantitate îl compensează mai mult decât în calitate. Un site în care tinerii dezvoltatori își prezintă abilitățile, include multe modele premium de înaltă calitate.
Colecția impresionantă de șabloane gratuite a site-ului este perfectă pentru agenții, fotografi, dezvoltatori de aplicații și alte reclame. Pachet cu efecte și animații Javascript și CSS, puteți personaliza site-urile, deși sunt adesea atât de drăguțe încât s-ar putea să nu doriți.
În plus, Freebiesbug.com include tot felul de resurse gratuite pentru web designeri, inclusiv fonturi, fotografii stoc, schițe Illustrator și fișiere PSD și multe altele.
5. Free-CSS.com
Free-CSS.com este un site web care oferă, la momentul redactării, câteva 2503 de șabloane gratuite, plus o mulțime de modele premium, în cazul în care încă nu găsiți ceea ce căutați.
Cu atât de multe dintre care puteți alege, poate fi puțin greu să vă stabiliți pe designul perfect. Calitatea este în general bună, deși existența de 10 ani a site-ului înseamnă că găzduiește încă șabloane scrise în XHTML. Veți dori să le evitați. Celălalt lucru este să vă asigurați că verificați licența pentru șablonul ales. Toate sunt gratuite, dar unele sunt de domeniu public, altele Creative Commons, iar altele folosesc o licență specifică autorului.
6. OS-Templates.com
28 de pagini de șabloane CSS gratuite, folosind în principal schemele moderne, bazate pe grilă, pe o singură pagină. Dacă căutați simplu, atunci acesta este locul unde trebuie să căutați. Designurile sunt curate, atractive și ușor de personalizat.
OS-Templates.com oferă, de asemenea, o colecție largă de „șabloane de bază”. Acestea vă oferă structura de bază pentru un site web în diferite scheme de layout populare (cu două coloane, cu trei coloane, etc.), în timp ce sunt complet nestilizate. Ca și în cazul utilizării temei implicite în Wordpress, pânza goală vă permite să vă transformați site-ul în orice doriți.
7. boag.online [Nu mai este disponibil]
Maglev este un singur șablon de pagină web care poate fi previzualizate în acțiune la boag.online .
Este un șablon rapid, curat, ideal pentru o pagină de produs. Designul minimalist este mărit doar de câteva efecte Jquery pentru a vă ajuta să derulați între secțiuni. Aspectul simplu funcționează în sine, dar oferă și un punct de plecare excelent pentru propriile personalizări.
8. Pixel Buddha
Șabloanele Pixel Buddha nu se limitează doar la site-uri web, ci includ și unele pentru buletine informative prin e-mail.
Oricum ar fi, toate sunt concepute cu HTML5 și CSS3 și sunt receptive, astfel încât să arate grozav pe orice dispozitiv. Punctele de atracție includ Howdy HTML, un șablon de portofoliu / CV frumos și SOHO HTML, o pagină uimitoare de comerț electronic care include fișierele PSD sursă deasupra HTML și CSS.
cum să descărcați podcast-uri pe computer
9. Templatemo.com
Aproape 500 de șabloane gratuite sunt disponibile de la Templatemo. Unele dintre cele mai bune sunt cele care se eliberează de sistemul de grilă în stil Bootstrap pentru a încerca ceva diferit.
Majoritatea șabloanelor sunt simple și nedorite, deși caracteristici precum lightbox-uri și carusele de conținut sunt incluse acolo unde sunt necesare. De asemenea, ne place faptul că mai multe șabloane sunt configurate pentru a funcționa în mod implicit cu până la șase pagini. Acest lucru face mai ușor dacă conținutul dvs. nu se potrivește cu aspectul din ce în ce mai obișnuit de o pagină.
10. Startbootstrap.com
Bootstrap este un cadru frontal extrem de popular, care vă permite să creați site-uri web de înaltă calitate în cel mai scurt timp. Cu toate acestea, este nevoie de un pic de timp pentru a învăța, de unde intervine Start Bootstrap.
Această colecție de șabloane open source gratuite este construită folosind sistemul de rețea Bootstrap. Există peste 30 de alegeri. Unele sunt complet concepute și sunt destinate aplicațiilor, blogurilor și paginilor de destinație, în timp ce altele sunt machete goale care așteaptă să vă amenajați.
unsprezece. Bootswatch.com
În cele din urmă, ceva ceva mai practic. Bootswatch oferă 16 teme open source pentru stilarea site-urilor construite folosind Bootstrap.
Puteți construi singur aspectul site-ului dvs. utilizând Bootstrap sau puteți descărca unul dintre șabloanele goale din Start Bootstrap. Ceea ce face Bootswatch este să schimbe fonturile, culorile de fundal și stilul pentru butoane, meniuri și alte elemente. Oferă site-ului dvs. un aspect unic în timp ce rămâneți fidel eticii ultra-curate a Bootstrap.
Este ușor să aruncați împreună un site de bază cu Bootstrap, iar Bootswatch îi oferă o lustruire instantanee.
Cum se utilizează șabloanele CSS
În linii mari, există două moduri de utilizare a șabloanelor. Fie le folosiți ca atare, fie le folosiți ca bază pentru propriul design.
Pericolul atunci când utilizați șabloane este că ajungeți la un site web identic cu cel al altei persoane. Alegeți un șablon popular și ar putea exista literalmente zeci de mii de site-uri identice. Acesta este principalul argument în favoarea personalizării acestora.
cum să obțineți dungi pe Snapchat
Șabloanele CSS sunt o comandă rapidă excelentă pentru proiectanții web cu experiență, care au un aspect de bază în minte și doresc să treacă direct în stil.
De asemenea, sunt perfecte pentru oricine nou în designul web. Dacă vă cunoașteți calea în jurul HTML și CSS, dar nu aveți încă încrederea sau cunoștințele necesare pentru a construi un site de la zero, atunci un șablon CSS servește atât ca o modalitate ușoară de a obține un site excelent, cât și ca un instrument minunat de învățare.
Îl puteți trata ca pe o lucrare în curs. Începeți de comutarea fonturilor și schimbarea schemei de culori și, în timp, puteți reproiecta elementele existente, adăuga altele noi și așa mai departe. Nu există o modalitate mai bună de a învăța ceva decât prin experiență practică, practică.
Folosiți șabloane CSS atunci când creați site-uri web? Care sunt locurile tale preferate pentru a le găsi? Împărtășiți-ne experiențele și sfaturile cu noi în comentarii.
Acțiune Acțiune Tweet E-mail Cum să vă curățați computerul Windows utilizând linia de comandăÎn cazul în care PC-ul dvs. Windows nu mai are spațiu de stocare, curățați junk-ul folosind aceste utilitare rapide de prompt de comandă.
Citiți în continuare Subiecte asemănătoare- Programare
- Web design
- CSS
Andy este un fost jurnalist tipărit și editor de revistă care scrie despre tehnologie de 15 ani. În acea perioadă, el a contribuit la nenumărate publicații și a produs lucrări de redactare pentru mari companii de tehnologie. De asemenea, a oferit comentarii de specialitate pentru mass-media și a găzduit panouri la evenimente din industrie.
Mai multe de la Andy BettsAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletterului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona