1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym na CSS elementy tekstowe układane są od góry do dołu w kolejności, w jakiej pojawiły się w dokumencie źródłowym, a także od strony lewej do prawej. Elementy blokowe układane są jeden na drugim i wypełniają dostępną szerokość okna przeglądarki lub innego elementu zawierającego. Elementy wewnętrzne oraz znaki tekstu występują jeden obok drugiego i wypełniają w ten sposób elementy blokowe. W celu przełamania normalnego układu dokumentu i zmiany rozmieszczenia elementów na stronie w CSS wykorzystuje się pływanie oraz pozycjonowanie. Metody te na różne sposób zmieniają relacje pomiędzy elementami, a normlanym układem dokumentu. Element pływający (ang. floating) jest przesuwany w prawo lub lewo, a następujący po nim tekst może być wokół niego zawijany. Pozycjonowanie (ang. positioning) to sposób określania lokalizacji elementu w dowolnym miejscu strony z dokładnością do piksela. Schematy umiejscawiania określa się za pomocą właściwości CSS position. Natomiast zastosowanie właściwości float pozwala na tworzenie elementów pływających. 2.1. Rozkłady stron W CSS wyróżniamy następujące schematy pozycjonowania, pozwalające na kontrolowanie układu strony: rozkład normalny, umiejscawianie względne, umiejscawianie bezwzględne i umiejscawianie ustalone. a) rozkład normalny każdy element blokowy wyświetlany jest w nowym wierszu. W przypadku, gdy szerokość elementów została tak określona, że dwa kolejne elementy mogą zmieścić się na stronie obok siebie, to i tak zostaną wyświetlone jeden po drugim w pionie. Ponieważ jest to normalny sposób w jaki przeglądarki traktują elementy HTML, nie trzeba stosować żadnych właściwości CSS w celu zdefiniowania takiego rozkładu, ewentualnie można zastosować: position:static; b) umiejscawianie względne umożliwia przesuwanie elementów względem miejsca, w którym zostały umieszczone przy użyciu rozkładu normalnego. Zmiany te nie wpływają na położenie sąsiednich elementów te pozostają wyświetlone, w tych samych miejscach, w których zostały umieszczone podczas tworzenia normalnego układu. Aby zastosować taki rozkład należy zastosować: postion:relative oraz użyć jednej z właściwości określającej przesunięcie (top, bottom, left, right) dla określenia kierunku i odległości przesunięcia (podawaną w pikselach, jednostkach em lub w procentach). c) umiejscawianie bezwzględne - określenie elementów jest określane względem elementu, w którym są one umieszczone. Elementy umiejscowione w ten sposób są usuwane z normalnego układu strony i przestają wpływać na otaczające je elementy. Elementy umiejscawiane w ten sposób przesuwają się, gdy użytkownik korzysta z paska przewijania. Aby zastosować taki rozkład należy zastosować: postion:absolute oraz użyć jednej z właściwości określającej przesunięcie (top, bottom, left, right) dla określenia położenia elementu względem elementu go zawierającego. d) umiejscawianie ustalone odmiana umiejscawiania bezwzględnego, w którym położenie elementu jest określane względem okna przeglądarki, a nie elementu do zawierającego. Dlatego kiedy użytkownik przewija zawartość strony, element pozostaje w tym samym miejscu. Aby zastosować taki rozkład należy zastosować: postion:fixed. Przykład 2.1. Otwórz plik przyklad2_1.html i zapisz pod nazwą rozkład.html w swoim katalogu. Obejrzyj w przeglądarce, a następnie dodaj reguły CSS w celu zmiany rozkładu normlanego na umiejscawianie względne, bezwzględne oraz ustalone.
umiejscawianie względne: p.normalny { position: relative; top: 15px; left: 150px;} umiejscawianie bezwzględne: p.zmiany { position:absolute; top: 100px; left: 650px; width: 350px;} umiejscawianie ustalone: h1 { position:fixed; top: 0px; left: 50px; margin: 0px; background-color:#efefef; padding: 10px} 2.2. Elementy pływające Właściwość float pozwala na usunięcie elementu z normalnego rozkładu strony i umieszczenie go możliwie jak najdalej na lewo lub prawo wewnątrz elementu go zawierającego. Cała pozostałą treść umieszczona wewnątrz takiego elementu będzie otaczała element pływający. Stosując właściwość float należy określić szerokość elementu pływającego (width) w celu prawidłowego wyświetlania elementu w różnych przeglądarkach. Przykład 2.2. Otwórz plik przyklad2_1.html i zapisz pod nazwą float.html w swoim katalogu. Dodaj tekst zawierający cytat podany poniżej (po nagłówku h1) Obejrzyj w przeglądarce, a następnie dodaj reguły CSS i zobacz jak zmieniło się położenie elementu na stronie. <blockquote> Kaskadowe arkusze stylów zakładają, że każdy element strony znajduje się w osobnym pudełku. Te pudełka elementów mogą być <b>blokowe</b> lub <b>wewnątrzwierszowe</b> - J. Duckett</blockquote> blockquote{ float:right; width:280px; font-size:110%; font-style:italic; fonat-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding:10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;} Właściwość float stosuje się m.in. w celu wyświetlania na stronie poszczególnych elementów obok siebie.
Przykład 2.3. Otwórz plik przyklad2_1.html i zapisz pod nazwą obok_siebie.html w swoim katalogu. Dodaj reguły CSS i zobacz jak zmieniło się położenie elementów na stronie. p { width: 250px; float: left; margin: 5px; padding: 5px; background-color: #efefef;} W przypadku zastosowania elementów pływających wpływ na miejsce, w którym dany element zostanie umieszczony, ma wysokość elementu. Aby uniknąć problemów związanych z anomaliami wyświetlania związanymi z różnymi wysokościami elementów należy zastosować właściwość clear. Właściwość ta powoduje, że żaden element (umieszczony wewnątrz tego samego elementu zawierającego) nie powinien stykać się z lewą lub prawą krawędzią elementu. Właściwość clear może mieć następujące wartości: left lewa krawędź pudełka elementu nie powinna się stykać z innym elementem, right = prawa krawędź pudełka elementu nie powinna się stykać z innym elementem, both ani lewa, ani prawa krawędź pudełka elementu nie powinna się stykać z innym elementem, none inne elementy mogą dowolnie stykać się krawędziami pudełka elementu. Wiele stron wykorzystuje projekty składające się z wielu kolumn. Można je utworzyć definiując każdą z kolumn jako element <div>, a następnie wykorzystać właściwości CSS w celu umieszczenia kolumn obok siebie: width określa szerokość kolumny, float pozwala umieścić kolumny obok siebie, margin służy do zapewnienia odpowiednich odstępów między kolumnami. Przykład 2.4. Otwórz plik przyklad2_1.html i zapisz pod nazwą trzykolumnowy.html w swoim katalogu. Za pomocą elementu <div> wydziel w tekście trzy kolumny, dodaj do każdej z kolumn odpowiednie nagłówki, a następnie zastosuj odpowiednie właściwości CSS w celu uzyskania układu trzykolumnowego. Ostateczny wygląd strony przedstawia rysunek.
2.3. Układ witryny internetowej musi zapewnić możliwość oglądania strony na ekranach o różnej wielkości. Układy o stałej szerokości nie zmieniają się wraz ze zmianami wymiarów okna przeglądarki. Ich wymiary są zazwyczaj określone w pikselach. Układy elastyczne rozszerzają się i zwężają, gdy użytkownik zmienia wymiary okna przeglądarki. Zazwyczaj ich wymiary są określane przy użyciu wartości procentowych. W celu utworzenia układu o stałej szerokości należy określić (zazwyczaj w pikselach) szerokość głównego elementu strony. Następnie wykorzystując np. elementy <div>, w których podać należy właściwości id oraz class określamy przeznaczenie poszczególnych elementów. Ilustruje to Przykład 2.5. Przykład 2.5. Utwórz nowy dokument HTML pod nazwą układ_staly.html w oparciu o podany poniżej kod HTML i reguły CSS. [1] W układzie elastycznym szerokości poszczególnych elementów są określone w oparciu o wartości procentowe Przykład 2.6. Aby przetestować przykład i sprawdzić działanie układu elastycznego należy zmieniać wielkość okna przeglądarki, zwłaszcza jego szerokość.
Przykład 2.6. Utwórz nowy dokument HTML pod nazwą układ_elastyczny.html w wykorzystując kod HTML z przykładu 2.5. oraz stosując podane poniżej reguły CSS. [1] 3. ZADANIA DO SAMODZIELNEGO WYKONANIA Zadanie 1. Wykonaj prostą witrynę internetową o dowolnej tematyce, zwierającą zarówno treści w postaci tekstu oraz grafiki. Układ strony powinien przedstawiać się następująco: - strona musi posiadać nagłówek, stopkę oraz co najmniej trzy podstrony (strona główna oraz trzy dodatkowe), - w nagłówku strony musi znaleźć się tytuł oraz menu poziome. - w stopce strony ma znaleźć się informacja o autorze strony. LITERATURA 1. Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę www., Helion, Gliwice, 2014 2. Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, 2013 3. Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, 2007
4. Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV, Helion, Gliwice, 2013 5. http://www.kurshtml.edu.pl/ 6. Źródło obrazów do przykładów: https://pixabay.com/