11 site-uri de șabloane CSS nu pornesc de la zero!

Web design-ul este mai accesibil decât oricând, dar încă mai este nevoie de o mulțime de lucruri - și o mulțime de calificare Doriți să învățați Web Design? 7 canale YouTube pentru a vă începe să doriți să învățați Web Design? 7 canale YouTube pentru a începe dvs. YouTube are mii de videoclipuri și canale pentru începători în domeniul web designului. Aici ne uităm la unele dintre cele mai bune pentru a începe. Citiți mai multe - pentru a obține rezultate profesionale.

Din fericire, nu trebuie să începeți de la zero de fiecare dată. Există mii de șabloane gratuite CSS disponibile online, toate cuprinzând tendințele și tehnologiile de design moderne. Aveți posibilitatea să le utilizați în forma lor originală sau să le personalizați pentru a le face proprii.

În acest ghid vom examina 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 pe deplin funcțional. Când descărcați unul, veți primi de obicei un dosar care conține următoarele:

• Fișiere HTML - Veți obține un fișier HTML pentru fiecare pagină a site-ului web. Acesta va conține text și imagini de probă pe care va trebui să le înlocuiți cu propriul dvs. conținut. De asemenea, va trebui să puteți ajusta datele meta referitoare la aspecte precum descrierea site-ului.
• Fișier CSS - Obțineți, de obicei, un fișier CSS principal care conține tot stilul pentru site, plus orice extra, cum ar fi o foaie de stiluri de resetare sau una pentru fonturile web.
• Fișier Javascript - Dacă site-ul conține funcții Javascript, acestea ar trebui să fie incluse în fișierul lor separat, în loc să fie incluse în documentele HTML.
• Imagini, fonturi și icoane - Orice imagini folosite în șablon ar trebui să fie de asemenea incluse. Poate doriți să păstrați lucruri precum icoane și fundaluri, dar va trebui să înlocuiți celelalte imagini cu locurile dvs. cu propria 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 șabloanele WordPress, Excel sau InDesign Cele 7 cele mai bune site-uri pentru a găsi șabloane gratuite InDesign: cărți, flyere, reviste și mai multe Cele mai bune 7 site-uri pentru a găsi șabloane gratuite InDesign: Flyers, Magazines, and More Cum să utilizați un șablon profesionist Adobe InDesign în loc să vă creați propriul dvs.? Aici sunt cele mai bune site-uri șablon gratuit. Citeste mai mult - Șabloanele CSS necesită o anumită cantitate de cunoștințe tehnice.

Nu există o interfață prietenoasă care să le editeze, astfel încât va trebui să știți cel puțin cum să vă găsiți în jurul unui document HTML doar pentru a vă adăuga propriul conținut. Pentru a face propriile personalizări veți avea nevoie de o cunoaștere decentă a CSS Aflați HTML și CSS cu aceste Tutoriale pas cu pas Aflați HTML și CSS cu aceste Tutoriale pas cu pas Curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un talent pentru a învăța cum să creați site-uri web de la zero - aici sunt câteva tutoriale pas cu pas care merită încercate. Citeste mai mult .

Ce să căutați într-un șablon CSS

Există atât de multe șabloane gratuite pentru CSS de a alege. Deci, cum știți ce este potrivit pentru dvs.? Iată câteva lucruri la care să aveți grijă:

• Proiecta - Evident, doriți un site care arată frumos și reflectă imaginea pe care doriți să o portretizați. Dar, de asemenea, ia în considerare dacă șablonul este potrivit pentru nevoile dvs. atât acum cât și în viitor. Multe sunt pentru site-uri de o pagină; unele sunt concepute pentru mai multe pagini. Dacă aveți nevoie de acesta din urmă, luați în considerare dacă ați putea fi mai bine să utilizați un CMS ca WordPress.
• Optimizat pentru mobil - Utilizarea webului mobil este acum mai mare decât desktop-ul, deci este esențial ca site-ul să funcționeze corect pe smartphone-uri. Orice șablon decent CSS ar trebui să utilizeze un design receptiv astfel încât site-ul să funcționeze perfect pe orice ecran de dimensiuni. Dacă nu o alegeți, treceți la una care o face.
• Bine scris - Descărcați șablonul și examinați codul înainte de a vă angaja să îl utilizați. Ar trebui să fie curată, bine structurată și ușor de editat. Ar trebui să fie, de asemenea, SEO-conștienți, cu utilizarea corectă a titlului și titlurile etichete.
• Licență - Asigurați-vă că ați verificat licența pentru șablonul dvs. CSS ales. Multe dintre ele sunt disponibile sub licența Creative Commons Ce este Creative Commons și trebuie să-l folosești? Ce este Creative Commons, și ar trebui să-l utilizați? Creative Commons este un set de licențe care vă dau automat permisiunea de a face diverse lucruri, cum ar fi reutilizarea și distribuirea conținutului. Să aflăm mai multe despre el și cum să îl folosim. Citiți mai multe, dar diferite versiuni ale acestei licențe determină dacă puteți edita șablonul, dacă îl puteți utiliza în mod comercial și dacă trebuie să crediți designerul original.
• Adaosuri - Unii dezvoltatori de șabloane CSS își oferă munca în privința unui a “freemium” bază. Obțineți șablonul gratuit, dar aveți opțiunea de a plăti personalizări suplimentare pentru a le face unic pe site-ul dvs..

