http://www.topschool.hu/webdesigner-tanfolyam.php http://www.topschool.hu Webdesigner weboldal készítés tanfolyam: Adobe Photoshop, Flash és webszerkesztés

1. Webdesign a gyakorlatban
www.topschool.hu

2.  Az
RWD olyan webdesign megközelítés,
amelynek célja, hogy a weboldal vizuális
elrendezése a lehető legoptimálisabb legyen
a lehető legtöbb eszközön
 Ezt a következő technikákkal valósítják meg:
Fluid Grid rendszer
 CSS3 media lekérések (@media)
 Rugalmas képek, amelyek mérete valamilyen
relatív érték alapján számítódik
 Szerveroldali komponensek, amelyek
tehermentesítik a „smart” eszközöket

www.topschool.hu

3.  Ethan
Marcotte:
http://alistapart.com/article/fluidgrids
 Alapja em (kvirt) mértékegység. Eredetileg az
adott betűtípus nagybetűs „M" szélességéhez
igazodik. Gyakorlatban 1 em = 16 px
 Mindent át kell számolni a következő képlet
alapján:
Tartget ÷ Context = Result
vagy
Tartget ÷ Context = Result * 100 = %
www.topschool.hu

4. 268 (target) / 988 (context) = 0.271255 * 100 = 27.1255 %
700 (target) / 988 (context) = 0.708502 * 100 = 70.8502 %
www.topschool.hu

5. Nem mindig az oldal szélessége!
www.topschool.hu

6.  CSS
3-ban megjelent @media szabályok
lehetővé teszik, hogy bizonyos szabályok csak
bizonyos feltétek esetén rendelődjenek a HTML
objektumokhoz
@media (min-width: 768px) and (max-width: 979px)
{
.hidden-tablet {
display: none !important;
}
}
------------------------------<link rel="stylesheet" href="m.css"
media="screen and (max-device-width: 480px)" />
www.topschool.hu

7. https://www.facebook.com/topschool.hu
www.topschool.hu