Popis: tvorba webových stránok nie je ľahký proces. Každý asi vie, že na jeho tvorbe sa podieľa webdizajnér a programátor, ale veľa nevie o návrhárovi rozloženia. Ale je to práca návrhára rozloženia, ktorá umiestňuje všetky dizajnové prvky na svoje miesta. Chceš sa to naučiť? Potom si prečítajte článok o tom, ako sa od začiatku stať návrhárom rozloženia.
Platba: v priemere 10 dolárov za hodinu alebo 50 - 100 dolárov na projekt.
Požiadavky: vytrvalosť, všímavosť, znalosť html, css, JavaScript, Photoshop

Mnoho ľudí ani nevie o takomto povolaní, takže najskôr stojí za to pochopiť, čo návrhár dispozícií robí a aká je jeho práca.

Návrhár rozloženia vytvorí drôtový model pomocou rozloženia od návrhára. Je zodpovedný za prispôsobenie zdroja pre rôzne prehliadače, monitory a obrazovky smartfónov / tabletov, aby stránka vyzerala všade určitým spôsobom. Inými slovami, od návrhára dostane statický obraz a potom ho „animuje“.

Čo je potrebné pre prácu? Minimálna sada návrhára rozloženia obsahuje:

• Poznámkový blok ++ na písanie kódu;
• Photoshop alebo iný podobný grafický editor;
• Populárne prehliadače, pomocou ktorých môžete zistiť, ako sa dielo zobrazuje v rôznych prehľadávačoch.

Čo potrebujete vedieť a aké vlastnosti sú potrebné?

• HTML.
• JavaScript.
• Photoshop alebo akýkoľvek iný podobný program.
• Vytrvalosť.
• Všímavosť.
• Vizuálna pamäť.
• Presnosť

Ako sa stať návrhárom rozloženia?

Je žiaduce, aby ste v tejto oblasti mali stredoškolské alebo vysokoškolské vzdelanie, ale veľa nezávislých návrhárov rozvrhnutia pracuje ako samouk. Buď si všetky potrebné informácie naštudovali sami, alebo absolvovali špeciálne kurzy na internete. Našťastie je teraz takýchto škôl pomerne veľa.

1. Najprv sa musíte naučiť HTML, CSS a JavaScript. Za behu si nemusíte pamätať všetky významy, ale urobte si zrozumiteľnú a pohodlnú hru. Venujte osobitnú pozornosť nasledujúcim bodom:

• ako je vytvorená stránka HTML - značky hlavnej stránky (hlava, telo) a čo môžu obsahovať.
• hlavné prvky HTML sú a, p, div, table, h1-h6, ol, ul, span, atď. Naučte sa ich správne hláskovanie a zistite, prečo sú potrebné. Pochopte rozdiel medzi blokovými a vloženými prvkami.
• Skontrolujte verzie HTML a značky, ktoré obsahujú.
• Naučte sa, aký je rozdiel medzi tabuľkovým a blokovým rozložením.
• Základné prvky HTML5.

• Preskúmajte typy selektorov.
• Základné (pozadie, veľkosť, farba, písmo, ohraničenie atď.) A špeciálne (umiestnenie, plávajúce ...) vlastnosti CSS.
• Skontrolujte verzie CSS, aké vlastnosti obsahujú.
• Ktoré vlastnosti fungujú v niektorých prehľadávačoch odlišne.
• Naučte sa vytvárať blokovú štruktúru webovej stránky.
• Osvojte si základy CSS3.

JavaScript:

• Prečo a kedy sa uplatňuje.
• Ako skryť alebo zobraziť konkrétny blok.
• Ako pridať animáciu (posuvník alebo posúvač).
• Ako zmeniť triedu a štýl prvku.
• Ako získať alebo zmeniť hodnotu konkrétneho prvku.

2. Master Photoshop, pretože musíš pracovať v grafickom editore a dosť veľa. Návrhár rozloženia nemusí byť schopný kresliť, pretože pracujete s pripraveným rozložením stránky. V zásade budete potrebovať:

• Vystrihnite rozloženie.
• Určte rozmery.
• Získajte požadované farby.
• Vystrihnite konkrétne prvky z rozloženia.

3. Osvojte si základy rozloženia - Porozumieť terminológii (kompatibilita viacerých prehliadačov, platnosť, sémantika). Prečítajte si pár kníh na túto tému alebo si pozrite aspoň bezplatné kurzy - je ich veľa. Je vhodné naučiť sa pracovať s WordPress a Joomla, pretože veľa webov pracuje na týchto CMS a vo svojej práci majú veľa funkcií.

4. Prax - nie je potrebné ísť priamo na burzu na voľnej nohe a zadať najťažšiu objednávku. Urobte si 2 až 3 testovacie práce, aby ste dostali do rúk a zdokonalili svoje praktické zručnosti.

Pracujte na diaľku ako návrhár rozloženia

Kde to nájdem? Pri voľnej nohe je hlavným problémom skutočne hľadanie objednávky. A pre začiatočníkov je to veľmi, veľmi ťažké, najmä ak ste samouk a nemáte skutočné pracovné skúsenosti.

