S vývojom toľkých programovacích, štýlových a značkovacích jazykov je učenie sa webového dizajnu stále komplikovanejšie než kedykoľvek predtým. Našťastie je k dispozícii veľa nástrojov, ktoré vám pomôžu začať. Vyhľadajte niekoľko základných zdrojov, napríklad online návody alebo aktuálnu knihu o webovom dizajne. Keď ste pripravení začať, začnite zvládnutím základov HTML a CSS. Potom môžete začať skúmať pokročilejšie jazyky webového dizajnu, ako je JavaScript!
Kroky
Metóda 1 zo 4: Hľadanie zdrojov pre web design
Krok 1. Vyhľadajte online kurzy a návody na web design
Internet je plný podrobných informácií o webdizajne a veľa z nich je voľne dostupných. Môžete začať tým, že sa zúčastníte bezplatných online kurzov na Udemy alebo CodeCademy, alebo sa pripojíte k komunite kódovania, ako je freeCodeCamp. Na YouTube nájdete aj videonávody pre webový design.
- Ak presne viete, čo hľadáte, skúste vyhľadať pomocou konkrétnych výrazov (napr. „Výber tried v tutoriále CSS“).
- Ak ste začiatočník bez skúseností s webovým dizajnom, začnite tým, že sa naučíte základy kódovania v HTML a CSS.
Krok 2. Pozrite sa do triedy na miestnej vysokej škole alebo univerzite
Ak navštevujete vysokú školu alebo univerzitu, obráťte sa na počítačové oddelenie svojej školy alebo sa obráťte na katalóg kurzov a zistite, či sú k dispozícii kurzy webového dizajnu. Ak nie ste v škole, skontrolujte, či niektoré vysoké školy alebo univerzity vo vašom okolí neponúkajú hodiny ďalšieho vzdelávania vo webdizajne.
Niektoré univerzity ponúkajú online kurzy webového dizajnu, ktoré sú otvorené pre kohokoľvek, kto sa chce zapísať. Na webových stránkach, ako je Coursera.org, nájdete bezplatné alebo dostupné hodiny webového dizajnu vedené univerzitnými učiteľmi
Krok 3. Získajte nejaké knihy o webovom dizajne z kníhkupectva alebo knižnice
Dobrá kniha o webdizajne môže byť neoceniteľnou referenciou, keď sa učíte a uplatňujete svoje remeslo. Vyhľadajte aktuálne knihy o všeobecnom webovom dizajne alebo konkrétnych formátoch kódovania a jazykoch, ktoré by ste sa chceli naučiť.
Čítanie časopisov a blogových článkov o webdizajne je tiež dobrým spôsobom, ako sa naučiť nové techniky, načerpať inšpiráciu a držať krok s najnovšími trendmi
Krok 4. Stiahnite alebo si kúpte softvér pre webový design
Dobrý softvér pre webový design vám môže pomôcť efektívnejšie a efektívnejšie vytvárať webové stránky a taktiež vám pomôže zoznámiť sa s aplikáciami kódovania, skriptovania a ďalších kľúčových prvkov návrhu. Môžete ťažiť z používania nástrojov, ako sú:
- Programy grafického dizajnu, ako napríklad Adobe Photoshop, GIMP alebo Sketch.
- Nástroje na vytváranie webových stránok, ako sú WordPress, Chrome DevTools alebo Adobe Dreamweaver.
- Softvér FTP na prenos hotových súborov na váš server.
Krok 5. Na začiatku si nájdite nejaké šablóny webových stránok, s ktorými by ste sa mohli hrať
Na použití šablón nie je nič zlého, keď sa naučíte základy webového dizajnu. Vyhľadajte šablóny webových stránok, ktoré sa vám páčia, a podrobne sa pozrite na kód, aby ste získali predstavu o tom, ako dizajnér zostavil stránku. Môžete tiež experimentovať so zmenou kódu a pridaním vlastných prvkov do šablóny.
Začnite vyhľadaním bezplatných šablón webových stránok alebo experimentujte so šablónami, ktoré sa dodávajú so softvérom pre webový design
Metóda 2 zo 4: Ovládanie HTML
Krok 1. Zoznámte sa so základnými značkami HTML
HTML je jednoduchý značkovací jazyk, ktorý sa používa na formátovanie základných prvkov webovej stránky. Rôzne prvky svojho webu môžete formátovať pomocou značiek. Značky sa uvádzajú v hranatých zátvorkách pred a za každým prvkom a poskytujú pokyny o tom, ako bude tento prvok na stránke fungovať. Ak chcete značku zatvoriť, umiestnite a / pred koncovú značku do uhlových zátvoriek.
- Ak napríklad chcete, aby bol nejaký váš text odvážnyElement by ste obklopili značkou takto: Tento text je hrubý.
- Medzi niekoľko bežných značiek patrí (odsek), (ukotvenie, ktoré definuje prepojený text) a (písmo, ktoré môže pomôcť definovať rôzne atribúty textu, napríklad veľkosť a farbu).
- Ostatné značky definujú rôzne časti samotného dokumentu HTML. Používa sa napríklad na to, aby obsahoval informácie o stránke, ktoré nebudú pre diváka viditeľné, napríklad kľúčové slová alebo popis stránky, ktorý by sa zobrazil vo výsledkoch vyhľadávača.
Krok 2. Naučte sa používať atribúty značiek
Niektoré značky vyžadujú ďalšie informácie, aby určili, ako majú fungovať. Tieto dodatočné informácie sa nachádzajú v úvodnej značke a nazývajú sa „atribút“. Názov atribútu sa zobrazí bezprostredne za názvom značky oddelený medzerou. Hodnota atribútu je k názvu atribútu pripojená znamienkom = a je obklopená úvodzovkami.
- Ak by ste napríklad chceli niektorý text zčervenať, môžete to urobiť pomocou značky a vhodného atribútu farby písma, napríklad takto: Tento text je červený.
- Mnohé z efektov, ktoré sa kedysi bežne dosahovali pomocou atribútov značiek HTML, ako je napríklad nastavenie rôznych farieb písma, sa teraz zvyčajne namiesto toho vykonávajú pomocou kódovania CSS.
Krok 3. Experimentujte s vnorenými prvkami
HTML vám tiež umožňuje umiestniť prvky do iných prvkov, aby ste vytvorili komplexnejšie formátovanie. Ak by ste napríklad chceli definovať odsek a potom kurzívou zvýrazniť časť textu v odseku, mohli by ste to urobiť takto:
Milujem kódovanie!
Krok 4. Zoznámte sa s prázdnymi prvkami
Niektoré prvky v HTML nepotrebujú otváracie ani zatváracie značky. Ak napríklad vkladáte obrázok, potrebujete iba jednu značku „img“obsahujúcu názov značky a všetky ďalšie potrebné atribúty (napríklad názov súboru obrázka a akýkoľvek alternatívny text, ktorý chcete pridať na účely zjednodušenia ovládania). Napríklad:
Krok 5. Preskúmajte základné rozloženie dokumentu HTML
Aby váš web založený na HTML správne fungoval, musíte vedieť, ako naformátovať celú stránku. To zahŕňa definovanie, kde začína a končí váš html kód, a tiež používanie značiek na určenie, ktoré časti kódu sa zobrazia a ktoré tam sú, aby poskytli skryté informácie na pozadí. Napríklad:
- Pomocou značky definujte svoju stránku ako dokument HTML.
- Ďalej do tagov vložte celú svoju stránku, aby ste definovali, kde začína a končí váš kód.
- Do značiek umiestnite všetky informácie, ktoré sa nebudú zobrazovať divákovi, ako napríklad názov stránky, kľúčové slová a popis stránky.
- Značkami definujte telo stránky (t. J. Akýkoľvek text a obrázky, ktoré by mal divák vidieť).
Metóda 3 zo 4: Zoznámenie sa s CSS
Krok 1. Použitie CSS na použitie štýlov na vaše dokumenty HTML
CSS je jazyk šablóny štýlov, ktorý vám umožňuje použiť na vašu webovú stránku rôzne štýlové a dizajnové prvky. Ak napríklad chcete selektívne použiť konkrétne písmo alebo farbu textu na niektoré textové prvky na vašej stránke, môžete na to vytvoriť súbor CSS. Potom môžete súbor CSS vložiť do dokumentu HTML, kdekoľvek chcete.
-
Ak by ste napríklad chceli, aby súbor CSS zmenil farbu na všetky prvky odseku v dokumente HTML, môžete vytvoriť súbor.css obsahujúci riadky:
- p {
- farba: zelená;
- }
- Potom by ste súbor uložili s názvom ako style.css.
- Ak chcete použiť šablónu so štýlmi na dokument HTML, vložili by ste ju ako prázdny prvok odkazu do značiek. Napríklad:
Krok 2. Zoznámte sa s prvkami sady pravidiel CSS
Jednotlivá časť kódu CSS sa nazýva „sada pravidiel“. Sada pravidiel obsahuje rôzne prvky, ktoré definujú, čo má váš kód robiť. Tie obsahujú:
- Selektor, ktorý definuje prvok HTML, ktorý chcete štylizovať. Ak napríklad chcete, aby vaša sada pravidiel ovplyvňovala prvky odseku, spustili by ste svoju sadu pravidiel s písmenom „p“.
- Deklarácia, ktorá definuje vlastnosti, ktoré chcete štylizovať (napríklad farbu písma). Vyhlásenie je uvedené v zátvorkách {}.
- Vlastnosť, ktorá určuje, akú vlastnosť prvku HTML chcete štylizovať. V značke napríklad môžete určiť, že chcete štylizovať farbu textu.
- Hodnota vlastnosti špecificky definuje, ako chcete zmeniť vlastnosť (napr. Ak je vlastnosťou farba písma, hodnota vlastnosti by bola „zelená“).
- V rámci jednej deklarácie môžete upraviť niekoľko rôznych vlastností.
Krok 3. Aplikujte na svoj text CSS, aby vaša sadzba vyzerala pekne
CSS je užitočný na aplikáciu rôznych efektov na váš text bez toho, aby ste museli jednotlivo kódovať každú vlastnosť v HTML. Experimentujte so zmenou rôznych vlastností sadzby v CSS vrátane:
- Farba písma
- Veľkosť písma
- Rodina písem (napr. Rozsah písiem, ktoré chcete použiť v texte)
- Zarovnanie textu
- Výška čiary
- Rozstup medzi písmenami
Krok 4. Experimentujte s políčkami a inými nástrojmi na rozloženie CSS
CSS je tiež užitočný na pridávanie atraktívnych vizuálnych prvkov na vašu stránku, ako sú textové polia a tabuľky. Okrem toho ho môžete použiť na zmenu celkového rozloženia stránky a definovanie vzájomného umiestnenia rôznych prvkov.
Môžete napríklad definovať atribúty, akými sú šírka a farba pozadia prvku, pridať orámovanie alebo nastaviť okraje, ktoré vytvoria priestor medzi rôznymi prvkami na vašej stránke
Metóda 4 zo 4: Práca s inými návrhovými jazykmi
Krok 1. Naučte sa JavaScript, ak chcete na svoje stránky pridať interaktívne prvky
JavaScript je skvelý jazyk, ktorý sa môžete naučiť, ak máte záujem pridať na svoje webové stránky pokročilejšie funkcie, ako sú animácie a kontextové okná. Spravte si kurz alebo si pozrite online návody, ako kódovať v jazyku JavaScript a začleniť tieto kódované prvky do svojich webových stránok | pomocou HTML.
Predtým, než sa v JavaScripte budete cítiť pohodlne, musíte sa zoznámiť so základmi vytvárania stránok v HTML a CSS
Krok 2. Zoznámte sa s jQuery, aby bolo kódovanie JavaScript jednoduchšie
jQuery je knižnica JavaScript, ktorá môže zjednodušiť programovanie v jazyku Java tým, že vám umožní prístup k rôznym vopred kódovaným prvkom JavaScriptu. jQuery je skvelý nástroj, ak ste už oboznámení so základmi kódovania JavaScript.
K knižnici jQuery a mnohým ďalším cenným zdrojom máte prístup prostredníctvom jQuery.org, webovej stránky jQuery Foundation
Krok 3. Ak máte záujem o vývoj typu back-end, preštudujte si jazyky na strane servera
Zatiaľ čo HTML, CSS a JavaScript sú ideálne pre webových dizajnérov, ktorí sa zameriavajú na to, čo používateľ na webe vidí a robí, jazyky na strane servera sú užitočné, ak sa viac zaujímate o prácu v zákulisí. Ak sa chcete dozvedieť viac o vývoji typu back-end, zamerajte sa na výučbu jazykov ako Python, PHP a Ruby on Rails.
Tieto jazyky sú užitočné pre správu a spracovanie údajov, ktoré používateľ nevidí. PHP možno napríklad použiť na vytvorenie nástrojov na bezpečné vytváranie hesiel na webových stránkach, ktoré vyžadujú prihlásenie
Súbory pomocníka
Cheatový list HTML
Podvádzací list CSS
