Utwórz plik o nazwie cw551.html oraz cw551.css, który będzie zawierał składnię CSS użytą do formatowania dokumentu.
Treść serwisu będzie prezentować interaktywne menu restauracji.
Wszelkie skrypyt umieszczone będą w osobnym pliku cw551.js
Wszystkie elementy graficzne
Umieszczone będą w folderze "img"
Należy obciąć, wyskalować i obrobić tak, aby w czasie prezentacji zachowywały się jednakowo.
Każdy obraz przygotowujemy w dwóch wersjach: do prezentazji w panelu środkowym (duży rozmiar) i do prezetazji w panelu prawym (miniaturka).
Dla całej strony dobieramy tło graficzne, ale zwracając uwagę na czytelność prezentowanych treści.
Strona składa się z:
Banera
plik baner1.png: Własna kompozycja z elementami pszczelich uli
plik baner1.png: Wymiary 1920 pikseli szerokość i 140 pikseli wysokość
plik baner1.png: Szerokość 100% okna przeglądarki
plik baner2 png: obrazek bez tła przedstawiający pszczółkę Maję
plik baner2.png: Wstawiony jako tło, zaczepiony do prawej krawędzi okna, widoczny w całości w obszarze banera.
Uwaga: dwa obrazy w tle!
Napis "Restauracja Maja zaprasza" w nagłówku poziomu pierwszego wyśrodkowany
Lewego panelu: Wybór potraw
Formularz podzielony na grupy dań: zupa, drugie danie, napój, deser.
Dla każdego rodzaju możliwość wyboru spośród min. 3 różnych opcji
Własny projekt menu złożony z elementów formularza
Poniżej pole na wpisanie kodu kilenta - od kodu uzależniona jest wielkość rabatu
Na dole przycisk ZAMAWIAM generujący w prawym panelu koszt zamówienia
Poniżej przycisk RESET - generujący ustawienia startowe (domyślne) formularza.
(*) Opcja: szef poleca. Wybranie tej opcji powoduje zaznaczenie losowo po jednej potrawie z każdego rodzaju (zupa, drugie, napój, deser).
Środkowego panelu: Prezentacja graficzna menu (pliki z obrazami potraw)
Najechanie kursorem myszy w lewym panelu na menu powoduje wyświetlenie wskazanej przez użytkownika potrawy jako duży obraz z opisem (nazwa) potrawy.
(*) Wersja rozszerzona opis = więcej niż nazwa, np. Rosól - smaczna tradycyjna polska zupa, podawana w czasie niedzielnych spotkań rodzinnych, której głównym składnikiem jest specjalnie hodowana tzw. kura rosołowa.
Wymiary obrazu dobieramy tak, aby zajmował około 80% szerokości dostępnej przestrzeni zachowując proporcje.
Pod obrazem wyświetlany jest wycentrowana duża nazwa potrawy.
Dla obrazu trzeba zastosować efekt cienia lub obramowania.
Prezentowanym obrazom wymuszamy kształ okręgu/elipsy za pomocą skłądni CSS.