1. Prvá skúsenosť je zadarmo. Tých. ponúknite svoje služby pre pozitívnu spätnú väzbu. Nie je ťažké nájsť zákazníka - nájdite stránky a ponúknite rozloženie pre pozitívnu kontrolu. Mnoho správcov webu bude s takouto ponukou spokojných a v budúcnosti vás budú kontaktovať s ďalšími otázkami (už zaplatenými) alebo poradia priateľom. Hlavné je ukázať svoju najlepšiu stránku.
2. Môžete si nájsť prácu, kde potrebujete neustále vytvárať alebo upravovať stránky. Mali by ste sa teda obrátiť na webové dizajnérske štúdiá alebo veľké internetové projekty. Môžete písať priamo do webových štúdií s návrhom na spoluprácu. Spočiatku môžete pracovať zadarmo (skúšobné obdobie + školenie) a po mesiaci môžete dostať výplatu. Týmto spôsobom môžete získať skutočné pracovné skúsenosti a potom sa môžete venovať trvalej práci na diaľku. Ale tu veľa závisí od vašich schopností, talentu a šťastia.
3. Nezabudnite na najbežnejšiu možnosť - výmeny na voľnej nohe. Práve tam môžu začiatočníci získať svoje prvé skúsenosti, hoci bude problematické absolvovať prvú objednávku. Web weblancer.net má veľa objednávok rozloženia a konkurencia nie je taká silná ako na fl.ru

5 tipov pre začínajúcich návrhárov rozloženia:

1. Myslieť si. Rozloženie nie je jednoduchá práca, ktorú sa dá ľahko a ľahko naučiť.
2. Majte prehľad o všetkom novom v tejto oblasti - čítajte blogy, fóra, webové stránky a ďalšie zdroje informácií o tejto téme. Neustále sa objavujú nové technológie, techniky, odhaľujú sa bežné chyby - musíte držať prst na pulze, aby ste nezmeškali dôležité informácie.
3. Html + css - skúste použiť Javascript na minimum na urýchlenie načítania stránky.
4. Používajte osvedčené postupy - uložte svoje staré nápady, aby ste sa k nim mohli vrátiť a použiť ich v novom projekte.
5. Rozloženie urobte, iba ak vás to skutočne zaujíma. Nestačí len naučiť sa HTML a CSS - musíte žiť s rozvrhnutím. V skutočnosti je to v istom zmysle umenie, v ktorom musíte dať všetku svoju silu, čas a záujem a až potom sa môžete tešiť zo svojej práce a dosiahnuť úspech.

Takže predtým, ako si položíte otázku „ako sa od začiatku stať dizajnérom rozloženia“, položte si otázku „rád pracujem na diaľku ako návrhár rozloženia alebo je lepšie vyskúšať niečo iné?“ Koniec koncov, existuje veľa možností a nejde o oblasť, do ktorej sa oplatí ísť len kvôli peniazom.

• Štýly sú súborom parametrov, ktoré určujú polohu, vzhľad a funkčnosť prvkov na webovej stránke. Hlavnou výhodou štýlov je, že poskytujú oveľa viac možností formátovania, dizajnu a rozloženia v porovnaní s HTML, ktoré je pre vás už natívne. Tento výkonný systém je možné zostaviť do samostatných dokumentov, takže sa nemieša s kódom HTML. Toto je základ; viac, jednoduchšie a jasnejšie - tu: http://htmlbook.ru. Začnite zoznámením sa s časťou „CSS“ v príručke „Samonávod“ a príručka vám výrazne zjednoduší pochopenie neznámych výrazov. V budúcnosti budete tiež potrebovať sekciu „Blokové rozloženie“.
• Pre tých, ktorí sú obzvlášť vytrvalí a zvedaví na programovanie, odporúčame stránky http://www.xiper.net, http://css-live.ru. Tu sú návody, ktoré odhaľujú tajomstvá používania „pokročilých“ techník HTML a CSS. Ak vlastníš anglický jazyk - určite navštívte zdroje http://css-tricks.com/, http://net.tutsplus.com/, kde nájdete nielen textové, ale aj videonávody.

Akrobacia - JavaScript!

Používanie JavaScriptu zabezpečí vašim webovým stránkam interaktivitu. Keď budete študovať toto pokročilejšie rozloženie, postupne začleňujte do svojho HTML kód JavaScript.

• Dostatočnú informačnú základňu na osvojenie tohto jazyka vlastní zdroj http://javascript.ru. Obsahuje veľa základných materiálov, diskusií a tipov na kvalitnú výučbu.
• Prvá časť knihy Davida Flanagana „JavaScript Podrobný sprievodca„Bude skvelým sprievodcom základmi JavaScriptu. Druhá časť popisuje vývojové prostredie pre skriptovanie poskytované prehliadačmi. Tretia časť je rozsiahlym odkazom na základný JavaScript a štvrtá je na strane klienta.
• Na zjednodušenie implementácie JavaScriptu na webovej stránke sa používa knižnica jQuery, ktorá je tiež napísaná v jazyku JavaScript. Oficiálna webová stránka http://jquery.com a kniha „jQuery Komplexný sprievodca pokročilým jazykom JavaScript“ (Ber Bibo, Yehuda Katz) poskytujú ľahko pochopiteľného sprievodcu všetkým, čo potrebujete o jazyku vedieť.
• Bezplatný modulárny rámec Mootools poskytuje významnú pomoc pri vývoji JavaScriptu.

Malé triky od veľkých majstrov

Aj pre skúsených návrhárov dispozícií sme pripravení poskytnúť informácie, ktoré môžu prácu výrazne vylepšiť. Pokiaľ ide o vytvorenie optimalizovaného kódu rozloženia, stránka hthttp: //www.xiper.net bude určite užitočná. Postupujte podľa sekcií „Výučba“ a „Pripravené techniky“, ktoré obsahujú pokročilé riešenia a technológie na používanie skriptov.

Existuje tiež veľa služieb na optimalizáciu rozloženia. Odporúčame venovať pozornosť zdrojom venovaným tejto téme:

1. http://www.google.com/webfonts ; - poskytne zbierku písiem, ktoré môžete pripojiť na svoje stránky.
2. http://www.fontsquirrel.com/fontface/generator - prevádza ľubovoľné písmo a generuje CSS, ktoré sa majú vložiť do šablóny so štýlmi.
3. http://stm.dp.ua/web-design/color-html.php - široká škála farieb a ich kódov.
4. Služba CSS Sprite zníži počet požiadaviek HTTP na stiahnutie obrázkov, ktoré odosiela vaša stránka. Viac informácií vám poskytne článok http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html.
5. V časti „Validácia dokumentu“ na stránke http://htmlbook.ru vás oboznámime s konceptom validátorov. Kód každej stránky musí zodpovedať špecifikácii, ktorú vypracovalo konzorcium W3 www.w3c.org. Uvádzame niekoľko príkladov validátorov (overenie kódu HTML a CSS): http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
6. http://caniuse.com - kontrola viacerých prehľadávačov - služba, ktorá zabráni zobrazeniu rôzneho rozloženia vo viacerých prehliadačoch.

+ Sľúbený pekný bonus

Ak vaša túžba po odborných znalostiach ešte nie je úplne uspokojená, ponáhľame sa potešiť - to nie je všetko. HTML a CSS sa môžete naučiť aj pomocou nasledujúcej literatúry:

• Mark Pilgrim „HTML5. V prevádzke
• Eric Meyer „CSS - kaskádové štýly: komplexný sprievodca“
• Peter Lubbers, Brian Albers, Frank Salim „HTML5 pre profesionálov: výkonné nástroje pre vývoj moderných webových aplikácií“
• Stephen Schafer „HTML, XHTML a CSS. Užívateľská Biblia “
• Eric Freeman, Elizabeth Freeman „Learning HTML, XHTML and CSS“.

P.S. Keď sa rozhodnete učiť sa HTML, prestaňte používať špeciálne editory. Píšte do bežného poznámkového bloku alebo do poznámkového bloku ++, čo vám pomôže rýchlo získať potrebné zručnosti. Ak ste zástancom interaktívnej komunikácie - staňte sa častým hosťom špecializovaných fór:

• http://www.cyberforum.ru/html/
• http://ru.html.net/forums/viewforum.php?f\u003d49
• http://www.html.by/
• http://forum.htmlbook.ru/

Požiadajte skúsenejších kolegov o radu, podeľte sa o svoje vedomosti s nováčikmi!

Dúfame, že tento článok bude pre vás dôstojným sprievodcom pri učení programovania. Ďalší materiál bude venovaný jazyku programovania PHP na strane servera.

Zaujala ťa otázka ako si sami naštudovať rozloženie stránok? Pri správnej vytrvalosti môže každý študovať rozloženie stránok.

Téma dnešného príspevku: Kde začať študovať rozloženie? Táto otázka zďaleka nie je nečinná a každý si sám zvolí svoju vlastnú cestu. Poviem vám o tom, ako som začal túto fascinujúcu cestu do sveta. Html a CSS. Dúfam, že pre niektorých z vás sa to stane, ak nie vedúcou hviezdou, potom aspoň sprievodcom k cieľu.

Takže čo je rozloženie stránky? Ak ešte nemáte tank, počúvajte: rozloženie v tomto prípade neznamená napísanie nového článku v novinách Iskra na úvodné písmená, ale transformáciu rozloženia webovej stránky nakreslenej vo Photoshope priamo na funkčnú webovú stránku.

Inými slovami, rozloženie je kódovanie, zápis údajov do HTML, ktoré každý sebaúctový prehliadač premení na krásnu a zrozumiteľnú stránku.

Pre bežného návštevníka stránky zostane tento kód neviditeľný, skrytý za širokou zadnou časťou prehliadača. To však vôbec neznamená, že to tak aj môže byť. Kód by mal byť krásny, pohodlný a správny!

Kde sa teda začať učiť HTML? Prvé, čo mi napadne, je kúpiť si knihu. A čím hrubšie, tým lepšie. Možno to niekomu prospeje.

Ale osobne som si po určitých skúsenostiach s narábaním s takýmito „tehlami“ vytvoril jasný odpudivý reflex. Z jednoduchého dôvodu sú tam poskytované informácie v nadmernom množstve.

Pamätáte si školu? Priemerný občan nemusí poznať chémiu, fyziku, anatómiu atď., Pokiaľ sa ich snaží vložiť do mozgu.

Takže je to tu: v hrubej knihe je veľa toho, čo je nadbytočné, a keď je toho veľa, zakalí oči, vyvolá zívnutie a z tréningu urobí 2 - 3 dni trápenia, po ktorých nasleduje hodenie tejto vedy ďaleko do pece. A to je všetko.

Preto som si osobne vybral inú cestu. Kúpil som si brožúru. Vôbec nie hustý. A stále ma nebaví odporúčať ju svojim študentom, pretože relevantnosť knihy je stále čerstvá a žiadaná. autor knihy Artemy Lomova volá sa „HTML, CSS, skripty: prax vytvárania webov“... Vydavateľstvo „BHV-Petersburg“.

V tejto knihe je všetko s mierou: je tu trochu histórie webu, niečo o štandardoch. Najdôležitejšie však je, že základný materiál o HTML, CSS a JavaScript je prezentovaný veľmi zrozumiteľne a jednoducho. Pre začiatočníkov, ktorí sa naučia rozloženie webových stránok, je to len nevyhnutnosť!

Jedna kniha však nestačí. Moja metóda štúdia nie je v žiadnom prípade nová, ale je tiež veľmi efektívna. Nepotrebujete jednu knihu, ale hneď niekoľko. Trik tu spočíva v tom, že každý autor píše trochu inak. Keď čítate rovnakú tému v rôznych variáciách, celkový obraz bude zreteľný oveľa rýchlejšie a lepšie si ho zapamätáte.

Mojou druhou takouto knihou bola elektronická verzia tutoriálu k Dreamweaveru z Macromedia, ktorého autorom bol Vladimír Dronov.

Všeobecne je na začiatok veľmi užitočné zaobstarať si tento program. Dreamwiever je vizuálny editor, ktorý vám umožňuje vidieť vonkajšiu aj vnútornú časť stránky. Teda jeho externá prezentácia ako pre návštevníkov a interná - priamo kód.

Veľkým plusom tohto programu je schopnosť zobraziť (opäť v duálnom režime) akýkoľvek web, ktorý existuje v sieti.

Napríklad sa mi páčil web s krásnym a pohodlným umiestnením blokov, celú stránku som uložil s obrázkami a potom som túto stránku spustil v Dream. A voilá! Všetko je viditeľné kde a čo. Aj keď spočiatku všetko nie je také zrejmé, ako by sme chceli. Táto kniha je tu len skvelým pomocníkom.

Samozrejme som žiaden nepoužil vizuálni editori, ale vystačím si s jednoduchým textovým editorom, ako je PSPad. Získali sa však značné skúsenosti. A čo je najdôležitejšie - všestranný. Preto je samotný objekt ľahko a dostatočne štruktúrovaný, aby sa zmestil do hlavy.

Mimochodom, štruktúra je najdôležitejším faktorom pri učení sa ľubovoľného jazyka. A HTML je tiež jazyk. A o tejto štruktúre si poviem nabudúce.

Medzitým si zaobstarajte pár užitočných kníh. A prečítajte si môj blog Webová rada. Nájdete tu tiež veľa užitočných tipov na usporiadanie webových stránok. Začnite sa učiť rozloženie webových stránok minimálne s.

UPD od 25.10.2012: Pre začiatočníkov odporúčam tento článok - Cesta rozloženia. Všetko je tam popísané oveľa podrobnejšie, s odkazmi a ďalšími užitočnými vecami.

Od autora: Dobrý deň! Pre nezainteresovaných je tu niečo tajomné a dokonca by sa dalo povedať, strašidelné usporiadanie. Keď ideme na stránku, uvidíme nádherný obrázok, štíhlu štruktúru a plynulo sa posúvajúce menu. Za všetkým je však práca dobrého človeka, spojenie medzi webovým dizajnérom a webovým programátorom - „sivým kardinálom“, ktorý nielen vytvoril kód pre všetky prvky na webe, ale sa tiež pokúsil dosiahnuť ich správne zobrazenie vo všetkých prehľadávačoch. Poďme si povedať o nuansách tejto internetovej profesie a o tom, ako sa od základu stať dizajnérom návrhu.

Neopakujte ich chyby!

Ako viete, lakomec platí dvakrát alebo viackrát. Mnohé zdanlivo atraktívne stránky však trpeli prchkosťou svojich zákazníkov a po dôkladnom preskúmaní majú nechutný kód. Stránky sú často uponáhľané v špeciálnych programoch, ktoré nie sú úplne zvládnuté. Výsledkom je, že sa kód javí ako neohrabaný, preplnený, nepružný a pripomína skôr skládku ako úhľadné pole značiek HTML, vlastností CSS a skriptov Java.

V budúcnosti môže úspora na kvalitnom rozložení hrať medvediu službu: kvôli neoptimalizovanému kódu sa zvyšujú náklady na propagáciu webových stránok, objavujú sa problémy s kompatibilitou medzi rôznymi prehliadačmi (niektoré prvky webu sa v niektorých prehliadačoch a na rôznych obrazovkách používateľov zobrazujú nedostatočne) a potom je potrebné všetko znova sformulovať. Kňučanie ...

Nebudeme však opakovať chyby takýchto rádoby tvorcov stránok? Ak uvažujete o tom, ako sa stať dobrým návrhárom rozloženia, okamžite sa nalaďte na seriózne štúdium HTML a CSS a v budúcnosti si osvojte PHP, Java a ďalšie programovacie jazyky. Okrem toho existuje veľa vynikajúcich video kurzov o rozložení HTML pre začiatočníkov na internete.

Ako začína návrhár rozloženia?

Ako ste už pochopili, návrhár rozloženia hrá pri vytváraní webových stránok najdôležitejšiu úlohu. Generuje kód webovej stránky pomocou značkovacích jazykov HTML a XHTML pomocou kaskádových tabuliek Štýly CSS.

JavaScript. Rýchly štart

Najskôr návrhár rozloženia dostane rozloženie webu od webdizajnéra, najčastejšie vo formáte programu Adobe Photoshop - šablónu PSD, ktorá je šablónou pre rozloženie. Šablóna plne odráža dizajn budúcej webovej stránky, jej veľkosť a rozloženie všetkých komponentov (obrázky, logo, tlačidlá, ponuky atď.).

Hlavná krása šablóny PSD je, že podporuje viacvrstvovú štruktúru obrazu. To znamená, že každý návrhový prvok je na samostatnej vrstve, takže je možné ich upravovať nezávisle na sebe. To výrazne zjednodušuje rozloženie, pretože pri opätovnom vytváraní dizajnu zohľadňuje jeho možnosti pomocou CSS a HTML.

Po obdivovaní rozloženia návrhár rozloženia pokračuje priamo k rozloženiu. Každý prvok stránky píše vo forme HTML kódu do špeciálneho programu alebo textového editora určeného pre programátorov, napríklad Notepad ++.

Aby ste sa stali sádzačom HTML, musíte samozrejme veľa trénovať, naučiť sa značky, atribúty a vlastnosti. V tomto článku sa nebudem venovať vysvetľovaniu tohto materiálu, nájdete ho sami, čo podľa mňa zvládne aj školák.

