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).

Szablon

{tlo_1}

Szablon jest przedstawiony na rysunku obok. Wszystkie obrazy szablonu są dołączone w stylach CSS. Innymi słowy kod XHTML nie zawiera ani jednego elementu img.

{/tlo}

{tlo_1}

Po wyłączeniu stylów CSS (Web Developer Toolbar → CSS → Disable styles → All styles (Ctrl+Shift+S)) strona pozostaje czytelna.

{/tlo}

{tlo_1}

Nawigacja witryny składa się z menu głównego. Jest ono wykonane przy użyciu techniki rollover w stylach CSS w połączeniu z kafelkowaniem.

{/tlo}

{tlo_1}

Szablon wykorzystuje ikony przedstawione na rysunku obok. Są one dostępne na stronach http://www.freeiconsweb.com oraz http://www.opentux.com.ar/lordcrow/packs/kneu.html.

{/tlo}

Szablon w formacie XCF

{tlo_1}

Tworzymy nowy obraz o wymiarach 1160×600 pikseli. W obrazie tym dodajemy prowadnice w odległościach 20 oraz 40 pikseli od każdej krawędzi.

{/tlo}

Menu główne

{tlo_1}

Zaznaczamy duży prostokąt obejmujący połowę obrazu. Wypełniamy go delikatnym pionowym gradientem liniowym o ciemnym kolorze.

{/tlo}

{tlo_1}

Wklejamy cztery ikony przeznaczone na opcje menu. Wklejone ikony skalujemy do szerokości 100 pikseli.

{/tlo}

{tlo_1}

Narzędziem Pobieranie koloru pobieramy z jednej z ikon kolor żółty. Dodajemy do obrazu nową warstwę i wypełniamy ją pobranym kolorem. Zmniejszając krycie żółtej warstwy ustalamy nasycenie żółtego tła.

{/tlo}

Logo

{tlo_1}

Wklejamy do obrazu dużą ikonę przedstawiającą niebieski przycisk.

{/tlo}

{tlo_1}

Dodajemy do obrazu napisy L oraz ipsum.

{/tlo}

{tlo_1}

Wykonujemy białą obwiednię litery L:

•zaznaczamy literę L (Kanał alfa na zaznaczenie),
•powiększamy zaznaczenie o dwa piksele (Zaznaczenie → Powiększ),
•zmiękczamy zaznaczenie o dwa piksele (Zaznaczenie → Zmiękcz),
•kopiujemy zaznaczenie z białego tła,
•wklejamy skopiowany obraz na nową warstwę,
•wklejoną obwiednię przesuwamy na stosie warstw poniżej litery L.

{/tlo}

Rollover

{tlo_1}

Dodajemy do obrazu biały prostokąt przeznaczony na efekt rollover pierwszej opcji menu:

•zaznaczamy prostokąt,
•kopiujemy zaznaczenie z białego tła,
•wklejamy skopiowany obraz na nową warstwę.

{/tlo}

{tlo_1}

Zmniejszamy krycie wklejonego prostokąta do 10.

{/tlo}

{tlo_1}

Wykonujemy trzy kopie białego prostokąta. Cztery białe prostokąty układamy tak, by się stykały, lecz nie dotykały. Pomoże w tym narzędzie do przesuwania warstw oraz strzałki na klawiaturze.

Po ułożeniu prostokątów wyrównujemy ikony. Każda ikona powinna leżeć na środku odpowiadającego jej prostokąta.

{/tlo}

Dekoracje

{tlo_1}

Na zakończenie dodajemy do obrazu kilka ikon przeznaczonych do dekoracji treści strony.

{/tlo}

Krojenie

Obraz XCF należy pokroić na mniejsze kawałki. Do krojenia obrazu wykorzystamy prowadnice oraz operacje Edycja → Kopiuj widoczne i Edycja → Wklej jako nowy.

{tlo_1}

Najpierw z obrazu wycinamy trzy obrazy: {stala}bkg-body.png{/stala}, {stala}logo.png{/stala}, {stala}menu.png{/stala}. Przygotowując obraz {stala}menu.png{/stala} należy wyłączyć widoczność czterech białych prostokątów.

{/tlo}

{tlo_1}

Następnie przygotujemy cztery opcje menu. Opcje te powstają po włączeniu widoczności białych prostokątów.

{/tlo}

{tlo_1}

Na koniec wycinamy dekoracje treści oraz przygotujemy tło dla stopki. Tło stopki powstaje przez pionowe odbicie tła {stala}bkg-body.png{/stala}.

{/tlo}

Kafelkowanie (ang. sprites)

{tlo_1}

W kolejnym kroku łączymy następujące obrazy: {stala}logo.png{/stala}, {stala}menu.png{/stala} oraz cztery opcje menu. Przygotujemy duży obraz (np. o wymiarach 1500×1500 pikseli) i wklejamy do niego wymienione sześć obrazów.

{/tlo}

{tlo_1}

