Układ strony

Wykład 3:
Układ strony (Layout)
1. Wiadomości wstępne
2. Przygotowanie konkretnego układu strony
Wiadomości wstępne
Tworzenie układu strony
Układ strony:
rozmieszczenie (położenie) poszczególnych elementów na stronie
Oprócz tego, aby strona miała atrakcyjny wygląd ważne jest także
dobór rodzaju czcionki, wielkości, dobór kolorystki itd.
Potrzebne:
• umiejętności techniczne - czyli jak stworzyć układ strony
korzystając z CSS - o tym właśnie będziemy mówić na wykładzie
• zdolności plastyczne - o tym mówić nie będziemy
Elementy blokowe i wierszowe
Elementy strony dzieli na:
• blokowe: domyślnie układają się jeden pod drugim, domyślna
szerokość to 100% szerokości elementu-rodzica. Wyjątek to
tabela, której wielkość jest dopasowana do obszaru tekstu
Przykłady: h1-h6, p, ul, ol, li, table
• wierszowe: domyślnie układają się obok siebie
Przykłady: a, img
Właściwość display
Za pomocą właściwości display można ustawić, że element blokowy
będzie traktowany jako wierszowy i odwrotnie.
•
•
•
•
Wartości dla display:
inline: zamiana elementu na wierszowy
block : zamiana elementu na blokowy
inline-block: zamiana elementu na wierszowy ale pozostawienie
cech elementu blokowego, tzn. można ustawić margines pionowy,
można ustawić szerokość elementu, aby odsuwać ten element od
sąsiadów
none: ukrycie elementu
Przykład: Display.html
Element div (pojemnik)
– div jest elementem blokowym
– służy do grupowania (pakowania) elementów strony (w div-ie
mogą też być inne div-y)
– dla div-ów można ustawić tło, obramowanie, marginesy,
rozmiar itd.
– mając pogrupowane poszczególne elementy strony w divach, wskazujemy, w którym miejscu na stronie te div-y mają
się znajdować i w ten sposób tworzymy układ strony
Przykład: Div.html
Właściwość float. Element pływający.
– Za pomocą właściwości float możemy ustawić, gdzie element będzie
umieszczony na stronie.
– Właściwość float można zadeklarować dla elementów blokowych (nie tylko divów) lub wierszowych.
– Gdy zadeklarujemy dla elementu właściwość float to element staje się
elementem pływającym: jest odrywany od swego normalnego położenia i
płynie do lewego lub prawego brzegu elementu-rodzica. Jeśli jego szerokość
nie była zadeklarowana, to szerokość dopasuje się do zawartości.
– Po oderwaniu jego dotychczasowe miejsce zwalnia się i w to miejsce przesuwa
się następny element czyli umieszczony jest pod elementem pływającym z
wyjątkiem tekstu, który zawija się wokół elementu pływającego.
Wartości dla float:
• left: element płynie do lewego brzegu
• right : element płynie do prawego brzegu
• none: element przestaje być elementem pływającym
Przykłady: Float1.html Float2.html
Właściwość clear
– Właściwości clear używamy, aby przerwać przesuwanie się elementów na
miejsce zwolnione przez element pływający
– Jeśli zadeklarujemy clear to element nie przesunie się na zwolnione
miejsce
Wartości dla clear:
• both: element nie przesunie się w zwolnione miejsce (najczęściej
wykorzystywane w praktyce)
• left : element nie przesunie w zwolnione miejsce po elemencie
pływającym z lewej strony
• right: element nie przesunie w zwolnione miejsce po elemencie
pływającym z prawej strony
• none: odwołanie clear, element przesunie się na zwolnione miejsce
Przykłady: Clear.html
Położenie obrazka względem tekstu
Obejrzyjmy zastosowanie właściwości float i clear do ułożenia
obrazków względem tesktu.
Przykład: Obrazek_Tekst.html
Przygotowanie konkretnego
układu strony
Tworzenie menu
Menu tworzymy z listy punktowanej. Pozycjami listy są linki.
Wykonujemy następujące kroki:
– usuwamy symbole punktowania i lewy margines wewnętrzny
– jeśli menu poziome to ustawiamy dla elementów "li" wartość
inline (aby stały się elementami wierszowymi i wtedy ułożą się
obok siebie a nie jeden pod drugim)
– stylizujemy pozycje na przyciski: dodajemy tło, obramowanie,
marginesy
– linki robimy jako elementy blokowe za pomocą właściwości
display. Dzięki temu będzie można klikać nie tylko w sam tekst,
ale w cały przycisk i link jako element blokowy wypełni całe "li"
Przykłady: MenuPoziome.html MenuPionowe.html
Uwaga: Sposobów jest wiele. Przykłady to jedna z możliwości
Tworzenie układu strony
• Grupujemy (pakujemy) elementy strony za pomocą div-ów.
• Poszczególnym div-om dajemy atrybuty "id" lub "class", aby
móc tworzyć dla nich reguły stylu.
• Elementy div domyślnie będą rozmieszczane jeden pod
drugim. Ale możemy je umieścić obok siebie korzystając z
właściwości float
• Za pomocą marginesów (margin, padding) możemy ustawić
odstępy między divami i innymi elementami
Korzystając z Firebug-a obejrzyjmy pogrupowanie elementów w
div-y na przykładzie strony Wydziału http://uwb.lt
Od czego zaczynamy tworzenie układu
• Tworzymy div o id np. wrapper. W nim będzie umieszczona cała
strona
• Szerokość tego div-a (width) to szerokość strony.
– Szerokość może być stała (nie będzie się zmieniała ze zmianą
szerokości okna przeglądarki). Wartość podajemy w pikselach.
– Szerokość może być płynna (będzie się zmieniała ze zmianą szerokości
okna przeglądarki). Wartość podajemy w procentach (100% aby strona
wypełniała całą szerokość okna przeglądarki).
• Stronę (div "wrapper") ustawiamy na środku
• Usuwamy domyślne marginesy body
Przykład: PoczatekUkladu.html
Przykładowy układ strony 3 kolumnowej
Szkielet:
<body>
<div id="wrapper">
<div id="header">...</div>
<div id="sidebar1">...</div>
<div id="main">...</div>
<div id="sidebar2">...</div>
<div id="footer">...</div>
</div>
</body>
•
•
•
•
•
•
wrapper - główny pojemnik
header (nagłówek) - tam można wstawić menu, banner, tytuł strony
sidebar - paski boczne, tam na przykład menu, reklamy
main - główna zawartość strony
footer - stopka
sidebary i main układamy obok siebie za pomocą float. Pozostałe
domyślnie jeden pod drugim
Przykład: UkladStrony.html
Tworzenie układu strony - na co zwracać uwagę (cz. 1)
Poniższe uwagi prześledź na przykładzie UkladStrony.html eksperymentując z
poszczególnymi regułami.
– po usunięciu marginesu dla body, wciąż wrapper jest odsunięty od góry.
Powód: margines górny dla h2.
– tło z elementu nadrzędnego jest dziedziczone przez potomka (divy
wewnątrz "wrappera" dziedziczą jego tło). Jeśli dla potomka ustawimy
nowe tło to przykryje ono tło dziedziczone (np. "header" ma własne tlo)
– ustawiając obok siebie "sidebar-y" i "main" trzeba dobrze policzyć jaką
mają mieć szerokość (szerokość = width + margin + padding). W naszym
przypadku, aby nie mogą łącznie przekroczyć 1000px. Jeśli przekroczą nie
będą umieszczone obok siebie.
– zawartość sidebar2 jest krótsza od "main", więc "footer" przesuwa się w
zwolnione miejsce przez "sidebar2". Właściwość clear nie pozwoli
"footerowi" się przesunąć w zwolnione miejsce
Tworzenie układu strony - na co zwracać uwagę (cz. 2)
– dlaczego nie ustawiamy tła dla sidebarów bezpośrednio, a przez
dziedziczenie z wrappera. Ponieważ:
wysokość div-a dopasowuje się do jego zawartości. Sidebary są krótsze od
main, więc div nie dochodzi do footera, a zatem i tło by nie dochodziło.
– pusty div nie ma koloru tła. Jeśli usuniemy header i footer to wrapper staje
się pusty, bo sidebary i main to elementy pływające (płyną-unoszą się nad
wrapperem). Zatem mimo deklaracji, wrapper nie posiada wtedy tła i tym
samym nie jest ono dziedziczone przez sidebary. Jeśli teraz np. dodamy z
powrotem footer to wrapper ma już zawartość, zatem posiada tło i tym
samym sidebary je dziedziczą.
Pusty "div" a mimo wszystko tło: dodać do takiego diva deklarację:
overflow: hidden http://www.w3schools.com/cssref/pr_pos_overflow.asp
– mogą być różnice w przeglądarkach, trzeba sprawdzać
Na tworzenie układu jest wiele sposobów. Został pokazany jeden z nich
Dodajemy banner i menu
Do utworzonej strony dodajmy banner i menu
Banner (obrazek):
– wstawiamy jako tło dla headera, dzięki temu pozostanie napis tytułowy
na obrazku
– wysokość headera ustalamy taką jak wysokość obrazka. Jeśli tego nie
zrobimy header będzie dopasowany do obszaru, który zajmuje napis i
część tła zostanie obcięta
Menu:
– wstawiamy menu poziome. Jak wykonać menu, patrz wcześniejszy slajd
"Tworzenie menu"
– kod menu umieszczamy w nowym div-ie "menu"
– pozycje menu ustawiamy na środku. W tym celu zwężamy ul,
środkujemy za pomocą margin i dajemy tło dla div-a "menu"
Przykład: UkladStronyBannerMenu.html
Nabranie wprawy w tworzeniu układów
• Ćwiczyć, eksperymentować
• Uczyć się od innych, podglądając konstrukcję cudzych
stron
• Darmowe arkusze:
http://templated.co/
Można na ich podstawie uczyć się jak tworzyć układy,
albo wziąć konkretny układ i wypełnić swoją treścią
Właściwość position
Oprócz właściwości float, położenie elementów na stronie można ustawić za
pomocą właściwości position
Wartości dla position:
– absolute
– fixed (zastosowanie do menu, informacja o cookies aby nie znikała z
ekranu przy przesuwaniu strony)
– relative (stosowane przy tworzeniu podmenu)
– static (normalne położenie)
Po ustawieniu wartości dla position, podajemy położenie elementu za
pomocą właściwości: top, bottom, left, right.
Analogicznie jak przy float: przy ustawionej właściwości position innej niż
static element jest odrywany od swojego normalnego położenia, a w
zwolnienione miejsce wchodzi następny element
Przykład: Position.html
Element span
• element wierszowy.
• element span można użyć, gdy chcemy zmienić wygląd części
tekstu. Np. chcemy jednolicie wyróżnić jakieś ważne dane.
reguła
.wyroznienie {
color: red;
font-weight:bold;
letter-spacing: 3pt;
}
zastosowanie
<span class=”wyroznienie”>jakis tekst</span>
Przykład: Span.html