Szablon ten prezentuje menu z efektem rollover oraz wskaźnikiem wybranej opcji. Oba efekty są wykonane w CSS z wykorzystaniem kafelkowania (ang. sprites). Wskaźnik wybranej opcji wymaga dodania do kodu XHTML jednego elementu span dla każdej opcji oraz identyfikatora elementu body .
2008-04-01
Prezentowany szablon bazuje na układzie stałej szerokości. Wykorzystano w nim trzy triki: kafelkowanie (ang. sprites), pozycjonowanie względnie bezwzględne oraz FIR (ang. Fahrner Image Replacement).
2008-03-01
Duża część ilustracji umieszczanych na stronach WWW pełni rolę dekoracyjną. Są to różnego rodzaju zaokrąglenia, strzałki czy wypełnienia tłem. Obrazy takie możemy umieścić w stylach CSS, dzięki czemu kod XHTML będzie maksymalnie zwięzły. W omawianym szablonie wszystkie obrazy zostały zawarte w CSS. Szczególną uwagę poświęciłem temu, by szablon pozostawał czytelny także po wyłączeniu w przeglądarce pobierania obrazów.
2008-02-01
Prezentowany szablon jest ograniczony od dołu i od góry przez poziome pasy. W ten sposób realizowane jest dostosowanie szablonu do rozdzielczości: pasy zawsze rozciągają się od lewej do prawej krawędzi przeglądarki. Środkowa część szablonu jest podzielona na dwie kolumny, których szerokość może być dowolnie zmieniana w CSS.
2008-01-01
Szablon ma stałą szerokość. Oprócz standardowej nawigacji w prawym górnym narożniku znajdują się ikony ułatwiające dostęp do strony głównej, mapy witryny, strony kontaktowej oraz wersji do druku. Ikony szybkiej nawigacji są wykonane z wykorzystaniem pozycjonowania względnie bezwzględnego.
2007-12-01
Omawiany w tym odcinku szablon jest stałej szerokości. Ma on trzy kolumny, nagłówek oraz stopkę. Wewnątrz kolumn lewej i prawej znajdują się wielokrotne dwupoziomowe menu.
2007-11-01
Szablony XHTML/CSS można podzielić na dwie kategorie: szablony sztywne oraz szablony płynne . Szerokość szablonów sztywnych jest stała i nie zależy od rozmiaru okna przeglądarki. Natomiast szablony płynne dostosowują się do szerokości okna przeglądarki, wypełniając całą dostępną przestrzeń. Niektóre projekty graficzne mogą służyć do wykonania zarówno szablonu sztywnego jak i płynnego. W artykule opiszę, w jaki sposób narysować projekt szablonu w GIMP-ie oraz jak na bazie pliku XCF przygotować dwa identycznie wyglądające szablony: sztywny i płynny.
2007-10-01
Omawiany szablon jest płynny: wypełnia całe okno przeglądarki od rozdzielczości 800×600 wzwyż. Efekt ten jest osiągnięty dzięki ujemnym marginesom oraz rozsuwaniu tła.
2007-09-01
Omawiany szablon jest podzielony na trzy poziome obszary. Jest to szablon stałej szerokości, wyśrodkowany na stronie. Środkowy pas wykorzystuje sztuczkę udawanych kolumn, zaś etykiety opcji menu są wyśrodkowane poziomo i pionowo.
2007-08-01
Prezentowany szablon jest wykonany na bazie układu stałej szerokości. Wykorzystuje on dwie sztuczki techniczne: czyszczenie elementów pływających oraz ukrywanie tekstów. Ponadto dzięki ustaleniu szerokości menu głównego w jednostkach em wymiar menu będzie dopasowywany do wielkości czcionki ustalonej w przeglądarce.
2007-07-01
Omawiany szablon posiada stałą szerokość. Wykorzystuje on tzw. czyszczenie , które nadaje elementom pływającym odpowiednią wysokość. Ponadto w nagłówku, przy użyciu pozycjonowania względnie bezwzględnego, rozjaśniany jest fragment zdjęcia.
2007-06-01
Efekt rollover można wykonać w CSS w taki sposób, że wszystkie opcje w stanie aktywnym są zapisane w jednym pliku graficznym. Technika taka, nazywana w żargonie sprites , wymusza wstępne pobieranie obrazów i minimalizuje krojenie pliku graficznego na małe kawałki. W omawianym szablonie rozwiązanie takie zostało wykorzystane do wykonania menu.
2007-05-01
W kolejnym szablonie przedstawię połączenie trzech technik: ujemnych marginesów, udawanych kolumn oraz wymiany obrazów FIR. Dzięki użyciu tych technik otrzymany kod XHTML jest w pełni semantyczny, zaś w przypadku szablonu tekstowego także częściowo elastyczny.
2007-04-01
Szablon, który dzisiaj przedstawię, nauczy Cię dwóch ciekawych rozwiązań. Dowiesz się, w jaki sposób w GIMP-ie wykonać fotomontaż techniką „łatek” oraz na czym polega problem z wysokością elementów pływających w CSS.
2007-03-01
Prezentowany szablon wykorzystuje technikę sztucznych kolumn (ang. faux columns) opisaną przez Dana Cederholma. Problem zbyt małej ilości tekstu rozwiązałem, stosując poziomą stopkę, rozciągającą się na całą długość strony. Dodatkowo, w szablonie umieściłem ikony reagujące na wskaźnik myszy (ang. rollover), wykonane w całości w CSS.
2007-02-01
Szablon, jaki przygotowałem w tym odcinku ma układ dwukolumnowy. Kolumny o stałej szerokości, wyśrodkowane na stronie rozciągają się na całą wysokość okna przeglądarki. Wydawałoby się: nic prostszego. Jak się okaże na przeszkodzie stoi problem wyznaczenia wysokości elementów pływających.
2007-01-01
Artykuł ten rozpoczyna nowy cykl poświęcony przygotowywaniu szablonów witryn WWW w programie GIMP. W każdym odcinku szczegółowo opisany zostanie jeden szablon. W dzisiejszym spotkaniu przygotujemy wizytówkę firmy z branży motoryzacyjnej.
2006-12-01