Cu toate acestea a explicat, să aruncăm o privire la cele mai bune locuri pentru a găsi șabloane gratuite CSS.

1. Template.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, deci nu ar trebui să le vedeți să se cultive oriunde altundeva.

Toate șabloanele sunt receptive și construite cu HTML5. Sunt mici și ușoare, cu caracteristici suplimentare în Javascript, cum ar fi o casetă de lumină video sau efecte de derulare, utilizate doar în cazul în care adaugă o valoare reală experienței.

2. Styleshout.com

Styleshout oferă o gamă largă de șabloane gratuite și premium, prima lansată sub licența Creative Commons.

Șabloanele gratuite acoperă o gamă largă de categorii, de la site-uri web complete până la paginile Coming Soon și chiar de pagina de eroare 404, care a fost trecat cu vederea. Cum să faci o pagină de eroare de 404 și exemple de 10 Cum să faci o pagină de eroare de 404 design 404 pagina de eroare poate fi diferența dintre un site plictisitor și un site web memorabil. Citeste mai mult . Puteți să le personalizați și să le adaptați stilului 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 furnizate, cum ar fi blog-ul și pagina de produs, și există unele modele deosebit de frumos pentru fotografi pentru a arăta munca lor. Șabloanele de bază în stilul grilei sunt extrem de personalizabile, în timp ce cele mai rapide tind să utilizeze Javascript destul de greu, astfel încât acestea pot fi mai puțin potrivite pentru trucurile dvs..

4. Freebiesbug.com

Ce Freebiesbug îi lipsește în cantitate mai mult decât face în calitate. Un site în care dezvoltatorii tineri își prezintă abilitățile, acesta include multe modele high-end, premium.

Colecția impresionantă de șabloane gratuite a site-ului este perfectă pentru agenții, fotografi, dezvoltatori de aplicații și alte reclame. Împachetat cu efecte și animații Javascript și CSS, puteți personaliza site-urile, deși ele sunt adesea atât de frumoase, încât este posibil să nu doriți să.

În plus, Freebiesbug.com include tot felul de resurse gratuite pentru web designeri, inclusiv fonturi, fotografii stoc, ilustrații Illustrator Nu plătiți pentru Adobe Illustrator: această alternativă gratuită este mare Nu plătiți pentru Adobe Illustrator: această alternativă gratuită este mare Adobe Illustrator este minunat, dar costă destul de puțin datorită abonamentului Creative Cloud. Această alternativă pentru aplicația web este aproape la fel de bună și nu costă nimic! Citiți mai multe și fișierele PSD și multe altele.

5. Free-CSS.com

Free-CSS.com este un site care oferă gratuit - în momentul scrierii - 2503 șabloane gratuite, plus o mulțime de premii, în cazul în care încă nu puteți găsi ceea ce căutați.

Cu atât de mulți pentru a alege de la ea poate fi un pic cam greu să se stabilească pe designul perfect. Calitatea este în general bună, deși existența site-ului de zece ani înseamnă că încă găzduiește șabloane scrise în XHTML. Veți dori să evitați aceste lucruri. Celălalt lucru este să vă asigurați că verificați licența pentru șablonul ales. Toate sunt gratuite, dar unele sunt publice, unele Creative Commons, iar altele utilizează o licență specifică autorului.

6. OS-Templates.com

28 de pagini de șabloane gratuite CSS, în cea mai mare parte folosind modele moderne, bazate pe rețea pe o singură pagină. Dacă este simplu ceea ce căutați, atunci acesta este locul pe care îl căutați. Desenele sunt curate, atractive și ușor de personalizat.

OS-Templates.com oferă, de asemenea, o mare colecție de “șabloane de bază”. Acestea vă oferă structura de bază pentru un site web în diverse scheme de layout populare (două coloane, trei coloane, etc), în timp ce sunt complet unstyled. Ca folosind tema implicită în WordPress, panza necompletat vă permite să transformați site-ul în orice doriți.

7. boag.online

Maglev este un singur șablon de site cu o pagină care poate fi previzualizat î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 care vă ajută să parcurgeți secțiunile. Aspectul simplu funcționează în sine, dar face de asemenea un punct de plecare excelent pentru personalizarea dvs..

8. Pixel Buddha

