Szablon wykorzystany w omawianej aplikacji jest przedstawiony na rysunku 1. Jest to szablon stałej szerokości wykonany w oparciu o udawane kolumny (ang. faux columns) oraz ujemne marginesy. Posiada on jedno menu widoczne po lewej stronie.
Szablon ten wykonamy wykorzystując program GIMP. Kod HTML/CSS wprowadzimy ręcznie, wykorzystując dowolny edytor tekstowy.
Rysunek 1. Szablon HTML/CSS
Pracę nad szablonem rozpocznij od ... wydarcia podłużnych papierowych fiszek ze starej gazety lub książki. Fiszki zeskanuj w dość dużej rozdzielczości. Najlepiej od razu wydrzyj więcej niż jedną fiszkę (np. trzy). Zaoszczędzi ci to pracy, w przypadku, gdy krawędzie fiszki są krzywe.
Skany, których użyłem, są widoczne na rysunku 2.
Rysunek 2. Skany podartego papieru
Wybierz ze skanu fiszkę, której krawędzie są proste. Fiszkę skopiuj i wklej do nowego dokumentu. Wklejony obraz obróć tak, by lewa krawędź fiszki była pionowa.
Następnie stosując operacje:
spróbuj wzmocnić kolorystykę fiszki.
Powinieneś dążyć do otrzymania obrazu przypominającego ilustrację 3.
Rysunek 3. Pasek papieru po wzmocnieniu kolorystyki
Teraz należy wyrównać prawą krawędź tak, by była pionowa.
Rysunek 4.
Z wykonanego w poprzednim kroku obrazu wytnij prostokąt o nieco mniejszej wysokości.
Rysunek 5.
Zaznacz prostokąt obejmujący prawą krawędź.
Rysunek 6.
Zaznaczenie zaokrągl (promień: 50), a następnie skopiuj i wklej na nową warstwę.
Rysunek 7.
Wklejony fragment obróć tak, by jego wyraźna, prawa krawędź była pionowa.
Rysunek 8.
Pomogą Ci w tym prowadnice pionowe.
Rysunek 9.
Po wykonaniu obrotu i włączeniu widoczności obu warstw otrzymasz obraz, w którym obie krawędzie są pionowe. Uwaga, w wyniku obrotu górny prawy narożnik jest niepełny. Z otrzymanego obrazu wytnij fragment pozbawiony tej wady.
Teraz należy obraz otrzymany w poprzednim kroku przekształcić tak, by można go było powielać w nieskończoność.
Rysunek 10.
Otwórz obraz otrzymany w poprzednim kroku.
Rysunek 11.
Zaznacz prostokąt obejmujący górną połowę rysunku. Prostokąt ten skopiuj i wklej jako nową warstwę.
Rysunek 12.
W podobny sposób wykonaj dolny prostokąt. Prostokąty dolny i górny mają w pełni pokrywać cały obraz, nie zachodząc na siebie. Najłatwiej wykonasz dolny prostokąt następująco:
Rysunek 13.
Otrzymane prostokąty przesuń:
Prostokąty przesuń tak, by — tak jak przed operacją przesuwania — co do piksela pokrywały cały obraz. W środku obrazu będzie widoczna linia połączenia dwóch prostokątów.
Rysunek 14.
W celu usunięcia szwu w środkowej części obrazu wykonaj łatki. Zaznacz prostokąt obejmujący swym zasięgiem szef, prostokąt zaokrągl (promień 20), po czym skopiuj z warstwy tła i wklej na nową warstwę. Zmniejsz krycie wklejonej łatki. W razie potrzeby wykonaj kilka łat.
Rysunek 15.
W ten sposób otrzymasz obraz, w którym w środkowej części nie ma żadnego szwu, i który może być powielany w pionie.
Rysunek 16. Test pionowego powielania tła
Wykonaj test tła. Przygotuj stronę WWW, w tle umieść wykonany obraz:
...brak dostępu...
Ostatnim krokiem jest wykonanie logo.
Rysunek 17.
Skopiuj ekran przedstawiający witrynę z tłem z poprzedniego kroku. Ekran ten wklej jako nowy obraz i obróć o 90 stopni.
Rysunek 18.
Z obrazu wytnij pas o szerokości 520 pikseli.
Rysunek 19.
Wykonaj łatkę, która przysłoni lewy koniec obrazu. Łatkę skopiuj jako poziomy prostokąt górnej części obrazu. Poziomą łatkę obróć, tak by otrzymać łatkę pionową. Gumką wyczyść (do pełnej przezroczystości) narożniki łatki.
Rysunek 20.
Wykonaj kilka mniejszych łatek, które usuną szwy.
Rysunek 21.
Po włączeniu widoczności wszystkich warstw otrzymasz obraz, o pionowej lewej krawędzi. Połącz w nim wszystkie warstwy.
Rysunek 22.
Skopiuj lewy fragment obrazu, skopiowany prostokąt wklej na nową warstwę. Wklejony fragment odbij poziomo i przesuń w prawo.
Rysunek 23.
Dodaj maskę prostokąta, która spowoduje jego znikanie w kierunku lewej krawędzi.
Rysunek 24.
Włącz widoczność wszystkich warstw, a następnie spłaszcz obraz.
Rysunek 25.
Na zakończenie dodaj do obrazu napisy. Otrzymany obraz zapisz w formacie XCF.
Gdy obrazy są gotowe, możesz przystąpić do pisania kodu HTML.
Witryna będzie posiadała jedno menu (ul#menu) oraz treść (div#content). W elemencie div#content znajduje się nagłówek h1 oraz zawartość witryny. Do usunięcia tekstu nagłówka wykorzystany zostanie element span zawarty w elemencie h1. Kod HTML szablonu jest przedstawiony na listingu 1.
...brak dostępu...
Listing 1. Kod HTML szablonu
Style szablonu są rozbite na kilka plików. Do dokumentu HTML dołącz jeden plik o nazwie main.css:
...brak dostępu...
Plik ten zawiera dwie instrukcje @import dołączające pozostałe pliki:
...brak dostępu...
Plik layout.css zawiera style odpowiedzialne za układ strony. Jest to układ stałej szerokości wykonany przy użyciu dwóch sztuczek:
Kod CSS odpowiedzialny za układ jest widoczny na listingu 2.
...brak dostępu...
Listing 2. Kod CSS: dwukolumnowy układ stałej szerokości stosujący udawane kolumny i ujemne marginesy
Układ ma szerokość 760 pikseli. Musisz więc przygotować obraz o szerokości 760 pikseli. Obraz ten służy do wykonania efektu sztucznych kolumn. Po ustaleniu tła elementu body, na stronie — bez względu na jej wysokość i zawartość pojawi się kolumna o powielonym tle.
Rysunek 26. Tło udawanych kolumn
Podział na menu (leżące po lewej stronie) i treść (prawa strona układu) jest wykonany w oparciu o ujemne marginesy. Najpierw ustal szerokości kolumn. W przykładzie są to: 520 pikseli (treść) oraz 240 pikseli (menu). Zauważ, że:
...brak dostępu...
Treść (w kodzie HTML treść występuje jako pierwsza!) przesuń do prawej:
...brak dostępu...
ustal marginesy i wyrównanie na 0:
...brak dostępu...
po czym przesuń element div#content tak, by jego prawa krawędź wypadała na środku przeglądarki:
...brak dostępu...
Na zakończenie, przesuń element div#content o połowę szerokości układu (760 : 2 = 380) w prawo:
...brak dostępu...
Pamiętaj o wpisie:
...brak dostępu...
gdyż zmienia on sposób wyznaczania marginesów.
To kończy układanie elementu div#content w odpowiednim miejscu okna przeglądarki. Pora na menu.
Ustal szerokość i dosuń menu do prawej:
...brak dostępu...
po czym zmień sposób wyznaczania pozycji na względny i przesuń prawą krawędź:
...brak dostępu...
Technika udawanych kolumn została przedstawiona przez Dana Cederholma w artykule pt. „Faux Columns” (http://www.alistapart.com/articles/fauxcolumns/). Ujemne marginesy zostały opracowane przez Ryana Brilla. Szczegółowy opis znajdziesz w artykule pt. „Creating Liquid Layouts with Negative Margins” (http://www.alistapart.com/articles/negativemargins/).
Zaletą techniki ujemnych marginesów jest to, że tło strony pozostaje w odpowiednim miejscu nawet wówczas, gdy okno przeglądarki ma niewielką szerokość. (O problemie tym pisałem w artykule poświęconym szablonom stron WWW w MI nr 1/2007). Wadą natomiast jest to, że pasek przewijania poziomego nie jest w ogóle dostępny. Jeśli zatem, z jakichkolwiek przyczyn, witryna nie może być oglądana w odpowiednio dużej rozdzielczości, to będzie ona całkowicie niedostępna. Jedynym wyjściem będzie wówczas wyłączenie stylów CSS.