Základné rozloženie podľa príkladu

Vezmime si napríklad základnú 2-stĺpcovú šablónu loga, ktorú použijeme ako obrázok na pozadí. Zvyšok častí je rozvrhnutý pomocou HTML a veľkosti a štýly sú nastavené pomocou tried CSS.

Stránky v našom príklade pozostávajú z obsahu, bočného panela a päty. Štruktúru webovej stránky je možné usporiadať pomocou značiek div. Každý prvok by mal byť umiestnený v samostatnej kontajnerovej vrstve šablóny. Napríklad časti Obsah a Bočný panel sú vo vnútri vrstvy:

JavaScript. Rýchly štart

Naučte sa základy jazyka JavaScript na praktickom príklade vytvárania webových aplikácií

< div class = "header" > < / div > < div class = "pages" > < div class = "content" > < h2 > Obsah< / h2 > < / div > < div class = "sidebar" > < h2 > Bočný panel< / h2 > < / div > < div class = "foot" > < / div > < / div > < div class = "footer" > < h2 > Suterén< / h2 > < / div >

Na nastavenie štýlov používame triedy CSS. Parameter pozadia určuje farbu pozadia. Rozmery nastavujeme pomocou vlastností výšky a šírky. Okraje od horného, \u200b\u200bľavého a pravého okraja okna sú nastavené hodnotami margin-top, margin-left a marg-right.

Farba a pozadie sú okamžite nastavené pre hornú časť. Cesta k obrázku vystrihnutému zo šablóny PSD je určená v špeciálnom poli pozadia s obrázkom.

