Kapitan_hak1995
Gość
|
|
« : 26.07.2007, 18:56:40 » |
|
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:
|
|
« Ostatnia zmiana: 29.07.2007, 13:40:55 wysłane przez Kapitan_hak1995 »
|
Zapisane
|
|
|
|
no-name
Użytkownik
Reputacja: 4
Offline
Płeć:
GIMP: 1.*
Licencja: Copyright
Wiadomości: 224 Galeria Użytkownika
|
|
« Odpowiedz #1 : 27.07.2007, 00:17:21 » |
|
Popraw link do BrowseHappy. Brakuje ".pl" .
|
|
|
Zapisane
|
|
|
|
Kapitan_hak1995
Gość
|
|
« Odpowiedz #2 : 27.07.2007, 20:16:43 » |
|
Poprawione
|
|
|
Zapisane
|
|
|
|
Sebastian
√ ι ק
Reputacja: 36
Offline
Płeć:
GIMP: 2.6
Licencja: Copyright
Wiadomości: 728 Galeria Użytkownika
|
|
« Odpowiedz #3 : 28.07.2007, 13:42:11 » |
|
Może dodaj jeszcze link colourlovers.com, też dobra jest
|
|
|
Zapisane
|
|
|
|
Ziomioslaw
Administrator
Reputacja: 46
Offline
Płeć:
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 432 Galeria Użytkownika
Cyklista Apokalipsy
|
|
« Odpowiedz #4 : 29.07.2007, 11:31:15 » |
|
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.
|
|
|
Zapisane
|
|
|
|
Sebastian
√ ι ק
Reputacja: 36
Offline
Płeć:
GIMP: 2.6
Licencja: Copyright
Wiadomości: 728 Galeria Użytkownika
|
|
« Odpowiedz #5 : 06.08.2007, 16:06:05 » |
|
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.
|
|
|
Zapisane
|
|
|
|
TL
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.4
Licencja: CC-NC-BY-SA
Wiadomości: 258 Galeria Użytkownika
Tao Leny
|
|
« Odpowiedz #6 : 25.08.2007, 14:47:12 » |
|
A gdzie jest efekt końcowy ?
|
|
|
Zapisane
|
Czytaj regulamin ! //Domaxi
|
|
|
lion.
√ ι ק
Reputacja: 11
Offline
Płeć:
GIMP: 2.4 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 222 Galeria Użytkownika
strach pomyśleć że lion. się tak leni!
|
|
« Odpowiedz #7 : 26.08.2007, 18:59:51 » |
|
@Up: Obejdzie się bez tego ;p. @Kapitan: Teraz już rozumiem P.S. Co to jest ten div??
|
|
|
Zapisane
|
|
|
|
|
szujak
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 153 Galeria Użytkownika
|
|
« Odpowiedz #9 : 11.11.2007, 19:43:06 » |
|
Ja znam jeszcze jedną fajną stronę z "mieszalnią" kolorów. http://kuler.adobe.com/
|
|
|
Zapisane
|
|
|
|
goosy
Nowicjusz
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
Licencja: CC-BY-SA
Wiadomości: 9 Galeria Użytkownika
|
|
« Odpowiedz #10 : 23.02.2008, 23:15:07 » |
|
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
|
|
|
Zapisane
|
I realised That you were an island and I passed you by.
|
|
|
demonik
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Licencja: Copyright
Wiadomości: 16 Galeria Użytkownika
|
|
« Odpowiedz #11 : 26.02.2008, 21:34:37 » |
|
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 (??)
|
|
|
Zapisane
|
|
|
|
Ziomioslaw
Administrator
Reputacja: 46
Offline
Płeć:
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 432 Galeria Użytkownika
Cyklista Apokalipsy
|
|
« Odpowiedz #12 : 27.02.2008, 08:57:06 » |
|
a masz Python-Fu?
|
|
|
Zapisane
|
|
|
|
demonik
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Licencja: Copyright
Wiadomości: 16 Galeria Użytkownika
|
|
« Odpowiedz #13 : 29.02.2008, 21:39:26 » |
|
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.
|
|
|
Zapisane
|
|
|
|
KrzychuZ
Użytkownik
Reputacja: 5
Offline
Płeć:
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 259 Galeria Użytkownika
|
|
« Odpowiedz #14 : 20.04.2008, 12:21:22 » |
|
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.
|
|
|
Zapisane
|
|
|
|
Ravicious
√ ι ק
Reputacja: 11
Offline
Płeć:
GIMP: 2.6
Licencja: CC-BY-SA
Wiadomości: 792 Galeria Użytkownika
Yep, that's right
|
|
« Odpowiedz #15 : 20.04.2008, 14:04:15 » |
|
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.
|
|
|
Zapisane
|
|
|
|
dth
Nowicjusz
Reputacja: 3
Offline
Płeć:
GIMP: 2.4 + GAP
JID: dth@jabster.pl
Licencja: Copyright
Wiadomości: 1 Galeria Użytkownika
|
|
« Odpowiedz #16 : 01.11.2008, 14:27:22 » |
|
Mam pytanko: Jak to jest z CMS-ami? Czy stworzenie thema jakoś znacząco różni się od tworzenia layouta?
|
|
|
Zapisane
|
|
|
|
szujak
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 153 Galeria Użytkownika
|
|
« Odpowiedz #17 : 01.11.2008, 16:38:51 » |
|
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ć.
|
|
|
Zapisane
|
|
|
|
KrzychuZ
Użytkownik
Reputacja: 5
Offline
Płeć:
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 259 Galeria Użytkownika
|
|
« Odpowiedz #18 : 08.11.2008, 23:21:28 » |
|
Zależy jeszcze od CMS'a, bo w niektórych to sie trzeba namotać nieźle.
|
|
|
Zapisane
|
|
|
|
erwin15
Nowicjusz
Reputacja: 2
Offline
Wiadomości: 4 Galeria Użytkownika
|
|
« Odpowiedz #19 : 08.01.2009, 21:37:23 » |
|
Lepiej samemu zrobić sobie layout i napisać sobie CMS'a swojego
|
|
|
Zapisane
|
|
|
|
Bibson
Użytkownik
Reputacja: 2
Offline
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 53 Galeria Użytkownika
|
|
« Odpowiedz #20 : 08.01.2009, 22:15:43 » |
|
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
|
|
|
Zapisane
|
|
|
|
erwin15
Nowicjusz
Reputacja: 2
Offline
Wiadomości: 4 Galeria Użytkownika
|
|
« Odpowiedz #21 : 09.01.2009, 16:54:25 » |
|
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
|
|
|
Zapisane
|
|
|
|
KrzychuZ
Użytkownik
Reputacja: 5
Offline
Płeć:
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 259 Galeria Użytkownika
|
|
« Odpowiedz #22 : 09.01.2009, 22:36:22 » |
|
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.
|
|
|
Zapisane
|
|
|
|
erwin15
Nowicjusz
Reputacja: 2
Offline
Wiadomości: 4 Galeria Użytkownika
|
|
« Odpowiedz #23 : 10.01.2009, 02:29:38 » |
|
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.
|
|
|
Zapisane
|
|
|
|
Ziomioslaw
Administrator
Reputacja: 46
Offline
Płeć:
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 432 Galeria Użytkownika
Cyklista Apokalipsy
|
|
« Odpowiedz #24 : 10.01.2009, 10:22:34 » |
|
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.
|
|
|
Zapisane
|
|
|
|
Szymon12
Nowicjusz
Reputacja: 0
Offline
Płeć:
GIMP: 2.6
Licencja: Copyright
Wiadomości: 8 Galeria Użytkownika
|
|
« Odpowiedz #25 : 21.05.2009, 16:01:29 » |
|
mogę to wstawić na forum?? wstawiłem a jeśli nie pozwolisz to usunę tylko napisz Ziomioslaw: a o co chodzi?
|
|
« Ostatnia zmiana: 21.05.2009, 18:24:53 wysłane przez Ziomioslaw »
|
Zapisane
|
-
|
|
|
muka[SpC]
Użytkownik
Reputacja: -4
Offline
Płeć:
GIMP: 2.6
Licencja: Copyright
Wiadomości: 131 Galeria Użytkownika
.: Molestant :.
|
|
« Odpowiedz #26 : 21.05.2009, 16:51:11 » |
|
Ja bym zmienił nazwę tematu bo zawartość jego są to rady co do tworzenia layoutu a nie jego tworzenie
|
|
|
Zapisane
|
.
|
|
|
Pilej
√ ι ק
Reputacja: 7
Offline
Płeć:
GIMP: 2.6
Licencja: Copyright
Wiadomości: 949 Galeria Użytkownika
|
|
« Odpowiedz #27 : 24.05.2009, 10:17:56 » |
|
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?
|
|
|
Zapisane
|
|
|
|
INSEKT
Emeryt
Reputacja: 27
Offline
Płeć:
GIMP: 2.8
JID: INSEKT@jabster.pl
Licencja: Copyright
Wiadomości: 2 723 Galeria Użytkownika
Ja tu tylko sprzątam
|
|
« Odpowiedz #28 : 24.05.2009, 17:52:05 » |
|
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.
|
|
|
Zapisane
|
Nie odpowiadam na wiadomości "(Bez tematu)". Kilka rad, czyli how-to "jak nie wkurzyć Insekta": 1, 2, 3Twój tutorial po to tyle czasu gnije w "Gotowych", żebyś nie musiał go więcej poprawiać, gdy zostanie przeniesiony do indeksu! Każda Twoja edycja sprawi, że tutorial zniknie i nie będzie widoczny, dopóki ja go nie przywrócę.
|
|
|