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 określić 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:

Teraz czas na header:

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

Obszar powiadomień:

i reszta:

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
.