Dokument hipertekstowy

Transkrypt

1 Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej

2 Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością pozostałe elementy mogą przyjąć własności height i width

3 Obramowanie każdy element może mieć obramowanie możemy zdefiniować: style - musi być zdefiniowany, np. none, dotted, dashed, solid, double width color { border: solid 1px black; } { border-style: solid; border-width: 1px; border-color: black; }

4 Różna szerokość z każdej strony border-width: 1px 2px 3px 4px; - góra, prawo, dół, lewo border-width: 1px 2px 4px; - góra, boki, dół border-width: 1px 2px; - góra i dół, boki border-width: 1px; - wszystkie strony

5 Margines dodatkowa przestrzeń poza obramowaniem - pomiędzy tym elementem a innymi możemy użyć ujemnych wartości

6 Padding dodatkowa przestrzeń między obramowaniem a elementem możemy użyć ujemnych wartości

7

8 Zajmowana szerokość i wysokość elementu szerokość = lewy margines + lewe obramowanie + lewy padding + szerokość elementu + prawy padding + prawe obramowanie + prawy margines

9 Jaka jest faktyczna wysokość? header { width: 150px; height: 100px; margin: 10px; border: 5px solid; padding: 1px; }

10 Wyśrodkowanie elementu w poziomie ale element: margin: 0 auto; musi mieć własność display: block; nie może mieć własności float musi mieć ustawioną szerokość

11 Float Własność float służy do opływania elementu przez tekst. <img style="float: right;"> <p>lorem ipsum</p>

12 Kolumny za pomocą float <nav></nav> <article></article> nav { float: left; } article { float: right; } JS Bin

13 Clear Float wyciąga elementy z normalnego obiegu. <nav></nav> <article></article> <footer></footer> footer będzie w tym samym wierszu (jeśli się zmieści) Rozwiązanie: footer {clear: both; } JS Bin

14 Kolumny za pomocą display: inline-block Kolumny otrzymują własność: display: inline-block; dzięki temu nie wprowadzają nowej linii JS Bin

15 Position static - domyślna, zależy od miejsca w HTML relative - przesunięcie względem domyślnego miejsca (nie zwalnia tego miejsca) absolute - przesunięcie względem przodka z position nie równym static, wyciąga element z obiegu fixed - przesunięcie względem okna przeglądarki, wyciąga element z obiegu Przesunięcie definiujemy za pomocą własności: top, left, right, bottom

16 Uwaga! Przy tworzeniu layoutu większość elementów powinna mieć wartość static własności position. relative jest używany do nieznacznego przesunięcia elementów. Nie powinno się używać absolute do pozycjonowania elementów layoutu. Z powodu wyciągnięcia elementu z obiegu nie może on wpływać na inne (np. zmiana ilości tekstu).

17 Przykładowe layouty

18 Szkicowanie layoutu rysujemy (projektujemy) wygląd strony na kartce pamiętamy o box-model Źródło:

19 Layout responsywny Źródło:

20 Narzędzia do projektowania interfejsu Nadają się bardziej do dokumentacji projektu.

21 Zadanie 1. Obejrzyj układ różnych stron. 2. Naszkicuj layout (swojej) strony w wersji standardowej (szerokiej) oraz mobilnej (wąskiej). 3. Stwórz layout w wersji standardowej używając HTML i CSS. a. Pamiętaj o użyciu tagów semantycznych. b. Strona powinna wyglądać ładnie. c. Zwaliduj stronę: kod HTML i CSS. Stronę należy umieścić na serwerze wierzba pod adresem (po wejściu na powyższy adres ma się od razu pojawić strona, a nie wykaz plików).

22 Proszę zwrócić uwagę na: Każda strona HTML musi się walidować w Każda strona HTML i każdy arkusz stylów musi się walidować w Proszę sprawdzić czy strona poprawnie wygląda przy nieznacznej zmianie szerokości okna przeglądarki oraz przy zmianie powiększenia strony