Șabloanele Pixel Buddha nu se limitează numai la site-uri web, ci și la buletine de știri prin e-mail.

Oricum, toate sunt proiectate cu HTML5 și CSS3, și sunt receptive, astfel încât arata grozav pe orice dispozitiv. Printre cele mai importante caracteristici se numără Howdy HTML, un portofoliu frumos / șablon de reluare Ultimele 5 aplicații și site-uri de reluare a clădirii Veți avea nevoie de ultimele 5 aplicații și site-uri de reluare a construcției pe care le veți avea vreodată nevoie Utilizați aceste site-uri fantastice pentru construcții și aplicații atunci când aveți nevoie pentru a vă face CV-ul să iasă în mulțime. Cu ajutorul instrumentelor potrivite, puteți crea un CV unic rapid chiar și fără abilități de proiectare. Citiți mai multe și SOHO HTML, o pagină de eCommerce minunată care include fișierele PSD sursă în partea de sus a HTML și CSS.

9. Templatemo.com

Aproximativ 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.

Cele mai multe dintre template-uri sunt simple și ordonate, deși caracteristici precum casetele de lumină și carusele de conținut sunt incluse acolo unde sunt necesare. De asemenea, ne place faptul că mai multe șabloane sunt configurate să funcționeze cu șase pagini în mod implicit. Acest lucru face mai ușor dacă conținutul dvs. nu se potrivește aspectului din ce în ce mai obișnuit de o pagină.

10. Startbootstrap.com

Bootstrap este un cadru front-end incredibil 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 vine bootstrapul Start.

Această colecție de șabloane gratuite, cu sursă deschisă, sunt construite folosind sistemul de grilă Bootstrap Crearea interfețelor Web: Unde să începeți crearea interfețelor Web: Unde să începeți Vă vom arăta cum se descompun interfețele web, apoi subliniați conceptele, instrumentele cheie și blocuri de construcție necesare pentru a vă face un designer Web secolul 21. Citeste mai mult . Există mai mult de 30 de a alege de la. Unele sunt pe deplin proiectate și destinate aplicațiilor, blogurilor și paginilor de destinație, în timp ce altele sunt layout-uri goale care vă așteaptă să vă stil.

11. Bootswatch.com

În cele din urmă, ceva mai mult. Bootswatch oferă 16 teme de tip open source pentru site-urile stil create folosind Bootstrap.

Puteți să vă construiți singur aspectul site-ului utilizând Bootstrap sau să descărcați unul dintre șabloanele goale de la Start Bootstrap. Ceea ce face Bootswatch este schimbarea fonturilor, a culorilor de fundal și a stilului pentru butoane, meniuri și alte elemente. Oferă site-ului dvs. un aspect unic, rămânând în conformitate cu ethos-ul ultra-curat al lui 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 general, există două modalități de a utiliza șabloane. Fie le folosiți ca-este sau le folosiți ca bază pentru propriul design.

Pericolul atunci când utilizați șabloanele este că veți ajunge la un site identic cu cel al altcuiva. Alegeți un șablon popular și ar putea exista literalmente zeci de mii de site-uri identice. Acesta este argumentul principal în favoarea personalizării acestora.

Șabloanele CSS reprezintă o scurtătură excelentă pentru designerii web cu experiență care au în vedere aspectul de bază și doresc să sară direct în modelarea acestora.

Acestea sunt, de asemenea, perfecte pentru oricine nou la designul web. Dacă cunoașteți modul în care vă aflați în HTML și CSS, dar nu aveți încredere sau cunoștințe 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 minunat, cât și ca un instrument minunat de învățare.

Puteți să o tratați ca o lucrare în desfășurare. Începeți prin a scoate fonturile Vrei Fantastice Free Fonts? Iată 25 sau mai multe site-uri unde le veți găsi Doresc minunate Fonturi gratuite? Iată cele 25 de site-uri unde le veți găsi Mai degrabă decât să treci prin sute de fonturi, iată câteva site-uri care vă vor ajuta să țineți pasul cu toate fonturile noi pe care doriți să le utilizați în următorul design. Citiți mai multe și schimbați schema de culori Cum să alegeți o schemă de culori ca un pro Cum să alegeți o schemă de culori cum ar fi un culori Pro sunt complicate. S-ar putea părea destul de ușor să alegeți o mână de culori care să arate bine împreună, dar, oricare ar fi designerul care a petrecut ore întregi, vă va spune: este dificil. Citește mai mult și, în timp, poți redesigna elemente existente, le poți adăuga pe altele noi și așa mai departe. Nu există nicio modalitate mai bună de a învăța nimic decât prin experiență practică și practică.

Utilizați șabloane CSS atunci când construiți site-uri web? Care sunt locurile tale preferate pentru a le găsi? Împărtășiți-vă experiențele și sfaturile cu noi în comentarii.

Explorați mai multe despre: CSS, Web Design.