Szablon, który dzisiaj przedstawię, nauczy dwóch ciekawych rozwiązań. Dowiemy 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.
Szablon
Gotowy szablon jest przedstawiony na rys. 1. Jest to szablon trójkolumnowy, płynnie dostosowujący się do szerokości okna przeglądarki.
Do wykonania szablonu wykorzystałem jedenaście obrazów. Rys. 2 prezentuje pełne zestawienie podające wygląd, nazwy oraz wymiary plików graficznych. Pierwsze cztery rysunki, mają wymiary 6 x 6 pikseli. Obrazy te, w powiększeniu, zostały przedstawione na rys. 3.
Ikony powstały na bazie zestawu dostępnego pod adresem http://www.e-lusion.com/design/greyscale/, zaś strzałka pochodzi z archiwum http://www.el73.be/drunkey-love. Ostatnia z ilustracji, przedstawiająca sprzęt audio, jest fotomontażem, który wykonałem na bazie jednej z moich fotografii.
Zaokrąglone narożniki są wykorzystane do wykonania zakładek oraz stopki. Zakładki menu oraz stopka są elastyczne. Oznacza to, że ich wymiary dostosują się do ilości tekstu oraz do rozmiaru czcionki. Aby się o tym przekonać, naciskamy w Firefoksie skrót klawiszowy Ctrl+.
Kod XHTML szablonu jest w pełni poprawny składniowo, można go nazwać prawie semantycznym. Semantyka szablonu jest zaburzona w trzech miejscach:
- menu z zakładkami jest umieszczone w pojemniku,
- pojemnik ten zawiera element \”czyszczący\”,
- w stopce znajduje się element span, którego jedynym zadaniem jest zaokrąglenie narożnika.
Zarys kodu XHTML jest przedstawiony na listingu 1, zaś jego struktura na rys. 4. Rys. 5 pozwala zorientować się w którym miejscu ekranu wypadają poszczególne elementy XHTML.
|
|
|
GIMP
Przystępujemy do wykonania obrazów. Należy narysować zaokrąglone narożniki, wykonać ikony oraz fotomontaż sprzętu audio.
Zaokrąglone narożniki
{tlo_1}
Tworzymy nowy dokument o wymiarach 32 x 32. W dokumencie tym zaznaczamy kwadrat.
{/tlo}
{tlo_0}
Wykorzystując opcję Zaznaczenie / Zaokrąglenie zaokrąglamy narożniki prostokąta o 50%.
{/tlo}
{tlo_1}
Otrzymane zaznaczenie wypełniamy kolorem niebieskim.
{/tlo}
{tlo_0}
Na zakończenie dodajemy do obrazu prowadnice, po czym przy użyciu opcji Edycja / Kopiuj oraz Edycja / Wklej jako nowy kopiujemy z obrazu cztery narożniki. Utworzone obrazy zapisujemy w plikach.
{/tlo}
Retusz fotografii
{tlo_1}
Tworzymy oryginalną fotografię tak, by krawędzie sprzętu audio były pionowe.
{/tlo}
{tlo_0}
Powiększamy nieco widok zdjęcia i odręcznie zaznaczamy w nim łatę widoczną na ilustracji. Łata ta powinna obejmować wyłącznie jednolity fragment tunera.
{/tlo}
{tlo_1}
Zaznaczoną łatę zaokrąglamy (Zaznaczenie / Zaokrąglij), ustalając promień na 10, a następnie kopiujemy i wklejamy na nową warstwę.
{/tlo}
{tlo_0}
Wykonujemy kopię łaty. Duplikat przesuwamy do dołu, wykorzystując do tego operację do przesuwania warstw i zaznaczeń oraz strzałkę w dół (na klawiaturze).
{/tlo}
{tlo_1}
Wykonujemy kilkanaście kopii łaty. Każdy duplikat przesuwamy nieco do dołu. Łaty powinny przysłonić cały odtwarzacz CD znajdujący się pod tunerem.
{/tlo}
{tlo_0}
W podobny sposób wykonujemy łaty pozostałych obszarów obrazu. Łaty przysłaniają oryginalną fotografię, zmieniając wygląd tunera.
{/tlo}
XHTML/CSS
Przygotowanie elastycznych zakładek menu wymaga znajomości problemu wysokości elementów pływających.
Problem wysokości elementów pływających
Elementami pływającymi są te elementy, które posiadają właściwość float o wartości left lub right. Elementy takie nie generują wysokości. Problem ten napotkałem już na samym początku pracy ze stylami CSS. Wykonując stronę WWW o stałej szerokości i podzieloną na dwie kolumny:
#pojemnik {
width : 600px;
}#
menu {
width : 200px;
float : left;
}#
content {
width : 300px;
float : right;
}
nie mogłem nadać obramowania pojemnikowi. Jak widać na rys. 6, zielone obramowanie pojemnika jest zbyt małe, nie obejmuje menu i treści. Powodem jest to, że menu i treść, jako elementy pływające, nie generują wysokości.
Rozwiązanie tego problemu znalazłem w jednym z artykułów Erica Meyera (http://www.complexspiral.com/
publications/containing-floats/). Okazuje się, że sposób wymuszenia wysokości zewnętrznego pojemnika jest bardzo prosty, choć wymaga zaburzenia semantyki kodu XHTML. Wystarczy w pojemniku umieścić na samym końcu pusty element div o właściwości clear równej both:
.czyszczenie {
clear : both;
}
Jak widać na rys. 7, tym razem zielone obramowanie obejmuje menu i treść.
Dlaczego zachowanie elementów pływających jest takie dziwne? Ono wcale nie jest dziwne, jest naturalne w innym kontekście. Jeśli w akapicie umieścimy obraz i zechcemy, by obraz ten opływał tekst, tak jak na rys. 8, to należy obrazowi nadać właściwość:
float : left;
Kolejny akapit, o żółtym tle na rys. 8, rozpoczyna się w połowie obrazu, gdyż pierwszy akapit (o zielonym tle) się skończył. Gdyby elementy pływające generowały wysokość, to żółty akapit mógłby się rozpocząć dopiero poniżej obrazu, tak jak na rys. 9.
|
|
|
Oczywiście IE traktuje sprawę po swojemu, co tylko wprowadza dodatkowy zamęt. Witryna z rys. 6 jest wyświetlana przez IE tak jak na rys. 7. Innymi słowy, wysokość pojemnika jest wyznaczana tak, jak gdyby zawierał on element czyszczący.
Elastyczne zakładki
Znając problem elementów pływających, możemy przystąpić do wykonania elastycznych zakładek. Elastyczność oznacza – w przypadku zakładek – dwie cechy:
- tekst zakładki możemy wymienić w XHTML (bez modyfikowania obrazów),
- wielkość kroju pisma może być zmieniana.
Kod XHTML zakładek jest następujący:
W stylach należy:
- usunąć wypunktowanie (właściwość liststyle elementu ul),
- zamienić pionowy układ elementów listy na poziomy (właściwości float użyte w odniesieniu do li),
- ustalić odstępy (padding) oraz marginesy (margin),
- zamienić hiperłącza w elementy blokowe (atrybut display:block użyty w odniesieniu do a),
- nadać zaokrąglone narożniki: tła elementów li (lewy górny) oraz a (prawy górny).
Zaokrąglone narożniki wykonujemy w oparciu o tła elementów li oraz a. Ponieważ każda zakładka ma dwa górne narożniki, więc nie musimy wprowadzać żadnych dodatkowych elementów XHTML (w przypadku stopki jest konieczny jeden dodatkowy element; użyłem span). Lewy górny narożnik każdej zakładki jest tłem elementu li, natomiast prawy górny narożnik zakładki jest tłem elementu a. By nadawać tło elementu a, najlepiej zmienić jego typ z inline na block. Realizuje to wpis:
display : block;
W ten sposób element a wypełnia całą dostępną przestrzeń wewnątrz elementu li (listing 2).
#menu {
list-style : none;
float : right;
width : 22em;
min-width : 140px;
margin : 0 30px 0 0;
padding : 10px 0 0 0;
}
#menu li {
float : right;
margin : 0 1px;
padding : 0;
background : url(\'img/top-left.png\') no-repeat top left rgb(174,197,255);
font-weight : bold;
}
#menu a {
display : block;
margin : 0;
padding : 2px 1em 0 1em;
line-height : 140%;
text-decoration : none;
background : url(\'img/top-right.png\') no-repeat top right;
color : rgb(0,101,176);
}
Menu zakładek umieszczamy w pojemniku, po menu dodajemy element czyszczący:
.stop {
clear : both;
}
Na zakończenie menu dosuwamy do prawej strony (właściwość float:right elementu ul) oraz dodajemy dolne obramowanie pojemnika.
Tło zakładek jest jednolite i musi być identyczne jak kolor zaokrąglonych narożników. W celu poznania koloru zaokrąglonych narożników otwieramy jeden z nich w GIMP-ie, po czym sprawdzamy niebieski kolor pipetą do pobierania koloru.
W kodzie XHTML opcje menu mają odwrotną kolejność niż w przeglądarce. Winę ponosi dosuwanie zakładek do prawej krawędzi ekranu!
Układ płynny
Płynny układ strony WWW to taki układ, którego szerokość zależy od szerokości okna przeglądarki. Szerokość układu płynnego jest zazwyczaj podana w procentach szerokości okna przeglądarki.
Trzy kolumny omawianej strony WWW są zawarte w elementach:
Elementy content, msg oraz info mają następujące cechy:
- content – dosunięty do lewej, szerokość 37%, padding 2%,
- msg – dosunięty do prawej, 27%, padding 2%,
- info – dosunięty do prawej, szerokość 37%, padding 2%,
ustalone przez style:
#content {
float : left;
clear : both;
width : 37%;
padding-right : 2%;
padding-left : 0;
}
#info {
float : right;
width : 27%;
padding : 1%;
background : url(’img/foto.jpg’) no-repeat top center;
}
#msg {
float : right;
width : 27%;
padding-right : 0;
padding-left : 2%;
}
Zauważmy, że suma szerokości i wypełnień jest mniejsza niż 100%:
37 + 2 + 27 + 2 + 27 + 2 = 97%
Na wszelki wypadek wolę odjąć po jednym procencie, by – w wyniku błędów zaokrągleń – elementy te nigdy nie zostały umieszczone jeden pod drugim. Dodatkowo, dla Mozilli podaję minimalną szerokość strony:
body {
min-width : 760px;
}
Podsumowanie
Podany szablon jest w pełni poprawny składniowo w XHTML 1.0 strict oraz CSS 2.1. Szablon ten przetestowałem w przeglądarkach IE 6, IE7, FF 1.5, FF 2, Opera 7.54 oraz Opera 9. Kod XHTML jest niemal w pełni semantyczny. Semantykę zaburzają: pojemnik wrapper, element czyszczący w pojemniku, element span w stopce. Konieczność elementu span w stopce wynika z faktu, że nie możemy jednemu elementowi przyporządkować dwóch obrazów tła. Stopka ma kod:
Lewy dolny zaokrąglony narożnik stopki jest przypisany do elementu h2, zaś prawy dolny do span.
