Responsywne strony WWW

Transkrypt

1 radmat

2 Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach:

3 Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px; margin: 0 auto; #banner background-color: #06ffc7; min-height: 80px; #naglowek background-color: #cbfff3; #lewo background-color: #26e1b6; float: left; width: 200px; min-height:150px;

4 #srodek background-color: #eafffa; float: left; width: 430px; min-height:150px; #prawo background-color: #2c967f; float: left; width: 150px; min-height:150px; #stopka background-color: #00765c; clear: both;

5 Ćwiczenie 2 Proszę zaprojektować następujący layout strony, oparty na DIV-ach:

6 W pliku HTML powinniśmy wpisać: <div id="cala_strona"> <div id="naglowek"> BANNER </div> <div id="lewo"> <div id="obrazek"> Grafika </div> <div id="menu"> Menu pionowe </div> </div>

7 <div id="prawo"> <div id="menu_poziome"> Menu poziome </div> <div id="tresc"> Treść </div> </div> <div id="stopka"> Stopka </div> </div>

8 W pliku CSS powinniśmy wpisać: #cala_strona width: 780px; margin: 0 auto; #naglowek width: 780px; min-height: 80px; background-color: #7e7e7e; #lewo width: 180px; min-height: 300px; float: left; background-color: #abaaaa;

9 #prawo width: 600px; min-height: 300px; float: left; background-color: #dbd3d3; #stopka width: 780px; min-height: 50px; background-color: #8e8e8e; clear: both;

10 #obrazek width: 140px; height: 100px; background-color: green; margin-top: 10px; margin-left: 20px; margin-right: 20px; #menu width: 140px; height: 170px; background-color: blue; margin-top: 10px; margin-left: 20px; margin-right: 20px;

11 #menu_poziome width: 600px; height: 50px; background-color: yellow; #tresc width: 560px; height: 200px; margin-top: 20px; margin-left: 20px; margin-right: 20px; background-color: red;

12 Responsywność strony RWD (Responsive Web Design) - technologia projektowania stron internetowych polegająca na tym, że wygląd i układ strony dostosowują się automatycznie do rozdzielczości urządzenia, na którym są wyświetlane.

13 Responsywność strony RWD (Responsive Web Design) - technologia projektowania stron internetowych polegająca na tym, że wygląd i układ strony dostosowują się automatycznie do rozdzielczości urządzenia, na którym są wyświetlane. Parametry strony, które spowodują jej responsywność, będziemy tworzyć oczywiście w kodzie CSS, pisząc odpowiednie reguły dla różnych zakresów rozdzielczości.

14 Responsywność strony RWD (Responsive Web Design) - technologia projektowania stron internetowych polegająca na tym, że wygląd i układ strony dostosowują się automatycznie do rozdzielczości urządzenia, na którym są wyświetlane. Parametry strony, które spowodują jej responsywność, będziemy tworzyć oczywiście w kodzie CSS, pisząc odpowiednie reguły dla różnych zakresów rozdzielczości. Treść strony nie powinna zależeć od rozdzielczości, w której jest wyświetlana. Zmianie powinien ulec jedynie wygląd strony / układ elementów.

15 Responsywność w pliku HTML Aby tworzona przez nas strona internetowa była responsywna, musimy w pliku HTML napisać regułę: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

16 Responsywność w pliku HTML Aby tworzona przez nas strona internetowa była responsywna, musimy w pliku HTML napisać regułę: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Natomiast w pliku CSS odpowiednie reguły muszą się znajdować w blokach

17 Responsywność w pliku HTML Aby tworzona przez nas strona internetowa była responsywna, musimy w pliku HTML napisać regułę: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Natomiast w pliku CSS odpowiednie reguły muszą się znajdować w (min-width: (min-width: 1000px) and (max-width: 1120px)

18 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu):

19 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu): powyżej 1024px - strona wyświetlana na monitorze

20 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu): powyżej 1024px - strona wyświetlana na monitorze 500px px - strona wyświetlana na tablecie

21 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu): powyżej 1024px - strona wyświetlana na monitorze 500px px - strona wyświetlana na tablecie poniżej 500px - strona wyświetlana na telefonie

22 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu): powyżej 1024px - strona wyświetlana na monitorze 500px px - strona wyświetlana na tablecie poniżej 500px - strona wyświetlana na telefonie Strona będzie się składała z menu poziomego znajdującego się pod banerem, części przeznaczonej na treść strony oraz części na reklamy.

23 Ćwiczenie 3 Proszę napisać prostą stronę responsywną. Weźmiemy pod uwagę następujące rozdzielczości (w dużym uproszczeniu): powyżej 1024px - strona wyświetlana na monitorze 500px px - strona wyświetlana na tablecie poniżej 500px - strona wyświetlana na telefonie Strona będzie się składała z menu poziomego znajdującego się pod banerem, części przeznaczonej na treść strony oraz części na reklamy. Poniżej najmniejszej dopuszczanej przez nas rozdzielczości, tj. 500px, układ strony ma być jednokolumnowy, tzn. menu ma się teraz znaleźć nad częścią przeznaczoną na treść strony (czyli stać się menu pionowym).

24 Strona w rozdzielczości 1920 na 1080 pikseli

25 Strona w rozdzielczości 800 na 600 pikseli

26 Strona w rozdzielczości 360 na 640 pikseli

27 Test rozdzielczości Wygląd strony w różnych rozdzielczościach łatwo można przetestować w Firefoxie wybierając Narzędzia > dla twórców witryn > widok trybu responsywnego.

28 Plik HTML <!DOCTYPE HTML> <html lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="styl.css" type="text/css"> </head>

29 <div id="kontener"> <img src="logo.jpg" alt=""> <div id="menu"> <ul> <li><a href="#">link 1</a> <li><a href="#">link 2</a> <li><a href="#">link 3</a> <li><a href="#">link 4</a> <li><a href="#">link 5</a> <li><a href="#">link 6</a> </ul> </div> <div id="tresc">lorem ipsum...</div> <div id="reklamy"> <div class="rekl"><img src="rekl1.jpg" alt=""></div> <div class="rekl"><img src="rekl2.jpg" alt=""></div> <div class="rekl"><img src="rekl3.jpg" alt=""></div> </div> </div>

30 Plik CSS body font-family: "Times New Roman", Georgia, sans-serif; font-size: 100%; #kontener padding: 0; margin: 0 auto; #menu background-color: #969292;

31 #tresc background-color: #51b590; float: left; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; #reklamy background-color: #eaeaea; float: right; text-align: center; padding-top: 20px;

32 ul, ul li display: block; list-style: none; margin: 0; padding: 0; ul a:link, ul a:visited text-decoration: none; display: block; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px;

33 img max-width: 100%; height: auto; width: auto;.rekl width: 100%;

34 @media (min-width: 1050px) #kontener width: 1024px; #menu width: 100%; ul li float: left;

35 ul a:link, ul a:visited width: 156px; font-size: 24px; #tresc width: 70%; #reklamy width: 25%;

36 @media (min-width: 520px) and (max-width: 1050px) #kontener width: 500px; #menu width: 100%; ul li float: left; ul a:link, ul a:visited width: 69px; font-size: 12px;

37 #tresc width: 70%; #reklamy width: 20%;

38 @media (max-width: 500px) #kontener width: 90%; #menu width: 100%; ul a:link, ul a:visited width: 96%; font-size: 12px;

39 #tresc width: 90%; #reklamy display: none;.rekl display: none;

40 Ćwiczenie 4 Proszę zaprojektować stronę responsywną, której tematem będzie Państwa hobby. Proszę stworzyć layout strony oparty na DIV-ach z wydzielonymi częściami przynajmniej na baner, menu, treść strony i stopkę. Odnośniki należy wykonać albo jako przyciski z efektem rollover, albo jako tekst z ustawionym zachowaniem dla linku aktywnego i po zatrzymaniu nad nim kursora myszy. Proszę zadbać o graficzną spójność strony. Mile widziane eksperymenty z marginesami.

41 Strona powinna dobrze wyglądać na: monitorze o dużej rozdzielczości (powyżej 1050px) telefonie o orientacji poziomej (powyżej 520px) telefonie o orientacji pionowej (poniżej 520px)