Tworzenie layoutów stron WWW
Wersja gimpa: | Dowolna |
Autor: | kapitan_hak1995(ogólnie znany jako kapitan_hak) |
SłowniczekLayout, 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 stronyWażną rzeczą jest odpowiednie zaplanowanie układu strony. Przykładowo menu nie może znajdować się na samym dole strony
1 bo powinno być ono od razu po wejściu na stronę dobrze widoczne.
Oto kilka najczęściej spotykanych układów:
1 Nie dotyczy to wyjątkowych przypadków, na przykład wyboru następnego lub poprzedniego artykułu.
KolorystykaTak 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:
Zawsze należy pamiętać że kolory nie mogą być zbyt jaskrawe - utrudnia to tylko przeglądanie strony.
TypografiaIstotną 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ęcieNależy znać:
Jeśli nie znasz HTML i/lub CSS, to powinieneś się ich nauczyć. Kilka kursów to:
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.
WalidacjaGdy już potniemy nasz layout należałoby go zwalidować - chyba nie chcemy udostępnić światu kodu z błędami? Kilka najpopularniejszych walidatorów to: