1 / 25

Layout

Layout. Ing. Mari á n Pecko, PhD. Fixný layout. merná jednotka – pixel ( px ) stránka má konštantnú veľkosť bez ohľadu na veľkosť okna prehliadača, alebo veľkosť fontu výhody – jednoduchšie dizajnovateľný , väčšia kontrola nad čitateľnosťou obsahu

hester
Télécharger la présentation

Layout

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. Layout Ing. Marián Pecko, PhD.

  2. Fixný layout • merná jednotka – pixel (px) • stránka má konštantnú veľkosť bez ohľadu na veľkosť okna prehliadača, alebo veľkosť fontu • výhody – jednoduchšie dizajnovateľný, väčšia kontrola nad čitateľnosťou obsahu • nevýhody – ťažko sa určuje ideálna šírka pre optimálnu čitateľnosť, ťažko určiť optimálnu šírku (na trhu je množstvo rozlíšení - 760px pre 800x600, 960px pre 1024x768)

  3. Relatívny layout • relatívne merné jednotky – em, percento (%) • obsah stránky sa prispôsobuje veľkosti okna prehliadača alebo veľkosti fontu • rozdelenie: • elastický • liquidný • fluidný • hybridný

  4. em - štvorček • štvorček – rozmer štvorca, ktorého šírka sa rovná kuželke • kuželka – stupeň písma + riadkový preklad • stupeň písma – font-size • riadkový preklad – medzera medzi riadkami 10/12 – desaťbodové písmo na dvanásťbodovej kuželke, riadkový preklad je 2 body (line-height:1.2, vo Worde 120%)

  5. Elastický layout • merná jednotka – em • veľkosť stĺpcov záleží na veľkosti fontu • výhody – aj keď používateľ zväčší písmo, dizajn sa nezmení; veľmi stabilný layout (všetko sa mení proporcionálne) • nevýhody – používateľ môže zväčšiť písmo natoľko, že stránka bude väčšia ako okno prehliadača (horizontálna rolovacia lišta); ťažko použiteľný na malých monitoroch • riešenie – #wrapper { width:60em; max-width:98%; }

  6. Liquidný layout • merná jednotka – percentá • veľkosť stĺpcov záleží na veľkosti okna prehliadača • výhody – nikdy sa neobjaví horizontálna rolovacia lišta

  7. Fluidný layout • merná jednotka – percentá • špeciálny typ liquidného layoutu • šírka stránky je obmedzená jednou alebo obomi z vlastností min-width a max-width

  8. Hybridný layout • merná jednotka pre šírku stránky – percentá • merná jednotka pre postranný stĺpec – em • výhoda – nikdy sa neobjaví horizontálna rolovacia lišta a zároveň sa nedeformuje postranný stĺpec (napr. s bočným menu)

  9. Jednostĺpcový fixný layout

  10. <body> <div id="wrapper"> <header></header> <nav></nav> <section id="content"> </section> <footer></footer> </div> </body> #wrapper{ width: 960px; /*monitory so šírkou 1024px a viac bez horizontálnej rolovacej lišty */ margin: 0 auto;/*umiestni obsah na stred stránky*/ } header{ background-color: #806d59; } nav{ background-color: #a89888; } section#content{ background-color: #fff; } footer{ background-color: #806d59; }

  11. Dvojstĺpcový fixný layout

  12. <body> <div id="wrapper"> <header></header> <div id="container"> <nav></nav> <section id="content"> </section> </div> <footer></footer> </div> </body> #wrapper{ width: 960px; margin: 0 auto; } header{ background-color: #806d59; } #container{ background: #d8d4ba; overflow: auto; /*zruší obtekania v potomkoch*/ width: 100% } nav{ width: 150px; float: left; } section#content{ width: 770px; float: left; padding: 20px; background-color: #fff; } footer{ background-color: #806d59; }

  13. Trojstĺpcový fixný layout

  14. <body> <div id="wrapper"> <header></header> <div id="container"> <nav></nav> <section id="content"> </section> <section id="right"> </section> </div> <footer></footer> </div> </body> #wrapper{ width: 960px; margin: 0 auto; } header{ background-color: #806d59; } #container{ background: #d8d4ba; overflow: auto; width: 100% } nav{ width: 150px; float: left; } section#content{ width: 570px; float: left; padding: 20px; background-color: #fff; } section#right{ width: 200px; float: left; } footer{ background-color: #806d59; }

  15. Responsitívny layout • poskytuje množstvo layoutov stránky, ktoré sa prispôsobujú rôznym šírkam obrazovky • 3 kľúčové techniky: • media queries, media query listeners • flexibilný layout, ktorý používa relatívne dimenzovanie • flexibilné obrázky a médiá prostredníctvom dynamickej zmeny veľkosti alebo CSS

  16. 1. Media Queries • prispôsobovanie štýlov podľa splnenia daného dopytu • môžu sa používať logické operátory AND a NOT, čiarka plní funkciu logického OR • funkcie: width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution... • 3 spôsoby implementovania: • importovanie z externého súboru @import url(style600min.css) screen and (min-width: 600px); • uviesť dopyt do prvku link do atribútu media <linkrel="stylesheet" media="screen and (max-device-width: 800px)" href="style800.css" > • uvedením priamo do súboru

  17. #nav { float: right; } #navul { list-style: none; } @mediascreen and (min-width: 400px) and (orientation: portrait) { #navli { float: right; margin: 0 00 .5em; border:1px solid #000000; } } @mediascreen and (min-width: 800px) { #nav { width: 200px; } #navli { float: left; margin: 0 00 .5em; border: none; } }

  18. 2. Media Query Listeners • CSS Object Model (CSSOM) • vykonajú skript, ako reakciu na zmenu dopytu • CSS – zmena dizajnu alebo veľkosti prvkov • JS – zmena obsahu alebo funkcionality • napr. na malých obrazovkách chceme kratší nadpis, iný obrázok,...

  19. window.matchMedia – do neho vkladáme media query var mq = window.matchMedia( "(min-width: 500px)" ); vlastnosť matches – vracia bool hodnotu v závislosti na výsledku dopytu if (mq.matches) { // šírka okna je min. 500px } else { // šírka okna je menej ako 500px }

  20. // mediaqueryeventhandler if (matchMedia) { var mq = window.matchMedia("(min-width: 500px)"); mq.addListener(WidthChange); WidthChange(mq); } // mediaquerychange functionWidthChange(mq) { if (mq.matches) { // šírka okna je min. 500px } else { // šírka okna je menej ako 500px } } addListener – naviaže udalosť na DOM prvok

  21. 3. Viewport • metatag, ktorý zisťuje aktuálne rozlíšenie • ďalšie nastavenia tohto tagu: maximum-zoom, initial-scale <meta name="viewport" content="width=device-width,initial-scale=1">

  22. 4. Flexibilný layout • CSS3 Grid Layout • vnáša do CSS typický súradnicový systém • iný relatívny layout (elastický, liquidný, fluidný, hybridný)

  23. 5. Flexibilné obrázky a médiá • prispôsobovať obrázky a iné médiá, v závislosti na zariadení • škálovanie (úprava mierky), CSS vlastnosť overflow img, object { max-width: 100%; } img, object { overflow:hidden; /*dynamicky oreže obrázok tak, aby sa zmestili do kontajnera*/ }

  24. 6. Ostatné • tel: URI schéma <a href="tel:+421415133065">041/513-3065 </a> • geolokácia • menej JS • offline prístup

  25. Ďakujem za pozornosť

More Related