Korzystając z tej witryny, wyrażasz zgodę na Politykę prywatności.
Akceptuję
Magazyn T3Magazyn T3Magazyn T3
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Czytasz: GIMP: Tworzenie szablonów stron WWW cz. 12
Podziel się
Powiadomienie Pokaż więcej
Aa
Magazyn T3Magazyn T3
Aa
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Szukaj
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Zaobserwuj
  • Advertise
© 2007-2023
Magazyn T3 > Wszystkie > Internet Maker > GIMP: Tworzenie szablonów stron WWW cz. 12
Internet Maker

GIMP: Tworzenie szablonów stron WWW cz. 12

Włodzimierz Gajda
Włodzimierz Gajda Opublikowany 31/07/2008
Podziel się
7 minut(y) czytania

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.

- Reklama -

{/tlo}

{tlo_1}

- Reklama -

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:


   

...

    ...
...
...

...

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

  • lorem
  • ipsum
  • dolor
  • sit amet

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ę także zainteresować

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Jak szybko i łatwo stworzyć stronę mobilną

Strona na WordPressie? Grunt to dobry hosting

Jak zabezpieczyć swoje zdjęcia w chmurze

Jak usunąć historię swojej aktywności z Facebooka?

TAGI: Gimp, Szablon strony WWW
Włodzimierz Gajda 15/09/2011 31/07/2008
Podziel się tym artykułem
Facebook Twitter Whatsapp Whatsapp LinkedIn Reddit Telegram Email Skopiuj link Drukuj
Podziel się
Poprzedni artykuł Voxpilot oraz IVO Software łączą siły
Następny artykuł W Pekinie NBC będzie wykorzystywać prawie pół miliona GB pamięci od Seagate

Ostatnie newsy

Akcesoria Belkin do iPhone 15, Apple Watch Series 9 i AirPods Pro
Newsy 22/09/2023
Resident Evil 4 – dodatek Separate Ways już dostępny
Gaming Newsy 22/09/2023
Nextbase z ofertą dla rodziców i nie tylko
Moto Newsy 21/09/2023
TEKKEN 8 – weź udział w zamkniętej becie
Gaming Newsy 20/09/2023

Reklama

//

Stylowy, rzetelny, inteligentny – Magazyn T3. Jesteśmy wiodącym magazynem lifestyle’owym, dostępnym co miesiąc w druku i cały czas dla Was online, skupionym na nowych technologiach.

NASZE SERWISY

DOM, OGRÓD I WNĘTRZA BudujemyDom.pl | WybieramyDom.pl | CoZaIle.pl | Informator Budownictwa | ZielonyOgródek.pl | CzasNaWnetrze.pl | Ekobudowanie.pl

 

MUZYKA I DŹWIĘK Audio.com.pl | MagazynGitarzysta.pl | MagazynPerkusista.pl | EstradaiStudio.pl | LiveSound.pl

 

ELEKTRONIKA I AUTOMATYKA ElektronikaB2B.pl | AutomatykaB2B.pl | Elektronika Praktyczna | Elportal.pl | Świat Radio
FOTOGRAFIA, EDUKACJA I HI-TECH DigitalCameraPolska.pl | Fotopolis.pl | MagazynT3.pl | MlodyTechnik.pl
ZDROWIE I RODZINA KtoCieWyleczy.pl

Magazyn T3Magazyn T3
Zaobserwuj
© 2007-2023
Witaj z powrotem!

Zaloguj się

Zapomniałeś hasła?