11 spletnih mest s predlogami CSS: Ne začnite od začetka!

11 spletnih mest s predlogami CSS: Ne začnite od začetka!

Spletno oblikovanje je bolj dostopno kot kdaj koli prej, vendar še vedno zahteva veliko dela - in veliko spretnosti - za doseganje profesionalnih rezultatov.





Na srečo vam ni treba vsakič začeti iz nič. Na spletu je na voljo na tisoče brezplačnih predlog CSS, ki vsebujejo sodobne oblikovalske trende in tehnologije. Uporabite jih lahko v izvirni obliki ali pa jih prilagodite, da bodo po vaši meri.





V tem priročniku si bomo podrobneje ogledali predloge CSS in kje jih najdete.





Kaj je predloga CSS?

Predloga CSS ne vsebuje samo CSS: nudi vam vse, kar potrebujete za ustvarjanje popolnoma delujočega spletnega mesta. Ko prenesete eno, boste običajno dobili mapo, ki vsebuje naslednje:

  • Datoteke HTML - Za vsako stran spletnega mesta boste dobili datoteko HTML. Vseboval bo vzorčno besedilo in slike, ki jih boste morali zamenjati z lastno vsebino. Prav tako boste morali prilagoditi metapodatke, ki se nanašajo na stvari, kot je opis spletnega mesta.
  • CSS datoteko - Običajno dobite eno glavno datoteko CSS, ki vsebuje vse sloge za spletno mesto, skupaj z vsemi dodatki, kot je ponastavitev slogovne liste, ali eno za spletne pisave.
  • Javascript datoteka - Če spletno mesto vsebuje funkcije Javascript, bi jih bilo najbolje vključiti v svojo ločeno datoteko in ne vključiti v dokumente HTML.
  • Slike, pisave in ikone - Vključiti je treba tudi vse slike, uporabljene v predlogi. Morda boste želeli obdržati stvari, kot so ikone in ozadja, vendar boste morali druge slike nadomestnih znakov zamenjati s svojimi. Morda bodo vključene tudi nekatere pisave po meri.

Za razliko od večine drugih vrst predlog, na katere boste naleteli - pa naj bodo to Wordpress, Excel ali Predloge InDesign - Predloge CSS zahtevajo določeno količino tehničnega znanja.



Ni prijaznega vmesnika, v katerem bi jih lahko urejali, zato boste morali vedeti, kako se najti okoli dokumenta HTML samo zato, da dodate svojo vsebino. Za lastne prilagoditve potrebujete dostojno znanje o CSS.

icloud ne more naložiti podatkov o shrambi

Kaj iskati v predlogi CSS

Na izbiro je toliko brezplačnih predlog CSS. Kako torej veste, kateri je pravi za vas? Tu je nekaj stvari, na katere morate biti pozorni:





  • Oblikovanje - Očitno želite spletno mesto, ki izgleda lepo in odraža katero koli podobo, ki jo želite prikazati. Upoštevajte tudi, ali je predloga primerna za vaše potrebe tako zdaj kot v prihodnosti. Mnogi so namenjeni spletnim mestom z eno stranjo; nekatere so zasnovane za več strani. Če potrebujete slednje, razmislite, ali bi bilo bolje uporabiti CMS, kot je Wordpress.
  • Optimizirano za mobilne naprave - Uporaba mobilnega spleta je zdaj višja od namizne, zato je bistveno, da vaše spletno mesto pravilno deluje na pametnih telefonih. Vsaka spodobna predloga CSS mora uporabljati odzivno zasnovo, tako da spletno mesto odlično deluje na zaslonu katere koli velikosti. Če vaš izbranec ne, preklopite na tistega, ki to počne.
  • Dobro napisano - Prenesite predlogo in si oglejte kodo, preden jo uporabite. Biti mora čist, dobro strukturiran in enostaven za urejanje. Prav tako bi se moral zavedati SEO, s pravilno uporabo oznak naslova in naslovov.
  • Licenca - Preverite licenco za izbrano predlogo CSS. Na voljo je veliko pod licenco Creative Commons , vendar različne različice te licence določajo, ali lahko predlogo uredite, ali jo lahko uporabljate komercialno in ali morate pripisati zasluge prvotnemu oblikovalcu.
  • Dodatki - Nekateri razvijalci predlog CSS ponujajo svoje delo na 'freemium' osnovi. Predlogo dobite brezplačno, vendar lahko plačate dodatne prilagoditve, da bodo edinstvene za vaše spletno mesto.

Z vsem pojasnjenim si poglejmo najboljša mesta za iskanje brezplačnih predlog CSS.

