Układ strony

Słowem wstępu

W trakcie projektowania układu strony należy zdawać sobie sprawę, że różne przeglądarki internetowe mają swoje domyślne style CSS. Co prawda (w wyniku działania kaskady) zawartość naszych arkuszy stylów ma wyższy priorytet (style domyślne przeglądarek mają najniższy priorytet), ale i tak może to rodzić różnego rodzaju trudności:

  • W trakcie rozmieszczania elementów na stronie okaże się, że domyślne ustawienia przeglądarki powodują zamieszanie przy wyświetlaniu naszej witryny
  • Nawet jeśli uda nam się tak zdefiniować arkusze stylów, żeby nasza strona wyglądała poprawnie pod jedną przeglądarką, inne przeglądarki (z innymi arkuszami) mogą źle (czyli nie tak jak chcemy) wyświetlać zawartość naszej strony

Aby uniknąć tego rodzaju kłopotów należy zacząć naszą pracę z edytowaniem stylów od "zresetowania" CSS. Resetowanie to nic innego, jak ustawienie (zdefiniowanie) wszystkich istotnych selektorów, domyślnie definiowanych przez przeglądarki, w pewien ustalony sposób. W wyniku "działania" kaskady nastąpi "dezaktywacja" domyślnych ustawień przeglądarek i "standaryzacja" naszego arkusza.

Dla przykładu możemy zresetować marginesy i odstępy dla znaczników <body> i <p>:

body, p {
margin: 0;
padding: 0;
}

Znaczniki <div> i <span>

Własności block i inline

Przy okazji omawiania dwóch nowych znaczników warto wspomnieć o różnicy między elementami blokowymi (block) i inline:

  • Elementy blokowe to takie, które "zabierają" całą dostępną szerokość (width) i domyślnie "korzystają" z końca linii (line break) przed i po własnym wystąpieniu
          • przykładowe elementy blokowe to: <p>, <h_z dowolnym numerem>, <div>
  • Elementy inline zajmują tylko tyle szerokości, ile im potrzeba i nie wymuszają końca linii.
          • przykładowe elementy: <a>, <span>

Dodatkowo warto wiedzieć, że można wymusić własność block\inline na elementach, które jej nie posiadają. Służy do tego cecha display:

a {
display:block;
}

<div> i <span>

  • Znacznik <div> (skrót od ang. division) pozwala "wydzielić" jakiś fragment naszego kodu XHTML
          • Pozwala to na grupowanie poszczególnych elementów naszej strony, tak aby móc je następnie "zespołowo" edytować przy użyciu arkuszy stylów:
          • <div> jest elementem blokowym
          • Przy pomocy znacznika <div> możemy podzielić naszą stronę na stosowne sekcje. Podział ten następnie możemy wykorzystać w celu projektowania układu naszej strony

To jest fragment kodu XHTML:

<div class="menu">
    <ul>
        <li> Strona główna </li>
        <li> Jak się zakłada buty </li>
</div>

To jest kod CSS:

.menu {
text-align:right;
color: blue;
}
  • Znacznik <span> działa analogicznie do <div>. Różnica polega na tym, że jest elementem inline

Układ elementów na stronie

Istnieją różne sposoby na to, aby sensownie rozmieścić elementy na naszej stronie. Jednym z często używanych jest wykorzystanie własności float i clear w arkuszach stylów w CSS.

  • Własność float umożliwia nam takie rozmieszczenie elementu, że następujące po nim inne elementy będą go otaczały ("opływały") ze strony przeciwnej do tej, po której go chcemy ustawić:
          • Własność float można zdefiniować tak:
                  • float:right
                  • float:left
                  • float:none
  • Przykład:

Poniższy kod (w XHTML'u) bez użycia stylów…

<h2> Floatowanie i clearowanie strony</h2>
...
<znacznik_elementu blokowego ... /> To jest naturalny układ strony
...

… da następujący ("domyślny") efekt:

1-naturalny.png

Gdy w kodzie CSS nadamy elementowi blokowemu własność: float:left otrzymamy następujący efekt:
2-floated.png

A gdy tekstu jest trochę więcej:
3-otoczony.png

Gdy używamy własności float wszystkie elementy następujące po tym elemencie będą "dążyły" do tego, żeby ustawić się po odpowiedniej stronie. ( Jeśli floatowany obiekt jest odpowiednio duży, to kolejne elementy - również te, które chcielibyśmy "zachować" pod spodem - będą zmieniały swoją pozycję)

7-znow_zle.png
  • W tym wypadku warto zapoznać się z własnością clear. Własność ta powoduje, że kolejny element nie będzie opływał obiektu "floatowanego"
          • clear można zdefiniować tak:
                  • clear:left
                  • clear:right
                  • clear:both
                  • clear:none
          • Zasada jest taka, że wartość własności clear ma odpowiadać wartości float (tzn. gdy float:left, to clear:left). Zalecane jest jednak ustawianie jako wartości clear:both

Odnosząc się do powyższego przykładu, odpowiednie "wyczyszczenie" da następujący efekt:
8-spacer_pomaga.png

Gdy "floatowany" element "wystaje" poza element nadrzędny (tj. ma od niego większą wysokość) - w przykładzie jest to element z białym tłem (np. <div>)…:
4-problem.png

  • … można posłużyć się "sztuczką", przy użyciu własności overflow.
          • overflow przyjmuje wartości:
                  • scroll
                  • visible
                  • hidden
                  • auto
          • Własność ta "mówi" jak postępować z elementami podrzędnymi wykraczającymi poza element nadrzędny (w nim też jest definiowana). I tak: deklaracja overflow:hidden z reguły powoduje ukrycie fragmentów "wystających".
          • W przypadku jednak wystających obiektów "floatowanych"… działa odwrotnie :) - tzn. dopasowuje element nadrzędny do elementu "floatowanego":

6-rozwiazanie.png

  • Oprócz posługiwania się własnościami float i clear pracę nad układem stron może ułatwić jeszcze własność position
          • przyjmuje ona wartości:
                  • static - (standardowa) przeglądarka decyduje o położeniu elementu
                  • relative - położenie ustalone względnie, w stosunku do pozycji standardowej
                  • absolute - położenie w stosunku do elementu nadrzędnego
                  • fixed - położenie w stosunku do okna przeglądarki
          • Dodatkowo przy definiowaniu położenia należy podać współrzędne (top, right, bottom, left) w jakichś jednostkach (np. pikselach [px]). Oczywiście w przypadku wartości "static" nie czynimy tego.

Przykład:

p
{
position:fixed;
top:120px
right:100px;
left:150px;
}

Szablon

Jako wzór pomocny do realizacji zadania domowego proponujemy:

twocolumn.gif

Określone sekcje układu strony (jak header lub sidebar ) zalecamy wyróżnić przy pomocy znacznika <div>.

Pomoce naukowe

Poza tym:

I jeszcze:

Na przyszłość

Zadanie 5

  1. Utworzenie strony o zaproponowanym układzie lub innym, sensownym (i przynajmniej podobnie skomplikowanym).
  2. Należy wykorzystać poznane elementy CSS, model pudełkowy do ustalenia rozmiarów elementów i ich odstępów.
  3. Wykorzystać elementy graficzne uatrakcyjniające wygląd (np. obrazki tła dla strony / nagłówka)

Każda podstrona musi oczywiście być poprawnym ("walidującym się") i semantycznie poprawnym XHTML-em.
Arkusz CSS musi być poprawnym ("walidującym się") dokumentem CSS.

termin: sobota godzina 23:59
punkty: 4

Spóźnienie warte jest -0.5 pkt/dzień. Należy przesłać mailem informacje o wykonaniu zadania (w temacie musi znaleźć się wyrażenia: [KCK] oraz [Zad_numer]).

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy