PSD2HTML

O projekcie

Grafiki do cięcia szukałem na digarcie. Chciałem wybrać coś, gdzie będę mógł wykorzystać w miarę dużą ilość sztuczek jakie stosuję. Autorem wybranej przez mnie grafiki jest Krzysiek Blejczak, który udostępnił mi źródła do celów badawczych za darmo ;).

Tło

Tutaj nie ma większej filozofii. Lekka modyfikacja sztuczki z tłami.

position:absolute;

Ten atrybut stosuję w każdym projekcie, gdzie tak zwany top strony ma określoną wysokość i znajduje się w nim kilka elementów. Czasem lądują tam menu, panel logowania, w przypadku sklepów - informacje produktach w koszyku i takie tam. Można się bawić w opływanie (float) tych elementów, ale potem czeka nas zabawa z ustawianie marginesów. Dzięki pozycjom absolutnym ustawiamy punkt zaczepienia i pozamiatane.

Menu

Zastosowałem tutaj prostą sztuczkę z podmianą teł. Każdy link jest blokowy, dzięki czemu łatwiej jest dopasować rozmiar do tła. Jego początkowe położenie to left top a po najechaniu i dla klasy .selected tło ma pozycję left bottom. Można oczywiście się bawić w podmianę obrazków czy teł, ale z doświadczenia wiem, że klienta może irytować chwilowy brak obrazka pod kursorem. Dzięki opisanej tutaj sztuczce obrazki z menu i efektem po najechaniu ładują się raz i nic nikomu nie znika.

text-indent: -3000em;

Baaardzo fajna sztuczka dla graficznych menu (gdzie nie da się tekstu z grafiki zastąpić domyślną czcionką - lub trzcionką, jak to mawiają niekiedy klienci ;) - systemową). Chodzi tutaj też o dostępność strony dla Internauty. Jeżeli będzie chciał sobie wyłączyć wgrywanie obrazków i stylów (bo ma wolne łącze lub inne niewyjaśnione przyczyny) Internauta dalej będzie mógł bez problemów poruszać się po stronie. Google też nie robi problemów z takim wypozycjonowaniem tekstu.

li { display: inline; }

Ten atrybut stosuje się przy poziomych menu które dość często występują w stopkach stron. Pamiętaj, że lista linków zawsze jest listą (na grafice jest w pionie lub poziomie). Można linki wrzucić w paragraf i wycentrować tekst, ale albo jesteśmy PRO, albo 50ta liga murzyńska ;).

Czas ;)

Czas mojej (jakże ciężkiej) pracy można podzielić na 3 etapy.

1. Logistyka - nie ukrywam, że przy tym projekcie rozłożenie tego na czynniki pierwsze nie było takie oczywiste. Miałem kilka koncepcji. Trzeba było rozważyć wszystkie "za" i "przeciw". Co się stanie jeśli pójdę tą drogą i jakie to będzie miało skutki dla pozostałych elementów. Chodzi tutaj o to, aby tak zaplanować cięcie, aby za dużo się nie namęczyć. Czas: około 2 godzin (z testowaniem od razu w HTML i CSS).
2. Grafika - najgorsza część "zabawy". Szczególnie gdyby grafik zapomniał poprowadzić linii pomocniczych, dzięki którym szybciej i łatwiej mogę sobie pobrać wymiary i odległości między poszczególnymi elementami. Jeżeli nie ma takich linii to nie dość, że projekt się przeciąga to jeszcze (gdy to zlecenie) odpowiednio sobie doliczam ;). Kolejna istotna rzecz, to byłby brak uporządkowanych warstw. Czas się wydłuża, gdy mam tylko Layer XXX (za XXX podstaw sobie dowolną liczbę z przedziału 1-500). Tak. Za takie coś, też sobie doliczam ;). Przy tym projekcie najwięcej czasu zajęła zabawa z menu (efekt po najechaniu myszką). Czas: około 4 godzin.
3. HTML i CSS - teraz to już z górki. Mając plan cięcia oraz elementy graficzne zabawy jest na 2-3 godziny (wraz z ostylowaniem wszystkiego).

Pocięty projekt jest tutaj, mam nadzieję, że wpis pomógł początkującym webdeveloperom jak i tym bardziej zaawansowanym. Stosujecie jeszcze jakieś inne sztuczki przy cięciu projektów? Zastanawiam się jeszcze jakby ten projekt pocięli inny developerzy ;).