O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Udawana stopka

Jest wiele rzeczy których na bloksie nie ma, są pewne ograniczenia techniczne które sprawiają, że szablony bloksowe składają się takich a nie innych elementów. Sensowny dostęp do html bloga jest marzeniem wielu i każdy ma chyba „listę życzeń” która zahacza o html. Nie jest jednak tragicznie, dysponując wiedzą i wyobraźnią można całkiem sporo rzeczy zrealizować nie wychodząc z ram bloksa. Jedną z tych rzeczy jest właśnie udawana stopka o którą kilka dni temu pytał się wojtekb.1. Zanim zacznie się w ogóle myśleć o jakiś rozwiązaniu problemu należy najpierw stwierdzić czy ten problem rzeczywiście istnieje. Jakich informacji brak na Twojej stronie? Czego dotyczą te informacje? Gdzie zazwyczaj się je umieszcza? Czy na prawdę potrzebujesz aby w stopce Twojego bloga pojawił się tekst? Można też spróbować inaczej: chcę mieć stopkę więc znajdę sobie informacje które tam umieszczę.

Informacje w stopce

Przyjrzyjmy się więc różnym stopkom.  Po pierwsze stopka może być elementem czysto dekoracyjnym. Jeżeli nie potrzebujemy aby informacje zawarte w stopce były htmlem to równie dobrze, bez kombinowania, możemy je zapisać w grafice i tą grafikę przypisać do istniejącego w większości szablonów elementu #Stopka. Fajne stopki na bloksie robi taisha, są przede wszystkim elementem dekoracyjnym ale pełnią też rolę informacyjną pokazując adres strony autorki szablonu.

Stopka z łabędziem Stopka z kaczką
dirty stopka 094 stopka z murem
Stopka z murem stopka z ornamentem
Stopka z myszką Stopka z myszką
Stopka z ołówkiem Stopka z młynkiem

Przyjmijmy jednak, że stopka informuje o czymś i to w sposób aktywny bo poza tym, że pokazuje tekst pozwala go też skopiować, uczynić hiperłączem itd. Tekst jest możliwy do odczytania dla wszelkiego rodzaju botów, zarówno tych które przeszukują sieć pod kątem treści i powiązań jak i tych które mają ułatwiać życie osobom mającym utrudniony dostęp do treści. Jakie wiec informacje powinny znaleźć się w stopce?

Najprościej rzecz ujmując te których szuka tam czytelnik, czyli przede wszystkim informacje o stronie i jej właścicielu. Przykładowo:

  • about
  • kontakt
  • rss
  • design
  • copyright
  • home
  • top.

Tworzymy zawartość udawanej stopki

W zasadzie w udawanej stopce można umieścić wszystko. Z technicznego punktu widzenia tworzenie zawartości stopki nie różni się niczym od tworzenia elementu TrzeciaSzpalta. Po prostu zapisujemy informacje ubierając je w tagi html. Tym razem raczej nieprzydatne będą tagi listy (no chyba że ktoś chciałby stworzyć bardziej rozbudowane menu) ale pozostałe podstawowe elementy się przydadzą. Przede wszystkim powinniśmy stworzyć element blokowy w którym znajdzie się cała nasza udawana stopka i który będziemy następnie pozycjonować na stronie. Nazwać go można dowolnie ale najlepiej tak aby łatwo go było rozpoznać. Nie może to być Stopka ponieważ taki element już na stronie istnieje. Proponuję z angielskiego footer, bottom albo w stylu bloksowym PodBlog czy StopkaTresc. Ja swoją stopkę nazwę uStopka.

<div id="uStopka">
<!-- tutaj znajdzie się treść menu stopki -->
</div>

Teraz potrzebujemy stworzyć nasze menu. Nie powinno być zbyt długie. Tylko najpotrzebniejsze rzeczy wiążące się z informacjami o stronie. Jeżeli element jest dobrze widoczny w innym miejscu na blogu nie ma większego sensu umieszczać go ponownie w stopce.

1. powrót na początek strony – top

<a href="#NadTytul">top</a>

Link przewijający na początek jest całkiem przydatny gdy wpisów jest sporo albo gdy sa bardzo długie. Słowo przewijające stronę do początku może być dowolne. Nie całkiem  przekonana wybrałam angielskie słowo top z dwóch powodów: jest do pewnego stopnia zrozumiałe bez względu na język którym się posługujemy i jest bardzo krótkie (niesamowita zaleta angielskich słów to ich długość – świetnie nadają się do przekazania lakonicznych informacji – może piękne nie są ale wystarczająco funkcjonalne).

Warto zwrócić uwagę na różnicę pomiędzy linkiem home a linkiem top. Home czyli powrót na stronę główną bloga przeładuje stronę – blog zacznie się od nowa wczytywać. Celem linku top jest coś innego, nie przeładowuje on strony a jedynie przewija ją do początku (do góry). Jest to dość przydatne gdy wpisów na blogu jest bardzo dużo bądź są bardzo długie. Jedyną uciążliwością takiego rozwiązania może być to, że przycisk wstecz w przeglądarce nie działa całkiem tak jakbyśmy tego oczekiwali bo gdy klikniemy w link top to mimo iż pozostajemy dalej na tej samej stronie to przycisk wstecz skieruje nas na dół strony tam gdzie jest link który kliknęliśmy. Dzieje sie tak dlatego, ze choć strona jest ta sama to jej adres nieznacznie się zmienił.

Aby uzyskać efekt przewinięcia a nie przeładowania strony pod słowem top powinniśmy ukryć link do elementu znajdującego się na górze strony (czyli poraz zerknąć do źródła strony). Świetnie się do tego nada element blokowy NadTytul, nie zawiera żadnych treści i jest umieszczony nad tytułem. Niestety nie na każdym blogu ten element się znajdzie. Szablony na bloksie różnią się swoimi htmlami, różnice są mniej lub bardziej widoczne ale istnieją więc należy na nie zwrócić uwagę i w miarę możliwości wykorzystać zalety każdego szablonu. Z powodu braku elementu NadTytul zapis ten nie zadziała w przypadku szablonów: Niebieski, Klasyczny, Theme A, Theme C, Theme F, Theme G, Theme I. W takim przypadku proponuję linkować do elementu zawierającego tytuł bloga czyli #BlogTytulBox

2. licencja treści bloga

<a href="mailto:szablonykatemac@gmail.com">&copy kate_mac</a>

Treść bloga na licencji <a href="http://creativecommons.org/licenses/by/2.5/pl/">cc-by</a> udostępnia <a href="mailto:szablonykatemac@gmail.com">kate_mac</a>

Zalecam racjonalne podejście do tematu i nie wklejanie na blogu copyright. Po pierwsze istnieje coś takiego jak dozwolony użytek i prawo cytatu więc generalnie każdy może korzystać z treści bloga więc może lepiej określić jaki sposób korzystania jest dozwolony niż zastrzegać wszelkie prawa. Polecam wszelkie copyleft, licencje projektu GNU (GNU-GPL, GNU-FDL, FAL) czy też jedną z licencji Creative Commons. Pamiętajmy, że szeroko rozmumiana kultura powinna być dostępna. Zresztą tak jest kojarzona sieć. Przykładowo treści na stronie zespołu prezydenta-elekta Baraka Obamy są udostępnione na licencji CC-by. Jeżeli jednak zdecydujesz się na copyright to nie próbuj udawać znaku © poprzez umieszczanie litery c w nawiasach (c) – to nie jest znak copyright. Rozumiem, że tak jest najprościej ale to będzie tylko litera c w nawiasach. Znaki specjalne wpisuje się korzystając ze specjalnych kodów. Strony na blox.pl używają kodowania znaków iso-8859-2 można więc skorzystać z tabeli kodów i wybrać kod numeryczny. Polecam jednak korzystanie z encji są prostsze do zapamiętania a tym samy wygodniejsze. Można też przy ich użyciu zapisywać znaki których nie ma w standardzie iso-8859-2. (Szczerze uwielbiam standarty ISO - czy wiecie, że nawet papier toaletowy ma rozmiar zgodny ze standartami? - cudowne)

3. informacje o autorstwie szablonu

Z oczywistych względów umieszczam w stopce informacje o projekcie strony. Bardziej odpowiada mi taki sposób niż mój różowy button więc najprawdopodobniej wymienię go właśnie na informacje w udawanej stopce.

design by <a href="http://szablonykatemac.blox.pl/html">kate_mac</a>

Teraz wystarczy odpowiednio połączyć wszystkie części i stworzyć sensowne menu. Podany poniżej przykład całości kodu może być stosowany w przypadku większości moich szablonów.

<div id="uStopka">
<a href="#NadTytul">top</a> |
Szablon udostępniony na licencji <a href=" http://creativecommons.org/licenses/by/2.5/pl/">cc-by</a> popełniła <a href="http://szablonykatemac.blox.pl/html">kate_mac</a>
</div>

Pozycjonujemy udawaną stopkę

Teraz pora na odpowiedni CSS. Aby umiejscowić stopkę na dole strony wykorzystamy pozycjonowanie względnie bezwzględne. Oznacza to że elementowi nadrzędnemu musimy określić pozycjonowanie jako względne a naszemu nowemu elementowi bezwzględne – dokładnie tak samo jak w przypadku elementu TrzeciaSzpalta. Dla wszystkich elementów wklejanych w polu na kod html elementem nadrzędnym będzie #BlogBodyBox i następnie #BlogGlownyBox dlatego właśnie przy jednym z tych selektorów należy określić cechę position jako relative.

#BlogGlownyBox {
position:relative;
}

Teraz możemy spokojnie wypozycjonować absolutnie nasz nowy element. Jedyną różnicą w stosunku do pozycjonowania trzeciej szpalty będzie fakt iż element umieszczamy względem dolnej a nie górnej krawędzi bloga. Tak samo możemy zmienić lewą na prawą krawędź jeżeli tak będzie lepiej pasowało do szablonu.

#uStopka {
position:absolute;
bottom:10px;
left:20px;
}

To są wystarczające elementy do umiejscowienia elementu teraz można jeszcze dodać opis wyglądu tekstu. Przykładowo nasza stopka mogłaby wyglądać tak:

#uStopka {
position:absolute;
bottom:10px;
left:20px;
font-size: 90%;
color:#999;
}

I gotowe.

Źródła i dodatkowe informacje:

  • www.smashingmagazine.com: CSS-Based Footers: Modern Solutions
  • www.smashingmagazine.com: Footers In Modern Web Design: Creative Examples and Ideas
  • www.smashingmagazine.com: A Short Story About “Back To Top” Links
  • Elements of Design: Footers Design Showcase (76 examples)
czwartek, 11 grudnia 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
irytek05
2008/12/11 17:20:55
NadTytuł mają tylko te szablony, których nagłówek, czyli BlogTytulBox obejmuje szeroką i wąską szpaltę. Tam gdzie wąska szpalta dochodzi do górnej krawędzi bloga, niestety NadTytułu nie ma. W ten sposób nie musimy zaglądać do arkusza, aby wiedzieć na co możemy sobie pozwolić:)
Ciekawa notka, jeszcze do niej wrócę dokładniej przeczytac:)
-
kate_mac
2008/12/11 17:35:14
@irytek05
niestety nie jest tak; to by pewnie uprościło rozpoznanie szablonu ale tak nie jest i dzięki temu mamy większy wybór
przykładowo theme h czyli ten szary z pomarańczowymi linkami ma NadTytuł a wąska zaczyna się tam obok tytułu
Theme A natomiast ma szeroki tytuł a ani stopki, ani NadTytul nie uświadczysz

uzupełniłam sobie stary wpis o układach - zobacz może przyda ci się taka ściągawka
-
irytek05
2008/12/11 22:11:38
Rzeczywiście, zajrzałam. Ten A to jakas niedoróbka;) Ale themeH jest bardzo interesujący, daje wiele mozliwości, podobnie jak szablon zielony z tytułem na boku.
Nie myślałam, że stopke można na tyle sposobów wykorzystać, brałam pod uwagę tylko te, które nie wymagają dopisywac HTMLa. Można także napisy nie będące linkami wstawić w nią w formie grafiki. Czsem wpisuję tam autora grafiki, wtedy kopiuje się szablon z tą informacją. Czy ktoś do niej dociera? Niewiele osób. Zauważyłaś, że jest zwyczaj wystawiania jak największej ilosći notek, potem strona się ciągnie i ciągnie, tak, że do pięknej stopki niewiele osób dotrwa:)
-
kate_mac
2008/12/12 13:23:47
@Irytek
To że Zielony ma tak inny układ trochę mnie zachwyciło ale ciagle nie wiem jak to wykorzystać. JMożna dostrzec też jeszcze inną róznicę, z tego co pamietam Zielony ma wąska szpalte nazwana tak samo na głównej i na stronie z pojedyncza notką (tak mi się w każdym bądz razie wydaje)

Jeżeli chodzi o stopki to w pewnym momencie chciałam tam wklejać grafiki z napisem:
kate_mac
jej dzieło
;)

Duża liczba wpisów to czasami problem ale mnie chyba bardziej irytyje gdy ich jest za mało - 2 czy 3 - Jak czegoś szukam na takiej stronie to co chwilę musze przechodzić na nastepną. Brak mi jakiejś listy wpisów czy spisu treści. Tak w ogóle to zastanawiam się, czy nie zacząć dzielić wpisu na wstęp i treść bo coraz dłuższe mi wychodzą ;) - zazynając cos tłumaczyc dostaje słowotoku ;)
-
irytek05
2008/12/12 22:14:25
Jeśli chodzi o zielony, to kilka razy zaczynałam się do niego zabierać. Wydawał się całkowicie "pokręcony". Aż raz poswięciłam trochę czasu i uporządkowałam sobie jego arkusz. Nie zwróciłam uwagi na różnicę w nazwach wąskich szpalt, ale o ile sobie przypominam, to ciekawie jest rozwiązana sprawa nie tylko z tytułem, ale i obrazkiem tytułowym. Nie miałam problemów, aby go przesuwac z wąskiej na szeroką.

Z 20 przejść na 3 notki to kolejna skrajnośc;) Pisać ze wstępem to dobry pomysł, nie trzeba przewijać długo szablonu, łatwiej się znajduje notkę, no i blog się szybciej ładuje.

Kate, prosiłam Cię o zaglądnięcie na forum, ale mam nadzieję, że nie zaglądałaś tam, bo mnie samej trudno było znależć te posty. Może ja Ci krótko, streszczę problem. Wiesz, że poprawiałam szablony Anonimki. Nienajlepiej wyglądały w FF i w Operze. Natomiast w IE na oryginalnych szablonach (nie we wszystkich, ale w znacznej części) obrazki w BlogTytulBox mają odstęp od brzegu szerokiej szpalty. Tworzy się nieładna szpara, choć szerokość obrazka jest równa szerokości boxa. Najlepiej to widać na Szablonie Ganckim,
Kiedy skopiowałam ten szablon na roboczy blog, po odpowiednich przeliczeniach szerokości i pewnych zmianach, udało mi się pozbyć tego feleru, ale gdy wkleiłam ten arkusz do oryginalnego szablonu, feler ów powrócił. Potem próbowałam poprawiać bezposrednio w blogach anonimki, i nie da się. Są jak zaklęte, nic je nie rusza. Odstęp jak był tak jest. Męczy mnie to okropnie, bo przeciez nie powinno być aż takiej różnicy między przeglądarkami. Dlatego zależało mi, abyś Ty rzuciła na to świeżym okiem, może cos przeoczyłam. Szablony te są na koncie szablon_team, to jest login a hasło takie samo jak do linkologii.pl. Oczywiście w wolnej chwili, nie jest to pilne:)
-
irytek05
2008/12/12 22:25:17
Kate, czy ja dobrze zrozumiałam, tekst o udawanej stopce dotyczy szablonów, które nie mają w źródle stopki?
-
irytek05
2008/12/12 22:31:05
A już sobie sama odpowiem, alez jestem rozkojarzona;) Ale czegoś nie rozumiem, jesli w żródle jest stopka, to dlaczego nie można jej wykorzystać, do tych celów, o których piszesz, tylko tworzy się nową w polu na HTML?
-
kate_mac
2008/12/13 10:38:52
@irytek
Jeżeli chodzi o szablony anonimki to przypomniałam sobie to pytanie i postaram się poszukać jakiegoś rozwiązania - mnie też drażni gdy w przeglądarkach widać różnicę - fantastycznie się spisałaś poprawiając te szablony - jestem pełna podziwu

