Marioosh's developer diary

Wygląd wytryny wordpress.org

Jak obiecałem w poprzednim artykule pokażę jak praktycznie można wykorzystać framework 960gs. Do tego celu będę się wzorował na layoucie witryny wordpress.org .

Spójrzmy jak rozkłada się layout witryny wordpress.org. Gdy nałożymy na nią siatkę (użyłem modelu 12 kolumnowego) przygotowaną przez twórców systemu 960gs to otrzymamy coś takiego:

Nałożona siatka na layout

Patrząc teraz widzimy jak poszczególne elementy nakładają się z kolumnami systemu 960gs. Wystarczy jest teraz dokładnie zdefinionwać i okreslic ich szerokość.

Zobaczmy:

Podział layout na elementy

Teraz widać wyraźnie poszczególne elementy. Cały layout dzieli się na 5 poziomych sekcji – header składający się z logo (1) pola wyszukiwania (2) oraz menu górnego (3).
Następna sekcja to treść podzielona na dwie równe części (4 i 5), od razu pod nim znajduje się obszar komunikatów zajmujący całą szerokość (6). Kolejna sekcja została symetrycznie podzielona na cztery części – z przeznaczeniem na ogłoszenia i komunikaty (elementy 7 – 10). Na samym dole znajdujemy footer, który podzielony został na dwie części – po lewej: standardowy footer (10), po prawej: widoczny jest slogan witryny (11).

Sprawdźmy teraz jak można zreplikować ten layout za pomocą systemu 960gs. Na początku zajmiemy się headerem. Zauważmy, że elementy 2 i 3 są jeden po drugim i nie są tej samej szerokości. Musimy je zgupować razem w jednym elemencie i umieścić w tym samym rzędzie co logo.

Rozpoczynamy od zdefiniowania kontenera 12-to kolumnowego:

 ...
<div class="container_12">
 
</div>
...

Teraz czas na header:

  ...
<div id="logo" class="grid_4">LOGO</div>
<div class="grid_8">
  <div class="prefix_5 grid_3 alpha omega">
    <div id="search"> SEARCH</div>
  </div>
  <div id="menu" class="grid_8 alpha omega"> MENU</div>
</div>
...

Następnie dodajemy drugi wiersz zawierający dwie kolumny:

 ...
<div class="grid_6">CONTENT 1</div>
<div class="grid_6">CONTENT 2</div>
...

Obszar powiadomień:

  ...
<div id="messages" class="grid_12">MESSAGES</div>
...

i reszta:

  ...
<div class="grid_2">CONTENT 2 a</div>
<div class="grid_4">CONTENT 2 b</div>
<div class="grid_4">CONTENT 2 c</div>
<div class="grid_2">CONTENT 2 d</div>
 
<div id="footer" class="grid_10">FOOTER</div>
<div id="footerlogo" class="grid_2">Footer logo</div>
...

Gotowe, a tak wygląda to co zrobiliśmy:

Czyż nie podobny to tego z wordpress.org?

Oczywiście system 960gs nie rozwiąże wszytkich naszych problemów związanych z przygotowaniem layoutu, ale na pewno nam to ułatwi. Nie musimy się martwić jak on będzie wyglądał w danej przeglądarce bo w każdej z nowych witryna będzie wyglądała tak samo.

Pobierz gotowy plik