Detail kurzu
Tvorba, programovanie webstránok II. - pokročilé HTML, CSS a moderný webdesign
IT LEARNING SLOVAKIA, s.r.o.
Popis kurzu
Tento kurz je pre ľudí, ktorí sa chcú naučiť, ako osviežiť svoju stránku pomocou šikovných grafických trikov. Či už za pomoci obrázkov, vektorovej grafiky, alebo pomocou práce s písmom. Ak sa Vám Vaša stránka zdá fádna, na tomto kurze si ukážeme základné spôsoby, ako ju vylepšiť a na praktických príkladoch sa naučíme pokročilé HTML a CSS príkazy.
Každá webstránka musí obsahovať pútavú a kreatívnu grafiku. Jedna vec je obsah, ktorý na webstránku pridáte, ale grafika je ešte dôležitejšia. V minulosti sa grafika webstránok navrhovala a exportovala z grafických editorov, ale možnosti, ktoré dnes jazyk CSS umožňuje sú po kreatívnej stránke takmer neobmedzené. CSS-ko by sa dalo nazvať grafickým jazykom okrem zmeny farby písma umožňuje tvoriť tvary, tiene, zaoblovať rohy a pracovať s veľkosťami obrázkov tak, že vyrobíte čokoľvek bez použitia Photoshopu alebo iného grafického editora a to nesmieme zabudnúť ani na možnosti animácií a farebných prechodov kde CSS vo verzii 3 na plnej čiare porazilo technológiu FLASH. Na kurze taktiež rozoberieme do podrobna prácu s CSS a jej selektormi.
Tento kurz je prirodzeným pokračovaním nášho prvého kurzu Tvorba webstránok I a nadväzuje na jeho témy. Na kurze sa očakáva, že viete porozumieť a vytvoriť HTML kód jednoduchej stránky so základným štýlovaním textu, pozadia a rozloženia v CSS. Ukážeme si významové HTML značky na stránkach a naučíme sa, čo znamená tvoriť sémantický web. Povieme si o obrázkoch a ako ich optimalizovať pre našu stránku a neobídeme ani vektorovú grafiku. Skrášlime si našu stránku - naštýlujeme si ju vlastným písmom a ukážeme si ako mať plnú kontrolu nad rozložením stránky. Nakoniec všetky nové vedomosti použijeme pri praktickom vytváraní stránky z obrázkovej predlohy.
V tomto kurze sa naučíte využívať pokročilé možnosti CSS I., II. a niektoré z CSS III. vlastností a vytvoríte si niekoľko grafických šablón. Naučíte sa pracovať s pokročilými selektormi, animovať prechody objektov a vyrábať tak pútavú grafiku, ktorá vašu webstránku zmení na nepoznanie. Na kurze sa naučíme taktiež triky a rôzne spôsoby ako pracovať s obrázkami, teda orezávanie, zmena veľkostí a podobne. Kurz je vhodný pre začiatočníkov ale aj pre účastníkov, ktorí s grafikou nikdy nepracovali. Kurz je vhodný tak ako pre programátorov, tak aj pre začínajúcich grafikov ale hlavne pre tých, ktorí chcú tvoriť moderné web stránky s moderným vzhľadom.
Obsah kurzu
Zopakovanie HTML tagov, ktoré budeme potrebovať
- práca s textom
- práca s odstavcami
- Obrázky a odkazy
- Zoznamy a tabuľky
- oddiely a časti webstránky
- obrázky a pozadia
- odkazy
- nástroje pre vývojára alebo DEVELOPERS TOOLS v prehliadači
Nové HTML Elementy
- Čo sú sémantické elementy? W3 štandard
- Aký majú význam značky STRONG, EM, INS, DEL, ADDRESS, ABBR, BLOCKQUOTE, CITE?
- Blokové sémantické elementy - HEADER, FOOTER, NAV, ASIDE, ARTICLE, SECTION, MAIN
- Prerobíme DIVká na stránke na sémantické elementy
Grafika na webstránkach
- na čo sa používajú obrázky
- kedy sa používajú obrázky pozadia
- rozdelenie grafických formátov
- rastrové
- JPG
- png8 a png24
- PNG
- GIF
- Animácie
- Vektorové - SVG
- rastrové
- použite grafických formátov - na čo je ktorý formát vhodný
- kde nájdem vhodnú grafiku? - fotobanky, platené/zadarmo, ikony
- obrázky a legislatíva
- Úprava rastrových obrázkov
- Šetríme prenosové pásmo, zrýchľujeme stránku pomocou obrázkov vhodnej veľkosti a kvality
- Vhodná veľkosť - orezanie obrázku online služby/Photoshop
- Optimalizácia kvality - online služby/Photoshop
- Prečo je vektorová grafika budúcnosť webu?
- SVG je bratranec HTML
- SVG formát
Zopakovanie CSS jazyka
- CSS I., CSS II. a CSS III.
- Syntax
- zápis CSS štýlu
-
- priamo
- Štýl v HTML súbore
- externý súbor
- výhody / nevýhody
- Selektory
- Podľa HTML značky
- Podľa triedy - class
- Podľa identifikátora - ID
- Kombinácie selektorov (child selector a descendant selector)
CSS pokročilý
- Nové jednotky na veľkosť - em, rem
- Aká je základná veľkosť fontu? Čo je 1em?
- Rozdiely em a rem a ich využitie - prístupnosť
- Využitie nových fontov na stránke
- Google fonts
- Prečo je font-weight udaná v číslach?
- @font-face direktíva na vkladanie vlastných fontov - čo obsahuje?
- Vložíme si manuálne do stránky nový font (z 1001fonts/dafont)
- Definície a volanie farieb
- Nové definovanie farieb s priehľadnosťou - rgba(), hsl(), hsla()
- hexakód a priehľadnosť - podpora nových vecí prehliadačmi: caniuse.com
- Margin, padding - komplexnejší príklad
- Dvoj, troj a štvorhodnotový zápis margin a padding
- Problémy pri box modeli - margin collapse, box-sizing
- Niekedy je lepšie použiť padding ako margin a naopak
- Pre kontorlu použijeme DEVELOPER TOOLS v prehliadači
- CSS reset - keď prehliadač robí napriek
- Spravíme si jednoduchý reset pre box-sizing, využijeme selektor všetkého (*)
Pozíciovanie - CSS vlastnosť position
- Static - to, čo doteraz
- Relative - relatívne voči originálnemu miestu
- Posúvame veci left, right, top a bottom
- Fixed - fixne na obrazovku
- Absolute - najkomplikovanejšie ale najpoužívanejšie
Vlastnosť display a viditeľnosť v CSS
- Keď chcem elementy skrývať
- Meníme blokovitosť a riadkovitosť
- Spravíme si riadkové menu
- Prekresľujeme z príkladov
-
- základom je aby po kurze účastníci vedeli kopírovať vizuálne vzhľad z predlohy a vedeli to vytvoriť a zapísať do HTML a CSS kódu, preto je súčasťou kurzu aj nácvik prekresľovania obrázku stránky do HTML a CSS aj nasledujúce cvičenia:
- prekresľovanie rôznej grafiky do HTML a CSS
- kontrola a vyhodnocovanie
- zapracovanie šablóny do webstránky
- základom je aby po kurze účastníci vedeli kopírovať vizuálne vzhľad z predlohy a vedeli to vytvoriť a zapísať do HTML a CSS kódu, preto je súčasťou kurzu aj nácvik prekresľovania obrázku stránky do HTML a CSS aj nasledujúce cvičenia:
- Záverečná diskusia a priestor na otázky
Cieľová skupina
mierne pokročilýHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
