Szablon strony WWW, Gimp
Gimp: tworzenie szablonów stron WWW cz. 5
Opisywany szablon jest podzielony na trzy poziome obszary. Jest to szablon stałej szerokości, wyśrodkowany na stronie. Środkowy pas wykorzystuje sztuczkę udawanych kolumn, zaś etykiety opcji menu są wyśrodkowane poziomo i pionowo.
Włodzimierz Gajda
Szablon oraz obraz XCF
Szablon
Ukończony szablon jest przedstawiony na rysunku 1 i zawiera:
- nagłówek, a w nim tytuł oraz zakładki,
- część środkową podzieloną na menu (lewa strona) i treść (prawa strona),
- stopkę.
Menu wykorzystuje efekt rollover wykonany w CSS. Wygląd opcji menu po naprowadzeniu wskaźnika myszy jest przedstawiony na rys. 2.
Rys. 1 Omawiany szablon
|
Rys. 2 Opcje menu po wskazaniu kursorem myszy
|
Obraz XCF
Pracę nad układem rozpoczynamy od przygotowania obrazu w programie GIMP.
Krok 1: układ
Utwórz nowy obraz o wymiarach 800×600 pikseli. Wykorzystując opcje Obraz → Prowadnice → Nowa prowadnica dodaj prowadnice:
- pionowe: 20, 40, 60, 280, 740, 760, 780
- poziome: 20, 40, 210, 240, 260, 580
Prowadnice te wyznaczą podział całego obrazu na następujące fragmenty:
- cały obszar (duży czarny prostokąt o wymiarach 760×560),
- nagłówek (biały prostokąt o wymiarach 720×200),
- zakładki (poziomy pas na dole nagłówka),
- menu (szary prostokąt o wymiarach 220×340).
Powiązane publikacje
ten artykuł
Komentarzy: 2
wtorek, 13.10.2009 16:35aga...nie rozumiem w jaki sposób stopka wymusza wysokość pojemnika. Jakaś podpowiedź?
środa, 11.06.2008 15:13demonikwszystko fajnie tylko dlaczego nowy obraz 800x600
teraz robi się pod rozdzielczość min 1024, a jak jeszcze nam coś wyjdzie troszkę za kadr? lepiej dać więcej np 1200 szerokość i potem to wykadrować na końcu tylko ograniczyć sobie pole np prowadnicami do 1000px żeby pamiętać że szerzej będzie nie dobrze
Autor
Włodzimierz Gajda
Artykuły tego autora:
- » Efektowna wyszukiwarka Google na twojej...
[INTERNET Maker] - » Ćwiczenia w programowaniu aplikacji...
[INTERNET Maker] - » MathML - matematyka na stronach WWW
[INTERNET Maker] - » Propel - porady jak rozwiązać podstawowe...
[INTERNET Maker] - » AJAX Kurs od podstaw - jQuery
[INTERNET Maker]
Pozostałe publikacje
20 inspirujących layoutów stron
Szukając inspiracji warto zobaczyć, co robią inni projektanci. Nie zachęcamy nikogo do kradzieży, ale przedstawione strony natchną was setkami pomysłów.
- » Photoshop: Profesjonalny layout sklepu internetowego
- » Darmowy szablon na bloga "Space"
- » 10 porad jak poprawić szablon bloga
- » Przepis na idealny szablon bloga
- » GIMP: Tworzenie szablonów stron WWW cz. 12
- » GIMP Tworzenie szablonów stron WWW cz. 11
- » GIMP Tworzenie szablonów stron WWW cz. 10
- » Gimp: tworzenie szablonów stron WWW cz. 9
- » Gimp: tworzenie szablonów stron WWW cz. 8
- » Gimp: tworzenie szablonów stron WWW cz. 7
- » Kurs GIMP od podstaw cz. 4
- » Gimp: tworzenie szablonów stron WWW cz. 6
- » Szablony na wyłączność
- » Skąd czerpać natchnienie?
- » Gimp: tworzenie szablonów stron WWW cz. 4
- » Gimp: tworzenie szablonów stron WWW cz. 3
- » Animowane gify
- » Gimp: tworzenie szablonów stron WWW cz. 2
- » Szablony stron - warto inwestować
- » Pozycjonowanie elementów w CSS
- » Jak zarabiać na stronie www?
- » XnView
- » Chemix
- » QuarkXPress
- » Najlepsze karty dźwiękowe do laptopa
- » Najlepsze czcionki na stronę www
- » Projekt poczty kwiatowej
- » Perfumeria Internetowa projekt
- » Dobór kolorów na stronę www
Polecamy:
Na skróty:
Magazyny Internetowe| Co za ile| Programy| Praca| Magazyn Internet| Internet Maker| Web Toster| Forum- » Audio
- » AutomatykaB2B.pl
- » Budujemy Dom
- » CoZaIle.pl
- » Elektronika Praktyczna
- » ElektronikaB2B.pl
- » Elportal.pl
- » Estrada i Studio
- » FirmyMuzyczne.pl
- » Gitarzysta
- » Ibiss.pl
- » Live Sound Polska
- » MagazynPerkusta.pl
- » Młody Technik
- » Sklep AVT
- » SuperDyskoteka.pl
- » Świat Radio
- » WybieramyDom.pl
- » Wydawnictwo AVT
- » ZielonyOgrodek.pl
Nasze serwisy: