Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej
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
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; }
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
Margines dodatkowa przestrzeń poza obramowaniem - pomiędzy tym elementem a innymi możemy użyć ujemnych wartości
Padding dodatkowa przestrzeń między obramowaniem a elementem możemy użyć ujemnych wartości
www.w3.org
Zajmowana szerokość i wysokość elementu szerokość = lewy margines + lewe obramowanie + lewy padding + szerokość elementu + prawy padding + prawe obramowanie + prawy margines
Jaka jest faktyczna wysokość? header { width: 150px; height: 100px; margin: 10px; border: 5px solid; padding: 1px; }
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ść
Float Własność float służy do opływania elementu przez tekst. <img style="float: right;"> <p>lorem ipsum</p>
Kolumny za pomocą float <nav></nav> <article></article> nav { float: left; } article { float: right; } JS Bin
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
Kolumny za pomocą display: inline-block Kolumny otrzymują własność: display: inline-block; dzięki temu nie wprowadzają nowej linii JS Bin
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
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).
Przykładowe layouty
Szkicowanie layoutu rysujemy (projektujemy) wygląd strony na kartce pamiętamy o box-model Źródło: http://wpswitch.com, http://webdesignledger.com
Layout responsywny Źródło: https://acme.mybalsamiq.com
Narzędzia do projektowania interfejsu Nadają się bardziej do dokumentacji projektu. http://webdemo.balsamiq.com http://www.axure.com/edu
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 http://wierzba.wzks.uj.edu.pl/~login/dh/5/ (po wejściu na powyższy adres ma się od razu pojawić strona, a nie wykaz plików).
Proszę zwrócić uwagę na: Każda strona HTML musi się walidować w https://validator.w3.org/ Każda strona HTML i każdy arkusz stylów musi się walidować w https://jigsaw.w3.org/css-validator/ Proszę sprawdzić czy strona poprawnie wygląda przy nieznacznej zmianie szerokości okna przeglądarki oraz przy zmianie powiększenia strony