baner

Lekcja 57

Projektowanie stron

 
Układ kolumnowy

cw 570

  • Utwórz dokument cw570.html oraz cw570.css
  • Wszystkie ustawienia stylu zapisz w pliku zewnętrznym
  • U góry umieść 3 bloki o równej szerokości położone obok siebie zajmujące razem całą szerokość okna
  • Poniżej jeden blok i w poniżej 2 bloki obok siebie zajmujące po 50% szerokości okna
  • Do każdego z bloków wstaw przy pomocy składni JavaScript porcję tekstu tak, aby wypełniał on bloki podobnie jak na wzorcu załaczonym do zadania i składał się z conajmniej dwóch paragrafów.
  • Do każdego bloku dodaj nagłówek trzeciego poziomu rozciągnięty tak, żeby znajdował się nad wszystkimi poniższymi kolumnami.
  • W linii zawierającej 3 bloki zastosuj w każdym z bloków podział tekstu na dwie kolumny
  • W linii zawierającej 2 bloki zastosuj w każdym z bloków podział tekstu na trzy kolumny
  • W linii zawierającej 1 blok zastosuj podział tekstu na sześć kolumn
  • Przed każdym paragrafem wstaw obrazek
  • Dla nagłówków artykułu 5 i 6 ustaw tło gradientowe.
  • Dla nagłówków artykułu 2 i 4 ustaw tło obrazkowe.
  • W nagłówku artykułu 1 wstaw dwa obrazki. Jeden z lewej strony takstu, drugi prawej.
  • Dobierz rozmiary obrazków tak, aby nie psuły kompozycji elementów.
  • Dobierz formatowanie i kolory tak, aby całość nie raziła w oczy (stonowana kolorystyka).
  • Przykłady
  •  

    Pytania i odpowiedzi: