szablon strony - Kurs HTML i CSS
Widżety HTML / Szablon strony bez ramek...sposób, który nie posiada tych wad. Z każdego szkieletu strony można wydzielić powtarzające się fragmenty w postaci nagłówka oraz stopki szablonu. Na przykład, jeśli Twoja strona główna wygląda tak: <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Tytuł strony</title> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul> Właściwa zawartość strony... </body> </html> Kolorem...
Szablon strony na DIV-ach / Semantyczny szablon strony...Roku. Chcesz przygotować zestaw skórek dla Twojej strony? Z CSS jest to znacznie prostsze i mniej inwazyjne niż w jakimkolwiek systemie parsowania szablonów. Ponadto rozwiązanie takie jest pozbawione bardzo irytującej wady: jeśli przyszło Ci administrować darmowym systemem CMS lub forum dyskusyjnym i masz już za sobą samodzielne próby wprowadzania modyfikacji dodających nowe funkcje w serwisie, to zapewne wiesz, że bardzo często wymaga to aktualizacji plików wszystkich dostępnych skórek. Po...
- HTML5 / Szablon strony w HTML5
...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 znaczniki, dzięki którym możemy zbudować szablon strony w sposób jeszcze bardziej semantyczny. Spróbujmy to wykonać, przekształcając kod...
- Szablon strony na DIV-ach / Płynny szablon
Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być...
- Szablon strony na DIV-ach / Responsywny szablon
Spis treści Wstęp Powiększenie strony Skalowalny szablon Strona mobilna Responsive Web Design (RWD) Skalowanie Responsywne obrazki Punkty przeskoku Wstęp Nie powinno być chyba dla nikogo zaskoczeniem, że urządzenia mobilne (smartfony, tablety) są dzisiaj używane tak samo chętnie lub nawet częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą...
- Szablon strony na DIV-ach / Stały szablon
Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość 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...
- HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>
...hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany. Oto jak przykładowo powinny wyglądać ramy każdego dokumentu w formacie HTML (istnieją również inne podobne szablony): <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> </head>...
- Układ elastyczny CSS / Kolejność {order}
...obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało...
- Dobre praktyki / Przykazania webmastera
...elementów ani atrybutów zdeprecjonowanych Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Nie stosuj tabelek do budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img do wstawiania grafiki tworzącej oprawę graficzną strony Zawsze wypełniaj atrybut alt="..." dla ilustracji Zapisuj ilustracje we właściwych formatach graficznych Stosuj fizycznie pomniejszone miniatury zdjęć Strona...
- Oprawa graficzna / Zamiennik obrazkowy
...wyboru skórki, która najbardziej im odpowiada. Problem w tym, że w ten sposób nie uda Ci się podmienić statycznie wstawionych obrazków, tworzących szablon graficzny - np. logo i inne elementy. W szczególności nie stworzysz szybko ładującej się skórki, pozbawionej zbędnych elementów graficznych. Coraz więcej użytkowników przegląda sieć za pomocą urządzeń mobilnych (smartfony, tablety). Dzięki obsłudze różnorodnych typów mediów, bez dużego wysiłku można przygotować specjalne wersje serwisu...