Zadanie do samodzielnego wykonania

Mirosław Zelent

Dokonaliśmy już przeglądu podstawowych właściwości CSS, a z poprzednich odcinków znamy zarówno katalog znaczników HTML, jak i sposób tworzenia struktury opartej na divach. To już całkiem spory zasób wiedzy! Pora wykorzystać zdobytą wiedzę w akcji i rozwiązać część front-endową rzeczywistego zadania egzaminacyjnego (część back-endową w tym odcinku jeszcze pomijamy).

Wykonuj polecenia cierpliwie i dokładnie, zachowując pełną koncentrację – tak jakby to był rzeczywisty egzamin. Sprawdź w jakim czasie uda Ci się zrealizować cały front-end do tego zadania. Pamiętaj – im szybciej sobie poradzisz z okodowaniem HTML i CSS na Twoim rzeczywistym egzaminie, tym więcej czasu będziesz mógł przeznaczyć na PHP, JS i MySQL. To dlatego warto ćwiczyć się w sprawnym tworzeniu layoutów totalnie od zera (nie mówiąc już o przyzwyczajeniu się do zachowania koncentracji przez długi okres czasu, jak i do zdyscyplinowanego realizowania odgórnych wytycznych co do joty – to właśnie według tych wytycznych sprawdza się pracę w kluczu odpowiedzi). Do dzieła!

Arkusz E.14 (styczeń 2017)

Wykonaj stronę internetową wspomagającą pracę komisu samochodowego, przedstawioną na rysunku poniżej (pobierz ten obraz).

samochody

Przygotowanie grafiki:

  • plik auto.png (pobierz tutaj) należy przeskalować do wymiarów: szerokość 100px, wysokość 50px. Pozostałych atrybutów obrazu nie należy zmieniać.

Cechy witryny:

  • nazwa pliku: auto.html,
  • zastosowany standard kodowania polskich znaków,
  • tytuł strony widoczny na karcie przeglądarki: "Komis Samochodowy";
  • arkusz stylów w pliku o nazwie auto.css jest prawidłowo połączony z kodem strony;
  • podział strony na bloki: baner, panele lewy i prawy, stopka zrealizowana zgodnie z rysunkiem 2 i wytycznymi dla zawartości stopki poniżej
  • zawartość banera: nagłówek pierwszego stopnia o treści: "SAMOCHODY";
  • zawartość panelu lewego: nagłówek drugiego stopnia o treści: "Wykaz samochodów", lista nienumerowana (wypunktowana) wypełniana wartościami ja na rysunku, nagłówek drugiego stopnia o treści: “Zamówienia”, lista nienumerowana wypełniona za pomocą wartościami jak na rysunku,
  • zawartość panelu prawego: nagłówek drugiego stopnia o treści: "Pełne dane: Fiat", główną część panelu wypełnić wartościami jak na rysunku, z użyciem paragrafów
  • zawartość stopki: tabela o jednym wierszu i trzech kolumnach: w komórce 1 odnośnik o treści "Kwerendy" prowadzący pod adres "kwerendy.html" (to tylko adres, ten plik nie musi istnieć). W komórce 2 napis "Autor: " oraz wstawiony Twój numer PESEL, w komórce 3 obraz auto.png. Tekst alternatywny ustawiony na "komis samochodowy".

Styl CSS witryny internetowej:

Plik auto.css zawiera formatowanie dla:

  • banera: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 120%, wyrównanie tekstu do prawej strony, wysokość banera 60px;
  • panelu lewego: kolor tła #61B2EC, szerokość 40%, wysokość 500px;
  • panelu prawego: kolor tła #8EC9F2, szerokość 60%, wysokość 500px;
  • stopki: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 150%, wyrównanie tekstu do środka;
  • odnośników: odnośnik niewybrany w kolorze pomarańczowym, odwiedzony w kolorze zielonym;
  • tabeli: szerokość tabeli zajmuje 100% strony.

Niewymienione właściwości obiektów przybierają wartości domyślne!