Archiwizacja efektów realizacji zadań

Efekty zadań wykonywanych w ramach aktualnych zajęć laboratoryjnych będą przydatne w czasie kolejnych zajęć.

Materiały pomocnicze

 

1.1 Należy wprowadzić znaczniki semantyczne zdefiniowane w HTML5 do dokumentu index.html:

  • znacznik <header> zamiast <div class="header">,
  • znacznik <nav> zamiast <div class="menu">,
  • znacznik <main> zamiast <div class="content-column">,
  • znacznik <aside> zamiast <div class="right-column">,
  • znacznik <footer> zamiast <div class="footer">.

Po wprowadzeniu zmian do pliku index.html należy zmodyfikować arkusz stylów main.css tak, aby wygląd strony nie uległ zmianie w stosunku do oryginalnego dokumentu.

1.2 Należy przygotować tabelę prezentującą informacje o filmach z ostatnich lat (znaczniki: <table>, <thead>, <tbody>, <tr>, <td>, <th>). Tabela powinna posiadać atrybut id="movies" i zawierać następujące kolumny:

  • kolumna 1: plakat (pliki graficzne z przykładowymi plakatami w podkatalogu img, znacznik <img>), grafiki plakatów powinny być linkami do grafik w pełnym rozmiarze (element <a>),
  • kolumna 2: tytuł w pierwszej linii, poniżej krótki opis (można posłużyć się opisami dystrybutorów, np. ze strony filmweb.pl)
  • kolumna 3: ocena

1.3 Wygląd tabeli należy dostosować przy użyciu stylów CSS w następujący sposób:

  • opisy kolumn w nagłówku tabeli wyświetlane przy użyciu pogrubionej czcionki (przykładowy selektor: table#movies thead, atrybut CSS: font-weight: bold)
  • widoczne poziome obramowania pomiędzy wierszami (atrybuty border-top, border-bottom dla elementów td)
  • ciemniejsze tło wierszy parzystych (pseudoselektory :nth-child(even) i :nth-child(odd))
  • tytuły filmów wyświetlane z użyciem kursywy (atrybut font-style: italic)

1.4 Należy zmienić sposób pozycjonowania elementów na stronie zgodnie z poniższymi wytycznymi:

  • należy zmodyfikować układ strony tak, aby kolumna z miejscami na reklamy znajdowała się po lewej stronie (zamiast przesuwać kolumnę na lewą stronę można zmienić szerokości kolumn i zamienić zawartości miejscami),
  • należy zmodyfikować nagłówek strony tak, aby był przypięty do górnej krawędzi okna przeglądarki (atrybut position: fixed),
  • należy usunąć miejsca na reklamy i przenieść w to miejsce menu strony, konieczne będzie przeorganizowanie menu z układu poziomego na pionowy,
  • korzystając z dyrektywy "@media (max-width: 768px){ ... }" należy przygotować zestaw stylów, które pozwolą na przeglądanie strony na smartphonie, przykładowo:
    • zmniejszamy rozmiar nagłówka i rezygnujemy z atrybutu position: fixed,
    • kolumny w głównej części strony nie są wyświetlane obok siebie, zamiast tego najpierw wyświetlamy menu, a pod spodem treść strony,
    • w przypadku użytkownika odwiedzającego stronę za pośrednictwem komputera wszystkie elementy powinny wyświetlać się tak, jak dotychczas.
Last modified: Friday, 15.12.2017, 15:30