Szablon strony WWW, Gimp

GIMP: Tworzenie szablonów stron WWW cz. 12

XHTML, Style CSS

XHTML

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

[+]

HTML

 1. <body>
 2.    <div id="wrapper">
 3.       <div id="strip">
 4.          <h1>...</h1>
 5.          <ul>...</ul>
 6.       </div>
 7.       <div id="content">
 8.          <div id="left">...</div>
 9.          <div id="right">...</div>
10.       </div>
11.       <br class="clearing" />
12.    </div>
13. <div id="footer">...</div>
14. </body>

Listing zwinięty - 14 linii

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

[+]

HTML

1. <ul>
2.    <li id="o1"><a href="#">lorem</a></li>
3.    <li id="o2"><a href="#">ipsum</a></li>
4.    <li id="o3"><a href="#">dolor</a></li>
5.    <li id="o4"><a href="#">sit amet</a></li>
6. </ul>

Listing zwinięty - 6 linii

Style CSS

Układ stałej szerokości

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

[+]

CSS

1. width: 980px;
2. margin: 0 auto;

Listing zwinięty - 2 linii

Logo

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

[+]

CSS

1. #strip {
2.    position: relative;
3.    width: 980px;
4.    height: 324px;
5. }

Listing zwinięty - 5 linii

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

[+]

CSS

 1. #strip h1 {
 2.    position: absolute;
 3.    width: 378px;
 4.    height: 324px;
 5.    top: 0;
 6.    left: 0;
 7.    background: url('img/sprite.png') 0 0 no-repeat;
 8.    margin: 0;
 9.    padding: 0;
10.    line-height: 0;
11.    text-indent: -2000em;
12. }

Listing zwinięty - 12 linii

Tło elementu h1 pochodzi z obrazu sprite.png, a tekst L - ipsum jest usunięty techniką FIR.

31 lipca 2008

« 1 2 3 4 5 »

1. Szablon, Szablon w formacie XCF
2. Szablon w formacie XCF c.d.
3. Krojenie, Kafelkowanie
4. XHTML, Style CSS
5. Style CSS c.d.

Powiązane publikacje

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 2.4.6

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: tworzenie szablonów stron WWW cz. 4

Gimp: tworzenie szablonów stron WWW cz. 3

Gimp: tworzenie szablonów stron WWW cz. 2

Gimp: tworzenie szablonów stron WWW cz. 1

Skomentuj
ten artykuł

Komentarzy: 4

sobota, 27.02.2010 00:25Leonardo...

Fakt, tego szukałem, dobra robota, oby więcej taki tutków!

poniedziałek, 25.01.2010 11:35wojcup

Mam wrażenie, że artykuł nie jest zakończony. Nie ma nic o CSS dla kolumn oraz jak ustawić powtarzalne tło w nagłówku strony.

poniedziałek, 4.08.2008 07:40rebs

Fajnie bo promowane jest darmowe oprogramowanie. Ludzie widzą, że nie trzeba wydawać 2000zł lub kraść programu aby zrobić sensowną grafikę. Choć można jeszcze bardziej "nowoczesne" designy zrobić w Gimpie.

piątek, 1.08.2008 11:10Gal

Super sa te artykuly o Gimpie

Zobacz wszystkie komentarze »

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: