Przeskocz do treści

Lekcja 26 (CSS)

Galerie obrazów.

Zapoznaj się z treścią artykułu, a następnie wykonaj zadanie umieszczone poniżej.

Zadanie 1: Przygotuj serwis www prezentujący galerię obrazów o tematyce: Nasza szkoła. Wytyczne do projektu:

  1. Dokument główny serwisu galeria.html oraz plik zawierający styl galeria.css;
  2. Ustal dla całego serwisu poprawną interpretację polskich znaków i język polski; pamiętaj o kodowaniu pliku;
  3. Cały serwis ma mieć spójny wygląd, strona główna i podstrony mają wygląd identyczny, różnią się tylko treścią;
  4. Ustal tło obrazkowe dla całej strony; zastosuj właściwość opacity, aby tło nie rozpraszało uwagi użytkownika;
  5. Przygotuj 6 obrazków (o1.png, o2.png, o3.png, o4.png, o5.png, o6.png) i zapisz je w folderze media; trzeba będzie zrobić z nich miniatury (patrz punkt 7) oraz dostosować ich wymiary do potrzeb serwisu (patrz punkt 8);
  6. Podstrony: o1.html, o2.html, o3.html, o4.html, o5.html, o6.html (wszystkie pliki zapisz w folderze htm);
  7. Szerokość strony 970px, wyśrodkowana względem okna przeglądarki;
  8. Nagłówek: Galeria - Nasza szkoła;
    • Zastosuj: text-align, czcionka: Comic Sans MS, text-shadow, color;
  9. Blok zawierający ułożone obok siebie miniatury obrazków (6 miniatur); będą one wykorzystane jako odsyłacze do podstron; miniatury wcześniej przygotuj skalując je do wymiaru np. 150x100 px;
    • Zastosuj właściwości CSS:
      • margin dla odstępów między obrazkami;
      • border-color dla tła bloku zawierającego miniatury;
      • :hover dla zmiany wyglądu miniatury po najechaniu na nią kursorem myszy (np. powiększenie rozmiaru miniatury o 2px, czy zmiana przezroczystości);
      • title dla skróconego opisu obrazka;
      • Pamiętaj o atrybucie alt przy wstawianiu grafiki na stronę;
  10. Dwa bloki ułożone obok siebie:
    • Z lewej strony zawierający obraz w dużym rozmiarze dopasowanym do szerokości strony (pamiętaj, że szerokość całej strony to 970px)
    • Zastosuj właściwości CSS:
      • margin dla odsunięcie obrazka od krawędzi bloku;
      • border dla oznaczenia granic obrazka;
      • box-shadow dla dodania efektu;
      • inne...
    • Z prawej strony zawierający opis do wyświetlanego aktualnie obrazka;
    • Zastosuj właściwości CSS:
      • font-family dla uzyskania ciekawej czcionki;
      • color dla nadania koloru tekstowi;
      • border-color dla ustalenia koloru tła bloku;
      • font-size dla ustalenia rozmiaru tekstu;
      • inne ...
  11. Na dole strony stopka zawierająca informacje o autorze serwisu:
    • Zastosuj właściwości CSS podobne jak dla bloku zawierającego opisy do obrazków; dobierz inne wartości dla tych właściwości;
error: Content is protected !!