Pomoc - Prosty układ strony

Start

Programowanie

Szablon

Prosty układ strony

Najprostszą metodą tworzenia układów stron składających się z kolumn jest wykorzystanie pozycjonowania bezwzględnego. Tą metodą można stworzyć zarówno układ ze stałą szerokością wszystkich kolumn, jak i układ płynny, ze zmienną szerokością wszystkich bądź wybranych kolumn.

Problem stopki

W metodzie pozycjonowania absolutnego dla każdego elementu układu strony ustalamy położenie względem nadrzędnego elementu obejmującego. Aby określić położenie stopki, trzeba znać wysokość elementów umieszczanych ponad stopką.

W Joomla! i Mambo, jak już wspomnieliśmy, wysokości kolumn nie jesteśmy w stanie przewidzieć. Stworzymy zatem układ bez stopki.

Problem, oczywiście, można rozwiązać. Jeśli interesuje Cię sposób oparty na JavaScript, zapoznaj się z artykułem Shauna Inmana: Absolutely Positive.

Założenia

Chcemy stworzyć układ ustalony, 3-kolumnowy o następujących właściwościach:

szerokość strony równa 780px,
główna treść umieszczona w centralnej kolumnie o stałej szerokości: 384px;
lewa i prawa kolumna o stałej szerokości, po 192px;
odstępy między kolumnami po 6px;
nagłówek umieszczony nad kolumnami.

Aby łatwiej analizować efekt, dodamy obramowanie dla wszystkich trzech kolumn.

Przygotowanie

Najpierw przygotujemy podstawowe pliki szablonu.

Utwórz w katalogu /templates nowy katalog: 01_simple_fixed_abs i przekopiuj doń całą zawartość utworzonego wcześniej katalogu /00_podstawa. Następnie wyedytuj plik templateDetails.xml i zmień nazwę szablonu:

<name>01_simple_fixed_abs</name>

Możesz też, dla celów dokumentacyjnych, dodać opis szablonu:

<description>Prosty układ: 3-kolumny,
  stała szerokość, wycentrowany, bez stopki</description>

W kolejnych przykładach nie zawsze będziemy przypominać tę instrukcję. Możesz skorzystać z tej metody pracy, jeśli chcesz zachować kolejne projekty, co na pewno warto uczynić. Ale równie dobrze możesz zastępować zawartość plików index.php oraz template_css.css umieszczonych w katalogu /00_podstawa.

Kod w pliku index.php

Z kodu pliku index.php usuń linie zawierające stopkę:

 <div id="footer">          
   <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
 <div>

Dla porządku zmodyfikuj również nagłówek, podając nazwę pliku i opis szablonu.

Kod CSS

Wyedytuj arkusz stylów - plik css/template_css.css. Skopiuj doń następujący:

/*  01_simple_fixed_abs,
    3-kolumny, stała szerokość, wycentrowany */
body{
  margin        : 0;
  padding       : 0;
  font          : 76.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
  }
#content_main {
  position      : absolute;
  width         : 384px;   
  top           : 90px;
  left          : 198px;
 }
#nav_bar {
  position      : absolute;
  width         : 192px;
  top           : 90px;
  left          : 0; 
  margin-top    : 0;  
 }
#misc_bar {
  position      : absolute;
  width         : 192px;
  top           : 90px;
  left          : 588px;
 }
#header {
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 780px;
  background    : #D0E0FF url(../images/header.jpg);
  height        : 90px; 
 }
/* ======= Rozmiary czcionek ======= */
p, div, td, li {
   font-size    : 1em;
}
h1 {
display: none;
}
 
/* ========== TYLKO DLA PODGLąDU =================== */
#content_main,#nav_bar,#misc_bar,#header{ 
  border: 1px solid #D0E0FF; /* obramowanie - pokazuje rozmieszczenie */
  }
#nav_bar {
  background-color : #F2F2F2;
 }
#misc_bar {
  background-color : #F2F2F2;
 }

`Bez niewiadomych`

Prosty, 3-kolumnowy układ strony z nagłówkiem

W układzie opartym na pozycjonowaniu bezwzględnym nie ma niewiadomych i niespodzianek. Definiujemy kilka pudełek przeznaczonych na elementy strony, określamy właściwości ich położenia względem lewego górnego rogu okna przeglądarki i to w zasadzie wszystko.
Obliczenia
Za podstawę wyliczenia szerokości kolumn przyjęliśmy założenie, że zdecydowana większość użytkowników korzysta przynajmniej z monitora 15-calowego  ze standardową rozdzielczością 800x600 pikseli. Około 20 pikseli zajmuje przy maksymalnie otwartym oknie przeglądarki pasek przewijania. Stąd zaplanowana szerokość strony: 780px.
Szerokość centralnej kolumny jest różnicą między szerokością strony, a sumą szerokości kolumn i odstępów między kolumnami [780-(2x192px +2x6px)=384].
Kolejność elementów układu a struktura dokumentu HTML
Elementy pozycjonowane bezwzględnie można umieszczać w dowolnej kolejności. A to dlatego, że są one wyjmowane z normalnego toku dokumentu i w żaden sposób - ani swoim rozmiarem, ani swoim położeniem - nie wpływają na inne.
Tę właściwość wykorzystaliśmy już wcześniej w kodzie pliku index.php i jako pierwszy umieściliśmy blok content_main. W efekcie w dokumencie HTML pojawi się najpierw główna  treść strony, a dopiero później treści towarzyszące umieszczone w lewej i prawej kolumnie.
Dzięki temu osoby niedowidzące, korzystające z czytników zawartości, najpierw usłyszą treść strony, a dopiero potem pozostałe informacje. Zwiększymy zatem dostępność serwisu.
Taką kolejnością zoptymalizowaliśmy także stronę dla wyszukiwarek internetowych. Roboty indeksujące zawartość natrafią najpierw na treść strony, a to - jak wiemy - skutkować będzie wyższą pozycją w wyszukiwarkach.
Przetestuj tę właściwość. Przemieść dowolny blok znaczników w inne miejsce. Najlepiej fragment wywołujący nagłówek z początku sekcji body, na koniec: 
 <div id="header">          <!-- nagłówek -->
   <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
 </div>
</body>
Odśwież okno przeglądarki. Jak widzisz, nic się nie zmieniło! Jeśli jednak podejrzysz kod źródłowy, to przekonasz się, że kod nagłówka został umieszczony na końcu dokumentu HTML.
Wyśrodkowanie układu
Układ można, oczywiście, wyśrodkować. Potrzebny będzie jednak jeszcze jeden kontener, który zostanie w całości wyśrodkowany i w którym umieścimy pozostałe bloki.
Dlaczego? I czy w dodawaniu dodatkowych elementów tkwi jakiś problem.
Najpierw druga kwestia. Ideałem byłoby umieszczanie w dokumencie źródłowym jedynie treści oraz znaczników HTML, wskazujących na strukturę i układ treści. Każdy dodatkowy znacznik służący formatowaniu oddala nas od tego ideału. Wszystkie cztery elementy, które chcemy na stronie umieścić: header, content_main, nav_bar, misc-bar są niewątpliwie odrębnymi, spełniającymi ściśle określone funkcje elementami, umieszczanymi na stronie, a więc w elemencie body.
Tworząc w naszym przypadku dodatkowy znacznik obejmujący, dodajemy w gruncie rzeczy obiekt, który spełnia tę samą rolę, co element body. A więc element nadmiarowy. Niestety, musimy go stworzyć.
Dlaczego?
Pozycjonowanie zachodzi w bloku obejmującym, dokładniej względem krawędzi bloku obejmującego. Elementy pozycjonowane tworzą bloki obejmujące dla swych potomków (i tylko one!).
Początkowy blok obejmujący dla wszystkich innych obiektów powinien tworzyć - wg standardu -element <html>. Wystarczyłoby zatem wyśrodkować element <body>.
Ale… w niektórych przeglądarkach początkowy blok obejmujący jest tworzony dopiero przez element <body>.
Jeśli zatem stworzymy kontener obejmujący pozostałe i wyśrodkujemy go, to będzie on - a dokładniej jego górna i lewa krawędź - stanowić nowy początkowy punkt odniesienia dla określenia pozycji pozostałych elementów. Oto poszerzony fragment kodu pliku index.php:
 Aby zachować semantyczność kodu, nazywijmy ten element #content:
<body>
 <div id="content"> <!-- dodana linia -->
   <div id="content_main">
      <?php mosMainBody(); ?>
   </div>
   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); ?>
   </div>
   <div id="misc_bar">
      <?php mosLoadModules( 'right' ); ?>
   </div> 
   <div id="header">
      <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
   </div>
 </div> <!-- dodana linia -->
</body>
Zmiany w arkuszu stylów
W pliku template_css.css wprowadzamy drobne zmiany:
body{
  margin        : 0;
  padding       : 0;
  font          : 76.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align    : center;  /* dodana linia */
  }
#content {            /* dodany fragment */
  position      : relative;
  width         : 780px;
  margin        : 0 auto;
  text-align    : left;
  }
Dodaliśmy reguły dla elementu #content. 
Element #content stworzył nowy kontekst dla umieszczonych w nim pozostałych elementów, które są teraz pozycjonowane nie względem elementu podstawowego html lub body, ale wobec tego nowego elementu.
 Dla elementu #content ustawiliśmy lewy i prawy margines na auto. Właściwość ta spowoduje, że lewy i prawy margines będą tej samej szerokości, a więc spowodują wyśrodkowanie elementu #content wraz z jego zawartością.
Wyśrodkowanie bloku - łatka dla w IE5/5.5
Przeglądarki IE5/5.5 nie wyśrodkują nam jednak strony. Aby ominąć ten błąd skorzystaliśmy z prostej sztuczki.
We właściwościach <body> umieściliśmy regułę text-align: center, która spowoduje potrzebne nam wyśrodkowanie elementu #content, a w elemencie #content przywróciliśmy standardowe wyrównanie tekstu.
Uwagi, źródła
Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki
Dziękujemy!
Stefan Wajda, Zespół Dokumentacji PCJ