11 CSS -i mallisaiti: ärge alustage nullist!

11 CSS -i mallisaiti: ärge alustage nullist!

Veebidisain on kättesaadavam kui kunagi varem, kuid professionaalse välimusega tulemuste saavutamiseks kulub siiski palju tööd - ja palju oskusi.





Õnneks ei pea iga kord nullist alustama. Internetis on saadaval tuhandeid tasuta CSS -malle, mis kõik hõlmavad kaasaegseid disainitrende ja -tehnoloogiaid. Saate neid kasutada algsel kujul või kohandada, et need oleksid teie enda jaoks sobivad.





Selles juhendis vaatame lähemalt CSS -i malle ja nende leidmise kohta.



Mis on CSS -mall?

CSS -mall ei sisalda ainult CSS -i: see annab teile kõik, mida vajate täielikult toimiva veebisaidi loomiseks. Selle allalaadimisel saate tavaliselt kausta, mis sisaldab järgmist:

  • HTML -failid - Saate HTML-faili veebisaidi iga lehe jaoks. See sisaldab näidisteksti ja pilte, mille peate oma sisuga asendama. Samuti peate suutma kohandada metaandmeid, mis on seotud näiteks saidi kirjeldusega.
  • CSS -fail - Tavaliselt saate ühe peamise CSS-faili, mis sisaldab kogu saidi stiili, lisaks kõik lisad, näiteks stiililehe lähtestamine või üks veebifonte.
  • Javascripti fail - Kui sait sisaldab Javascripti funktsioone, tuleks need ideaalis lisada oma eraldi faili, mitte lisada HTML-dokumentidesse.
  • Pildid, fondid ja ikoonid - Lisada tuleks ka kõik mallis kasutatud pildid. Võib -olla soovite alles jätta sellised asjad nagu ikoonid ja taustad, kuid peate asendama muud kohatäitepildid omaga. Kaasatud võivad olla ka mõned kohandatud fondid.

Erinevalt enamikust teist tüüpi mallidest - olgu see siis Wordpress, Excel või InDesigni mallid - CSS-mallid nõuavad teatud tehnilisi teadmisi.



Nende muutmiseks pole sõbralikku liidest, nii et peate oma sisu lisamiseks teadma vähemalt, kuidas HTML -dokumendis orienteeruda. Kohanduste tegemiseks vajate korralikke teadmisi CSS -ist.

kuidas kaitsta oma telefoni ilma ümbriseta

Mida CSS -mallist otsida

Valida on nii palju tasuta CSS -i malle. Niisiis, kuidas sa tead, mis sulle sobib? Siin on mõned asjad, millele tähelepanu pöörata.





  • Disain - Ilmselgelt soovite saiti, mis näeb kena välja ja peegeldab igat pilti, mida soovite kujutada. Kuid kaaluge ka seda, kas mall sobib teie vajadustele nii praegu kui ka tulevikus. Paljud on mõeldud üheleheküljelistele veebisaitidele; mõned on mõeldud mitmele lehele. Kui vajate viimast, kaaluge, kas teil oleks parem kasutada CMS -i nagu Wordpress.
  • Mobiilile optimeeritud - Mobiilse veebi kasutamine on nüüd suurem kui lauaarvuti, seega on oluline, et teie sait toimiks nutitelefonides korralikult. Iga korralik CSS -mall peaks kasutama tundlikku kujundust, et sait töötaks ideaalselt igas suuruses ekraanil. Kui teie valitud ei tee seda, vahetage sellele, mis seda teeb.
  • Hästi kirjutatud - Laadige mall alla ja vaadake kood enne selle kasutamist. See peaks olema puhas, hästi struktureeritud ja hõlpsasti redigeeritav. See peaks olema ka SEO-teadlik, kasutades pealkirja- ja pealkirjade silte õigesti.
  • Litsents - Kontrollige kindlasti valitud CSS-malli litsentsi. Paljud on saadaval Creative Commons litsentsi alusel , kuid selle litsentsi erinevad versioonid määravad, kas saate malli redigeerida, kas saate seda kaubanduslikult kasutada ja kas peate originaalkujundajat tunnustama.
  • Lisad - Mõned CSS-i mallide arendajad pakuvad oma tööd freemiumipõhiselt. Saate malli tasuta, kuid teil on võimalus maksta täiendavate kohanduste eest, et muuta see teie saidile ainulaadseks.

Selle kõigega seletatuna vaatame, millised on parimad kohad tasuta CSS -mallide leidmiseks.

1. Template.co

See uimastav enam kui 800 CSS -i mallide kogu sisaldab stiile iga veebisaidiklassi jaoks. Kõik need on loodud spetsiaalselt saidi jaoks, nii et te ei peaks neid kusagil mujal üles nägema.





Kõik mallid on tundlikud ja ehitatud HTML5 abil. Need on väikesed ja kerged ning neil on Javascripti lisafunktsioonid, nagu video valguskast või kerimisefektid, mida kasutatakse ainult seal, kus need lisavad kogemusele tõelist väärtust.

2. Styleshout.com

Styleshout pakub laias valikus nii tasuta kui ka lisatasu malle, millest esimene avaldati Creative Commons litsentsi alusel.

Tasuta mallid hõlmavad laias valikus kategooriaid alates täisveebisaitidest kuni peagi tulevate lehtedeni ja isegi sageli tähelepanuta jäetud 404 vealehte. Saate neid ise kohandada ja oma olemasoleva saidi stiiliga kohandada või maksta, et Styleshout selle teie eest ära teeks.

3. HTML5Up.net

See ülistiilne mallide kollektsioon on ka ülipopulaarne. Enamikku neist on sadu tuhandeid kordi alla laaditud ja on lihtne mõista, miks.

Toitlustatakse kõiki tavapäraseid saidikategooriaid, nagu ajaveeb ja tooteleht, ning fotograafidel on oma töö näitamiseks mõned eriti toredad kujundused. Põhilised ruudustiku stiilis mallid on äärmiselt kohandatavad, samas kui ägedamad kalduvad Javascripti üsna tugevalt kasutama, nii et need võivad teie kohanduste jaoks vähem sobida.

Neli. Freebiesbug.com

Mis Freebiesbugil puudub koguses, seda rohkem kui kvaliteeti. Sait, kus noored arendajad demonstreerivad oma oskusi, sisaldab palju tipptasemel esmaklassilisi kujundusi.

Saidi muljetavaldav tasuta mallide kogum sobib suurepäraselt agentuuridele, fotograafidele, rakenduste arendajatele ja muudele reklaamidele. Pakitud Javascripti ja CSS -i efektide ning animatsioonidega saate saite kohandada, kuigi need on sageli nii toredad, et te seda ei soovi.

Lisaks sisaldab Freebiesbug.com veebidisaineritele igasuguseid tasuta ressursse, sealhulgas fonte, stockfotosid, Illustratori visandeid ja PSD -faile ning palju muud.

5. Free-CSS.com

Free-CSS.com on lihtne veebisait, mis pakub kirjutamise ajal umbes 2503 tasuta malli ja ka palju lisatasu, kui te ikkagi ei leia otsitavat.

Kui valida on nii palju, võib täiusliku kujunduse leidmine olla pisut keeruline. Kvaliteet on üldiselt hea, kuigi saidi 10-aastane olemasolu tähendab, et sellel on endiselt XHTML-vormingus malle. Sa tahad neid vältida. Teine asi on veenduda, et kontrollite valitud malli litsentsi. Need on kõik tasuta, kuid mõned on üldkasutatavad, mõned Creative Commons ja mõned kasutavad autoripõhist litsentsi.

6. OS-Templates.com

28 lehekülge tasuta CSS-malle, mis kasutavad enamasti ühel lehel kaasaegseid ruudustikupõhiseid paigutusi. Kui sa tahad lihtsat, siis see on koht, kust otsida. Kujundused on puhtad, atraktiivsed ja hõlpsasti kohandatavad.

OS-Templates.com pakub ka suurt kogumikku põhimalle. Need annavad teile veebisaidi põhistruktuuri erinevates populaarsetes paigutusskeemides (kahe veeru, kolme veeru jne), olles samas täiesti stiilsed. Nagu Wordpressi vaiketeema kasutamine, võimaldab tühi lõuend muuta saidi kõigeks, mida soovite.

7. boag.online [pole enam saadaval]

Maglev on ühe lehega veebisaidi mall, mis võib olla eelvaateid tegevuses saidil boag.online .

See on kiire ja puhas mall, mis sobib ideaalselt tootelehe jaoks. Minimalistlikku disaini täiendavad vaid mõned Jquery efektid, mis aitavad teil sektsioonide vahel kerida. Lihtne paigutus töötab iseenesest, kuid see on ka suurepärane lähtepunkt teie kohandamiseks.

8. Pixel Buddha

Pixel Buddha mallid ei piirdu ainult veebisaitidega, vaid sisaldavad ka e -posti uudiskirjade jaoks.

Mõlemal juhul on need kõik loodud HTML5 ja CSS3 -ga ning on tundlikud, nii et näevad suurepärased välja igas seadmes. Tähtsündmuste hulka kuuluvad tere HTML, ilus portfelli/CV mall ja SOHO HTML, suurepärase väljanägemisega e -kaubanduse leht, mis sisaldab HTML -i ja CSS -i peal PSD -allikafaile.

miks mu Interneti -ühendus on ebastabiilne?

9. Templatemo.com

Templatemost on saadaval ligi 500 tasuta malli. Mõned parimad on need, mis vabanevad Bootstrap-stiilis võrgusüsteemist, et proovida midagi muud.

Enamik malle on lihtsad ja segamini, kuigi sellised funktsioonid nagu valguskastid ja sisukarussellid on lisatud sinna, kus neid vaja on. Meile meeldib ka see, et mitmed mallid on vaikimisi seadistatud töötama kuni kuue lehega. See muudab lihtsamaks, kui teie sisu ei sobi üha tavalisemaks üheleheküljeliseks paigutuseks.

10. Startbootstrap.com

Bootstrap on uskumatult populaarne kasutajaliidese raamistik, mis võimaldab teil kiiresti luua kvaliteetseid veebisaite. Sellegipoolest võtab õppimine natuke aega, see on koht, kus Start Bootstrap tuleb.

See tasuta avatud lähtekoodiga mallide kogu on loodud Bootstrapi võrgusüsteemi abil. Valikus on üle 30. Mõned neist on täielikult kavandatud ja mõeldud rakenduste, ajaveebide ja sihtlehtede jaoks, teised aga tühjad paigutused, mis ootavad teie stiilimist.

üksteist. Bootswatch.com

Lõpetuseks midagi praktilisemat. Bootswatch pakub Bootstrapi abil loodud stiilsaitidele 16 avatud lähtekoodiga teemat.

Bootstrapi abil saate oma saidi paigutuse ise koostada või ühe tühja malli alla laadida Start Bootstrapist. Bootswatch muudab nuppude, menüüde ja muude elementide fonte, taustavärve ja stiili. See annab teie saidile ainulaadse ilme, jäädes truuks Bootstrapi ülipuhtale eetole.

Bootstrapiga on lihtne põhiline veebisait kokku panna ja Bootswatch annab sellele koheselt lihvi.

Kuidas kasutada CSS -i malle

Laias laastus on malle kasutada kahel viisil. Kasutate neid nii, nagu need on, või kasutate neid oma disaini aluseks.

Mallide kasutamisel on oht, et jõuate veebisaidile, mis on identne kellegi teise omaga. Valige populaarne mall ja identseid saite võib olla sõna otseses mõttes kümneid tuhandeid. See on peamine argument nende kohandamise kasuks.

kes ei jälgi instagramis

CSS -mallid on suurepärane otsetee kogenud veebidisaineritele, kellel on põhiline paigutus silmas ja nad soovivad selle kujundamise juurde asuda.

Need sobivad ideaalselt ka kõigile, kes on veebidisaini jaoks uued. Kui tunnete end HTML -is ja CSS -is, kuid teil pole veel enesekindlust ega teadmisi saidi nullist üles ehitamiseks, on CSS -mall nii lihtne viis suurepärase väljanägemisega saidi saamiseks kui ka suurepärane õppevahend.

Saate seda käsitleda poolelioleva tööna. Alustage fondide väljalülitamine ja värviskeemi muutmine , ja aja jooksul saate olemasolevaid elemente ümber kujundada, uusi lisada jne. Pole paremat võimalust midagi õppida kui praktiline, praktiline kogemus.

Kas kasutate veebisaitide ehitamisel CSS -i malle? Millised on teie lemmikkohad nende leidmiseks? Jagage oma kogemusi ja näpunäiteid meiega kommentaarides.

Jaga Jaga Piiksuma E -post Kuidas Windowsi arvutit käsuviiba abil puhastada

Kui teie Windowsi arvutil on mäluruumi vähe, puhastage prügi nende kiirete käsuviiba utiliitide abil.

Loe edasi
Seotud teemad
  • Programmeerimine
  • Veebidisain
  • CSS
Autori kohta Andy Betts(Avaldatud 221 artiklit)

Andy on endine trükiajakirjanik ja ajakirjatoimetaja, kes on tehnoloogiast kirjutanud 15 aastat. Selle aja jooksul on ta andnud oma panuse lugematutesse väljaannetesse ja koostanud tekstikirjutamistöid suurtele tehnoloogiaettevõtetele. Samuti on ta andnud meediale asjatundlikke kommentaare ja võõrustanud tööstusüritustel paneele.

Veel Andy Bettsilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin