Zadanie egzaminacyjne
Wykonaj aplikację internetową fabryki cukierków. Wykorzystaj do tego celu edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i/lub wektorowej.Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy3.zip zabezpieczone hasłem: Wyp@kujMni3
Archiwum należy rozpakować.
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze.Wyniki swojej pracy zapisz w tym folderze.
Grafika
 |
| cukierki1.jpg |
 |
| cukierki2.png |
 |
| cukierki3.jpg |
– zdjęcie cukierki2.png powinno być tak skadrowane, aby był widoczny jedynie czerwony żelek
– nad żelkiem powinien znaleźć się napis o treści „Cukierki”
– cechy tekstu: tekst powinien być opisany na okręgu zgodnie z obrazem 1, czcionka Georgia lub Times New Roman, pogrubiona, wypełnienie koloru fioletowe
– cechy obrazu: tło przezroczyste, wysokość dokładnie 170 px
– obraz zapisany jako logotyp w formacie umożliwiającym zapis przezroczystości Zdjęcie cukierki3.jpg należy skalować do rozmiaru 600 px na 450 px
 |
| Obraz 1. Logotyp |
Witryna internetowa
|
| Obraz 2. Witryna, podstrona Zamówienie |
– strona główna o nazwie index.html oraz podstrona zamowienie.html
Cechy wspólne dla obu stron:
– zastosowany właściwy standard kodowania polskich znaków
– tytuł strony widoczny na karcie przeglądarki: „Fabryka cukierków”
– arkusz stylów w pliku o nazwie styl10.css prawidłowo połączony z kodem strony
– podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
– zawartość pierwszego górnego bloku: odnośnik o treści „Zamów cukierki”, którego wybranie prowadzi do strony zamowienie.html
– Zawartość drugiego górnego bloku: odnośnik, którego wybranie prowadzi do strony index.html. Odnośnik jest w formie obrazu logotyp z tekstem alternatywnym „Nasze logo”
– zawartość bloku głównego prawego:
– nagłówek drugiego stopnia o treści: „Nasza oferta”
– tabela o rozmiarze 2x2 (wiersze drugiej kolumny są scalone):
– w pierwszym wierszu znajdują się napisy „Kształty” oraz „Możesz zamówić dowolny kolor cukierka”, łamanie tekstu po słowie „zamówić”
– w drugim wierszu znajduje się lista numerowana (uporządkowana) oelementach: „cytryna”, „liść”, „banan”
– zawartość stopki: tekst „Autor strony: PESEL”, gdzie PESEL to Twój numer PESEL. PESEL jest pogrubiony
Cechy odrębne dla pliku index.html:
– zawartość banera: nagłówek pierwszego stopnia o treści: „Słodka kraina”
– zawartość bloku głównego lewego: obraz cukierki3.jpg z tekstem alternatywnym o treści „Nasze cukierki”Cechy odrębne dla pliku zamowienie.html:
– zawartość banera: nagłówek pierwszego stopnia o treści: „Strefa zamówień”
– zawartość bloku głównego lewego:
– tekst: „Numer kształtu: ”
– poniżej pole edycyjne typu numerycznego
– poniżej tekst: „skomponuj swój kolor, podaj RGB:”
– poniżej trzy pola edycyjne typu numerycznego, każde poprzedzone tekstem: „R:”, „G:”, „B:”
– przycisk o treści „Zamówienie”, którego wciśnięcie powoduje wywołanie skrypt
– poniżej paragraf, w którym pierwotnie znajduje się tekst: „Twoje zamówienie”, tekst jest modyfikowany przez skrypt
– przycisk o treści „Kolor”
Styl CSS witryny internetowej
Cechy formatowania CSS działające na stronie:– wspólne dla całej strony: krój czcionki Helvetica
– wspólne dla dwóch bloków górnych: kolor tła RGB: 146, 184, 112; wyrównanie tekstu do środka, szerokość 50%, wysokość 170 px
– wspólne dla banera i stopki: kolor tła RGB: 100, 61, 49; biały kolor czcionki,wyrównanie tekstu do środka, wysokość 80 px, marginesy wewnętrzne 5 px
– wspólne dla bloków głównych: kolor tła RGB: 146, 184, 112; szerokość 50%, wysokość 450 px
– odnośnika „Zamówienie” z drugiego bloku górnego: tło w postaci obrazu cukierki1.jpg, margines wewnętrzny prawy 30 px, dolny 120 px, rozmiar czcionki 150%, bez podkreślenia
– tabeli i komórki tabeli: obramowanie 2 px, linią kreskowaną zieloną; marginesy zewnętrzne 30 px, wewnętrzne 20 px
– nagłówka pierwszego stopnia: odległość między literami 20 px, rozmiar czcionki 250%
Skrypt
Wymagania dotyczące skryptu:– wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamówienie”
– skrypt sprawdza wprowadzony numer kształtu i wypisuje w akapicie poniżej przycisku „Zamówienie” tekst „Twoje zamówienie to cukierek”, a dalej w zależności od wprowadzonej wartości: 1 –„cytryna”, 2 –„liść”, 3 –„banan”, inny –„inny”,np. „Twoje zamówienie to cukierek liść”
– następnie skrypt sprawdza wartości RGB, a następnie zmienia kolor tła przycisku „Kolor” na kolor odpowiadający podanej wartości RGB
Wybrane pola i metody modelu DOM języka JavaScript
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: cukierki1, cukierki3, index, logotyp, przeglądarka, styl10, zamowienie, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku wraz z arkuszem egzaminacyjnym.
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów:– grafika, –zawartość witryny internetowej,
– działanie witryny internetowej,
– styl CSS witryny internetowej,
– skrypt.
