GIMP. Mapowanie obrazu dla potrzeb stron www.

Zadanie 1 układ planetarny (3h)

1. Rowiązanie zapisujemy w dwóch plikach: cw521.html oraz cw521.css
2. Wszystkie elementy stylu zapisane są w zewnętrznym arkuszu
3. Tło całej strony czarne
4. Układ strony:
   • BANER:
     1. Wymiary 1920x200 pikseli
     2. Zawarość: planety układu słoneczenego + słońce
     3. Z lewej strony napis: Kosmos 2020
     4. W tle obraz z widokiem kosmosu
     5. Ustawienia CSS - dopasowuje się rozmiarem do zmian rozmiaru okna
     6. Kliknięcie na banerze powoduje powrót do ustawień z momentu załadowania strony
   • Panel LEWY
     1. Szerokość 20%
     2. Po wybraniu planety z mapy w panelu środkowym pojawia się nazwa wybranej planety w połowie wysokości obrazu z panelu środkowego
     3. Tekst (nazwa planety) kolor czarny, cień biały
     4. Rozmiar napisu 4em
   • Panel środkowy
     1. Obraz
        • Będący mapą odsyłaczy
        • Wymiary: 570x570 pikseli
        • Tło przezroczyste
        • Na obrazie widoczne planety układu słonecznego (układ dowolny według własnego pomysłu)
        • CSS'em nadajemy obrazowi kształt okręgu i dodajemy cień w kolorze czerwonym
        • Obraz wyśrodkowany
        • Kliknięcie na obszarze planety na obrazie powoduje wyświetlenie nazwy planety w lewym panelu, poniżej (w stopce) krótki opis wybranej planety, w panelu prawym odnośnik do filmu z serwisu YouTube z informacjami o wybranej planecie.
   • Panel PRAWY
     1. Zawiera ramkę (iframe) o wymiarach 300 szerokość i 200 wysokość
     2. Ramka położona jest w połowie wysokości obrazu z panelu środkowego
     3. Ramka wyświetlana jest bez obramowania
   • STOPKA
     1. Paragraf pokazujący po kliknięciu na obrazie będącym mapą, jako content opis wybranej planety
5. Materiały
6. SCREEN 1 SCREEN 2 SCREEN 3

 

Pytania i odpowiedzi: