Polecają:

Stopka strony internetowej – praktyczne informacje

01 czerwca 2011 § 1

stopka
Stopka to jeden z najważniejszych elementów strony internetowej. Jeżeli szukasz informacji jak zaprogramować stronę, żeby zawsze znajdowała się u dołu przeglądarki oraz zapoznać się z ciekawymi zastosowaniami tego składnika strony to zapraszam do przeczytania dalszej części artykułu.

Stopka internetowa to nie tylko miejsce gdzie należy umieszczać prawa autorskie, datę czy odnośnik do twórcy strony. Pomimo tego, że znajduje się ona na samym dole naszej strony i wielokrotnie nie zostanie zauważona od razu po wejściu użytkownika na stronę nie oznacza, że jej funkcja jest nieistotna.

1. Dodaj funkcjonalności stopce swojej strony internetowej

Obszar stopki powinien znaleźć się na każdej stronie. Dzięki temu wiemy, gdzie strona się kończy. Jest to jeden z istotnych rzeczy, które wpływają na poprawny odbiór naszego projektu. Jeżeli nie wiadomo gdzie znajduje się koniec danej rzeczy staje się ona trudna w zrozumieniu i niepełna.

Niejednokrotnie stopka używana jest tylko do umieszczenia słów kluczowych do przeglądarek, kilku zdań o serwisie czy jak wyżej wymieniłem praw autorskich i odnośników do twórcy strony. Jest to bardzo duży błąd. Nie doceniamy bowiem możliwości, które niesie ze sobą ten fragment naszej wirtualnej wizytówki.

Dodatkowe funkcje stopki:

1. Po przejściu do dołu naszej strony nasza stopka może być przekształcona w dodatkowe menu, które może być bardziej rozbudowane niż to nas górze naszej strony. Ludzie często korzystają z tej części strony do nawigacji po serwisach, z prostego powodu – można to zrobić bardziej szczegółowe i czytelniejsze.

2. Stopka, która zawiera dodatkowy formularz kontaktowy sprawia, że kontakt z nami jest bardziej uproszczony obojętnie na jakiej podstronie serwisu osoba przeglądająca się znajduje. Ta sama sprawa tyczy się linków do portali społecznościowych, to tutaj możemy umieścić wszystkie potrzebne informacje do polubienia nas na Facebooku czy „wyćwierkania” o naszej stronie na Tweeterze.

stopka_rozbudowana
Rozbudowana stopka ze strony http://www.infinvision.com/

Podsumowując zastosowanie stopki w stronie internetowej możemy śmiało powiedzieć, że jej funkcja znacznie się rozszerzyła w ostatnich latach działania internetu. Jest to element, który silnie się rozwinął. Dzięki temu, że znajduje się ona przeważnie na każdej podstronie stwarza możliwości zrobienia z niej bardzo użytecznego miejsca informacji, które może pomagać w osiągnięciu celu, w którym nasza strona została stworzona.

Jak przylepić stopkę naszej strony na dole przeglądarki?

Czasem, gdy nasza strona nie jest na tyle długa, żeby zmieścić się na całym ekranie monitora powoduje, że nasza stopka zaczyna wisieć gdzieś w powietrzu:

zla_stopka

Metod na osiągnięcie stopki przylepionej do dołu przeglądarki jest wiele. Ja przedstawię jeden, z którego korzystam przy moich projektach stron. Zaczerpnąłem go ze storny Ryanfait.com. Kod który należy użyć do osiągnięcia sukcesu jest bardzo prosty.

Po pierwsze w pliku HTML wstawiamy następujące elementy w znacznikach …:


        

Tutaj umieścimy całą zawartość strony.

Kolejną sprawą jest utworzenie pliku CSS, którego ja nazwałem sticky-footer.css, który importujemy do naszego projektu:

    
        
    

CSS, który wykonuje całą magię jest krótki:

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -10em; 
/* 
Wartość ostatniego marginesu 
musi być tej samej wielkości co naszej stopki, 
tylko, że jako wartość ujemna
*/
}

.footer, .push {
height: 10em; /* Wysokość naszej stopki*/
}

W sytuacji, kiedy posiadamy większą liczbę kolumn w naszym projekcie przyda się jeszcze:

.footer, .push {
clear: both;
}

W razie jakichkolwiek pytań napisz komentarz u dołu.

Mam nadzieję, że po tej porcji informacji na temat stopki strony internetowej spojrzysz zupełnie inaczej na swoje kolejne projekty. Stosowanie jej stanie się większym wyzwaniem i dostarczy nowych możlwości. Subskrybuj moją stronę używając RSS.

A czemu Lime Factory ma taką ubogą stopkę? Pracuje nad nią :P

Dodatkowe inspiracje:
25 Impressive Blog Footers
Fantastic Footers: 25 Examples And Best Practices
50 Excellent Blog Footer Designs

§ Jeden komentarz do “Stopka strony internetowej – praktyczne informacje”

Co to za artykuł?

Obecnie czytasz Stopka strony internetowej – praktyczne informacje w Lime Factory.