GIMP. Deformacje. Skalowanie. Wycinanie.

Zadanie: Restauracja - Menu (5h)

1. Utwórz plik o nazwie cw551.html oraz cw551.css, który będzie zawierał składnię CSS użytą do formatowania dokumentu.
2. Treść serwisu będzie prezentować interaktywne menu restauracji.
3. Wszelkie skrypyt umieszczone będą w osobnym pliku cw551.js
4. 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).
5. Dla całej strony dobieramy tło graficzne, ale zwracając uwagę na czytelność prezentowanych treści.
6. Strona składa się z:
   • Banera
     1. plik baner1.png: Własna kompozycja z elementami pszczelich uli
     2. plik baner1.png: Wymiary 1920 pikseli szerokość i 140 pikseli wysokość
     3. plik baner1.png: Szerokość 100% okna przeglądarki
     4. plik baner2 png: obrazek bez tła przedstawiający pszczółkę Maję
     5. plik baner2.png: Wstawiony jako tło, zaczepiony do prawej krawędzi okna, widoczny w całości w obszarze banera.
     6. Uwaga: dwa obrazy w tle!
     7. Napis "Restauracja Maja zaprasza" w nagłówku poziomu pierwszego wyśrodkowany
   • Lewego panelu: Wybór potraw
     1. Formularz podzielony na grupy dań: zupa, drugie danie, napój, deser.
     2. Dla każdego rodzaju możliwość wyboru spośród min. 3 różnych opcji
     3. Własny projekt menu złożony z elementów formularza
     4. Poniżej pole na wpisanie kodu kilenta - od kodu uzależniona jest wielkość rabatu
     5. Na dole przycisk ZAMAWIAM generujący w prawym panelu koszt zamówienia
     6. Poniżej przycisk RESET - generujący ustawienia startowe (domyślne) formularza.
     8. (*) 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)
     1. Najechanie kursorem myszy w lewym panelu na menu powoduje wyświetlenie wskazanej przez użytkownika potrawy jako duży obraz z opisem (nazwa) potrawy.
     2. (*) 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.
     3. Wymiary obrazu dobieramy tak, aby zajmował około 80% szerokości dostępnej przestrzeni zachowując proporcje.
     4. Pod obrazem wyświetlany jest wycentrowana duża nazwa potrawy.
     5. Dla obrazu trzeba zastosować efekt cienia lub obramowania.
     6. Prezentowanym obrazom wymuszamy kształ okręgu/elipsy za pomocą skłądni CSS.
   • Prawego panelu: Prezentacja zamówienia / podsumowanie kosztów
     1. Kliknięcie na elemencie menu (lewy panel) powoduje wyświetlenie nazwy oraz ceny potrawy i poniżej obrazka (miniaturki) prezentującego potrawę
     2. Wybieranie dania z tej samej grupy powoduje zastąpienie (nadpisanie) poprzedniego wyboru
     3. Wybór z innej grupy dań dodawany jest w osobnym wierszu.
     4. Należy dobrać wymiary miniaturek tak, aby komponowały się z tekstem.
   • Stopki
     1. Wysokość 80 pikseli
     2. Wyśrodkowany napis w paragrafie: Imię / Nazwisko / Klasa-grupa/ bieżący rok
     3. Czcionka Courier
7. Wykorzystujemy swoje pomysły!
8. Screen 1 Screen 2 Screen 3 Screen 4 Screen 5

 

Pytania i odpowiedzi: