Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TNPW1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position:fixed, použitelnost webu Martin Adámek.

Podobné prezentace


Prezentace na téma: "TNPW1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position:fixed, použitelnost webu Martin Adámek."— Transkript prezentace:

1 TNPW1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position:fixed, použitelnost webu Martin Adámek

2 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2 Plovoucí fotogalerie Bez popisků – sama bez práce –pro pouhé bez viditelných (vnějších) popisků –XHTML kód: –XHTML kód: –obrázky se nařádkují samy –vkládání elementů po každém čtvrtém obrázku je zbytečné a kontraproduktivní omezení šířky lze dosáhnout v CSS pomocí max-width pro div, ve kterém jsou img vloženy (kromě MS IE) –v příp. problémů lze v CSS vyzkoušet display (inline, inline-block) –příklad (částečně) :

3 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 3 Plovoucí fotogalerie S popisky – pomocí obtékání –pro použití viditelných (vnějších) popisků pod obrázky nebo nad obrázky –XHTML kód: Popisek pod fotkou Popisek pod fotkou –každý div má v CSS float: left –celé obaleno dalším div, proti přílišnému účinku clear:left (zkoušejte ve FF) –vizte přednášku –příklad:

4 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 4 Position: fixed Position: fixed; {v CSS} –jako absolute, ale počítá se vůči oknu => při svislém listování stránkou drží menu na jednom místě => je stále k dispozici –obsah divu může být větší, než se vejde => overflow-y:auto; {v příp. potřeby zobrazí svislý posuvník} –příklad: levý sloupec na –nefunguje v MS IE

5 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5 Základy použitelnosti použitelnost webu = efektivní webdesign –intuitivní pochopitelnost webu, jeho struktury a navigace pro návštěvníka nečte návody „jak použít tento obchod“ obvykle nečte ani obsah stránky ! –prolétává očima, kouká na nadpisy, na obrázky, na začátky textů –testuje se na dobrovolnících pomocí zátěžových testů je jednou z disciplín v rámci tvorby webu –vedle: technické kvality (učivo TNPW, validita kódu,... ) přístupnosti pro zdravotně či technicky znevýhodněné návštěvníky obsahu webu, jeho formy a struktury (formulace textů,...) grafiky SEO je tvořeno kombinací všech!

6 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 6 Základy použitelnosti požadavky: –konzistence webu, hlavně navigace všude stejný vzhled stránky všude stejné umístění a struktura menu –odevšud odkaz o jednu úroveň výš a na hlavní stránku Google přivádí dovnitř webu, nelze užít „zpět“ odkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahoře –odkazy vedoucí na jeden cíl mají stejný popis –odkazy vedoucí na různé cíle mají různé popisy –úzce souvisí s přístupností (pro zdravotně či technicky handicapované) odkazy popsány výstižně odkazy podtrženy zvlášť označeny odkazy vedoucí –mimo web –na soubor (místo na stránku) + uvedení velikosti –do nového panelu nebo okna (to ale nedělat zbytečně) volitelně (velmi vhodné): –drobečková navigace „Nacházíte se: web > sekce > podsekce >.. > stránka“ –každý drobeček je odkazem na patřičnou stránku/sekci příklad:

7 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7 Dnešní úkol – plovoucí fotogalerie jako základ použijte dvou- nebo tří- sloupcové rozložení –pokud nemáte své, použijte cizí, neztrácejte čas do obsahového sloupce vložte plovoucí „fotogalerii“ –stačí symbolicky vložit cca. 20 bloků –stačí symbolicky vložit cca. 20 bloků každý blok má pevnou šířku (cca. 50px) na přeskáčku ve dvou barvách –class=„suda“, nebo „licha“ schránku při editaci využívejte efektivně při měnění šířky okna se bude měnit počet bloků na řádku  barevné bloky budou tvořit šachovnici, nebo svislé pruhy –pod galerií použijte konec obtékání (clear:left) a zkontrolujte, zda se ve FF neukončilo i obtékání krajních sloupců 1 bod ! v případné plovoucí fotogalerii v projektu ale použijte reálné obrázky, ne prázdné divy


Stáhnout ppt "TNPW1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position:fixed, použitelnost webu Martin Adámek."

Podobné prezentace


Reklamy Google