1. Templated.co

Ta osupljiva zbirka več kot 800 CSS predlog vsebuje sloge za vsak razred spletnega mesta. Vsi so ustvarjeni posebej za spletno mesto, zato jih ne bi smeli videti nikjer drugje.





Vse predloge so odzivne in zgrajene s HTML5. So majhni in lahki, z dodatnimi funkcijami Javascript, kot so video svetlobna plošča ali učinki pomikanja, ki se uporabljajo le, če izkušnji dodajo resnično vrednost.

2. Styleshout.com

Styleshout ponuja široko paleto brezplačnih in vrhunskih predlog, ki so bile prve izdane pod licenco Creative Commons.

Brezplačne predloge pokrivajo široko paleto kategorij, od celotnih spletnih mest do strani Kmalu, in celo pogosto spregledane strani z napakami 404. Sami jih lahko prilagodite in prilagodite slogu obstoječega spletnega mesta ali pa plačate, da vam to naredi Styleshout.

3. HTML5Up.net

Ta super elegantna zbirka predlog je prav tako zelo priljubljena. Večina jih je bila prenesenih več sto tisoč krat, zato je enostavno razumeti, zakaj.

Poskrbljeno je za vse običajne kategorije spletnih mest, na primer blog in stran z izdelki, za fotografe pa je nekaj posebej lepih modelov, ki lahko pokažejo svoje delo. Osnovne predloge v slogu mreže so izjemno prilagodljive, medtem ko bolj bliskovite običajno uporabljajo Javascript precej močno, zato so morda manj primerne za vaše nastavitve.

Štiri. Freebiesbug.com

Kar količinsko manjka Freebiesbugu, več kot nadomesti po kakovosti. Spletno mesto, na katerem mladi razvijalci predstavljajo svoje sposobnosti, vključuje številne vrhunske modele.

Impresivna zbirka brezplačnih predlog je kot nalašč za agencije, fotografe, razvijalce aplikacij in druge ustvarjalce. Pakirana z učinki in animacijami Javascript ter CSS, lahko spletna mesta prilagodite, čeprav so pogosto tako lepa, da si jih morda ne želite.

Poleg tega Freebiesbug.com vključuje vse vrste brezplačnih virov za spletne oblikovalce, vključno s pisavami, založenimi fotografijami, skicami Illustratorja in datotekami PSD itd.

5. Free-CSS.com

Free-CSS.com je preprosto spletno mesto, ki v času pisanja ponuja približno 2503 brezplačnih predlog, poleg tega pa tudi veliko vrhunskih, če še vedno ne najdete tistega, kar iščete.

Ker jih je na izbiro toliko, se je težko odločiti za popolno zasnovo. Kakovost je na splošno dobra, čeprav 10-letni obstoj spletnega mesta pomeni, da še vedno gosti predloge, napisane v XHTML. Tem se boste želeli izogniti. Druga stvar je, da preverite licenco za izbrano predlogo. Vsi so brezplačni, nekateri pa so v javni lasti, nekateri Creative Commons in nekateri uporabljajo licenco za avtorja.

6. OS-Templates.com

28 strani brezplačnih predlog CSS, večinoma z uporabo sodobnih postavitev na osnovi mreže na eni strani. Če iščete preprosto, potem je to kraj za iskanje. Modeli so čisti, privlačni in jih je enostavno prilagoditi.

OS-Templates.com ponuja tudi veliko zbirko 'osnovnih predlog'. Te vam dajejo osnovno strukturo spletnega mesta v različnih priljubljenih shemah postavitve (dvo-stolpec, tri-stolpec itd.), Hkrati pa so popolnoma neoblikovane. Tako kot privzeta tema v Wordpressu tudi prazno platno omogoča, da spletno mesto spremenite v karkoli želite.

7. boag.online [Ni več na voljo]

Maglev je predloga za eno stran na eni strani, ki je lahko predogled v akciji na boag.online .

To je hitra in čista predloga, idealna za stran izdelka. Minimalistično zasnovo dopolnjuje le nekaj učinkov Jquery, ki vam pomagajo pri pomikanju med odseki. Preprosta postavitev deluje sama po sebi, vendar je tudi odlično izhodišče za vaše lastne prilagoditve.

8. Pixel Buda

Predloge Pixel Buddha niso omejene samo na spletna mesta, vključujejo jih tudi za e -poštne novice.

Kakorkoli, vsi so zasnovani s HTML5 in CSS3 in so odzivni, zato izgledajo odlično na kateri koli napravi. Poudarki vključujejo Howdy HTML, čudovito predlogo portfelja/življenjepisa in SOHO HTML, čudovito videti stran e -trgovine, ki vključuje izvorne datoteke PSD na vrhu HTML in CSS.

levi klik miške ne deluje pravilno

9. Templatemo.com

Skoraj 500 brezplačnih predlog je na voljo pri Templatemo. Nekateri izmed najboljših so tisti, ki se osvobodijo sistema omrežja v slogu Bootstrap in poskusijo nekaj drugačnega.

Večina predlog je preprostih in neobremenjenih, čeprav so funkcije, kot so svetlobne plošče in vrtiljaki z vsebinami, vključene tam, kjer so potrebne. Všeč nam je tudi dejstvo, da je več predlog privzeto nastavljenih za delo s kar šestimi stranmi. To olajša, če vaša vsebina ne ustreza vse pogostejši postavitvi ene strani.

10. Startbootstrap.com

Bootstrap je neverjetno priljubljen vmesni okvir, ki vam omogoča, da v kratkem času sestavite kakovostna spletna mesta. Vendar pa traja nekaj časa, da se naučite, in tu nastopi Start Bootstrap.

Ta zbirka brezplačnih odprtokodnih predlog je zgrajena z uporabo omrežnega sistema Bootstrap. Na izbiro je več kot 30. Nekatere so v celoti oblikovane in namenjene aplikacijam, spletnim dnevnikom in ciljnim stranem, druge pa so prazne postavitve, ki čakajo, da jih uredite.

enajst. Bootswatch.com

Za konec še nekaj bolj praktičnega. Bootswatch ponuja 16 odprtokodnih tem za oblikovanje spletnih mest, zgrajenih z Bootstrapom.

Postavitev spletnega mesta lahko ustvarite sami z uporabo Bootstrapa ali pa prenesete eno od praznih predlog iz Start Bootstrap. Bootswatch spreminja pisave, barve ozadja in slog gumbov, menijev in drugih elementov. Spletnemu mestu daje edinstven videz, hkrati pa ostaja zvest ultračistemu duhu Bootstrapa.

Z Bootstrapom je enostavno sestaviti osnovno spletno mesto, Bootswatch pa mu omogoča takojšnje poliranje.

Kako uporabljati predloge CSS

Na splošno obstajata dva načina uporabe predlog. Uporabite jih takšne, kot so, ali jih uporabite kot osnovo za lastno zasnovo.

Nevarnost pri uporabi predlog je, da na koncu dobite spletno mesto, ki je isto kot spletno mesto nekoga drugega. Izberite priljubljeno predlogo in lahko bi bilo dobesedno več deset tisoč enakih spletnih mest. To je glavni argument v prid njihovemu prilagajanju.

kako spremeniti kanal na usmerjevalniku

Predloge CSS so odlična bližnjica za izkušene spletne oblikovalce, ki imajo v mislih osnovno postavitev in jo želijo naravnost oblikovati.

Prav tako so kot nalašč za vsakogar, ki se šele spoznava na spletnem oblikovanju. Če se dobro spoznate s HTML in CSS, vendar še nimate zaupanja ali znanja za izdelavo spletnega mesta iz nič, potem predloga CSS služi kot enostaven način za pridobitev čudovitega spletnega mesta in odlično orodje za učenje.

Lahko ga obravnavate kot nedokončano delo. Začnite z izklop pisav in spreminjanje barvne sheme , sčasoma pa lahko preoblikujete obstoječe elemente, dodate nove itd. Ni boljšega načina, da se kaj naučite, kot s praktičnimi izkušnjami.

Ali pri izdelavi spletnih mest uporabljate predloge CSS? Katera so vaša najljubša mesta, kjer jih najdete? Delite svoje izkušnje in nasvete z nami v komentarjih.

Deliti Deliti Cvrkutati E-naslov Kako očistiti računalnik z operacijskim sistemom Windows z ukaznim pozivom

Če v računalniku z operacijskim sistemom Windows primanjkuje prostora za shranjevanje, jih očistite s temi hitrimi pripomočki ukaznega poziva.

Preberite Naprej
Sorodne teme
  • Programiranje
  • Oblikovanje spletnih strani
  • CSS
O avtorju Andy Betts(221 objavljenih člankov)

Andy je nekdanji tiskani novinar in urednik revij, ki o tehnologiji piše že 15 let. V tem času je prispeval k neštetim publikacijam in pripravil tekstopisje za velika tehnološka podjetja. Zagotovil je tudi strokovne komentarje za medije in gostil panele na industrijskih dogodkih.

Več od Andyja Bettsa

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite