Transcript 02_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
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)
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ý
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%)
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%; }
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
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
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)
Jednostĺpcový fixný layout
Hlavička
Navigácia
Päta
<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:
}
nav {
background-color:
}
section#content {
background-color:
}
footer {
background-color:
}
#806d59;
#a89888;
#fff;
#806d59;
Dvojstĺpcový fixný layout
Navigácia
Hlavička
Päta
<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;
}
Trojstĺpcový fixný layout
Navigácia
Hlavička
Päta
<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;
}
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
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
<link rel="stylesheet" media="screen and (max-device-width:
800px)" href="style800.css" >
uvedením priamo do súboru
#nav {
float: right;
}
#nav ul {
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait) {
#nav li {
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px) {
#nav {
width: 200px;
}
#nav li {
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
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,...
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
}
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// šírka okna je min. 500px
}
else {
// šírka okna je menej ako 500px
}
}
addListener – naviaže udalosť na DOM prvok
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">
4. Flexibilný layout
CSS3 Grid Layout
vnáša do CSS typický súradnicový systém
iný relatívny layout (elastický, liquidný, fluidný, hybridný)
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*/
}
6. Ostatné
tel: URI schéma
<a href="tel:+421415133065">041/513-3065 </a>
geolokácia
menej JS
offline prístup
Ďakujem za pozornosť