Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia

Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
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.
Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
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>&#8222;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>&#8222; - 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.
Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
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.
Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
2.3. Układy witryn internetowych
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ść.
Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
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
Projektowanie aplikacji internetowych - ćwiczenie nr 5
ETI II stopień - semestr I
Układy witryn internetowych
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/