Teraz stopka
Nie można wykorzystać tej która jest w html bloga bo nie ma do niej dostępu. zawartość pola na kod html wyświetla się bezpośrednio w BlogBodyBox i nie ma szans dobrać się do zawartości elementu Stopka
Dlaczego należy stworzyć nową? Dopóki chodzi tylko grafikę którą dodajesz poprzez CSS to nie trzeba ale gdy coś chcesz wpisać to potrzebujesz już dostępu do html. Nie możesz wykorzystać elementy o identyfikatorze Stopka bo taki element może być na stronie tylko raz (różnica pomiędzy klasą identyfikatorem). Dlatego w drzewie, dokumentu innym miejscu (bo tylko do tego innego miejsca masz dostęp) tworzysz nową stopkę i pozycjonujesz ją absolutnie.
-
irytek05
2008/12/13 12:04:00
Ciągle zapominam, że pisząc na blogu, korzystamy z edytora, który za nas wpisuje do żródła linkowanie:)
Myślałam, ze można by utworzyć w css ' Div#Stopka a' i problem załatwiony;)
-
2011/12/28 17:30:15
witam,
interesuje mnie jak zrobić aby dodać stopkę na całą szerokość ekranu
tu jest adres do stopki
xaa.blox.pl/resource/footerbg.jpg
wiem ze trzeba zrobić repeat-x ... gdy tak robie to stopka rozszerza sie tylko ze prawko a nie jest w centrum .. prosze o pomoc
-
kate_mac
2012/01/01 20:54:34
@nandas4
interesuje mnie jak zrobić aby dodać stopkę na całą szerokość ekranu
wiem ze trzeba zrobić repeat-x ... gdy tak robie to stopka rozszerza sie tylko ze prawko a nie jest w centrum .. prosze o pomoc

trudno mi sobie wyobrazić co dokładnie masz na myśli
repeat-x rzeczywiście odpowiada za horyzontalne powtarzanie
skoro piszesz o stronach to może powodem Twego niezadowolenia jest nie powtarzanie a położenie? automatyczne to wyrównanie do lewej i do góry
O właściwościach związanych z tłem poczytać możesz w notce Określamy tło, część 1
Nie wiem na ile jasna będzie dla Ciebie moja sugestia ale jeżeli chcesz umieścić dwa tła, które wychodzą "poza" przestrzeń bloga możesz jedno dodać w body a drugie przypisać html. Musi być ono oczywiście od razu o określonej wielkości. A potem w ramach przestrzeni bloga możesz spokojnie dodać udawaną stopkę z elementami albo tylko sam szczególny wygląd stopki, który możesz przypisać selektorowi #Stopka

Jeżeli dalej masz problem z tym elementem to pokaż mi jak on wygląd i co byś chciał poprawić. Tak w ciemno to trudno mi zgadnąć o co Ci chodzi.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...