S vývojem tolika programovacích, stylových a značkovacích jazyků je učení se webovému designu stále komplikovanější než kdy dříve. Naštěstí je k dispozici spousta nástrojů, které vám pomohou začít. Podívejte se na několik základních zdrojů, jako jsou online návody nebo aktuální kniha o webdesignu. Jakmile budete připraveni začít, začněte zvládnutím základů HTML a CSS. Pak můžete začít zkoumat pokročilejší jazyky webového designu, jako je JavaScript!
Kroky
Metoda 1 ze 4: Vyhledání zdrojů pro návrh webu
Krok 1. Podívejte se online na kurzy a návody pro web design
Internet je plný podrobných informací o webdesignu a spousta z nich je volně dostupná. Můžete začít tím, že se zúčastníte bezplatných online kurzů na Udemy nebo CodeCademy, nebo se připojíte ke komunitě kódujících jako freeCodeCamp. Na YouTube můžete také najít video návody k webdesignu.
- Pokud přesně víte, co hledáte, zkuste vyhledat pomocí konkrétních výrazů (např. „Výběr tříd v kurzu CSS“).
- Pokud jste začátečník bez zkušeností s webovým designem, začněte tím, že se seznámíte se základy kódování v HTML a CSS.
Krok 2. Podívejte se do kurzu na místní škole nebo univerzitě
Pokud navštěvujete vysokou školu nebo univerzitu, obraťte se na oddělení počítačové vědy vaší školy nebo se podívejte do katalogu kurzů a zjistěte, zda jsou k dispozici nějaké kurzy webdesignu. Pokud nejste ve škole, zkontrolujte, zda některé vysoké školy nebo univerzity ve vašem okolí nenabízejí kurzy dalšího vzdělávání ve webovém designu.
Některé univerzity nabízejí online kurzy webového designu, které jsou otevřené každému, kdo se chce zaregistrovat. Na webových stránkách, jako je Coursera.org, najdete bezplatné nebo dostupné kurzy webového designu vedené univerzitními učiteli
Krok 3. Získejte nějaké knihy o designu z knihkupectví nebo knihovny
Dobrá kniha o webdesignu může být neocenitelnou referencí, když se učíte a uplatňujete své řemeslo. Hledejte aktuální knihy o obecném webdesignu nebo konkrétních formátech kódování a jazycích, které byste se chtěli naučit.
Čtení časopisů a blogových článků o webdesignu je také dobrým způsobem, jak se naučit nové techniky, získat inspiraci a držet krok s nejnovějšími trendy
Krok 4. Stáhněte si nebo zakupte nějaký software pro webový design
Dobrý software pro webový design vám může pomoci vytvářet weby efektivněji a efektivněji a také vám pomůže naučit se podrobnosti o používání kódování, skriptování a dalších klíčových prvků návrhu. Můžete těžit z používání nástrojů, jako jsou:
- Programy pro grafický design, jako je Adobe Photoshop, GIMP nebo Sketch.
- Nástroje pro vytváření webových stránek, jako jsou WordPress, Chrome DevTools nebo Adobe Dreamweaver.
- Software FTP pro přenos hotových souborů na váš server.
Krok 5. Najděte si nějaké šablony webových stránek, se kterými si budete hrát, jak začnete
Na používání šablon není nic špatného, když se naučíte základy webdesignu. Vyhledejte šablony webových stránek, které se vám líbí, a podrobně se podívejte na kód, abyste získali představu o tom, jak návrhář sestavil stránku. Můžete také experimentovat se změnou kódu a přidáním vlastních prvků do šablony.
Začněte vyhledáním bezplatných šablon webových stránek nebo experimentujte se šablonami, které jsou dodávány se softwarem pro webový design
Metoda 2 ze 4: Ovládání HTML
Krok 1. Seznamte se se základními HTML tagy
HTML je jednoduchý značkovací jazyk, který se používá k formátování základních prvků webové stránky. Různé prvky svého webu můžete formátovat pomocí značek. Značky se zobrazují v hranatých závorkách před a za každým prvkem a poskytují pokyny, jak bude tento prvek na stránce fungovat. Chcete -li značku zavřít, vložte a / před konečnou značku do hranatých závorek.
- Pokud například chcete, aby byl nějaký váš text tučněElement byste obklopili tagem takto: Tento text je tučný.
- Mezi několik běžných značek patří (odstavec), (ukotvení, které definuje propojený text) a (písmo, které může pomoci definovat různé atributy textu, například velikost a barvu).
- Jiné značky definují různé části samotného dokumentu HTML. Používá se například k tomu, aby obsahoval informace o stránce, které nebudou pro diváka viditelné, například klíčová slova nebo popis stránky, který by se zobrazil ve výsledcích vyhledávače.
Krok 2. Naučte se používat atributy značek
Některé značky potřebují k určení, jak mají fungovat, další informace. Tyto dodatečné informace se objevují v úvodní značce a nazývají se „atribut“. Název atributu se zobrazí bezprostředně za názvem značky, oddělený mezerou. Hodnota atributu je k názvu atributu připojena znakem = a je uzavřena do uvozovek.
- Pokud byste například chtěli některý text zčervenat, můžete to provést pomocí značky a příslušného atributu barvy písma, například takto: Tento text je červený.
- Mnoho z efektů, kterých bylo kdysi rutinně dosaženo pomocí atributů HTML tagů, jako je nastavení různých barev písma, se nyní místo toho obvykle provádí pomocí kódování CSS.
Krok 3. Experimentujte s vnořenými prvky
HTML také umožňuje umístit prvky do jiných prvků za účelem vytvoření komplexnějšího formátování. Pokud byste například chtěli definovat odstavec a poté kurzívou zvýraznit část textu v odstavci, můžete to udělat takto:
Miluji kódování!
Krok 4. Seznamte se s prázdnými prvky
Některé prvky v HTML nepotřebují otevírací ani zavírací značky. Pokud například vkládáte obrázek, potřebujete pouze jednu značku „img“obsahující název značky a další potřebné atributy (například název souboru obrázku a jakýkoli alternativní text, který chcete přidat pro účely usnadnění). Například:
Krok 5. Prozkoumejte základní rozložení dokumentu HTML
Aby vaše webové stránky založené na HTML fungovaly správně, musíte vědět, jak formátovat celou stránku. To zahrnuje definování, kde váš html kód začíná a končí, a také použití značek k určení, které části kódu se zobrazí a které tam jsou, aby poskytly skryté informace na pozadí. Například:
- Pomocí značky definujte svou stránku jako dokument HTML.
- Dále ve značkách zadejte celou stránku, abyste definovali, kde začíná a končí váš kód.
- Do značek umístěte všechny informace, které se nebudou zobrazovat divákovi, jako je název stránky, klíčová slova a popis vaší stránky.
- Pomocí značek definujte tělo stránky (tj. Jakýkoli text a obrázky, které má divák vidět).
Metoda 3 ze 4: Seznámení s CSS
Krok 1. Pomocí CSS aplikujte na své dokumenty HTML styly
CSS je jazyk šablon stylů, který vám umožňuje použít na vaši webovou stránku různé stylové a designové prvky. Pokud například chcete selektivně použít konkrétní písmo nebo barvu textu na některé textové prvky na vaší stránce, můžete k tomu vytvořit soubor CSS. Potom můžete vložit soubor CSS do dokumentu HTML, kdekoli chcete.
-
Pokud byste například chtěli, aby soubor CSS proměnil všechny prvky odstavce v dokumentu HTML zeleně, můžete vytvořit soubor.css obsahující řádky:
- p {
- barva: zelená;
- }
- Pak byste soubor uložili pod názvem jako style.css.
- Chcete -li použít šablonu stylů na dokument HTML, vložili byste ji jako prázdný prvek odkazu do značek. Například:
Krok 2. Seznamte se s prvky sady pravidel CSS
Jednotlivá část kódu CSS se nazývá „sada pravidel“. Sada pravidel obsahuje různé prvky, které definují, co má váš kód dělat. Tyto zahrnují:
- Selektor, který definuje prvek HTML, který chcete stylizovat. Pokud například chcete, aby sada pravidel ovlivňovala prvky odstavce, spustili byste sadu pravidel písmenem „p“.
- Deklarace, která definuje vlastnosti, které chcete stylovat (například barvu písma). Deklarace je obsažena v závorkách {}.
- Vlastnost, která určuje, kterou vlastnost prvku HTML chcete stylovat. Například v rámci značky můžete určit, že chcete upravit barvu textu.
- Hodnota vlastnosti definuje konkrétně, jak chcete vlastnost změnit (např. Pokud je vlastností barva písma, hodnota vlastnosti by byla „zelená“).
- V rámci jedné deklarace můžete upravit několik různých vlastností.
Krok 3. Aplikujte na text CSS, aby vaše sazba vypadala hezky
CSS je užitečné pro aplikaci různých efektů na váš text, aniž byste museli jednotlivě kódovat každou vlastnost v HTML. Experimentujte se změnou různých vlastností sazby v CSS, včetně:
- Barva fontu
- Velikost písma
- Rodina písem (např. Rozsah písem, která chcete v textu použít)
- Zarovnání textu
- Výška čáry
- Rozteč písmen
Krok 4. Experimentujte s boxy a dalšími nástroji pro rozvržení CSS
CSS je také užitečné pro přidávání atraktivních vizuálních prvků na vaši stránku, jako jsou textová pole a tabulky. Kromě toho jej můžete použít ke změně celkového rozložení stránky a definovat, kde jsou různé prvky umístěny vůči sobě navzájem.
Můžete například definovat atributy, jako je šířka a barva pozadí prvku, přidat ohraničení nebo nastavit okraje, které vytvoří prostor mezi různými prvky na vaší stránce
Metoda 4 ze 4: Práce s jinými jazyky návrhu
Krok 1. Naučte se JavaScript, pokud chcete na své stránky přidat interaktivní prvky
JavaScript je skvělý jazyk, který se můžete naučit, pokud máte zájem přidat na své webové stránky pokročilejší funkce, jako jsou animace a vyskakovací okna. Udělejte si kurz nebo se podívejte na online návody, jak kódovat v JavaScriptu a začlenit tyto kódované prvky do svých webových stránek | pomocí HTML.
Než si s JavaScriptem poradíte, budete se muset seznámit se základy vytváření stránek v HTML a CSS
Krok 2. Seznamte se s jQuery, abyste usnadnili kódování JavaScript
jQuery je knihovna JavaScript, která může zjednodušit programování v Javě tím, že vám umožní přístup k řadě předem kódovaných prvků JavaScriptu. jQuery je skvělý nástroj, pokud již znáte základy kódování JavaScript.
Ke knihovně jQuery a spoustě dalších cenných zdrojů můžete přistupovat prostřednictvím jQuery.org, webových stránek jQuery Foundation
Krok 3. Pokud máte zájem o vývoj typu back-end, prostudujte si jazyky na straně serveru
Zatímco HTML, CSS a JavaScript jsou ideální pro webové designéry, kteří se zaměřují na to, co uživatel na webu vidí a dělá, jazyky na straně serveru jsou užitečné, pokud vás více zajímá práce v zákulisí. Pokud se chcete dozvědět o vývoji back-endu, zaměřte se na učení jazyků jako Python, PHP a Ruby on Rails.
Tyto jazyky jsou užitečné pro správu a zpracování dat, která uživatel nevidí. PHP lze například použít k vytvoření nástrojů pro bezpečné vytváření hesel na webech, které vyžadují přihlášení
Soubory nápovědy
Cheatový list HTML
Podváděcí list CSS
