Home-theater-designers
Webdesign je přístupnější než kdy dřív, ale k dosažení profesionálně vypadajících výsledků je stále potřeba hodně práce - a spousta dovedností.
Naštěstí nemusíte pokaždé začínat od nuly. Na internetu jsou k dispozici tisíce bezplatných šablon CSS, všechny zahrnující moderní designové trendy a technologie. Můžete je použít v původní podobě nebo si je upravit tak, aby byly vlastní.
V této příručce se podrobněji podíváme na šablony CSS a kde je najdeme.
Co je šablona CSS?
Šablona CSS neobsahuje pouze CSS: poskytuje vše, co potřebujete k vytvoření plně funkčního webu. Když si jeden stáhnete, obvykle získáte složku obsahující následující:
- Soubory HTML - Ke každé stránce webu získáte soubor HTML. Bude obsahovat ukázkový text a obrázky, které budete muset nahradit vlastním obsahem. Budete také muset umět upravit metadata týkající se věcí, jako je popis webu.
- Soubor CSS - Obvykle získáte jeden hlavní soubor CSS, který obsahuje všechny styly pro web, plus jakékoli doplňky, jako je reset stylů nebo jeden pro webová písma.
- Soubor Javascript - Pokud web obsahuje funkce Javascriptu, měly by být ideálně zahrnuty do jejich vlastního samostatného souboru, nikoli začleněny do dokumentů HTML.
- Obrázky, písma a ikony - Měly by být zahrnuty také všechny obrázky použité v šabloně. Možná budete chtít ponechat věci jako ikony a pozadí, ale budete muset nahradit jiné zástupné obrázky svými vlastními. Součástí mohou být také některá vlastní písma.
Na rozdíl od většiny ostatních typů šablon, se kterými se setkáte - ať už jde o Wordpress, Excel nebo Šablony aplikace InDesign - Šablony CSS vyžadují určité množství technických znalostí.
Neexistuje žádné přátelské rozhraní, ve kterém je můžete upravovat, takže budete muset alespoň vědět, jak se v dokumentu HTML zorientovat, abyste mohli přidat svůj vlastní obsah. K vytváření vlastních přizpůsobení budete potřebovat slušnou znalost CSS.
jak zakázat mikrofon na telefonu Android
Co hledat v šabloně CSS
Na výběr je tolik bezplatných šablon CSS. Jak tedy poznáte, co je pro vás to pravé? Zde je několik věcí, na které si dát pozor:
- Design - Očividně chcete web, který vypadá hezky a odráží jakýkoli obrázek, který chcete vykreslit. Ale také zvažte, zda je šablona vhodná pro vaše potřeby nyní i v budoucnosti. Mnoho z nich je pro jednostránkové webové stránky; některé jsou určeny pro více stránek. Pokud to druhé potřebujete, zvažte, zda by pro vás nebylo lepší použít CMS jako Wordpress.
- Optimalizováno pro mobilní zařízení - Využití mobilního webu je nyní vyšší než u stolních počítačů, takže je důležité, aby váš web správně fungoval na chytrých telefonech. Každá slušná šablona CSS by měla používat responzivní design, aby web fungoval perfektně na libovolné velikosti obrazovky. Pokud váš vyvolený ne, přepněte na takový, který ano.
- Dobře napsáno - Stáhněte si šablonu a podívejte se na kód, než se odhodláte jej používat. Mělo by být čisté, dobře strukturované a snadno upravitelné. Mělo by také být SEO-vědomé, se správným použitím značek nadpisů a nadpisů.
- Licence - Nezapomeňte zkontrolovat licenci pro zvolenou šablonu CSS. Mnoho je k dispozici pod licencí Creative Commons , ale různé verze této licence určují, zda můžete šablonu upravovat, zda ji můžete používat komerčně a zda je třeba uvést původního návrháře.
- Doplňky - Někteří vývojáři šablon CSS nabízejí svou práci na bázi „freemium“. Šablonu získáte zdarma, ale máte možnost zaplatit za další přizpůsobení, aby byla jedinečná pro váš web.
Když je vše vysvětleno, podívejme se na nejlepší místa k nalezení bezplatných šablon CSS.
1. Templated.co
Tato ohromující kolekce více než 800 šablon CSS obsahuje styly pro všechny třídy webových stránek. Všechny jsou vytvořeny speciálně pro web, takže byste je neměli vidět nikde jinde.
Všechny šablony reagují a jsou vytvořeny ve formátu HTML5. Jsou malé a lehké, s dalšími funkcemi Javascriptu, jako je video lightbox nebo rolovací efekty, které se používají pouze tam, kde přidávají skutečnou hodnotu zážitku.
2. Styleshout.com
Styleshout nabízí širokou škálu bezplatných i prémiových šablon, dříve vydaných pod licencí Creative Commons.
Bezplatné šablony pokrývají širokou škálu kategorií, od úplných webových stránek po stránky Coming Soon, a dokonce i často přehlíženou chybovou stránku 404. Můžete si je přizpůsobit sami a přizpůsobit je stylu svého stávajícího webu, nebo můžete zaplatit, aby to Styleshout udělal za vás.
3. HTML5Up.net
Tato super stylová kolekce šablon je také velmi populární. Většina z nich byla stotisíckrát stažena a je snadné pochopit, proč.
Zajištěny jsou všechny obvyklé kategorie webů, jako blog a produktová stránka, a pro fotografy existuje několik obzvlášť pěkných návrhů, kterými se mohou pochlubit svou prací. Základní šablony ve stylu mřížky jsou extrémně přizpůsobitelné, zatímco ty bleskovější mají tendenci používat Javascript poměrně hojně, takže mohou být méně vhodné pro vaše vylepšení.
Čtyři. Freebiesbug.com
Co Freebiesbug postrádá v kvantitě, to více než kompenzuje v kvalitě. Stránka, kde mladí vývojáři předvádějí své dovednosti, obsahuje mnoho špičkových a prémiových návrhů.
Působivá sbírka bezplatných šablon tohoto webu je ideální pro agentury, fotografy, vývojáře aplikací a další kreativy. Díky efektům a animacím Javascriptu a CSS můžete weby přizpůsobit, i když jsou často tak pěkné, že byste možná nechtěli.
Freebiesbug.com navíc obsahuje všechny druhy bezplatných zdrojů pro webové designéry, včetně písem, fotografií, skic Illustratoru a souborů PSD a dalších.
5. Free-CSS.com
Free-CSS.com je webová stránka bez ozdůbek, která v době psaní nabízí asi 2503 šablon zdarma a spoustu prémiových, pokud stále nemůžete najít to, co hledáte.
Vzhledem k tomu, že je z čeho vybírat, může být trochu těžké usadit se na dokonalém designu. Kvalita je obecně dobrá, ačkoli 10letá existence webu znamená, že stále obsahuje šablony napsané v XHTML. Těmto se budete chtít vyhnout. Další věcí je zkontrolovat licenci pro zvolenou šablonu. Všechny jsou zdarma, ale některé jsou public domain, některé Creative Commons a některé používají licenci specifickou pro autora.
6. OS-Templates.com
28 stránek bezplatných šablon CSS, většinou využívajících moderní rozvržení založené na mřížce na jedné stránce. Pokud vám jde o jednoduchost, pak je toto místo, kam se podívat. Návrhy jsou čisté, atraktivní a snadno přizpůsobitelné.
OS-Templates.com také nabízí velkou sbírku „základních šablon“. Ty vám poskytnou základní strukturu pro web v různých populárních schématech rozvržení (dvousloupcové, třísloupcové atd.), Přičemž jsou zcela stylizované. Stejně jako použití výchozího motivu ve Wordpressu vám prázdné plátno umožňuje proměnit váš web v cokoli, co chcete.
7. boag.online [již není k dispozici]
Maglev je jednostránková webová šablona, která může být náhled v akci na boag.online .
Je to rychlá a čistá šablona, ideální pro produktovou stránku. Minimalistický design je umocněn pouze několika efekty Jquery, které vám pomohou procházet mezi sekcemi. Jednoduché rozložení funguje samo o sobě, ale také je skvělým výchozím bodem pro vaše vlastní úpravy.
8. Pixel Buddha
Šablony Pixel Buddha se neomezují pouze na webové stránky, obsahují také některé pro e -mailové zpravodaje.
Ať tak či onak, všechny jsou navrženy s HTML5 a CSS3 a reagují, takže vypadají skvěle na jakémkoli zařízení. Mezi nejdůležitější patří Howdy HTML, krásná šablona portfolia/životopisu a SOHO HTML, úžasně vypadající stránka elektronického obchodu, která obsahuje zdrojové soubory PSD nad HTML a CSS.
jak najít skryté kamery u vás doma
9. Templatemo.com
Na Templatemo je k dispozici téměř 500 bezplatných šablon. Některé z nejlepších jsou ty, které se vymanily ze systému mřížky ve stylu Bootstrap, aby zkusily něco jiného.
Většina šablon je jednoduchá a přehledná, i když funkce, jako jsou lightboxy a karusely obsahu, jsou zahrnuty tam, kde jsou potřeba. Také se nám líbí skutečnost, že několik šablon je ve výchozím nastavení nastaveno tak, aby fungovaly až se šesti stránkami. To usnadňuje, pokud váš obsah nevyhovuje stále běžnějšímu rozložení na jednu stránku.
10. Startbootstrap.com
Bootstrap je neuvěřitelně populární front-end framework, který vám umožní vytvářet webové stránky vysoké kvality za chvilku. Trvá to však trochu času na učení, což je místo, kde přichází Start Bootstrap.
Tato kolekce bezplatných šablon s otevřeným zdrojovým kódem je vytvořena pomocí mřížkového systému Bootstrap. Na výběr je více než 30. Některé jsou plně navrženy a určeny pro aplikace, blogy a vstupní stránky, zatímco jiné jsou prázdné rozvržení, které čekají na váš styl.
jedenáct. Bootswatch.com
Konečně něco trochu praktičtějšího. Bootswatch nabízí 16 open source motivů pro stylizaci webů vytvořených pomocí Bootstrap.
Rozvržení svého webu můžete buď vytvořit sami pomocí nástroje Bootstrap, nebo si stáhnout některou z prázdných šablon z nabídky Start Bootstrap. Bootswatch dělá změnu písem, barev pozadí a stylů pro tlačítka, nabídky a další prvky. Dává vašemu webu jedinečný vzhled a přitom zůstává věrný ultračistému étosu Bootstrap.
S Bootstrap je snadné sestavit základní webovou stránku a Bootswatch mu dodá okamžitý lesk.
Jak používat šablony CSS
Obecně lze říci, že existují dva způsoby použití šablon. Buď je používáte tak, jak jsou, nebo je použijete jako základ pro svůj vlastní design.
Nebezpečí při používání šablon je, že skončíte s webem, který je identický s webem někoho jiného. Vyberte si oblíbenou šablonu a identických stránek by mohlo být doslova desítky tisíc. Toto je hlavní argument pro jejich přizpůsobení.
jak odinstalovat aktualizace v systému Windows 10
Šablony CSS jsou skvělou zkratkou pro zkušené webové designéry, kteří mají na mysli základní rozvržení a chtějí se vrhnout přímo na jeho úpravu.
Jsou také ideální pro každého, kdo je nový ve webovém designu. Pokud se vyznáte v HTML a CSS, ale ještě nemáte důvěru nebo znalosti k vybudování webu od nuly, šablona CSS slouží jako snadný způsob, jak získat skvěle vypadající web, a také jako skvělý výukový nástroj.
Můžete to považovat za nedokončenou práci. Začněte tím přepínání písem a změna barevného schématu , a postupem času můžete předělat stávající prvky, přidávat nové atd. Neexistuje lepší způsob, jak se něco naučit, než prostřednictvím praktických, praktických zkušeností.
Používáte při vytváření webových stránek šablony CSS? Jaká jsou vaše oblíbená místa k jejich nalezení? Podělte se s námi o své zkušenosti a tipy v komentářích.
Podíl Podíl tweet E-mailem Jak vyčistit počítač se systémem Windows pomocí příkazového řádkuPokud má váš počítač se systémem Windows nedostatek úložného prostoru, vyčistěte nevyžádanou poštu pomocí těchto rychlých nástrojů příkazového řádku.
Číst dále Související témata- Programování
- Webový design
- CSS
Andy je bývalý novinář v tisku a redaktor časopisu, který píše o technologii 15 let. Za tu dobu přispěl k bezpočtu publikací a produkoval copywritingové práce pro velké technologické společnosti. Poskytl také odborný komentář pro média a hostoval panely na průmyslových akcích.
Více od Andy BettsPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru