[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.

[KrzychuZ]

Jeśli chodzi o cięcie layoutów to ja sobie zawsze wyciągam prowadnice, zaznaczam coś i klikam Obraz > Kadruj według zaznaczenia i zapisuję. Tak jest chyba najłatwiej.

[Ravicious]

Py-slice działa pod Windows. Musisz zainstalować kilka programów - PyCairo, PyGObject, PyGTK. Nie wiem, być może nie wszystkie są wymagane, ale nic się nie stanie, jak wgrasz inne Pobrać je można z działu download na pygtk.org.

[dth]

Mam pytanko:
Jak to jest z CMS-ami?
Czy stworzenie thema jakoś znacząco różni się od tworzenia layouta?

[szujak]

Mam pytanko:
Jak to jest z CMS-ami?
Czy stworzenie thema jakoś znacząco różni się od tworzenia layouta?

Nie, nie różni się znacząco. Po prostu zamiast wpisywać statyczną treść w kod szablonu umieszczasz w nim specjalne znaczniki, najczęściej w języku PHP, które generują treść strony. Ściągnij sobie jakiegoś CMS-a i pooglądaj kody źródłowe szablonów - będzie Ci łatwiej się tego nauczyć. 

[KrzychuZ]

Zależy jeszcze od CMS'a, bo w niektórych to sie trzeba namotać nieźle.   

[erwin15]

Lepiej samemu zrobić sobie layout i napisać sobie CMS'a swojego

[Bibson]

Lepiej samemu zrobić sobie layout i napisać sobie CMS'a swojego

Żeby stworzyć własnego CMS'a trzeba mieć jakąś wiedzę na ten temat a osoba która dopiero zaczyna "przygodę" z php raczej nie da rady

[erwin15]

To fakt Ale przy odrobinie wiedzy PHP (odczyt i zapis do pliku) można coś wykombinować ja sie uczę PHP od wakacji i mam już naprawdę dobry CMS

[KrzychuZ]

Ale trzeba go jeszcze dobrze zabezpieczyć, no a CMSy oparte na plikach tekstowych nie są zbyt bezpieczne, ale na początek napewno taki CMS to dobra rzecz. Mi wystarczy samo includowanie plików tekstowych do strony głównej, tak jak jest na mojej stronie.

[erwin15]

Wiesz...

Pliki nie są złe, odpowiednio zabezpieczone mogą stanowić naprawdę dobrą bazę. Ale MySQL to już jest potęga Chociaż... Niekiedy pliki są szybsze od MySQL'a.

[Ziomioslaw]

Nie przesadzajmy, jeśli masz niskopoziomy dostęp do pliku, to możesz go wydajnie przeglądać, ale czy możesz taki uzyskać z poziomu języka interpretowanego? Wątpie żeby serwer pozwała na własne dodatki do PHP.

MySQL jest optymalizowana pod szybkość, ma obsługę wielodostępu. bazy danych oferują też już sprawdzone i przetestowane metody dostępu do danych.

[Szymon12]

mogę to wstawić na forum?? wstawiłem a jeśli nie pozwolisz to usunę tylko napisz

Ziomioslaw: a o co chodzi?

[muka[SpC]]

Ja bym zmienił nazwę tematu bo zawartość jego są to rady co do tworzenia layoutu a nie jego tworzenie 

[Pilej]

Jeśli chodzi o cięcie layoutów to ja sobie zawsze wyciągam prowadnice, zaznaczam coś Zaznaczenie prostokątne i klikam Obraz > Kadruj według zaznaczenia i zapisuję. Tak jest chyba najłatwiej. Chichot

A nie lepiej zaznaczyć, skopiuj widoczne i wklej jako nowy?

[INSEKT]

Jeśli chodzi o cięcie layoutów to ja sobie zawsze wyciągam prowadnice, zaznaczam coś Zaznaczenie prostokątne i klikam Obraz > Kadruj według zaznaczenia i zapisuję. Tak jest chyba najłatwiej. Chichot

A nie lepiej zaznaczyć, skopiuj widoczne i wklej jako nowy?

Też tak to właśnie robię. Prosto, szybko i wygodnie.