Dosuwamy do siebie wszystkie obrazy, tak by się stykały, lecz nie dotykały. Przy użyciu narzędzia do kadrowania usuwamy biały margines. Otrzymamy obraz zapisujemy do pliku o nazwie {stala}sprite.png{/stala}.

{/tlo}

Współrzędne punktów A, B, C, D, E, F będących w obrazie {stala}sprite.png{/stala} są następujące:

• A(0,0)
• B(378,0)
• C(0,324)
• D(146,324)
• E(292,324)
• F(438,324)

Współrzędne te będą występowały w stylach CSS.

XHTML

Cała strona jest podzielona na dwa główne fragmenty: pojemnik {stala}div#wrapper{/stala} oraz stopkę {stala}div#footer{/stala}. Pojemnik div#wrapper dalej dzieli się na górny pas {stala}div#strip{/stala} oraz treść {stala}div#content{/stala}. Pas {stala}div#strip{/stala} zawiera logo h1 oraz menu ul. Oto zarys kodu XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
   <div id=\"wrapper\">
      <div id=\"strip\">
         <h1>...</h1>
         <ul>...</ul>
      </div>
      <div id=\"content\">
         <div id=\"left\">...</div>
         <div id=\"right\">...</div>
      </div>
      <br class=\"clearing\" />
   </div>
<div id=\"footer\">...</div>
</body>

Menu strony jest wykonane elementami ul, li oraz a. Każda z opcji zawiera identyfikator konieczny do realizacji efektu rollover:

1
2
3
4
5
6

<ul>
   <li id=\"o1\"><a href=\"#\">lorem</a></li>
   <li id=\"o2\"><a href=\"#\">ipsum</a></li>
   <li id=\"o3\"><a href=\"#\">dolor</a></li>
   <li id=\"o4\"><a href=\"#\">sit amet</a></li>
</ul>

Style CSS

Układ stałej szerokości

Szablon jest wykonany na bazie układu stałej szerokości. Pojemnik {stala}div#wrapper{/stala} ogranicza szerokość całej treści (oprócz stopki) do 980 pikseli:

1
2

width: 980px;
margin: 0 auto;

Logo

Logo jest pozycjonowane bezwzględnie. Górny pas posiada stałe wymiary:

1
2
3
4
5

#strip {
   position: relative;
   width: 980px;
   height: 324px;
}

Logo jest umiejscowione względem górnego lewego narożnika elementu {stala}div#strip{/stala}:

1
2
3
4
5
6
7
8
9
10
11
12

#strip h1 {
   position: absolute;
   width: 378px;
   height: 324px;
   top: 0;
   left: 0;
   background: url(\'img/sprite.png\') 0 0 no-repeat;
   margin: 0;
   padding: 0;
   line-height: 0;
   text-indent: -2000em;
}

Tło elementu h1 pochodzi z obrazu {stala}sprite.png{/stala}, a tekst L – ipsum jest usunięty techniką FIR.

Menu

Całe menu ma sztywne wymiary wynikające z wymiaru obrazu tła ({stala}menu.png{/stala}). Ponieważ tło menu pochodzi z obrazu {stala}sprite.png{/stala}, zatem konieczne jest podanie współrzędnych tła w obrazie. Są to współrzędne punktu B. Współrzędne te pojawiają się w stylach CSS dwukrotnie: raz jako wartości top i left, drugi raz jako wartości wymienione po właściwości background:

1
2
3
4
5
6
7
8
9
10
11

#strip ul {
   position: absolute;
   width: 602px;
   height: 324px;
   top: 0;
   left: 378px;
   background: url(\'img/sprite.png\') -378px 0 no-repeat;
   margin: 0;
   padding: 0;
   line-height: 0;
}

Opcje menu mają usunięte wypunktowanie:

1
2
3
4
5

#strip ul li {
   list-style-type: none;
   position: absolute;
   top: 0;
}

Hiperłącza a są zamienione w elementy blokowe i mają stałe wymiary. Ich tekst jest usunięty techniką FIR:

1
2
3
4
5
6

#strip ul li a {
   display: block;
   text-indent: -2000em;
   width: 146px;
   height: 324px;
}

Rollover

Każda z opcji menu stosuje współrzędne punktów. Pierwsza opcja stosuje współrzędne punktu C:

1
2
3
4
5
6
7

#strip #o1 {
left: 0;
}
 
#strip #o1 a:hover {
   background: url(\'img/sprite.png\') 0 -324px no-repeat;
}

Druga – współrzędne punktu D:

1
2
3
4
5
6
7

#strip #o2 {
   lleft: 146px;
}
 
#strip #o2 a:hover {
   background: url(\'img/sprite.png\') -146px -324px no-repeat;
}

Trzecia – współrzędne punktu E:

1
2
3
4
5
6
7

#strip #o3 {
   left: 292px;
}
 
#strip #o3 a:hover {
   background: url(\'img/sprite.png\') -292px -324px no-repeat;
}

Może Cię zainteresować:

1. GIMP Tworzenie szablonów stron WWW cz. 11
2. Gimp: tworzenie szablonów stron WWW cz. 8
3. GIMP Tworzenie szablonów stron WWW cz. 10