Download
1 / 16
160 likes | 323 Vues
TNPW1 Cvičení 7. 27.3.2014 aneta.bartuskova@uhk.cz. TNPW1 Cvičení 8. K layoutu z minulého cvičení 1
E N D
TNPW1 Cvičení 7 27.3.2014 aneta.bartuskova@uhk.cz
TNPW1 Cvičení 8 K layoutu z minulého cvičení 1 • Prostřednímu sloupci (obsahu) nemusíte dávat šířku – přizpůsobí se automaticky podle šířky plovoucích boxů – a nesmíte dávat výšku! Potom se vám stane, že obsah teče přes patičku když ten prostor nestačí. • Ani bočním panelům se nedává výška – stejný problém • Pokud dáte šířku obalu, nebude se vám obsah přizpůsobovat oknu (může být záměr) • Kompromis je nastavení obalu min-width a max-width místo width – přizpůsobuje se pak oknu jen v určitých mezích
TNPW1 Cvičení 8 K layoutu z minulého cvičení 2 • Prostřednímu sloupci (obsahu) se nedává žádný float (při klasickém třísloupcovém layoutu) • float:center neexistuje • Není důvod dávat plovoucím boxům absolutní umístění, už jsou v plovoucím umístění! • Při dělání layoutu si vystačíte s plovoucím umístěním (použití relativního / absolutního umístění je alternativou, nicméně musíte vědět jak na to, plovoucí je jednodušší) • Otestujte layout při různé šířce okna, můžete tak odhalit zásadní chyby (obsah tekoucí přes patičku)
TNPW1 Cvičení 8 Tipy - pozadí • Opakování pozadí background-repeat • :no-repeat– pozadí se neopakuje, vykreslí se pouze jednou • :repeat-x – pozadí se opakuje horizontálně • :repeat-y – pozadí se opakuje vertikálně • :repeat– pozadí se opakuje, až vyplní celý prostor prvku • Spojený zápis background • background:blue url(pozadi.jpg) repeat-x • pozadi.jpg se bude opakovat horizontálně, pokud nebude k dispozici, použije se modrá barva
TNPW1 Cvičení 8 Tipy - navigace • Svislá navigační lišta • ul.nav a {display:block;} – převede odkazy na blokové elementy, které budou mít stejnou šířku • Odkaz "zde" se změnou podle stránky • <body id="stranka1"> … • <a href="stranka1.htm" id="stranka1">Stránka 1</a> • Styl odkazu když jsme na té stránce: • body#stranka1 a#stranka1 { … } • Musíme udělat pro každou kombinaci stránka+odkaz
TNPW1 Cvičení 8 Tipy - různé • U řádkových elementů (kromě img) nefunguje dolní a horní okraj a odsazení, řešení -> použít line-height (výška řádku) • display:none schová element (užitečné pro tiskový styl u hlavičky, menu apod.) • U obrázkových odkazů vhodné zrušit dekorace -> a img {border:none;}
TNPW1 Cvičení 8 Tipy - různé • Odstranění prostoru mezi buňkami v tabulce: • table {border-collapse:collapse;} • Lepší orientace v CSS souboru • /*********** MENU *************/ • /*********** TABULKY *************/ atd. • Odsazení prvního řádku boku textu • p {text-indent: 3em; }
TNPW1 Cvičení 8 Box model • IE řeší jinak • Od IE6 je problém jen v „quirk módu“, především když zapomeneme deklaraci doctypenebo když stránka obsahuje chyby • (více informací např.: http://ie-brouci.dero.name/box-model.html)
Řešení problémů s box modelem • Podmíněné vkládání souboru stylů • <!--[if IE]> <link href="styly/ie.css" rel="stylesheet" type="text/css" media="screen, projection" title=„Normální styl" /> <![endif]--> • Vkládá se až po definici normálního stylu, IE to „pochopí“, ostatní prohlížeče to ignorují jako poznámku • Matrjoška • Viz přednáška – principem je další obalový div s nastavenou šířkou (vnitřní má definován padding a border), u jednoho divu se nesmí setkat definice width s def. paddingu nebo borderu. • Hacky • Podtržítkový pro IE 6 (před název vlastnosti _ ) • Rovnítkový pro IE7 (před název vlastnosti = ) • Vždy až po definici dané vlastnosti ve správném tvaru
TNPW1 Cvičení 8 Plovoucí fotogalerie • Jednotlivé fotografie jsou vloženy do divů stejných pevných rozměrů. • Fotografie jsou horizontálně vycentrované • Jednotlivé divy jsou od sebe odsazeny • Při změně velikosti obsahové části se divy automaticky přeskládají
Bodovaný úkol • Stránka validní v XHTML1, která obsahuje plovoucí fotogalerii • Stačí jediná fotografie, která se opakuje • Šířka na celou stránku, jednotlivé boxy mají barvu pozadí nebo rámec a jsou od sebe odsazeny • Včetně popisků nad nebo pod obrázkem (také může být pořád ten samý) • Při zmenšování / zvětšování okna se boxy (obrázky s popiskem) přeskupují
TNPW1 Cvičení 8 Odevzdání projektu • Na můj email zip archiv se všemi soubory (html, css, obrázky,..) + URL adresa (lide.uhk.cz) • Deadline: 4.5.2014 23:59 • Případné prodloužení termínu bude zveřejněno na stránkách lide.uhk.cz/bartuan1 • Za pozdní odevzdání následuje strhávání bodů podle délky zpoždění (cca 2b / den), max 15
TNPW1 Cvičení 8 Hodnotící kritéria pro projekt • Pro projekt jsou závazná kritéria, uvedená na www.jiristepanek.cz/uhk/tnpw1, MOŽNÉ VYJÍMKY: • "Stránky nebudou mít horizontální posuvník při rozlišení 800x600" - stačí pro rozlišení 1024x768 (tj. pro obal můžete použít šířku 960-980px) • Lze použít HTML5 místo XHTML1 - pokud bude dostatečně obhájeno kvalitou projektu!
TNPW1 Cvičení 8 Upozornění • Pro získání zápočtu je nutné kromě odevzdání projektu také obhajoba projektu !!! • Termín obhajoby (ověření autorství) bude vypsán na stránkách lide.uhk.cz/bartuan1 • Plagiátorství je vážný disciplinární přestupek, při jeho zjištění si budete muset přinejmenším zapsat předmět znovu – tím se v TNPW1 myslí kopírování kódu (texty a obrázky samozřejmě kopírovat můžete)
TNPW1 Cvičení 8 Konzultace • Po domluvě emailem jsou možné konzultace • Na konzultace choďte s konkrétními problémy a dotazy, předběžná kontrola projektu není možná – zkontrolujte si sami podle podmínek • Konkrétní problémy lze řešit i po emailu
Zápočet a body ke zkoušce • Zápočet • Projekt: možných 50 bodů, potřeba min. 30 bodů • Cvičení: možných 10 bodů • Zkouška • body ze zápočtu (ale max. do výše 50 bodů) • zkouškový test
