UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Szablony arrow CSS w Joomla arrow Formatowanie układu strony
Formatowanie układu strony Drukuj Email
Joomla! umieszcza na stronach jeden obiekt z treścią główną oraz wiele obiektów z modułami. W dokumencie HTML mogą one być wpisane wprost w elemencie body lub wewnątrz elementu div. Twórca szablonu może zaprojektować dowolną ilość elementów modelujących układ strony i zdecydować o ich układzie.

Etapy modelowania układu strony

Zdefiniowanie układu strony wymaga od projektanta:

  • wyboru jednego z typów układu: ustalony, płynny, mieszany, elastyczny,
  • opracowania planu rozmieszczenia elementów strony,
  • zaplanowania unikalnych i powtarzalnych elementów obejmujących główne obiekty strony,
  • określenia stylów dla elementu body i zaplanowanych przez siebie elementów obejmujących.

Techniki projektowania układów stron zaprezentowaliśmy w poradniku Szablon dla Joomla!. Tutaj skupimy się jedynie na objaśnieniu właściwości elementów HTML wykorzystywanych w modelowaniu układów.

Wyróżnienia elementów obejmujących

Element div może być opatrzony w kodzie szablonu jednym z dwu atrybutów:

  • atrybutem klasy: class, stosowanym do elementów powtarzalnych,
  • atrybutem identyfikatora: id, stosowanym do elementów unikalnych.

Innymi słowy atrybut class może być przypisany do dowolnych elementów i występować wiele razy. Ponadto, jednemu elementowi można przypisać kilka atrybutów klasy. Natomiast element z atrybutem id może być zastosowany na stronie tylko jeden raz, nie może się powtarzać. Elementowi z atrybutem id także można przypisać atrybut klasy.

Przypisanie identyfikatora lub klasy w dokumencie HTML może wyglądać następująco:

<div id="nazwa_identyfikatora">
<div class="nazwa_klasy">
<div id="nazwa_identyfikatora" class="nazwa_klasy">
<div class="nazwa_klasy nazwa_innej_klasy">

Nazwy identyfikatorów i klas

Nazwy identyfikatorów i klas ustalają projektanci szablonów.

Dość powszechnie stosowane są nazwy typu #wrap, #wrap_inner #container, #container, #content, #left_column, #right_column.

Nie wszystkie są godne polecenia. Zgodnie z zasadami semantycznego znakowania nazwy powinny wskazywać raczej na funkcję w strukturze strony, a nie na wygląd czy pozycję. A zatem właściwsze jest użycie nazw typu:

  • #nav_bar czy #nawigacja niż #lewy_pasek {} czy #left_column,
  • #misc_bar czy #roznosci niż #prawy_pasek czy #right_column,
  • #main_content czy #tresc_glowna niż #centre_column.

XHTML wrażliwy jest na wielkość znaków w nazwach. Stąd warto ustalić sobie jakąś zasadę i stosować ją konsekwentnie, np. używać w nazwach tylko małych liter, a kolejne człony oddzielać dolnym łącznikiem. W nazwach identyfikatorów i klas używamy znaków alfabetu łacińskiego, cyfr, myślników, znaków podkreślenia.

Modelowanie układu strony - pudełka w pudełkach

Modelowanie uklądu strony za pomocą elementów <div> przysparza nieco problemów. Kłopot bierze się stąd, że różne przeglądarki odmiennie interpretują model blokowy, a precyzyjniej - rozmiary bloków - szerokość i wysokość, określane za pomocą CSS.

Model blokowy - pudełko elementu

Model pudełkowyDla każdego elementu strony tworzone jest prostokątne pudełko. Każdy element zajmuje więc na stronie pewną przestrzeń. Przestrzeń ta dzieli się na cztery części:

  1. W części wewnętrznej - w polu elementu - wyświetlana jest treść. Jej granice wyznaczają wewnętrzne brzegi - górny, prawy, dolny i lewy.
  2. Wokół niej znajduje się margines wewnętrzny, nazywany dopełnieniem albo odstępem: padding.
  3. Margines wewnętrzny otoczony jest ramką zwaną też obramowaniem: border złożonym z czterech krawędzi - górnej, prawej, dolnej i lewej.
  4. Wokół znajduje się margines zewnętrzny zwany krótko marginesem: margin - górnym, prawym, dolnym i lewym.
  5. Całe pudełko znajduje się w obszarze ograniczonym brzegiem zewnętrznym.

Model pudełkowy - brzegiMarginesy, ramki i dopełnienia (odstępy) są opcjonalne. Jeśli wartość wszystkich zostanie ustawiona na 0, to zewnętrzne brzegi pudełka elementu pokrywają się z brzegami wewnętrznymi.

Marginesy pudełka (i tylko maginesy) mogą przyjmować nie tylko wartości dodatnie, ale także ujemne! W rezultacie element potomny, a więc umieszczony, wewnątrz (sic!), w polu elementu, może być szerszy i dłuższy niż obejmujący go element nadrzędny. Może wystawać poza pudełko rodzica, w tym poza okno przeglądarki. Może też zachodzić na inne elementy.

Wszystkie wymiary - szerokości i wysokości - sumują się. Gdy ustalona jest np. szerokość obszaru elementu, szerokość dopełnienia, szerokość marginesu i szerokość obramowania, to obszar zajmowany przez cały element ma szerokość równą sumie wymienionych. Nie dotyczy to jednak przeglądarek Win 5/5.5. w tych przeglądarkach szerokość i wysokość ustalona dla elementu obejmuje nie tylko jego pole, ale także wartości ustalone dla dopełnienia i obramowania. Szerokość i wysokość całego obszaru są zatem w ich przypadku sumą dwóch wartości - ustalonej dla elementu i dla marginesów.

Formatowanie elementów układu strony

Konkretne przykłady formatowania podstawowych elementów układu stron w Joomla! zostały zaprezentowane w poradniku Szablon dla Joomla! i Mambo. Celem poniższych przykładów jest jedynie objaśnienie sposobu formułowania reguł dla stylów.

Formatowanie elementu body

Arkusz stylów może zawierać reguły ustalające poniższe właściwości elementu body:

  • width - szerokość,
  • min-width - minimalną szerokość,
  • max-width - maksymalną szerokość,
  • height - wysokość,
  • min-height - minimalną wysokość,
  • max-height - maksymalną wysokość,
  • margin - marginesy zewnętrzne,
  • padding - dopełnienie (marginesy wewnętrzne),
  • background-color - kolor tła,
  • background-image - podkład (obraz tła),
  • background-position - położenie obrazu tła,
  • background-attachment - przewijanie obrazu tła,
  • color - kolor tekstu,
  • font-family - rodzina czcionek,
  • font-size - rozmiar czcionki,
  • line-height - odstęp międzyliniowy,
  • overflow - przepełnienie.

Możliwości wiele, ale w praktyce wykorzystuje się zwykle kilka z nich.

Przykład 1: Style elementu body
 
body {
 width           : 772px;
 min-width       : 774px;      /* IE5/Win, IE6/Win nie interpretuje */
 font            : 80.1% Verdana, Arial, Helvetica, sans-serif;    
 background      : #fff url(../images/tlo.png) repeat-y 0% 0% 
                               kolor całej strony, obrazek tła */
 color           : #000;       /* określa domyślny kolor tekstu */
 text-align      : center;     /* wyśrodkuj stronę - dla IE/Win 5.x*/
 overflow        : scroll;     /* strona będzie mieć cały czas paski przewijania  */
   }
Odmienności przeglądarek

Ponieważ niektóre przeglądarki ustalają szerokość obramowania elementu body na podstawie margin, inne na podstawie padding, a np. Opera definiuje je w elemencie html, właściwości te deklaruje się zwykle wspólnie dla obu zgrupowanych elementów: html, body

Przykład 2. Deklaracja stylów dla zgrupowanych elementów htmlbody
html, body{
  margin           : 0;
  padding          : 0;         /* tak samo jak padding  - część przeglądarek ustala 
                                   szerokość obramowania na podstawie margin, 
                                   inne na podstawie padding.
                                   Opera definiuje w elemencie html */
  }

