GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

Szablony

1. GIMP. Tworzenie szablonów stron WWW. Szablon #17

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

2. GIMP. Tworzenie szablonów stron WWW. Szablon #16

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

3. GIMP. Tworzenie szablonów stron WWW. Szablon #15

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

4. GIMP. Tworzenie szablonów stron WWW. Szablon #14

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

5. GIMP. Tworzenie szablonów stron WWW. Szablon #13

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

6. GIMP. Tworzenie szablonów stron WWW. Szablon #12

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

7. GIMP. Tworzenie szablonów stron WWW. Szablon #11

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

8. GIMP. Tworzenie szablonów stron WWW. Szablon #10

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

9. GIMP. Tworzenie szablonów stron WWW. Szablon #9

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

10. GIMP. Tworzenie szablonów stron WWW. Szablon #8

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

11. GIMP. Tworzenie szablonów stron WWW. Szablon #7

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

12. GIMP. Tworzenie szablonów stron WWW. Szablon #6

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

13. GIMP. Tworzenie szablonów stron WWW. Szablon #5

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

14. GIMP. Tworzenie szablonów stron WWW. Szablon #4

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

15. GIMP. Tworzenie szablonów stron WWW. Szablon #3

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

16. GIMP. Tworzenie szablonów stron WWW. Szablon #2

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

17. GIMP. Tworzenie szablonów stron WWW. Szablon #1

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


Reklama

Szkolenia z Zend Framework 2.0