[Kapitan_hak1995]

Tworzenie layoutów stron WWW

Wersja gimpa:	Dowolna
Autor:	kapitan_hak1995(ogólnie znany jako kapitan_hak)

Słowniczek

Layout, design	(tutaj)Oprawa graficzna strony internetowej
Top	Górna część na przykład strony
Walidator	program sprawdzający poprawność kodu strony

Witam w moim tutorialu na temat tworzenia efektywnych layoutów stron WWW. Nie będzie tu dokładnego opisu jak zrobić design, ale ogólne zasady i porady na ten temat.

Układ strony

Ważną rzeczą jest odpowiednie zaplanowanie układu strony. Przykładowo menu nie może znajdować się na samym dole strony¹ bo powinno być ono od razu po wejściu na stronę dobrze widoczne.
Oto kilka najczęściej spotykanych układów:
¹ Nie dotyczy to wyjątkowych przypadków, na przykład wyboru następnego lub poprzedniego artykułu.

Kolorystyka

Tak ważną jak układ jeśli nie ważniejszą jest kolorystyka. Nie może ona być "oczopląsna", kilka przykładów których nie należy naśladować to:

• niebieski tekst + czerwone tło
• biały tekst + żółte tło
• niebieski tekst + żółte tło

Jeśli nie ma się dobrego pomysłu na dobór kolorów można skorzystać z specjalnego generatora. Oto kilka z nich:

• http://wellstyled.com/tools/colorscheme2/index-en.html
• http://www.colorschemer.com/online.html
• http://www.degraeve.com/color-palette/
• http://www.colorjack.com/studio/
• http://design.geckotribe.com/colorwheel/
• colourlovers.com

Zawsze należy pamiętać że kolory nie mogą być zbyt jaskrawe - utrudnia to tylko przeglądanie strony.

Typografia

Istotną rzeczą jest odpowiedni dobór czcionki i ułożenia tekstu. Czcionka winna być czytelna i odpowiednio duża. Ciekawe informacje na temat typografi można znaleźć na stronie http://www.typografia.ogme.pl/

Jednolitość

Design powinien być jednolity, każda podstrona powinna mieć taką samą oprawę graficzną, jeśli każda strona będzie inna czytelnik nie będzie pewien czy jest cały czas na tej samej stronie.

Cięcie

Należy znać:

• HTML
• CSS

Jeśli nie znasz HTML i/lub CSS, to powinieneś się ich nauczyć. Kilka kursów to:

• kurs.browsehappy {POLECAM}(właściwie to XHTML)
• kurshtml.boo.pl
• Podajcie jakieś propozycje

A więc zaczynamy.
1. Otwórz GIMPa i ułóż prowadnice, tak aby podzielić szablon na części.
2. Następnie użyj narzędzia "Zaznaczanie prostokątne" i zaznacz pierwszy element.
3. Otwórz nowy dokument(rozmiaru tego elementu) i wklej go tam.
4. Zapisz.
5. Powtarzaj kroki 1-4 aż każdy element będzie w swoim pliku. GIMPa możesz już zamknąć.
6. Teraz umieść każy element w divie.
7. Za pomocą CSS(który powinieneś znać) umieść divy w układzie, w którym wszystko będzie wyglądało zgodnie z planem.
8. Koniec, łatwe?
Pamiętaj że im więcej będziesz próbować, tym lepiej będzie ci szło.

Walidacja

Gdy już potniemy nasz layout należałoby go zwalidować - chyba nie chcemy udostępnić światu kodu z błędami? Kilka najpopularniejszych walidatorów to:

• ethanaka qua^WKWAlity tester nieoficjalny, ale brdzo dokładny
• W3C Markup Validation Service Oficjalny validator W3c(World Wide Web Consortium)

[no-name]

Popraw link do BrowseHappy. Brakuje ".pl" .

[Kapitan_hak1995]

Poprawione

[Sebastian]

Może dodaj jeszcze link colourlovers.com, też dobra jest

[Ziomioslaw]

Miło, że tematu sie podjąłeś, ale wartałoby pokazać, jak wygląda ciecię przy użyciu prowadnic, skryptów (Py-slice) itp

Powodzenia.

[Sebastian]

Właśnie jak radził Ziomioslaw przydało by się to Py-slice opisać bo ręczne cięcie layoutów uszami mi już wychodzi...
Napisz też że menu robimy na ul itp.

[TL]

A gdzie jest efekt końcowy ?

[lion.]

@Up: Obejdzie się bez tego ;p.

@Kapitan: Teraz już rozumiem 

P.S. Co to jest ten div??

[Sebastian]

DIV:
http://www.gajdaw.pl/html/uklad-div-css.html

Edit: Nie dziękuj tylko szukaj następnym razem :/

[szujak]

Ja znam jeszcze jedną fajną stronę z "mieszalnią" kolorów.

http://kuler.adobe.com/

[goosy]

Ja dodaję jeszcze kurs, na którym ja się uczyłam css-a. No... przynajmniej zaczęłam się uczyć.
http://webmade.org/kursy-online/kurs-css.php

[demonik]

co do ciecia - to czy Py-slice działa pod windowsowskim gimpem ?
do tej pory ciąłem swoje nędzne wypociny prowadnicami, bo kiedy chciałem przetestować Py-slice, nie mogłem go odpalić na windowym gimpie (??)

[Ziomioslaw]

a masz Python-Fu?

[demonik]

no nie, nie mam
próbowałem zainstalować, ale coś mi nie idzie
ale odpaliłem gimpa na ubuntu i zobaczyłem sobie jak to działa i chyba jednak zostaje przy cięciu prowadnicami, bo wole napisać kod od początku niż poprawiać to coś wygenerowane

i jeszcze co do cięcia czy są jakieś zasady(??) bo mam wrażenie że momentami się za mocno rozpędzam i robię za dużo "kawałków", a potem mam problem z poklejeniem tego w kodzie, bo się rozjeżdża - ostatnio kleiłem pół dnia, żeby było tak jak chce i w FF ok ale IE wszystko rozwalił. Cholera mnie wzięła i pie..... to.