Formatowanie innych elementów

Blok obejmujący

Elementy dokumentu HTML generują pudełka albo inaczej - bloki obejmujące dla swych potomków. Blok obejmujący ustala kontekst formatowania dla wszystkich swoich potomków. Oznacza to np., że jeśli ustalimy procentowo szerokość elementu, to konkretna wartość obliczana jest w stosunku do bloku obejmującego.

Blokiem początkowym obejmującym wszystkie inne jest w dokumencie HTML element html, chociaż niektóre przeglądarki zakładają błędnie, że blokiem początkowym jest element body. Gdyby tak było w istocie, nie można by przykładowo ustalić elementowi body ani mniejszej, ani większej szerokości, niż okno przeglądarki.

Pozycja elementu

Naturalną pozycję elementu wyznacza kolejność pojawienia się w dokumencie. Aby przemieścić element można użyć właściwości position. Właściwość position określa miejsce elementu względem zwykłego położenia (czyli niepozycjonowanego), względem położenia rodzica, względem innego elementu lub względem okna przeglądarki. Pozycja może być określona jako:

  • static - statyczna: pozycja domyślna, umieszcza pudełko w zwykły sposób,
  • absolute - absolutna: wymusza umieszczenie pudełka elementu w elemencie obejmującym w miejscu ustalonym wartościami top, right, bottom, left; element obejmujący ( rodzic) musi być pozycjonowany wartością relative, fixed lub absolute
  • relative względna: przenosi element w stosunku do jego normalnej pozycji, zależnej od pozycji innych elementów; przesunięcie określane jest wartościami top, right, bottom, left,
  • fixed ustalona: przyczepia pudełko elementu w widocznym obszarze dokumentu - podczas przewijania dokumentu element nie przewija się,
  • inherit - odziedziczona: pudełko dziedziczy właściwości pozycji po swoim rodzicu,

Przemieszczaniu elementów względem siebie służą cztery następujące właściwości:

  • left: opisuje odsunięcie od lewego brzegu najbliższego bloku obejmującego,
  • right: opisuje odsunięcie od prawego brzegu najbliższego bloku obejmującego,
  • top: opisuje odsunięcie od górnego brzegu najbliższego bloku obejmującego,
  • bottom: opisuje odsunięcie od dolnego brzegu najbliższego bloku obejmującego,

Pływanie, opływanie, tamowanie, wypływanie i przycinanie

Domyślnie każdy element najpierw dostosowuje swoją szerokość do szerokości elementu obejmującego, a następnie dostosowuje do zawartości swoją wysokość.

Szerokość i wysokość elementu może być ograniczana nadanymi im wymiarami.

Gdy szerokość elementu jest mniejsza niż szerokość obejmującego go elementu, powstaje wolna przestrzeń, którą mogą wypełnić inne elementy. Jeśli zawartość elementu będzie zbyt duża w stosunku do jego rozmiarów, może wypłynąć poza obszar elementu.

Zachowanie się elementów można określić kilkoma właściwościami:

  • float - pływanie: przekształca blok w element pływający, decyduje o przenienieniu elementu na lewą (left) lub prawą (right) stronę przeznaczonej dla niego przestrzeni; wartością domyślną jest none,
  • clear - tamowanie: określa brzegi elementu, przy których nie powinny się znajdować elementy pływające, nie pozwala wpłynąć innym elementom w wolną przestrzeń po lewej (left), prawej (right) albo obu (both) stronach elementu,
  • overflow - przepełnienie: określa zachowanie się w przypadku, gdy zawartość nie mieści się w obszarze elementu, decyduje o widoczności (visible), ukryciu (hidden) lub udostępnieniu za pomocą mechanizmu przewijania (scroll) zawartości wypływającej z przyciętego elementu,
  • overflow-clip - przycięcie: pozwala ustalić kształt obszaru widocznej wypływającej zawartości; w CSS2 dostępny jest jedynie prostokątny obszar przycinania (rect,
  • z-index - miejsce na stosie: umieszcza element na kolejnej warstwie obszaru zajmowanego już przez inne elementy, w całej lub części przestrzeni, przykrywając element znajdujący się na niższej warstwie.
Przykład 3. Formatowanie podstawowych elementów strony

Dla każdego bloku obejmującego główne elementy układu strony, takie jak np. nagłówek, blok menu, treść główna, blok modułów, stopka, itp., arkusz stylów może zawierać podobne reguły, jak dla elementu body, a więc: określające m.in. szerokość, wysokość, marginesy, dopełnienie, kolor tła, obraz tła.

Dziedziczność

Pamiętać przy tym należy o zasadzie dziedziczności. Jeśli w regułach dla body określimy kolor tekstu czy rozmiar i rodzinę czcionki, nie ma potrzeby powtarzać ich w deklaracjach dla elementów potomnych, o ile nie chcemy zmodyfikować ogólniejszej reguły.

Poniższe przykłady służą jedynie do prezentacji różnych własności i ich roli. Są - z założenia niespójne, nie nadają się do wykorzystania w jakimkolwiek arkuszu stylów.

 
#content{
 position        : relative;       /* pozycjonuje względnie */
 height          : 100%;           /* ustala wysokość w body */
 min-height      : 100%;           /* ustala minimalną wysokość, dla Mozilli */
 width           : 758px;          /* ustala szerokość bloku */
 border-left     : 1px solid #888; /* dodaje linię ramki z lewej */
 border-right    : 1px solid #888; /* dodaje linię ramki z prawej */
 color           : #000;
 background      : pink url(centredbg.png) repeat-y 50% 50%; /* tło kolumn */
 margin          : 0 auto;         /* wyśrodkowuje stronę - z wyj. IE */ 
 text-align      : left;           /* przywraca justowanie tekstu do lewej */           
 }
#header{
 position        : absolute;       /* pozycjonuje absolutnie */
 top             : 0;              /* od góry elementu #content */
 left            : 0;              /* od lewego brzegu elementu #content */
 width           : 758px;          /* jak szerokość elementu #content */
 height          : 72px;           /* określa wysokość */
 background      : #blue url(logo.png) repeat-y 0% 0% 
                                     /* obrazek logo i kolor tła */
 border          : 1px solid #888;
 overflow        : hidden;         /* przy zmniejszaniu strony odsłania 
                                        tylko część obrazka logo */
}
#nav_bar {
 float           : left;           /* przekształca w element pływający,
                                        przemieszcza go w lewo */
 width           : 140px;          /* konieczne jeśli elemeny pływający */
 position        : relative;       /* dla IE - rozwiązuje problemy
                                        z wyświetlaniem elementów pływających */
 padding-top     : 72px;           /* miejsce na nagłówek */
 padding-bottom  : 32px;           /* oddala nieco stopkę */
}
#footer {
 clear           : both;           /* wyłącza opływanie */ 
 position        : absolute;       /* pozycjonuje absolutnie */
 left            : 0;              /* od lewego brzegu #content */
 bottom          : 0;              /* od dolnego brzegu #content */
 width           : 758px;          /* jak szerokość #content */
 height          : 50px;           /* określa wysokość */
 border-top      : 1px solid #888; /* górna linia ramki */
 border-bottom   : 1px solid #888; /* dolna linia ramki */
 background-color: #F0ECD9;        /* kolor tła */
 text-align      : center;         /* wyśrodkowuje tekst */
}

Tworzenie elementu blokowego

Stworznie elementu blokowego jest proste. w sekcji <body> umieszczamy początkowy (<div>) i końcowy (</div>) znacznik <div>, a w nim treść. A ponieważ elementów układu mamy zwykle wiele, każdemu przypisujemy identyfikator:

<div id="identyfikator">
Tutaj treść - inne elementy HTML
</div>

Definiowanie stylów

W arkuszu CSS umieszczamy definicje stylów dla bloku.

Założenie stylu

Wpisujemy znak krzyżyka oraz identyfikator przypisany do atrybutu id, umieszczamy otwierajacy i zamykający nawias klamrowy, między którymi będziemy definiować właściwości stylu:

#identyfikator {
właściwość: wartość;
właściwość: wartość;
właściwość: wartość;
właściwość: wartość;
}
Tło

Tło jest powierzchnią obszaru elementu i jego dopelnienia. Domyślną wartością koloru tła jest transparent (przezroczysty). Kolor tła określa włąściwość background-color. Jako wartości możemy użyć nazwy koloru, kodu RGB lub kodu szesnastkowego:

#identyfikator {
background-color: green;          /* za pomocą nazwy */
background-color: rgb(0,255,0);   /* za pomocą kodu RGB */
background-color: #00FF00;        /* za pomocą kodu szesnastkowego */
}

Tło można wypełnić obrazkiem. w tym celu korzystamy z włąściwości background-image. Obrazek zakrywa kolor tla. Jeśli jednak zastosujemy obrazek używajacy ’kanału alpha’ (np. obrazek formatu PNG), to kolor obrazka w miejscach częściowej przezroczystości zostanie połązony z kolorem tła.

Obrazek możemy powielić w obu kierunkach, a także ustalić jego pozycję.

Aby powielić obrazek tla, używamy właściwości background-repeat, któa może przyjmować cztery wartości:

  • repeat: powiela obrazek w obu kierunkach
  • repeat-x: powiela obrazek poziomo
  • repeat-y: powiela obrazek pionowo
  • no-repeat: nie powiela obrazka

Obrazkom niepowielanym można ustalić położenie za pomocą włąsności background-position. Właściwość ta ma wiele możliwych wartości - wyrażonych słowamikluczowymi (top. bottom, left, right, centre), wartościami długości wyrażonymi w jednostkach miary(50px) i wartości procentowe. Każda powduje nieco inne zachowanie. Stosowanie słów kluczowych jest proste - nazwa określa efekt, np. top left spowoduje, że obrazek zostanie umieszczony w lewym górnym rogu. Jeśli użyjemy tylko jednego słowa kluczowego, to przeglądarka przyjmuje, że drugim jest center. Pojedyncze słowa kluczowym są w związku z tym równoznaczne następujacymi ’decyzjami’ przeglądarki:

  • słowu center odpowiada center center.
  • słowu top odpowiada top centercenter top
  • słowu bottom odpowiada bottom centercenter bottom.
  • słowu right odpowiada right centercenter right.
  • słowu left odpowiada left centercenter left.

Wartości procentowe ’zachowują sie’ w specyficzny sposób. Najkrócej mówiąc - stanowią ’współrzędne’ tła elementu i równocześnie ’współrzędne’ obrazka liczone od ich lewego górnego rogu. Jeślinp określimy background-position: 33% 50%, to punkt obrazka wyznaczony przez przecięcie linii przebiegających w poziomie na wysokości 1/3 od góry i w pionie pośrodku znajdzie się dokładnie w miejscu współrzędnych przecinających obszar tła w poziomie na wysokości 1/3 od góry i w pionie pośrodku.

Natomiast gdy zastosujemy jednostki długości, to lewy górny róg obrazka zostanie umieszczony w miejscu przecięcia się linii poziomej odsuniętej w dół od grónego lewego rogu tła obrazka o pierwszą wartość i linii pionowej, przesuniętej w prawo o drugą wartość.

Obramowanie

Grubość, styl i kolor obramowania określa właściwość border. Każdy z czterech odcinków tworzšcych obramowanie może mieć inne wartości:

 
<pre lang="css">#identyfikator {
border-top: .1em solid green;    /* góra: szerokość 0,1em, linia ciągła, zielona */
border-right: .1em dotted red;   /* prawy bok: szerokość 0,1em, kropkowana, czerwone */
border-bottom: .1in groove #000; /* dół: szer. 0.1cala, wklęsla przestrzenna, czarna */
}

CSS oferuje 8 stylów linii:

  • ciągła: solid,
  • podwójna: double,
  • wklęsła: inset,
  • wklęsla przestrzenna: groove,
  • wypukła:outset,
  • wypukła przestrzenna: ridge.
  • kropkowana: dotted,
  • kreskowana: dashed,

Jeżeli nie chcemy wyświetlać ramki, używamy stylu none (bez ramki) lub hidden (ukryta).

 
« poprzedni artykuł   następny artykuł »