1 / 16

TNPW1 Cvičení 7

TNPW1 Cvičení 7. 27.3.2014 aneta.bartuskova@uhk.cz. TNPW1 Cvičení 8. K layoutu z minulého cvičení 1

danyl
Télécharger la présentation

TNPW1 Cvičení 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. TNPW1 Cvičení 7 27.3.2014 aneta.bartuskova@uhk.cz

  2. 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

  3. 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)

  4. 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

  5. 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

  6. 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;}

  7. 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; }

  8. 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)

  9. Ř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

  10. 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í

  11. 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í

  12. 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

  13. 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!

  14. 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)

  15. 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

  16. 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

More Related