Wykonaj witrynę internetową. Do tego celu wykorzystaj edytor

Wykonaj witrynę internetową. Do tego celu wykorzystaj edytor zaznaczający składnię oraz program
do obróbki grafiki rastrowej. Witryna internetowa składa się z trzech podstron: index.html,
napis.html, slogan.html. Strony mają wspólny szablon zgodny z poniższym rysunkiem.
Wspólne cechy witryny dla wszystkich podstron:








zastosowany właściwy standard kodowania polskich znaków
tytuł strony widoczny na karcie przeglądarki „GIMP – powtórzenie wiadomości”
arkusz stylów umieszczony w osobnym pliku style.css
podział strony na bloki: baner, panel lewy, panel prawy, stopka zrealizowany za pomocą
znaczników sekcji (np. znacznik div)
strona wyśrodkowana względem okna przeglądarki
zawartość sekcji baner:
o animowany gif o wymiarach 1024px na 200px
o działanie banera: na baner o białym tle od prawej strony wjeżdża zdjęcie, kiedy
zdjęcie wypełni cały baner – zatrzymuje się, po kliku sekundach zaczyna zjeżdżać ku
lewej krawędzi banera, aż zniknie całkowicie
o animacja ma trwać cały czas
zawartość sekcji panel lewy:
o nagłówek drugiego stopnia o treści ‘Warto odwiedzić’
o poniżej lista numerowana z elementami: „Szkoła”, „Onet”, „Wirtualna Polska”, każdy
element jest odnośnikiem i prowadzi kolejno do stron: zs1.lublin.pl, onet.pl, wp.pl.
Każdy odnośnik otwiera się w nowej karcie przeglądarki.
Zawartość sekcji stopka:
o wyśrodkowany nagłówek pierwszego stopnia o treści „GIMP – podsumowanie”
o poniżej menu poziome stworzone za pomocą listy, zawierające odnośniki do
podstron witryny
o poniżej tekst paragrafu wyrównany do prawej, zawierający dzisiejszą datę
Podstrony witryny
Podstrony witryny różnią się tylko zawartością panelu prawego.
Cechy panelu prawego dla strony index.html
Panel prawy zawiera wyśrodkowane, wyświetlające się obok siebie trzy przyciski, będące
odnośnikami do podstron witryny.
Przyciski należy stworzyć w programie GIMP. Będą to animowane gify. Cechy przycisków:






gradient jako tło
wysokość 50px
szerokość 50px
prostokąt o zaokrąglonych rogach
napis (nazwa podstrony – HOME, NAPIS, SLOGAN ) przesuwający się w górę i w dół przycisku
każdy przycisk ma mieć inne tło (inne kolory gradientu)
Cechy panelu prawego dla strony napis.html
Panel prawy zawiera wyrównany do lewej migający napis o treści „Lubię GIMPa!”. Napis przygotuj w
programie GIMP i umieść jako animowany gif na stronie.
Cechy panelu prawego dla strony slogan.html
Panel prawy zawiera wyśrodkowaną animację. Cechy animacji:






pojawiający się po jednej literze napis „GIMP jest fajny!”
litery mają różne kolory, ale tę samą czcionkę i rozmiar
rozmiar czcionki: 12pt
czcionka: Arial
litery nie są umieszczone w jednej linii
animacja zadziała tylko jeden raz, następnie się zatrzyma
Styl CSS witryny
Formatowanie sekcji:




baner: kolor tła #FFF, wysokość 200px, szerokość 1024px, wyrównanie tekstu do środka
panel lewy: kolor tła #05839, wysokość 600px, szerokość 300px, czcionka Arial
panel prawy: kolor tła # 293a3d, kolor czcionki # c3dee3, szerokość 724px, wysokość 600px,
czcionka Arial
stopka: kolor tła #000, kolor czcionki #fff, szerokość 1024px, wysokość 100px
Formatowanie znaczników:




H1: kolor czcionki #ff0000, wersaliki
H2: czcionka Arial
P: marginesy – górny i dolny 5px, lewy i prawy 10px, wyrównanie czcionki – wyjustowanie
A: brak podkreślenia, w momencie, gdy kursor myszy znajduje się na odnośniku, odnośnik
zmienia kolor tła na #0000FF i kolor czcionki na #FFF