Dopisujemy do stworzonej wcześniej strony menu odsyłające do innych stron linii lotniczej (chwilowo mamy tylko dwie strony, więc tytuły innych możliwych stron trzeba wymyślić). Menu powinno mieć 8-10 pozycji, przy czym co najmniej dwie powinny być podstronami tej samej strony. Do stworzenia menu trzeba użyć właściwego znacznika semantycznego, a samo menu powinno być listą (z kolejną listą/listami do reprezentowania podstron).
Dodajemy też kilka informacji o opóźnionych i odwołanych lotach - skąd, dokąd, kiedy, jakie opóźnienie.
Jeśli pozostałe elementy strony nie używają znaczników semantycznych, to przy okazji to poprawiamy.
Menu w postaci listy nie wygląda najlepiej, ale możemy to poprawić. Usuwamy liczby albo kółka sprzed elementów (list-style), ustawiamy odpowiednie wcięcie listy podstron. Wybieramy czcionkę inną niż w głównej części strony. Zdecydowanie nie chcemy, żeby linki zmieniały kolor po wybraniu, ani żeby były podkreślone (selektory pseudoklas :link, :visited), chcemy za to by były wielkimi literami, mimo że w tekście strony niekoniecznie są. Warto poeksperymentować w Inspector żeby na żywo widzieć zmiany wyglądu i dopasować odpowiednie wartości.
Informacje o opóźnieniach też powinny być estetycznie sformatowane, tak żeby czcionka (pogrubienia, pochylenia, kolor) ułatwiała czytanie informacji. Samoloty odwołane powinny być zaznaczone delikatnie czerwonym tłem, bardzo opóźnione - pomarańczowym, a tylko trochę opóźnione - żółtym.
Informacje wyświetlamy w 3 kolumnach, po lewej stronie menu, po środku - główna zawartość strony, a po prawej informacje o opóźnionych lotach. Można skorzystać z float, ale lepiej użyć flexbox (patrz https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Dodajemy formularz rezerwacji lotu. Powinien zawierać pola skąd i dokąd (jako elementy select), pole na imię i nazwisko pasażera i pole wyboru daty lotu. Potrzebne są też przyciski do czyszczenia i wysłania formularza.
Formularz umieszczamy pod informacjami o opóźnionych lotach.
Teraz oglądamy naszą stronę na telefonie. Albo przynajmniej "jak na telefonie", czyli włączamy narzędzia i wybieramy Responsive Design Mode, czyli obrazek tabletu i telefonu albo wciskamy Ctrl-Shift-M. Oglądamy naszą stronę na mniejszych i większych urządzeniach, i na mniejszych wygląda zupełnie niedobrze.
Korzystając z media queries (@media screen and ..., min-width, max-width) przerabiamy wygląd dla niewielkich urządzeń. Dla telefonów nie mamy miejsca na więcej niż jedną kolumnę, więc umieszczamy wszystko nad sobą i ukrywamy niektóre informacje z głównej części strony: przewidywaną pogodę i zdjęcia miast. Dla tabletów robimy dwie kolumny - menu przenosimy na górę, ale pozostałe dwie kolumny mogą zostać bez zmian. Przyjmujemy jakieś rozsądne rozmiary tabletu i telefonu. Na bardzo szerokich ekranach nie ma sensu rozciągać strony tak, żeby wypełniała całą szerokość. Ustalamy pewną maksymalną szerokość i powyżej niej nie poszerzamy już strony.
Wracamy jeszcze do selektorów pseudoklas, tym razem :hover. Chcielibyśmy wyświetlać informację o miejscu przydzielonym pasażerowi gdy myszka znajduje się nad opisem pasażera na liście. W tym celu tworzymy wyskakujące okienko (popup), ukrywając je w normalnych warunkach (display: none), a pokazując tylko gdy myszka jest nad opisem pasażera. Okienko umieszczamy w pobliżu opisu pasażera (position: absolute?), pamiętając o odpowiednim zmodyfikowaniu opisu pasażera tak, żeby przesunięcie liczyć względem niego.
Żeby lepiej odróżniać pasażerów zmieniamy tło co drugiego elementu listy. Można to zrobić dopisując jakąś klasę do tych elementów, ale wygodniej jest skorzystać z selektora pseudoklasy :nth-child(), którego parametrem jest wzór opisujący wybierane elementy (patrz opis w MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) albo po prostu even i odd.
Wprawdzie edytor powinien nas poinformować o błędach, ale zawsze dobrze jest zasięgnąć drugiej opinii.
Zobaczmy, co o napisanej stronie sądzi walidator w3: https://validator.w3.org/. CSS też można sprawdzić, ale ponieważ często używamy rzeczy, które jeszcze nie są w oficjalnej specyfikacji, to wyniki mogą być nieco nieoczekiwane. Dla chętnych, https://jigsaw.w3.org/css-validator/.
Hinty:
www.mimuw.edu.pl/~ciebie/hint_lab3.html
www.mimuw.edu.pl/~ciebie/hint_lab3_2.html