Materiały pomocnicze

 

Zadania

Zad. 1. Wykorzystując szablon z archiwum bootstrap-grid.zip należy odtworzyć zadany poniżej układ strony. Należy przygotować układ dostosowujący się do trzech klas urządzeń:

Czerwone liczby identyfikują poszczególne sekcje witryny, liczby zielone - określają ile kolumn dana sekcja  powinnna zajmować.

Testy dla różnych klas urządzeń należy wykonać korzystając z trybu responsywnego w narzędziach deweloperskich przeglądarki. W pierwszym etapie pracy jako zawartość poszczególnych elementów należy wpisać ich numery (czerwone liczby na diagramie) - ułatwi to śledzenie położenia poszczególnych elementów strony w czasie zmiany układu. Elementy strony zostaną wypełnione treścią w dalszych etapach.

Zad. 2. Jeśli szerokość ekranu jest mniejsza niż 480px elementy 4-7 należy wyświetlać jeden pod drugim.

Zad. 3. Gdy układ strony będzie zachowywał się zgodnie z powyższymi wymaganiami, należy uzupełnić go o treści przygotowane w ramach poprzedniego zadania laboratoryjnego (HTML+CSS):

    • (2.1) w elemencie 1 należy umieścić nagłówek witryny (logo i tytuł),
    • (2.2) w elemencie 2 należy umieścić przygotowane wcześniej menu,
    • (2.3) w elemencie 8 należy umieścić tabelę prezentującą informacje o filmach z ostatnich lat,
    • (2.4) w elementach 4-7 należy umieścić plakaty czterech wybranych filmów
    • (2.5) w elemencie 12 należy umieścić stopkę strony, która zawiera informacje o autorze i jego adres e-mail,
    • (2.6) elementy 9-11 należy wypełnić dowolną treścią.

Zad. 4. Należy wykorzystać style oferowane przez bibliotekę Bootstrap:

  • (3.1) dla tabeli filmów należ zastosować klasy związane z tabelami (dokumentacja: http://getbootstrap.com/css/#tables)
  • (3.2) w menu należy wykorzystać "pigułki" (ang. pills): http://getbootstrap.com/components/#nav-pills
  • (3.3) pod tabelą filmów należy umieścić komponent pozwalający na stronicowanie: http://getbootstrap.com/components/#pagination (na dalszych laboratoriach dodane zostanie pobieranie danych z serwera, aby prezentować zawartość poszczególnych podstron tabeli; na tym etapie zawartość tabeli może być statyczna)
  • (3.4) należy wykorzystać etykiety klasy label-info, aby oznaczyć najnowsze filmy w tabeli (http://getbootstrap.com/components/#labels)

Zad. 5. Należy przygotować drugą podstronę witryny prezentującą lokalizację kin (można wykorzystać statyczne mapy: mapa1.png, mapa2.png), w których można obejrzeć promowane filmy:

  • (4.1) układ nowej podstrony powinien być taki, jak na diagramach poniżej (diagramy pokazują tylko zawartość elementu 3, pozostałe elementy strony pozostają tak, jak dotychczas):
  • (4.2) w górnej części strony należy dodać komunikat (http://getbootstrap.com/components/#alerts) mówiący o tymczasowym zamknięciu jednego z kin z powodu remontu.

Zad. 6. Należy przygotować trzecią podstronę witryny zawierającą formularz rezerwacji biletu. Formularz powinien zawierać następujące pola:

  • imię rezerwującego
  • nazwisko rezerwującego
  • adres e-mail rezerwującego
  • lista rozwijana prezentująca filmy w repertuarze
  • pole typu radio pozwalające na wybór pomiędzy opcjami: "bilet normalny"/'bilet ulgowy"
  • lista wyboru rzędu w sali kinowej oraz lista wyboru miejsca w rzędzie

W formularzu należy wykorzystać style oferowane przez bibliotekę Bootstrap: http://getbootstrap.com/css/#forms.

Last modified: Friday, 15.12.2017, 15:34