Hlavička (margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 1000px; height: 100px; border: 1px solid # 000000; background: # 009966; background-image: url (img / 1. gif);) .pages (margin-left: auto; margin-right: auto; width: 1000px;). content (margin-right: 10px; width: 806px; height: 450px; border: 1px solid # 000000; background: # 999999; float: left;). Sidebar (width: 180px; height: 450px; border: 1px solid # 000000; background: # FF9900; float: left;) .foot (clear: both;) .footer (margin-top : 10px; margin-left: auto; margin-right: auto; width: 1000px; height: 50px; border: 1px solid # 000000; background: # 333399;)

Hlavička ( okraj - vľavo: auto; okraj - pravý: auto; okraj - spodok: 10px; šírka: 1000px; výška: 100px; orámovanie: 1px plná # 000000; pozadie: # 009966; pozadie - obrázok: url (img / 1.gif); Stránky ( okraj - vľavo: auto; okraj - pravý: auto; šírka: 1000px; Obsah ( okraj - pravý: 10px; šírka: 806px; výška: 450px; orámovanie: 1px plná # 000000; pozadie: # 999999; plavák: vľavo; Bočný panel ( šírka: 180px; výška: 450px; orámovanie: 1px plná # 000000; pozadie: # FF9900; plavák: vľavo; Takéto rozloženie poskytuje oddelenie štýlu prvkov od kódu HTML, ako aj možnosť prekrývania vrstiev nad sebou. Uľahčuje vytváranie rôznych vizuálnych efektov: tipy, rozbaľovacie ponuky, zoznamy atď. Hlavným prvkom rozloženia bloku je značka div, ktorú sme už spomínali. Vyberie na oboch stranách určitý kúsok kódu - vrstvu. Všetky stylingové úlohy sú presunuté mimo hraníc HTML kódu v CSS, ku ktorým je prístup pomocou tried alebo ID. Zjednodušujeme proces rozloženia Všeobecne nie je vôbec potrebné strhávať celé bremeno vedomostí o usporiadaní na hrb. Na internete si môžete stiahnuť vopred pripravené šablóny alebo použiť rámce CSS, napríklad Bootstrap. Krása použitia tohto rámca spočíva v tom, že jeho tvorcovia sa už postarali o všetky nuansy rozloženia (podpora rôznych rozlíšení obrazovky, kompatibilita medzi rôznymi prehliadačmi atď.). Musíte len určiť, čo, kedy a ako má zobraziť na obrazovke, Bootstrap urobí zvyšok sám. Vďaka svojej popularite bude váš kolega navyše môcť ľahšie dokončiť váš kód. Samozrejme, rámce majú svoje nevýhody, tak ako bez nich môžeme ísť. Ich nástroje sú vhodnejšie na vytváranie prototypov a vytváranie sekundárnych webových stránok, napríklad správcovských stránok. Konkrétnejší dizajn je lepšie vysádzať pomocou „pier“. Zhrňme si to Na internete existujú zdroje so zložitou a veľmi zložitou štruktúrou, v ktorej je rozloženie časovo najnáročnejšou fázou pri vytváraní webových stránok. Absolútne umiestnenie pomocou kódu JavaScript a zložité vnorenie vrstiev výrazne komplikuje prácu návrhára rozloženia, ale zároveň z neho robí jednu z najlepšie platených v Runete. Ak sa chcete stať úplne od začiatku návrhárom webových stránok, budete musieť nielen prejsť niekoľkými z nich, ale tiež vložiť do podnikania maximálnu túžbu, úsilie a čas. Je tiež užitočné prihlásiť sa na odber našich aktualizácií blogu a pravidelne čítať užitočné články, ktoré zvýšia vašu kvalifikáciu, a tým aj vašu hodnotu na trhu práce. Veľa šťastia v rozložení a vidíme sa čoskoro na stránkach tohto blogu! JavaScript. Rýchly štart Naučte sa základy jazyka JavaScript na praktickom príklade vytvárania webových aplikácií

Dobrý deň, volám sa Alexander Zelenin a som webový vývojár.
Mnohokrát som počul názor, že rozloženie je veľa začínajúcich používateľov. Aj keď v skutočnosti ide o najdôležitejšiu súčasť každého (takmer) webového projektu. Toto sa používateľom zobrazí ako prvé. V súčasnosti vyžaduje kvalitné rozloženie (najmä blokovanie) vo veľkom projekte veľa rôznych zručností.

V tomto článku predstavujem schému vývoja návrhára dispozícií

[veľký po kliknutí]
Samozrejme, nejde o komplexnú a jedinú správnu schému. Existuje tiež celá kopa súvisiacich zručností, príslušných technológií atď. Absolvovanie je subjektívne.

Hneď chcem dodať, že v článku nebudú žiadne konkrétne odkazy na školiace materiály. Rád by som videl doplnky v komentároch.

Čo čakáme?

Najskôr je potrebné pochopiť, čo od človeka na každej z úrovní očakávame. Vaše očakávania sa môžu líšiť.
Junior - pozná hlavné tagy, dokáže opraviť obsah na hotovej html stránke, dokáže správne naformátovať text, bez problémov vložiť vložený element (video z YouTube, mapa Yandex), funguje cez systém riadenia verzií iba pre seba (majster, 1 prispievateľ). Dokáže od základu vymyslieť niečo jednoduché a ani to nepôjde (osobne od neho). Všeobecne nejde o samostatnú jednotku a vyžaduje vedenie zhora.
Stredná - viac-menej autonómna jednotka (alebo úplne autonómna pre malé a stredné projekty). Môže vytvoriť dobré rozloženie pre stredne veľký web a vo všetkých sa bude zobrazovať správne aktuálne verzie prehľadávače. Rozumie, ako fungujú šablónové motory a ako ich môže používať (za predpokladu, že je poskytnutý zvyšok kódu). Vie, ako naplánovať a zdokumentovať svoju prácu a odhadnúť termíny. Chápe dôležitosť zachovania štýlu kódu. Chápe, prečo existujú mriežkové systémy a rámce CSS. Vie, ako prevziať všetky potrebné informácie z rozložení od návrhára. Môže komunikovať s malým tímom, vytvárať pobočky a vybavovať žiadosti.
Senior - môže navrhnúť blokový systém pre veľký projekt. Vie, ako sa vyhnúť opakovaniu a problémovým oblastiam, keď ostatní vývojári používajú jeho kód. Vie, ako rozložiť zložité úlohy a správne formulovať úlohy. Vie, ako uplatniť aspoň jednu vývojovú metodiku (napríklad BEM). Dokáže projekt otvoriť čo najrýchlejšie. Rozumie dobre niekoľkým populárnym šablónam. Je schopný písať kolektory a automatizovať proces s nimi spojený. Môže vykonávať kontroly kódu a dohliadať na ostatných návrhárov rozloženia.
Pozrime sa teraz trochu konkrétnejšie na to, čo každý z blokov na každej úrovni obsahuje.

Junior

Html - znalosť hlavných značiek, atribútov. Pochopenie, ako to v zásade napísať.
Typografia - schopnosť formátovať text -. Text je základom takmer každého projektu. V prípade potreby vložte nerozdeliteľné medzery, tučné písmo, kurzívu, skratku atď. Môžete použiť typografa alebo podobnú službu, ale budete schopní porozumieť výsledku.
Sémantika - pochopenie, že pre určité úlohy existujú určité značky. Byť schopný zvoliť požadovanú značku.
Médiá - aké typy médií môžu byť vložené na stránku.
Iframe - vloženie widgetov tretích strán (video, zvuk, mapy atď.).
Audio video - štúdiu môžete odložiť, pretože čiastočne vyriešené pomocou iframe. Pochopte, aké formáty môže prehliadač prehrávať, ako navrhnúť prehrávač atď.
Obrázky - aké grafické formáty a v akej podobe prehliadač vníma. Výhody a nevýhody používania určitých formátov.
Rastrový - jpg, png, gif. Pochopte rozdiel vo formátoch a buďte schopní aplikovať, čo a kde je to potrebné.
SVG - štúdiu môžete odložiť, pretože aplikované menej často, ako by bolo žiaduce. Pochopte výhody, nevýhody, obmedzenia atď.
Písma - štúdiu môžete odložiť. Vlastne dosť zložitá téma a všeobecne by som začiatočníkom poradil, aby používali systémové písma. Byť schopný načítať písma, optimalizovať zobrazenie, minimalizovať oneskorenie vykresľovania pomocou vlastných typov písma.
Rozloženie stola - voliteľné. Pre tých, ktorí chcú v budúcnosti vytvárať vysoko kvalitné e-mailové kampane.
CSS 1 - písma, farby, zarovnanie, veľkosti.
CSS 2.1 - riadenie správania blokov, polohovanie, plnohodnotný dizajn.
Selektory - jednoduché selektory pre značku, triedu, vnorený prvok. Jednoduché pseudo-selektory ako: hover.
Pomenovanie - ako pomenovať triedy tak, aby to neznesiteľne nebolí.
Blokovať rozloženie - rozdeľte obrázok na vedomé bloky, zakomponujte bloky do HTML, navrhujte pomocou CSS.
Prehliadače - štúdiu môžete odložiť. Aké prehliadače existujú, v čom sa líšia.
Nástroje pre vývojárov - štúdiu môžete odložiť. Na pochopenie problémov so zobrazením použite nástroje prehľadávača.
Textové editory - aké textové editory sú tu pre vývojárov a prečo. SublimeText a Notepad ++ sú len príklady, ako dobre poznám. Vedieť v nich prispôsobiť základné veci, ako sú odsadenie, zalomenie riadkov atď.
Systémy na správu verzií - Osobne považujem schopnosť používať ich aspoň individuálne, pre seba osobne, za veľmi dôležitú. Aby sme pochopili, prečo boli tieto systémy vytvorené a aké sú.
Git - všeobecne pochopiť účel a princípy najpopulárnejšieho systému riadenia verzií.
Github / bitbucket - byť schopný používať jednu z populárnych platforiem git.
Pokladňa / potvrdenie / tlačenie / ťahanie - základné operácie pre osobnú potrebu.
Skrýša - dočasne uložiť nepotrebné údaje v danom okamihu.
10 diel - vykonať najmenej 10 prác v systéme Windows rôzne vzory... Môžete to vyskúšať, na tom nezáleží. Je dôležité byť kompletný v rámci súčasných poznatkov.

Stredná

CSS 3 - gradácie, tiene, vyhladzovanie, filtre, transformácie.
Pokročilé selektory - prvky nasledujúce za definovaným (+), definovaným počtom (n-dieťa), tieňovým domom, pred / po a tak ďalej.
Animácie - voliteľné. prechod a animácia. Hladké prechody, animácie. Pochopte obmedzenia a nevýhody.
Mriežky - prečo existujú, ako stavať, aké sú hotové riešenia. Môžete sa napríklad pozrieť na mriežku Flexboxu alebo na všetko, čo nájdete.
Rámce (CSS) - prečo sme potrební, ako podať žiadosť Je vhodné naučiť sa používať aspoň jednu studňu. Veľmi užitočné pre prototypovanie. Výrazne zvyšuje kvalitu projektu pri absencii projektového rozpočtu (nie je jedinečný, ale použiteľný).
Preprocesory CSS - štúdiu môžete odložiť. Optimalizácia práce, krajší a čitateľnejší kód. Premenné, mixíny atď. Pracujte s jedným alebo niekoľkými populárnymi preprocesormi ako SASS, LESS, Stylus.
Dotazy na médiá - štúdiu môžete odložiť. Zobrazuje požadované štýly v závislosti od podmienok (zariadenie, veľkosť obrazovky, hustota pixelov, verzia tlače atď.).
Štýl kódu - pochopte, prečo existujú štýlové konvencie, preštudujte si a začnite akékoľvek uplatňovať (odporúčam od AirBNB).
SUCHÉ / KISS / PEVNÉ - štúdiu môžete odložiť. Pochopte dôležité zásady rozvoja, ktoré výrazne zjednodušujú ďalšiu podporu projektu.
OOCSS - voliteľné. Pochopte, čo je objektovo orientované CSS a na čo slúži. Používa sa v tej či onej podobe v mnohých projektoch (aj keď si neuvedomujete, že to je ono). Ideálne je naučiť sa navrhovať. Môže to byť skvelé pre veľké projekty.
Dokumentácia - pochopiť, čo a ako dokumentovať. Dokument. Môže sa to odložiť, ale nezabudnite sa v budúcnosti na Markdown pozrieť.
Plánovanie - naučiť sa odhadnúť načasovanie obrazu a určiť postupnosť práce.
Rozklad - štúdiu môžete odložiť. Naučte sa rozdeliť úlohu na čiastkové úlohy. To je ťažšie, ako to znie :-)
Stanovovanie si cieľov - štúdiu môžete odložiť. Naučte sa jasne popisovať úlohy v texte, aby ostatní vývojári, vrátane tých s nízkou kvalifikáciou, jasne pochopili, čo je potrebné urobiť, aby ich mohli dokončiť.
Flexbox - pochopenie modelu, schopnosť plne sa uplatniť.
Rozloženie písmen - voliteľné. Vo všeobecnosti nie je táto zručnosť nadbytočná. Pochopte funkcie poštové systémy, drž sa dobre vzhľad a nespadajte do spamu (pokiaľ to nie je spam).
Polyfill - zistiť, ako používať najaktuálnejšie vývojové funkcie pri zachovaní spätnej kompatibility. Pochopte výhody a nevýhody tohto prístupu.
Rozloženie pre rôzne platformy - pochopiť, čo je potrebné urobiť, aby projekt vyzeral dobre nielen v systémoch Windows, Linux a Mac, ale aj v programoch SmartTV alebo PS.
Rozloženie medzi prehliadačmi - porozumieť rozdielu vo vykresľovaní prehľadávačov a umožniť im rovnaké zobrazovanie. S tým veľmi pomáha webová stránka CanIUse.
Mobilné rozloženie - štúdiu môžete odložiť. Pochopte obmedzenia mobilných platforiem. Využite múdro obmedzený priestor.
Optimalizácia - štúdiu môžete odložiť. Pochopte „cenu“ určitých techník. Pochopte fázy zobrazenia stránky používateľovi. - štúdiu môžete odložiť. Optimalizácie týkajúce sa veľkosti, medzipamäte, kompresie, spoločného využívania zdrojov atď.
Vykreslenie - štúdiu môžete odložiť. Optimalizácie týkajúce sa rýchlosti vykresľovania po načítaní.
SEO - štúdiu môžete odložiť. Prinajmenšom základné pochopenie fungovania vyhľadávacích nástrojov. Schopnosť „pomôcť“ vyhľadávač prísť na to, kde hľadať a čo je dôležité.
Šablónoví inžinieri - zistite, ako môžete znova použiť kód, zoskupiť prvky a usporiadať stránky. Je veľmi vhodné naučiť sa vykreslenie na strane servera aj na strane klienta. Patria sem aj šablóny v „čistom“ jazyku (napríklad jednoduché vloženia PHP). Nezaujíma nás práca „pred“ (tok údajov) šablónového nástroja.
PHP - štúdiu môžete odložiť. Pochopte základnú syntax a buďte schopní robiť menšie úpravy súvisiace s dizajnom stránky.
CMS - štúdiu môžete odložiť. Zistite, čo CMS existuje a prečo boli vytvorené. Naučte sa písať šablóny aspoň pre jednu (odporúčam Wordpress).
Javascript - štúdiu môžete odložiť. Naučte sa základnú syntax, pochopte, ako zložiť najjednoduchšie ovládače a robiť jednoduchú prácu s DOM.
jQuery - štúdiu môžete odložiť. Naučte sa, ako ušetriť veľa času na riešenie pomerne bežných úloh pomocou doplnkov pre najobľúbenejšiu knižnicu js (samozrejme po vanilla.js).
NodeJS - štúdiu môžete odložiť. Zistite, ako spustiť jednoduchý server, distribuovať statiku a vykresliť na strane servera. Môžete použiť Express alebo akýkoľvek iný rámec.
zhromaždenie - voliteľné. Naučte sa, ako zostaviť projekt z mnohých súborov CSS / HTML do toho, čo potrebujete. Odporúčam vám, aby ste sa ako zástupcovia „rôznych“ táborov oboznámili aspoň s chrčaním a dúškom.
IDE - voliteľné. Zistite, prečo sú IDE potrebné a ako ich používať. Ak chcete ušetriť čas, prepnite na použitie IDE. Dôležité: Naučiť sa IDE je ako úplne sa naučiť programovací jazyk a investovať do neho veľa času sa nemusí vyplatiť. Ja osobne používam textových editorov (a iba pre veľmi veľké projekty uvádzam IDE).
Vetvenie naučiť sa spravovať pobočky v gite -.
Zlúčiť - Naučte sa, ako zlúčiť pobočky s riešením konfliktov.
Načítať / Rebase - zistiť, prečo sú, kedy ich použiť a začať ich používať podľa potreby.
Grafický editor - prísť na to, čo sú, za čo. Ako sa vektor líši od rastra. Je dôležité rozumieť editorovi minimálne na úrovni „prečítania“ rozloženia od návrhára. Vyberte správne písmo, veľkosť, farbu atď. Nie z videnia, ale určite. Odporúčam pracovať s minimálne 1 bitmapou (Photoshop) a 1 vektorom (Figma).
50 umeleckých diel - na konci fázy budete mať asi 50 rôznych pracovných miest preukazujúcich zručnosti zo študovaných oblastí.

Senior

Aj keď sa táto skupina na diagrame javí ako malá, v skutočnosti je najväčšia. Pretože do tohto bodu je potrebné študovať všetko, čo sa odložilo.
Reagovať / Reagovať na rozloženie - pochopiť najvyššiu úroveň a spojiť všetky predtým získané vedomosti. Projekt by mal vyzerať dobre všade a vo všetkom (v rozumných medziach).
Postupná degradácia / postupné zlepšovanie - pochopiť, čo to je a prečo. Použite.
Gitflow - byť schopný vysvetliť ostatným vývojárom, ako vytvárať pobočky, kam ich vkladať, ako, ako byť schopný vykonať kontrolu kódu (rozloženie, samozrejme, nie kód).
BEM - voliteľné. Pochopte metodológiu, ktorá vám umožňuje vytvárať neobmedzene veľké projekty, aby rôzne tímy s minimálnou synchronizáciou mohli navzájom využívať bloky. Existujú aj iné metodiky, ktoré nedávajú najhoršie výsledky. Do tejto doby o nich nejako budete vedieť a môžete, ak chcete, študovať.
100 diel - mať celkovo sto diel demonštrujúcich rôzne získané zručnosti. V skutočnosti je to všetko podmienené. Vo svojom portfóliu môžete mať jednu prácu (skladajúcu sa z rôznych častí), ktorá už teraz ukáže, že sa ničoho nebojíte.

Záver

V skutočnosti je veľa z týchto tém málo. Udržať si v hlave kopu rôznych faktorov je však veľmi ťažké. Za 15 rokov som komunikoval s menej ako desiatimi návrhármi rozloženia (a vlastne programátormi všeobecne), ktorých by som zaradil medzi Senior (návrhárov rozloženia, dobrých programátorov) bolo oveľa viac.
Od ruky - je celkom možné stráviť rok plnohodnotným štúdiom a praxou iba rozloženia od nuly (a ešte viac, ak sa pustíte do návrhu komponentov).

Dúfam, že pre tých, ktorí sú na začiatku cesty, vám diagram ukáže, kam sa ešte môžete posunúť, a že nie je potrebné naraziť (alebo sa doň nemôžete vôbec) pustiť do programovania.

Tiež plánujem vytvorenie plnohodnotného kurz zadarmo s podrobným preskúmaním každej z tém - obdĺžniky zo schémy. Bol by som rád, keby som dostal ponuku, spätnú väzbu, želania a pod.
Kurz bude pravdepodobne vo formáte videonávodu s úplným textom a grafickou duplikáciou. Ak to pôjde, v budúcnosti pripojím odkazy do komentárov.

upd
Existuje veľa správ, že návrhár rozloženia nie je potrebný bez znalosti rámca. Toto píšu hlavne vývojári vo veľkých projektoch. A pre nich to je celkom pravda. Ale stále existuje veľa štúdií, ktoré robia vstupné stránky, rôzne šablóny pre WordPress a ďalšie CMS. Je to celkom dobrý trh a príležitosť zarobiť si peniaze. Existuje pomerne veľa úplne malých projektov s oveľa menšími požiadavkami, ktoré je návrhár dispozícií schopný dokonale uzavrieť.