Home-theater-designers
Webový design je prístupnejší než kedykoľvek predtým, ale na dosiahnutie profesionálne vyzerajúcich výsledkov je stále potrebné veľa práce - a veľa zručností.
Našťastie nemusíte zakaždým začínať od nuly. Na internete sú k dispozícii tisíce bezplatných šablón CSS, ktoré zahŕňajú všetky trendy a technológie moderného dizajnu. Môžete ich použiť v pôvodnej podobe alebo si ich prispôsobiť tak, aby boli vlastné.
V tejto príručke sa bližšie pozrieme na šablóny CSS a na to, kde ich nájsť.
Čo je to šablóna CSS?
Šablóna CSS neobsahuje iba CSS: poskytuje vám všetko, čo potrebujete na vytvorenie plne funkčnej webovej stránky. Keď si jeden stiahnete, zvyčajne získate priečinok obsahujúci nasledujúce položky:
- Súbory HTML - Na každú stránku webu dostanete súbor HTML. Bude obsahovať ukážkový text a obrázky, ktoré budete musieť nahradiť vlastným obsahom. Budete tiež musieť byť schopní upraviť metaúdaje týkajúce sa napríklad popisu webu.
- Súbor CSS - Obvykle dostanete jeden hlavný súbor CSS, ktorý obsahuje všetky štýly webu, plus všetky doplnky, ako napríklad resetovací hárok štýlov alebo súbor pre webové písma.
- Súbor Javascript - Ak stránka obsahuje funkcie Javascriptu, mali by byť v ideálnom prípade zaradené do ich vlastného samostatného súboru, a nie do dokumentov HTML.
- Obrázky, písma a ikony - Mali by byť zahrnuté aj všetky obrázky použité v šablóne. Možno budete chcieť ponechať napríklad ikony a pozadia, ale ostatné zástupné obrázky budete musieť nahradiť svojimi vlastnými. Môžu byť zahrnuté aj niektoré vlastné písma.
Na rozdiel od väčšiny ostatných typov šablón, s ktorými sa stretnete - či už ide o Wordpress, Excel alebo Šablóny aplikácie InDesign - Šablóny CSS vyžadujú určité množstvo technických znalostí.
Neexistuje žiadne priateľské rozhranie, v ktorom by ste ich mohli upravovať, takže budete musieť aspoň vedieť, ako sa v dokumente HTML zorientovať, aby ste mohli pridať vlastný obsah. Na to, aby ste si mohli vytvárať vlastné prispôsobenia, budete potrebovať slušnú znalosť CSS.
ako odstrániť aplikácie v inteligentnej televízii Samsung
Čo hľadať v šablóne CSS
Na výber je toľko bezplatných šablón CSS. Ako teda zistíte, čo je pre vás to pravé? Tu je niekoľko vecí, na ktoré si dajte pozor:
- Dizajn - Očividne chcete web, ktorý vyzerá pekne a odráža akýkoľvek obrázok, ktorý chcete zobraziť. Ale tiež zvážte, či je šablóna vhodná pre vaše potreby teraz aj v budúcnosti. Mnohé sú určené pre jednostránkové webové stránky; niektoré sú navrhnuté pre viac strán. Ak to druhé potrebujete, zvážte, či by nebolo lepšie, keby ste namiesto toho použili CMS ako Wordpress.
- Optimalizované pre mobilné zariadenia - Využitie mobilného webu je teraz vyššie ako pri počítači, preto je nevyhnutné, aby váš web správne fungoval na smartfónoch. Každá slušná šablóna CSS by mala používať responzívny dizajn, aby stránka fungovala perfektne na ľubovoľnej veľkosti obrazovky. Ak váš vyvolený nie, prepnite na taký, ktorý áno.
- Dobre napísané - Stiahnite si šablónu a pozrite sa na kód, než sa ho rozhodnete používať. Malo by byť čisté, dobre štruktúrované a ľahko upraviteľné. Malo by byť tiež vedomé SEO a správne používať značky nadpisov a nadpisov.
- Licencia - Nezabudnite skontrolovať licenciu pre zvolenú šablónu CSS. Mnoho je k dispozícii pod licenciou Creative Commons , ale rôzne verzie tejto licencie rozhodujú o tom, či môžete šablónu upravovať, či ju môžete používať na komerčné účely a či je potrebné uznať pôvodného dizajnéra za uznanie.
- Doplnky - Niektorí vývojári šablón CSS ponúkajú svoju prácu na báze „freemium“. Šablónu získate zadarmo, ale máte možnosť zaplatiť za ďalšie prispôsobenia, aby bola jedinečná pre váš web.
Po všetkom, čo je vysvetlené, pozrime sa na najlepšie miesta na nájdenie bezplatných šablón CSS.
1. Templated.co
Táto ohromujúca zbierka viac ako 800 šablón CSS obsahuje štýly pre všetky triedy webových stránok. Všetky sú vytvorené špeciálne pre tento web, takže by ste ich nemali vidieť zbierať nikde inde.
Všetky šablóny sú responzívne a sú postavené v jazyku HTML5. Sú malé a ľahké, s extra funkciami Javascript, ako napríklad video lightbox alebo rolovací efekt, ktoré sa používajú iba tam, kde prinášajú skutočnú hodnotu pre zážitok.
2. Styleshout.com
Styleshout ponúka veľkú škálu bezplatných aj prémiových šablón, pričom prvá z nich bola vydaná pod licenciou Creative Commons.
Bezplatné šablóny pokrývajú širokú škálu kategórií, od úplných webových stránok po stránky Coming Soon, a dokonca aj často prehliadanú chybovú stránku 404. Môžete si ich prispôsobiť sami a prispôsobiť ich štýlu svojho existujúceho webu, alebo môžete zaplatiť za to, aby to Styleshout urobil za vás.
3. HTML5Up.net
Táto super štýlová zbierka šablón je tiež veľmi populárna. Väčšina z nich bola stiahnutá stovky tisíc krát a je ľahké pochopiť, prečo.
Zabezpečené sú všetky obvyklé kategórie stránok, ako napríklad stránka blogu a produktu, a existuje niekoľko obzvlášť pekných návrhov, ktorými môžu fotografi predviesť svoju prácu. Základné šablóny v štýle mriežky sú extrémne prispôsobiteľné, zatiaľ čo tie svetlejšie používajú Javascript pomerne často, takže sa môžu menej hodiť na vaše vylepšení.
Štyri. Freebiesbug.com
To, čo Freebiesbug chýba v množstve, viac ako v kvalite. Stránka, kde mladí vývojári predvádzajú svoje schopnosti, obsahuje mnoho špičkových a prémiových návrhov.
Pôsobivá zbierka bezplatných šablón stránky je ideálna pre agentúry, fotografov, vývojárov aplikácií a ďalšie kreatívy. Stránky sú nabité efektmi a animáciami Javascript a CSS a môžete si ich prispôsobiť, aj keď sú často také pekné, že by ste možno nechceli.
Freebiesbug.com navyše obsahuje všetky druhy bezplatných zdrojov pre webových dizajnérov, vrátane písiem, fotografií, skíc Illustratora a súborov PSD a ďalších.
5. Free-CSS.com
Free-CSS.com je nenáročná webová stránka, ktorá v čase písania článku ponúka asi 2503 bezplatných šablón a veľa prémiových, pre prípad, že stále nemôžete nájsť to, čo hľadáte.
Keďže je z čoho vyberať, môže byť trochu ťažké dohodnúť sa na perfektnom dizajne. Kvalita je vo všeobecnosti dobrá, aj keď 10-ročná existencia stránky znamená, že stále obsahuje šablóny napísané v XHTML. Týmto sa budete chcieť vyhnúť. Druhá vec je uistiť sa, že ste skontrolovali licenciu pre zvolenú šablónu. Všetky sú bezplatné, ale niektoré sú voľne dostupné, niektoré Creative Commons a niektoré používajú licenciu špecifickú pre autora.
6. OS-Templates.com
28 strán bezplatných šablón CSS, väčšinou s použitím moderných rozložení založených na mriežke na jednej stránke. Ak vám ide o jednoduchosť, potom je toto miesto, kde sa musíte pozrieť. Návrhy sú čisté, atraktívne a ľahko prispôsobiteľné.
OS-Templates.com ponúka tiež veľkú zbierku „základných šablón“. Poskytujú vám základnú štruktúru webových stránok v rôznych populárnych schémach rozloženia (dvojstĺpcové, trojstĺpcové atď.), Pričom sú úplne neštylizované. Rovnako ako používanie predvolenej témy v programe Wordpress, prázdne plátno vám umožňuje zmeniť váš web na čokoľvek, čo chcete.
7. boag.online [Už nie je k dispozícii]
Maglev je jednostránková webová šablóna, ktorá môže byť ukážka v akcii na boag.online .
Je to rýchla a čistá šablóna, ideálna pre stránku produktu. Minimalistický dizajn je vylepšený iba o niekoľko efektov Jquery, ktoré vám pomôžu prechádzať medzi sekciami. Jednoduché rozloženie funguje samo o sebe, ale predstavuje aj skvelý východiskový bod pre vaše vlastné prispôsobenia.
8. Pixel Buddha
Šablóny Pixel Buddha sa neobmedzujú iba na webové stránky, obsahujú ich aj pre e -mailové bulletiny.
Tak či onak, všetky sú navrhnuté s HTML5 a CSS3 a reagujú, takže vyzerajú skvele na akomkoľvek zariadení. Medzi najdôležitejšie patrí Howdy HTML, krásna šablóna portfólia/životopisu a SOHO HTML, úžasne vyzerajúca stránka elektronického obchodu, ktorá obsahuje zdrojové súbory PSD v hornej časti HTML a CSS.
náhodné vyskakovacie okná na telefóne s Androidom
9. Templatemo.com
Na Templatemo je k dispozícii takmer 500 bezplatných šablón. Niektoré z najlepších sú tie, ktoré sa vymania z mriežkového systému v štýle Bootstrap a vyskúšajú niečo iné.
Väčšina šablón je jednoduchá a prehľadná, aj keď funkcie, ako sú lightboxy a karusely obsahu, sú zahrnuté tam, kde sú potrebné. Páči sa nám tiež skutočnosť, že niekoľko šablón je predvolene nastavených na prácu až so šiestimi stranami. Je to jednoduchšie, ak váš obsah nevyhovuje stále bežnejšiemu rozloženie na jednu stránku.
10. Startbootstrap.com
Bootstrap je neuveriteľne populárny front-endový rámec, ktorý vám umožní rýchlo vytvoriť webové stránky vysokej kvality. Naučiť sa to však vyžaduje trochu času. Na to príde Start Bootstrap.
Táto zbierka bezplatných šablón s otvoreným zdrojovým kódom je vytvorená pomocou mriežkového systému Bootstrap. Na výber je viac ako 30. Niektoré sú úplne navrhnuté a určené pre aplikácie, blogy a vstupné stránky, zatiaľ čo iné sú prázdne rozloženia, ktoré čakajú na váš štýl.
jedenásť. Bootswatch.com
Konečne niečo praktickejšie. Bootswatch ponúka 16 tém s otvoreným zdrojovým kódom na štýl stránok vytvorených pomocou programu Bootstrap.
Rozloženie svojho webu môžete vytvoriť buď sami pomocou programu Bootstrap, alebo si stiahnuť jednu z prázdnych šablón z programu Start Bootstrap. Bootswatch robí zmenu písma, farieb pozadia a štýlu tlačidiel, ponúk a ďalších prvkov. Dodá vašim stránkam jedinečný vzhľad, pričom zostane verný ultračistému étosu spoločnosti Bootstrap.
S Bootstrap je ľahké zostaviť základnú webovú stránku a Bootswatch jej dáva okamžitý lesk.
Ako používať šablóny CSS
Všeobecne povedané, existujú dva spôsoby použitia šablón. Buď ich použijete tak, ako sú, alebo ich použijete ako základ pre svoj vlastný dizajn.
Nebezpečenstvo pri používaní šablón je, že skončíte s webom, ktorý je identický s webom niekoho iného. Vyberte si obľúbenú šablónu a rovnakých stránok môže byť doslova desaťtisíce. Toto je hlavný argument v prospech ich prispôsobenia.
ako vkladať guľky v programe excel
Šablóny CSS sú skvelou skratkou pre skúsených webových dizajnérov, ktorí majú na mysli základné rozloženie a chcú ihneď začať s jeho úpravou.
Sú tiež perfektné pre každého, kto je nový vo webdizajne. Ak sa orientujete v HTML a CSS, ale ešte nemáte dôveru alebo znalosti na vybudovanie webu od začiatku, šablóna CSS slúži ako ľahký spôsob, ako získať skvelo vyzerajúci web, tak aj ako úžasný učebný nástroj.
Môžete to považovať za nedokončenú prácu. Začnite tým, vypínanie písiem a zmena farebnej schémy , a postupom času môžete redizajnovať existujúce prvky, pridávať nové a podobne. Neexistuje lepší spôsob, ako sa niečo naučiť, ako prostredníctvom praktických skúseností.
Používate pri vytváraní webových stránok šablóny CSS? Aké sú vaše obľúbené miesta na ich nájdenie? Podeľte sa s nami o svoje skúsenosti a tipy v komentároch.
zdieľam zdieľam Tweet E -mail Ako vyčistiť počítač so systémom Windows pomocou príkazového riadkaAk má váš počítač so systémom Windows nedostatok úložného priestoru, odstráňte nepotrebné informácie pomocou týchto rýchlych nástrojov príkazového riadka.
Čítajte ďalej Súvisiace témy- Programovanie
- Vzhľad stránky
- CSS
Andy je bývalý printový novinár a redaktor časopisov, ktorý píše o technológiách 15 rokov. Za ten čas prispel k nespočetnému množstvu publikácií a produkoval texty pre veľké technologické spoločnosti. Poskytol tiež odborné komentáre pre médiá a hostil panely na priemyselných podujatiach.
Viac od Andyho Bettsaprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber