11 CSS šablonų svetainių: nepradėkite nuo nulio!

11 CSS šablonų svetainių: nepradėkite nuo nulio!

Žiniatinklio dizainas yra labiau prieinamas nei bet kada, tačiau norint gauti profesionaliai atrodančius rezultatus, vis tiek reikia daug darbo ir daug įgūdžių.





Laimei, jums nereikia kiekvieną kartą pradėti nuo nulio. Internete galima rasti tūkstančius nemokamų CSS šablonų, kurie apima šiuolaikines dizaino tendencijas ir technologijas. Galite juos naudoti originalioje formoje arba tinkinti, kad jie taptų jūsų pačių.





Šiame vadove mes atidžiau pažvelgsime į CSS šablonus ir kur juos rasti.





Kas yra CSS šablonas?

CSS šablone yra ne tik CSS: jis suteikia jums viską, ko reikia norint sukurti visiškai veikiančią svetainę. Atsisiuntę paprastai gausite aplanką, kuriame yra:

  • HTML failai - Gausite HTML failą kiekvienam svetainės puslapiui. Jame bus teksto pavyzdys ir vaizdai, kuriuos turėsite pakeisti savo turiniu. Taip pat turėsite sugebėti koreguoti meta duomenis, susijusius su tokiais dalykais kaip svetainės aprašymas.
  • CSS failas - Paprastai gaunate vieną pagrindinį CSS failą, kuriame yra visas svetainės stilius, taip pat bet kokius priedus, pvz., Iš naujo nustatytą stiliaus lapą, arba vieną žiniatinklio šriftui.
  • „Javascript“ failas - Jei svetainėje yra „Javascript“ funkcijų, jos idealiu atveju turėtų būti įtrauktos į atskirą failą, o ne įtrauktos į HTML dokumentus.
  • Vaizdai, šriftai ir piktogramos - Taip pat turėtų būti įtraukti visi šablone naudojami vaizdai. Galbūt norėsite pasilikti tokius dalykus kaip piktogramos ir fonas, tačiau turėsite pakeisti kitus vietos rezervavimo vaizdus savo. Taip pat gali būti įtraukti kai kurie pasirinktiniai šriftai.

Skirtingai nuo daugelio kitų tipų šablonų, su kuriais susidursite - ar tai būtų „Wordpress“, „Excel“, ar „InDesign“ šablonai - CSS šablonams reikia tam tikrų techninių žinių.



Nėra draugiškos sąsajos, kurioje būtų galima juos redaguoti, todėl turėsite bent žinoti, kaip orientuotis HTML dokumente, kad galėtumėte pridėti savo turinį. Norėdami patys pritaikyti, jums reikės tinkamų CSS žinių.

kaip rasti savo telefono numerį

Ko ieškoti CSS šablone

Yra tiek daug nemokamų CSS šablonų, iš kurių galima rinktis. Taigi, kaip jūs žinote, kas jums tinka? Štai keletas dalykų, į kuriuos reikia atkreipti dėmesį:





  • Dizainas - Akivaizdu, kad norite, kad svetainė atrodytų gražiai ir atspindėtų bet kokį vaizdą, kurį norite pavaizduoti. Tačiau taip pat pagalvokite, ar šablonas tinka jūsų poreikiams tiek dabar, tiek ateityje. Daugelis jų yra skirtos vieno puslapio svetainėms; kai kurie yra skirti keliems puslapiams. Jei jums reikia pastarosios, pagalvokite, ar jums geriau būtų naudoti tokią TVS kaip „Wordpress“.
  • Optimizuota mobiliesiems - Dabar mobilusis žiniatinklis naudojamas daugiau nei darbalaukyje, todėl labai svarbu, kad jūsų svetainė tinkamai veiktų išmaniuosiuose telefonuose. Bet koks padorus CSS šablonas turėtų būti pritaikytas, kad svetainė puikiai veiktų bet kokio dydžio ekrane. Jei jūsų pasirinktas ne, perjunkite į tą, kuris tai daro.
  • Gerai parašyta - Atsisiųskite šabloną ir pažvelkite į kodą prieš įsipareigodami jį naudoti. Jis turėtų būti švarus, gerai suplanuotas ir lengvai redaguojamas. Ji taip pat turėtų žinoti SEO, teisingai naudojant pavadinimo ir antraštės žymas.
  • Licencija - Būtinai patikrinkite pasirinkto CSS šablono licenciją. Yra daug pagal „Creative Commons“ licenciją , tačiau skirtingos šios licencijos versijos lemia, ar galite redaguoti šabloną, ar galite jį naudoti komerciniais tikslais ir ar jums reikia pripažinti originalų dizainerį.
  • Priedai - Kai kurie CSS šablonų kūrėjai siūlo savo darbą „freemium“ pagrindu. Šabloną gaunate nemokamai, tačiau turite galimybę sumokėti už papildomus tinkinimus, kad jis taptų unikalus jūsų svetainėje.

Su visa tai paaiškinta, pažvelkime į geriausias vietas, kur rasti nemokamus CSS šablonus.

1. Template.co

Šioje nuostabioje daugiau nei 800 CSS šablonų kolekcijoje yra kiekvienos svetainės klasės stilių. Visi jie sukurti specialiai svetainei, todėl niekur kitur jų nematyti.





Visi šablonai yra reaguojantys ir sukurti naudojant HTML5. Jie yra nedideli ir lengvi, su papildomomis „Javascript“ funkcijomis, pvz., Vaizdo įrašo „lightbox“ arba slinkties efektais, naudojami tik ten, kur jie suteikia tikros vertės patirčiai.

2. Styleshout.com

„Styleshout“ siūlo daugybę nemokamų ir aukščiausios kokybės šablonų, išleistų pagal „Creative Commons“ licenciją.

Nemokami šablonai apima daugybę kategorijų - nuo pilnų svetainių iki netrukus pasirodysiančių puslapių ir net dažnai nepastebimo 404 klaidų puslapio. Galite patys juos pritaikyti ir pritaikyti prie esamos svetainės stiliaus, arba galite sumokėti, kad „Styleshout“ tai padarytų už jus.

3. HTML5Up.net

Ši itin stilinga šablonų kolekcija taip pat yra labai populiari. Dauguma jų buvo atsisiųsti šimtus tūkstančių kartų, ir nesunku suprasti, kodėl.

Visos įprastos svetainių kategorijos, pavyzdžiui, tinklaraštis ir produktų puslapis, yra pritaikytos, o fotografams yra keletas ypač gražių dizainų, skirtų parodyti savo darbą. Pagrindiniai tinklelio stiliaus šablonai yra labai pritaikomi, o žaibiškesni paprastai naudoja „Javascript“ gana stipriai, todėl gali būti mažiau tinkami jūsų pakeitimams.

Keturi. Freebiesbug.com

Tai, ko „Freebiesbug“ trūksta kiekiu, daugiau nei kompensuoja kokybė. Svetainė, kurioje jauni kūrėjai demonstruoja savo įgūdžius, apima daugybę aukščiausios klasės aukščiausios klasės dizainų.

Įspūdinga svetainės nemokamų šablonų kolekcija puikiai tinka agentūroms, fotografams, programų kūrėjams ir kitiems skelbimams. Supakuotas su „JavaScript“ ir CSS efektais bei animacija, galite tinkinti svetaines, nors jos dažnai būna tokios gražios, kad galbūt to nenorėtumėte.

Be to, „Freebiesbug.com“ apima visų rūšių nemokamus žiniatinklio dizainerių išteklius, įskaitant šriftus, atsargines nuotraukas, „Illustrator“ eskizus ir PSD failus ir dar daugiau.

5. Free-CSS.com

„Free-CSS.com“ yra paprasta svetainė, kuri rašymo metu siūlo apie 2503 nemokamus šablonus ir daugybę aukščiausios kokybės šablonų, jei vis tiek negalite rasti to, ko ieškote.

Pasirinkus tiek daug, gali būti šiek tiek sunku nuspręsti dėl tobulo dizaino. Kokybė paprastai yra gera, nors 10 metų egzistuojanti svetainė reiškia, kad joje vis dar yra šablonų, parašytų XHTML. Norėsite jų išvengti. Kitas dalykas - įsitikinkite, kad patikrinote pasirinkto šablono licenciją. Visi jie yra nemokami, tačiau kai kurie yra viešai prieinami, kai kurie - „Creative Commons“, o kai kurie naudoja autoriaus licenciją.

6. OS-Templates.com

28 puslapiai nemokamų CSS šablonų, dažniausiai naudojant šiuolaikinius tinklelio maketus viename puslapyje. Jei siekiate paprasto, tai čia yra vieta, kur reikia ieškoti. Dizainas yra švarus, patrauklus ir lengvai pritaikomas.

OS-Templates.com taip pat siūlo didelę „pagrindinių šablonų“ kolekciją. Tai suteikia jums pagrindinę svetainės struktūrą pagal įvairias populiarias išdėstymo schemas (dviejų stulpelių, trijų stulpelių ir tt), tuo pat metu visiškai nestandartines. Kaip ir naudojant numatytąją „Wordpress“ temą, tuščia drobė leidžia jūsų svetainę paversti viskuo, ko norite.

7. boag.online [nebegalima]

„Maglev“ yra vieno puslapio svetainės šablonas, kuris gali būti peržiūrėtas veikiant „boag.online“ .

Tai greitas, švarus šablonas, idealiai tinkantis produkto puslapiui. Minimalistinį dizainą papildo tik keli „Jquery“ efektai, kurie padės slinkti tarp sekcijų. Paprastas išdėstymas veikia savaime, tačiau tai taip pat yra puikus atspirties taškas jūsų pritaikymui.

8. Pixel Buddha

„Pixel Buddha“ šablonai neapsiriboja tik svetainėmis, jie taip pat apima naujienlaiškius el. Paštu.

Bet kokiu atveju, jie visi sukurti naudojant HTML5 ir CSS3 ir reaguoja, todėl puikiai atrodo bet kuriame įrenginyje. Svarbiausi dalykai yra „Sveiki HTML“, gražus portfelio/gyvenimo aprašymo šablonas ir „SOHO HTML“ - nuostabiai atrodantis el. Prekybos puslapis, kuriame yra šaltinio PSD failai, esantys HTML ir CSS.

kaip perkelti duomenis iš ps4 į ps4

9. Templatemo.com

Iš „Templatemo“ galima įsigyti beveik 500 nemokamų šablonų. Kai kurie iš geriausių yra tie, kurie išsivaduoja iš „Bootstrap“ stiliaus tinklelio sistemos ir bando ką nors kita.

Dauguma šablonų yra paprasti ir neperkrauti, nors tokios funkcijos kaip šviesos dėžės ir turinio karuselės yra įtrauktos ten, kur jų reikia. Mums taip pat patinka tai, kad keli šablonai yra nustatyti taip, kad pagal numatytuosius nustatymus veiktų net šešiais puslapiais. Tai palengvina, jei jūsų turinys neatitinka vis dažniau pasitaikančio vieno puslapio išdėstymo.

10. Startbootstrap.com

„Bootstrap“ yra neįtikėtinai populiari sąsaja, leidžianti greitai sukurti aukštos kokybės svetaines. Tačiau norint išmokti reikia šiek tiek laiko, o tai yra „Start Bootstrap“.

Ši nemokamų atvirojo kodo šablonų kolekcija sukurta naudojant „Bootstrap“ tinklelio sistemą. Galima rinktis iš daugiau nei 30. Kai kurie yra visiškai suprojektuoti ir skirti programoms, tinklaraščiams ir nukreipimo puslapiams, o kiti yra tušti išdėstymai, laukiantys jūsų stiliaus.

vienuolika. Bootswatch.com

Galiausiai, kažkas šiek tiek praktiškesnio. „Bootswatch“ siūlo 16 atvirojo kodo temų stiliaus svetainėms, sukurtoms naudojant „Bootstrap“.

Galite patys sukurti savo svetainės išdėstymą naudodami „Bootstrap“ arba atsisiųsti vieną iš tuščių šablonų iš „Start Bootstrap“. „Bootswatch“ pakeičia mygtukų, meniu ir kitų elementų šriftus, fono spalvas ir stilių. Tai suteikia jūsų svetainei nepakartojamą išvaizdą ir išlaiko „Bootstrap“ itin švarų principą.

Su „Bootstrap“ lengva surinkti pagrindinę svetainę, o „Bootswatch“ suteikia jai tiesioginį šlifavimą.

Kaip naudoti CSS šablonus

Apskritai šablonus galima naudoti dviem būdais. Jūs arba naudojate juos tokius, kokie yra, arba naudojate juos kaip savo dizaino pagrindą.

Naudojant šablonus kyla pavojus, kad atsidursite svetainėje, kuri yra identiška kažkieno kitai. Pasirinkite populiarų šabloną ir pažodžiui gali būti dešimtys tūkstančių identiškų svetainių. Tai yra pagrindinis jų pritaikymo argumentas.

kaip atidaryti xbox one s

CSS šablonai yra puiki nuoroda patyrusiems žiniatinklio dizaineriams, turintiems omenyje pagrindinį išdėstymą ir norintiems greitai pereiti prie jo formavimo.

Jie taip pat puikiai tinka visiems, pradedantiems kurti interneto svetaines. Jei žinote, kaip naudotis HTML ir CSS, bet dar neturite pasitikėjimo ar žinių kurti svetainę nuo nulio, CSS šablonas yra ir paprastas būdas sukurti puikiai atrodančią svetainę, ir nuostabi mokymosi priemonė.

Galite tai traktuoti kaip nebaigtą darbą. Pradėkite nuo išjungti šriftus ir keičiant spalvų schemą , o laikui bėgant galite pertvarkyti esamus elementus, pridėti naujų ir pan. Nėra geresnio būdo ko nors išmokti, kaip per praktinę praktinę patirtį.

Ar kurdami svetaines naudojate CSS šablonus? Kokios yra jūsų mėgstamiausios vietos jų rasti? Pasidalinkite savo patirtimi ir patarimais su mumis komentaruose.

Dalintis Dalintis „Tweet“ Paštu Kaip išvalyti „Windows“ kompiuterį naudojant komandinę eilutę

Jei jūsų „Windows“ kompiuteryje trūksta saugyklos vietos, išvalykite šiukšles naudodami šias greitas komandų eilutės priemones.

Skaityti toliau
Susijusios temos
  • Programavimas
  • Interneto svetainės dizainas
  • CSS
Apie autorių Andy Bettsas(Paskelbti 221 straipsniai)

Andy yra buvęs spaudos žurnalistas ir žurnalo redaktorius, kuris apie technologijas rašo 15 metų. Per tą laiką jis prisidėjo prie daugybės publikacijų ir sukūrė tekstų rašymo darbus didelėms technologijų įmonėms. Jis taip pat pateikė ekspertų komentarus žiniasklaidai ir vedė grupes pramonės renginiuose.

Daugiau iš Andy Betts

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia