11 CSS predložaka: Ne počnite od nule!

11 CSS predložaka: Ne počnite od nule!

Web dizajn pristupačniji je nego ikad, ali još uvijek treba puno rada - i puno vještine - za postizanje rezultata profesionalnog izgleda.





Srećom, ne morate svaki put početi ispočetka. Na internetu je na raspolaganju tisuće besplatnih CSS predložaka koji prihvaćaju moderne dizajnerske trendove i tehnologije. Možete ih koristiti u izvornom obliku ili ih prilagoditi tako da budu vlastite.



U ovom vodiču ćemo pobliže pogledati CSS predloške i gdje ih pronaći.





Što je CSS predložak?

CSS predložak ne sadrži samo CSS: on vam daje sve što je potrebno za stvaranje potpuno funkcionalne web stranice. Kada ga preuzmete, obično ćete dobiti mapu koja sadrži sljedeće:

  • HTML datoteke - Dobit ćete HTML datoteku za svaku stranicu web stranice. Sadržat će uzorak teksta i slika koje ćete morati zamijeniti vlastitim sadržajem. Morat ćete također moći prilagoditi meta podatke, koji se odnose na stvari poput opisa web lokacije.
  • CSS datoteku - Obično dobijete jednu glavnu CSS datoteku koja sadrži sav stil za web mjesto, plus sve dodatke poput reset tablice stilova ili jednu za web fontove.
  • Javascript datoteka - Ako web mjesto sadrži Javascript funkcije, idealno bi bilo da budu uključene u vlastitu zasebnu datoteku, a ne uključene u HTML dokumente.
  • Slike, fontovi i ikone - Sve slike korištene u predlošku također trebaju biti uključene. Možda biste htjeli zadržati stvari poput ikona i pozadina, ali ćete morati zamijeniti ostale slike rezerviranih mjesta vlastitim. Mogu biti uključeni i neki prilagođeni fontovi.

Za razliku od većine drugih vrsta predložaka na koje ćete naići - bili to Wordpress, Excel ili InDesign predlošci - CSS predlošci zahtijevaju određenu količinu tehničkog znanja.



Ne postoji prijateljsko sučelje za njihovo uređivanje, pa ćete morati znati barem kako se snaći u HTML dokumentu samo za dodavanje vlastitog sadržaja. Za vlastite prilagodbe trebat će vam pristojno poznavanje CSS -a.

kako dodati vertikalnu liniju u word

Što tražiti u CSS predlošku

Postoji toliko mnogo besplatnih CSS predložaka za odabir. Pa kako znate koji je pravi za vas? Evo nekoliko stvari na koje morate paziti:



  • Oblikovati - Očito želite web stranicu koja izgleda lijepo i odražava koju god sliku želite prikazati. Ali također razmislite odgovara li predložak vašim potrebama i sada i u budućnosti. Mnogi su za web stranice s jednom stranicom; neke su dizajnirane za više stranica. Ako vam ovo drugo treba, razmislite biste li umjesto toga mogli bolje koristiti CMS poput Wordpressa.
  • Optimizirano za mobilne uređaje - Upotreba mobilnog weba sada je veća od stolne, pa je važno da vaša web stranica ispravno funkcionira na pametnim telefonima. Svaki pristojan CSS predložak trebao bi koristiti responzivni dizajn tako da web mjesto savršeno radi na ekranu bilo koje veličine. Ako vaš odabranik to ne učini, prijeđite na onaj koji ima.
  • Dobro napisano - Preuzmite predložak i pogledajte kôd prije nego što se obvežete da ćete ga koristiti. Trebao bi biti čist, dobro strukturiran i jednostavan za uređivanje. Također bi trebao biti svjestan SEO-a, s ispravnom upotrebom oznaka naslova i naslova.
  • Licenca - Svakako provjerite licencu za odabrani CSS predložak. Mnogi su dostupni pod licencom Creative Commons , ali različite verzije ove licence određuju možete li urediti predložak, možete li ga koristiti u komercijalne svrhe i trebate li kreditirati izvornog dizajnera.
  • Dodaci - Neki programeri CSS predložaka nude svoj rad na 'freemium' osnovi. Predložak dobivate besplatno, ali imate mogućnost platiti dodatne prilagodbe kako bi bio jedinstven za vašu web lokaciju.

Uz sve objašnjeno, pogledajmo najbolja mjesta za pronalaženje besplatnih CSS predložaka.

1. Templated.co

Ova zadivljujuća zbirka od više od 800 CSS predložaka sadrži stilove za svaku klasu web stranice. Svi su stvoreni posebno za web mjesto, pa ih ne biste trebali vidjeti nigdje drugdje.



Svi predlošci su responzivni i izrađeni su s HTML5. Mali su i lagani, s dodatnim Javascript značajkama, poput video okvira ili efekata pomicanja, koji se koriste samo ako dodaju stvarnu vrijednost doživljaju.

2. Styleshout.com

Styleshout nudi veliki raspon besplatnih i premijskih predložaka, koji su prvi objavljeni pod licencom Creative Commons.

Besplatni predlošci pokrivaju širok raspon kategorija, od potpunih web stranica do stranica Uskoro, pa čak i često zanemarene stranice s pogreškom 404. Možete ih sami prilagoditi i prilagoditi stilu vaše postojeće web stranice ili možete platiti da to učini umjesto vas Styleshout.

3. HTML5Up.net

Ova super-stilska zbirka predložaka također je super popularna. Većina je preuzeta stotinama tisuća puta i lako je vidjeti zašto.

Opskrbljene su sve uobičajene kategorije web mjesta, poput bloga i stranice proizvoda, a postoje i neki posebno lijepi dizajni za fotografe da pokažu svoj rad. Osnovni predlošci u obliku rešetke iznimno su prilagodljivi, dok oni svjetliji imaju tendenciju da prilično često koriste Javascript pa mogu biti manje prilagođeni vašim ugađanjima.

Četiri. Freebiesbug.com

Ono što Freebiesbugu nedostaje u količini više je nego u kvaliteti. Web mjesto na kojem mladi programeri pokazuju svoje vještine, uključuje mnoge vrhunske dizajne.

Impresivna zbirka besplatnih predložaka savršena je za agencije, fotografe, programere aplikacija i druge kreativce. Prepuni Javascript i CSS efekata i animacija, web lokacije možete prilagoditi, iako su često toliko lijepi da možda ne želite.

Osim toga, Freebiesbug.com uključuje sve vrste besplatnih resursa za web dizajnere, uključujući fontove, fotografije, ilustratorske skice i PSD datoteke i još mnogo toga.

5. Besplatno-CSS.com

Free-CSS.com je besplatna web stranica koja u vrijeme pisanja ovog članka nudi nekih 2503 besplatna predloška, ​​plus dosta vrhunskih, ako još uvijek ne možete pronaći ono što tražite.

S obzirom na toliki izbor da izaberete, može biti malo teško odlučiti se za savršen dizajn. Kvaliteta je općenito dobra, iako 10-godišnje postojanje stranice znači da još uvijek sadrži predloške napisane u XHTML-u. Ovo ćete htjeti izbjeći. Druga stvar je provjeriti licencu za odabrani predložak. Svi su besplatni, ali neki su javna domena, neki Creative Commons, a neki koriste licencu za autora.

6. OS-Templates.com

28 stranica besplatnih CSS predložaka, većinom korištenjem modernih rasporeda temeljenih na mreži na jednoj stranici. Ako tražite jednostavno, ovo je mjesto za pogledati. Dizajni su čisti, atraktivni i jednostavni za prilagodbu.

OS-Templates.com također nudi veliku zbirku 'osnovnih predložaka'. Oni vam daju osnovnu strukturu web stranice u raznim popularnim shemama izgleda (dva stupca, tri stupca itd.), Dok su potpuno stilizirani. Kao i korištenje zadane teme u Wordpressu, prazno platno omogućuje vam da svoju web lokaciju pretvorite u sve što želite.

7. boag.online [Više nije dostupno]

Maglev je jedan predložak web stranice na jednoj stranici koji može biti pregledano na djelu na boag.online .

To je brz, čist predložak, idealan za stranicu proizvoda. Minimalistički dizajn nadograđen je samo s nekoliko Jquery efekata koji će vam pomoći da se krećete između odjeljaka. Jednostavan izgled radi sam po sebi, ali čini i izvrsnu polaznu točku za vaše vlastite prilagodbe.

8. Pixel Buddha

Predlošci Pixel Buddhe nisu ograničeni samo na web stranice, već uključuju i neke za biltene putem e -pošte.

