stopka strony - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...(czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji). W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od...
- Szablon strony na DIV-ach / Stały szablon
...ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak i przeczytanie całej linijki tekstu może wymagać ciągłego przewijania w prawo i z powrotem. W wyższych rozdzielczościach ekranu pojawi...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu Quirks). Dlaczego nie...
- Szablon strony na DIV-ach / Responsywny szablon
...urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej przestrzeni okna przeglądarki. Dzięki temu strona powinna być czytelna nawet na najmniejszych ekranach. Pierwszy punkt przeskoku zdefiniowaliśmy na wartości 800px. Jeśli użytkownik dysponuje urządzeniem z przynajmniej tak dużym...
- Dobre praktyki / Przykazania webmastera
...powtórzona nawigacja pojawia się w stopce serwisu, ale w odróżnieniu od linków nagłówkowych, może zawierać znacznie więcej odnośników. Oprócz tego stopka jest dobrym miejscem na zaznaczenie praw autorskich i podanie odnośnika do kontaktu. Zapomnij o wstawieniu nawigacji tylko na stronie głównej, a na podstronach samego linku "Powrót do strony głównej". To tylko niepotrzebny klik, a przy tym zmiana układu strony, co może zdezorientować użytkownika. Natomiast dobrym zwyczajem jest...
HTML5 / Szablon strony w HTML5Bardzo dawno temu, gdy nie było innej możliwości, do tworzenia szkieletu strony powszechnie używano tabel. Ale po wprowadzeniu języka CSS, takie podejście zaczęto uznawać za bardzo poważny błąd semantyczny. Mając do dyspozycji CSS i HTML 4.01, jedyną możliwością zbudowania prawidłowego szablonu strony było wykorzystanie bloków DIV. Sekcje szkieletu zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników było poprawne. W języku HTML5 zostały jednak wprowadzone zupełnie nowe...
- Widżety HTML / Szablon strony bez ramek
...się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek...
- HTML5 / Stopka <footer>
...wstawienie znacznika FOOTER nawet na samym początku sekcji. A jeśli umieścimy stopkę w ogóle poza znacznikami sekcji, będzie się ona odnosić do strony jako całości. Przykład <footer> <article> <h1>Mój artykuł</h1> <p>To jest mój artykuł...</p> <footer> Autor: <address>Jan Kowalski (jan.kowalski@example.com)</address> <p>wszelkie prawa zastrzeżone</p> </footer> </article> Warto przy okazji zauważyć, że gdyby w informacjach o autorze nie podano danych kontaktowych (tutaj adresu...
- Ikony (symbole) / Formatowanie tekstu
...edit_off Widok patchworku view_quilt view_quilt Widok karuzeli view_carousel view_carousel Zwiększ tekst text_increase text_increase Żądanie strony request_page request_page Formatuj tekst text_format text_format Widok paska bocznego view_sidebar view_sidebar Strony pages pages Sześciokąt hexagon hexagon Formatuj wyrównanie do obu stron format_align_justify format_align_justify Dodatek do dokumentów docs_add_on docs_add_on Liczby numbers numbers Widok tygodnia w kalendarzu...
- HTML5 / Nowe elementy HTML5
...kawałek treści dokumentu, jak np. wpis na blogu albo artykuł w gazecie. ASIDE Kawałek treści, który tylko nieznacznie jest powiązany z resztą strony. HGROUP Nagłówek sekcji. HEADER Grupa wprowadzająca albo ułatwienia nawigacyjne. FOOTER Stopka sekcji. Może zawierać informacje na temat autora, praw autorskich itp. NAV Sekcja dokumentu przeznaczona na nawigację. Oprócz wymienionych tutaj znaczników do elementów używanych przy wstawianiu sekcji zaliczamy również: BODY, H1, H2...