PSD2HTML
Długo nic nie pisałem, ale wiecie jak to jest, praca, uczelnia (od maja straszy sesja). To jest początek mojej dłuższej weny pisarskiej. Dlatego ten wpis dedykuję wszystkim grafikom, którzy robią czasem bardzo fajne grafiki a czasem takie projekty, że na sam widok chce się zmieszać z błotem (jak nie zastrzelić ;). Kolejną grupą osób, którym dedykuję ten wpis to różnego rodzaju PM, którzy myślą, że pocięcie dowolnego projektu to kwestia kilku godzin. Postaram się przedstawić w tym wpisie jak to mniej więcej wygląda.
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.
- 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).
- 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.
- 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 ;).
Komentarze 13
Z ciekawości - czemu H1 przypisałeś dopiero do "Witamy" a nie do "U taty" (tytuł strony / logo). :)
Po co pojawia się div z "topową" grafiką? mogłoby się to znaleźć w tle strony. Prawda? lub w mainBox...
No i jeszcze można było zrezygnować z div#footerBox dając tło do samego UL?
@marcin,
Nie rezygnowałbym z tego diva - dzięki takiemu ułożeniu mamy bardziej klarowny układ, który jest jasno podzielony na nagłówek, główny kontent i stopkę.
Rzeczy, które bym zmienił:
- wstawić nazwę działu do #contentBox - teraz wisi gdzieś pomiędzy #topBox a #contentBox i jakoś nijak nie pasuje do przyjętego układu
- podpiąć nazwę strony / logo pod H1 a nazwę działu dać jako H2
Pomysł z przesuwaniem tła jest fajny i często stosowany. Na przykład to jest cień w mapach Google'a: http://maps.google.com/intl/en_ALL/mapfiles/iws2.png
Problem z doczytywaniem tak naprawdę nie istnieje jeśli umiejętnie określi się w stylach różne dla dla a i dla a:hover :P
@marcin: Szymon chyba wyjaśnił o co chodzi.
@Szymon: Od kiedy H1 jest nazwą firmy czy całej strony? Od tego jest title! H1 używam tylko dla tytułu newsa, artykułu itp. Nigdy dla nazwy firmy ;).
@shpyo: Różne są na ten temat opinie. Jedni używają h1 do logo/nazwy firmy inni nie. Np. na A list apart i stronie w3c nazwa/logo są zamknięte w h1.
co do textindent nie jestem pewien czy ma pelny support wsteczny...
graficzne menu mozna zbufforowac - tworzysz klase buffer i ustawiasz elementy poza viewable area...
This page is not Valid XHTML 1.0 Strict! :p
"graficzne menu mozna zbufforowac" - @rogus a po co? Style dla i pseudoklasa hover i po wszystkim.
Myślę że dla kogoś kto nie tnie dziesiątek layoutów należy jeszcze doliczyć czas na walkę z kaprysami IE6 - 2-3h na HTML/CSS to wersja optymistyczna
wiem ze wpis jest stary jak dinozaury, ale nie rozumiem uzycia text-indent - przeciez w momencie wylaczenia obrazkow i tak tych linkow nie bedzie widac
hmmm...sorki ale strona (wizytówka) składająca się z 4 grafik i tylu samych divów to nie robota...ie hacki?? jakie zaś hacki ... wybierz coś bardziej rozbudowanego
co do h1-... - google fe elementy h lubi wrzucać jako dodatkowe linki pod twoją stroną (te 6 linków czasem spotykanych na stronie z wynikami)
Heh wszystko ładnie pięknie, ale spędziłeś 4h nad menu? Przecież to max godzinka, sorry
Ikonka imho powinna być osobnym obrazkiem, osadzanym nad menu w chwili najechania nań.