Szablon strony WWW, Gimp

Gimp: tworzenie szablonów stron WWW cz. 3

Gimp: tworzenie szablonów stron WWW cz. 3 Szablon, który dzisiaj przedstawię, nauczy dwóch ciekawych rozwiązań. Dowiemy się, w jaki sposób w GIMP-ie wykonać fotomontaż techniką "łatek" oraz na czym polega problem z wysokością elementów pływających w CSS.

Włodzimierz Gajda

1 2 3 4 5 »

Szablon

Rys. 2. Obrazy użyte w szablonie Rys. 1. Omawiany szablon Gotowy szablon jest przedstawiony na rys. 1. Jest to szablon trójkolumnowy, płynnie dostosowujący się do szerokości okna przeglądarki.

Do wykonania szablonu wykorzystałem jedenaście obrazów. Rys. 2 prezentuje pełne zestawienie podające wygląd, nazwy oraz wymiary plików graficznych. Pierwsze cztery rysunki, mają wymiary 6 x 6 pikseli. Obrazy te, w powiększeniu, zostały przedstawione na rys. 3.

Ikony powstały na bazie zestawu dostępnego pod adresem http://www.e-lusion.com/design..., zaś strzałka pochodzi z archiwum http://www.el73.be/drunkey-lov.... Ostatnia z ilustracji, przedstawiająca sprzęt audio, jest fotomontażem, który wykonałem na bazie jednej z moich fotografii.

Zaokrąglone narożniki są wykorzystane do wykonania zakładek oraz stopki. Zakładki menu oraz stopka są elastyczne. Oznacza to, że ich wymiary dostosują się do ilości tekstu oraz do rozmiaru czcionki. Aby się o tym przekonać, naciskamy w Firefoksie skrót klawiszowy Ctrl+.

Rys. 3 Rys. 3 Kod XHTML szablonu jest w pełni poprawny składniowo, można go nazwać prawie semantycznym. Semantyka szablonu jest zaburzona w trzech miejscach:

menu z zakładkami jest umieszczone w pojemniku,
pojemnik ten zawiera element "czyszczący",
w stopce znajduje się element span, którego jedynym zadaniem jest zaokrąglenie narożnika.

Zarys kodu XHTML jest przedstawiony na listingu 1, zaś jego struktura na rys. 4. Rys. 5 pozwala zorientować się w którym miejscu ekranu wypadają poszczególne elementy XHTML.

[+]

Listing 1: Zarys kodu XHTML omawianego szablonu

HTML

 1. <body>
 2.     <h1  id="logo"></h1>
 3.     <div id="wsk"></div>
 4.     <div id="wrapper">
 5.         <ul id="menu"></ul>
 6.     </div>
 7.     <div id="content"></div>
 8.     <dl  id="msg"></dl>
 9.     <div id="info"></div>
10.     <div id="footer"></div>
11. </body>

Listing zwinięty - 11 linii

Rys. 4. Struktura strony z listingu 1

Rys. 5. Rozkład elementów z listingu 1 na ekranie

30 listopada 2007

1 2 3 4 5 »

Powiązane publikacje

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

Gimp: tworzenie szablonów stron WWW cz. 6

Gimp: tworzenie szablonów stron WWW cz. 5

GIMP 2.4.4

Gimp: tworzenie szablonów stron WWW cz. 4

GIMP 2.4.2

Gimp: tworzenie szablonów stron WWW cz. 2

GIMP 2.4.17

Gimp: tworzenie szablonów stron WWW cz. 1

Skomentuj
ten artykuł

Brak komentarzy

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.

Polecamy:

Na skróty:

Nasze serwisy:

Szablon strony WWW, Gimp

Gimp: tworzenie szablonów stron WWW cz. 3

Szablon

Autor

Włodzimierz Gajda

Pozostałe publikacje

20 inspirujących layoutów stron

Newsletter