Connect with us

Cześć, czego szukasz?

Internet Maker

GIMP: Tworzenie szablonów stron WWW cz. 12

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 ToolbarCSSDisable stylesAll 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 (ZaznaczeniePowiększ),
•zmiękczamy zaznaczenie o dwa piksele (ZaznaczenieZmię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 EdycjaKopiuj widoczneEdycjaWklej 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:


   

...

    ...
...
...

...

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

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:

width: 980px;
margin: 0 auto;

Logo

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

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

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

#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:

#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:

#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:

#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:

#strip #o1 {
left: 0;
}

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

Druga – współrzędne punktu D:

#strip #o2 {
   lleft: 146px;
}

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

Trzecia – współrzędne punktu E:

#strip #o3 {
   left: 292px;
}

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

Może cię też zainteresować

Internet Maker

WordPress służy tylko do prowadzenia blogu? Nic z tych rzeczy! Dzięki tym dwudziestu nowym skórkom zamienisz blog w sklep, serwis informacyjny albo kopię Twittera.

Internet Maker

BaseKit ma stworzyć dynamiczne strony z plików Photoshopa. Jeśli wydaje cie się, że otrzymasz Dreamwavera działającego w przeglądarce to masz rację. Wydaje ci się.

Internet Maker

Szukając inspiracji warto zobaczyć, co robią inni projektanci. Nie zachęcamy nikogo do kradzieży, ale przedstawione strony natchną was setkami pomysłów.

Internet Maker

W dzisiejszym tutorialu zademonstruję, jak krok po kroku jak stworzyć grafikę dla profesjonalnego sklepu oferującego zdrowe napoje. Na pewno jednak znajdzie zastosowanie także dla innego rodzaju serwisów.