PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Transkrypt

1 PROGRAMOWANIE

2 LOGO CONTACT NAV CONTENT SIDEBAR FOOTER

3 PRACA DOMOWA CONTENER LOGO HOME CONTACT DROPDOWN DROPDOWN CONTENT_WRAP Lista UL Lista UL Lista UL SIDEBAR_LEFT WIDTH:20% NO BACKGROUND WIDTH:65% H4 IMG CONTENT_ARTICLE WIDTH:80% CONTENT_ASIDE WIDTH:20% IMG FOOTER (COPYRIGHT INFO, CREATE DATE) SIDEBAR_RIGHT WIDTH:15% NO BACKGROUND H4

4 LOGO HOME DROPDOWN Między blokami głównymi (zielonymi) należy dodać odstępy Lista UL Lista UL Lista UL np. css -> margin Wszystkie linki należy kierować do pustego elementu tj. <a href= # >text linku</a> H4 W widgetach należy zaokrąglić rogi (wszystkie cztery) oraz ustawić kolor (lub obrazek) na tło nagłówka h4. Każdy widget powinien być objęty div em np.

5 MENU ROZWIJANE MENU ELEMENT MENU ELEMENT SUB-MENU ELEMENT 1 SUB-MENU ELEMENT 2 SUB-MENU ELEMENT 3 <ul class= menu > <li class="dropdown"> <a href="#" class= dropbtn">menu element</a> <ul class="dropdown-content"> <li><a href= # >Sub-menu element 1</a></li> ( ) </li> </ul>

6 Punkty: stworzenie poprawnej struktury strony - 3 pkt stworzenie poprawnej struktury strony bez widgetów - 2 pkt struktura z błędami - 1 pkt brak struktury - 0 pkt dodanie działającego rozwijanego menu (1 poziom) - 1 pkt brak menu - 0 pkt

7 JQUERY jquery jest to biblioteka języka JavaScript Główne zalety tej biblioteki: Mała objętość skryptów, prosta składnia Mała objętość samej biblioteki Bardzo dużo dodatkowych pluginów

8 DODAWANIE BIBLIOTEKI Google CDN <script src=" lub z lokalnego dysku (podobnie jak pliki css) <script src= js/jquery min.js ></script>

9 POBIERANIE ELEMENTÓW $('.czerwony') //pobranie div o klasie czerwony $('div p.podpis ) //wszystkie p o klasie podpis zawierające się w div $('div#cont > p') //wszystkie p mieszczące się bezpośrednio w div o id cont $('p, span, div.czerwony') //pobranie wszystkich p, span oraz divów o klasie czerwony

10 SKŁADNIA JQUERY $('.box-hide').css('color','red').show(3000); identyfikator jquery dodanie właściwości css obiekt do pobrania dodanie efektu

11 ROZPOCZYNANIE TWORZENIA SKRYPTU $( div.ukryj ).click(function() { $(this).hide( slow ); }); $(document).ready(function() { }) //kod jquery

12 ANIMACJE JQUERY show (speed, callback_function) hide (speed, callback_function) fadein (speed, callback_function) toggle () fadeout (speed, callback_function) slidedown (speed, callback_function) slideup (speed, callback_function) slidetoggle (speed, callback_function) $( div.box ).click(function() { $( div.box ).hide(`slow`); }); $( div.box2 ).click(function() { $(this).fadeout(`slow`); });

13 animate (wlasciwosci, czas, rodzaj animacji, funkcja zwrotna) <button id= start >Start</button> <div id= blok >Blok</div> #blok{ width:100px; height:100px; background-color:green; } <script> $(document).ready(function(){ $("#start").click(function(){ $("#blok").animate({ width: "500px", opacity: 0.4, }, 1500 ); }); }); </script> <link rel="stylesheet" type="text/css" href="style.css">

14 Java C C++ Pierwsze 5 języków może być w parach Python C# JavaScript PHP Objective-C Ruby Perl R Go Swift Scratch programowanie obiektowe