U svakom slučaju, svi su dizajnirani s HTML5 i CSS3, te reagiraju pa izgledaju sjajno na bilo kojem uređaju. Istaknuti sadržaji uključuju Howdy HTML, prekrasan predložak portfolija/životopisa i SOHO HTML, stranicu e -trgovine izvrsnog izgleda koja uključuje izvorne PSD datoteke na vrhu HTML -a i CSS -a.

zašto je moja internetska veza nestabilna

9. Templatemo.com

Gotovo 500 besplatnih predložaka dostupno je u Templatemo. Neki od najboljih su oni koji se odvajaju od mrežnog sustava u stilu Bootstrapa kako bi isprobali nešto drugačije.

Većina predložaka je jednostavna i bez pretrpanosti, iako su značajke poput okvira za pregled i rotirajućih sadržaja uključene tamo gdje su potrebne. Sviđa nam se i činjenica da je nekoliko predložaka prema zadanim postavkama postavljeno za rad s čak šest stranica. To olakšava ako se vaš sadržaj ne uklapa u sve češći izgled jedne stranice.

10. Startbootstrap.com

Bootstrap je nevjerojatno popularan front-end okvir koji vam omogućuje da u vrlo kratkom roku izradite visokokvalitetne web stranice. Međutim, potrebno je malo vremena za učenje, a tu dolazi i Start Bootstrap.

Ova zbirka besplatnih predložaka otvorenog koda izgrađena je pomoću Bootstrapovog grid sustava. Možete izabrati više od 30. Neki su potpuno dizajnirani i namijenjeni su aplikacijama, blogovima i odredišnim stranicama, dok su drugi prazni izgledi koji čekaju da stilizirate.

jedanaest. Bootswatch.com

Konačno, nešto malo više iz ruke. Bootswatch nudi 16 tema otvorenog koda za stiliziranje web stranica izgrađenih pomoću Bootstrapa.

Izgled web stranice možete sami izraditi pomoću Bootstrapa ili preuzeti jedan od praznih predložaka iz Start Bootstrapa. Ono što Bootswatch radi jest promjena fontova, boja pozadine i stila za gumbe, izbornike i druge elemente. Daje vašoj web lokaciji jedinstven izgled, a pritom ostaje vjeran Bootstrapovom ultra čistom etosu.

Lako je sastaviti osnovnu web stranicu s Bootstrapom, a Bootswatch mu daje trenutačni sjaj.

Kako koristiti CSS predloške

Općenito govoreći, postoje dva načina korištenja predložaka. Ili ih koristite kakve jesu ili ih koristite kao osnovu za vlastiti dizajn.

Opasnost pri korištenju predložaka je da na kraju dobijete web stranicu koja je identična nečijoj. Odaberite popularan predložak i moglo bi biti doslovno desetke tisuća identičnih web stranica. Ovo je glavni argument u prilog prilagođavanja istih.

kako uključiti Apple TV bez daljinskog upravljača

CSS predlošci izvrstan su prečac za iskusne web dizajnere koji imaju na umu osnovni izgled i žele uskočiti u njegovo oblikovanje.

Također su savršeni za svakoga tko se tek bavi web dizajnom. Ako se snalazite u HTML -u i CSS -u, ali još nemate samopouzdanja ili znanja za izgradnju web stranice od nule, CSS predložak služi i kao jednostavan način za dobivanje izvrsne web stranice i kao izvrstan alat za učenje.

Možete to tretirati kao rad u tijeku. Počnite s isključivanje fontova i mijenjanje sheme boja , a s vremenom možete redizajnirati postojeće elemente, dodati nove itd. Nema boljeg načina da naučite bilo što osim praktičnog, praktičnog iskustva.

Koristite li CSS predloške pri izradi web stranica? Koja su vaša omiljena mjesta da ih pronađete? Podijelite svoja iskustva i savjete s nama u komentarima.

Udio Udio Cvrkut E -pošta Kako očistiti računalo sa sustavom Windows pomoću naredbenog retka

Ako na vašem Windows računalu nedostaje prostora za pohranu, očistite smeće pomoću ovih brzih pomoćnih programa naredbenog retka.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web dizajn
  • CSS
O autoru Andy Betts(221 objavljenih članaka)

Andy je bivši tiskani novinar i urednik časopisa koji već 15 godina piše o tehnologiji. U to vrijeme pridonio je nebrojenim publikacijama i napravio tekstopisce za velike tehnološke tvrtke. Također je dao komentare stručnjaka za medije i vodio panele na industrijskim događajima.

Više od Andyja Bettsa

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu