Recenzja książki: Od Photoshopa do HTML
Jeśli dopiero zaczynasz tworzyć projekty stron internetowych za pomocą programu Photoshop, nauka transformacji plików .PSD do semantycznych, zgodnych ze standardami plików CSS i HTML może być nieco onieśmielająca.
W końcu istnieje wiele wspaniałych usług, które mogą cię podzielić i zaszyfrować twoje pliki. Ale są takie przypadki, kiedy wolisz samemu pokroić te projekty.
To tam gdzie Od Photoshopa do HTML: jak kroić swoje projekty jak profesjonalista Jeffrey Way, redaktor Nettuts +, wchodzi.
W tej 145-stronicowej książce cały proces przekształcania pliku .PSD w działający projekt strony internetowej jest szczegółowo omawiany przykładami kodu.
Witryna modelowa służy do prowadzenia czytelników przez cały proces, krok po kroku, za pomocą jednego przykładu. Obejmuje to wszystko, od podstawowego kodowania do tworzenia projektów kompatybilnych z przeglądarkami.
Na co dzień - jeśli słuchasz uważnie - na całym świecie słychać krzyki od koderów bezskutecznie usiłujących wymusić projekt na miejscu. To nie tylko nauka języka; zapamiętywanie jest łatwym zadaniem. Punkty wywołujące wrzask pojawiają się, gdy przeglądasz swoją witrynę w dziesięciu różnych przeglądarkach, co powoduje, że Twoja witryna jest na różnych poziomach spójności.
Książka zakłada, że masz podstawową praktyczną znajomość CSS i HTML, a także projekt już utworzony w Photoshopie. Projekt zastosowany w książce jest prosty, ale koncepcje użyte do stworzenia projektu można łatwo zastosować do bardziej złożonych projektów.
Książka zaczyna się od sekcji poświęconej sposobowi spojrzenia na projekt, zanim przejdziesz do procesu tworzenia kodu HTML.
Choć może wydawać się naturalne, że od razu zaczyna się praca nad grafiką naszej strony internetowej, nie może to być dalsze od prawdy. Zamiast tego musimy najpierw zbudować naszą bazę lub marżę i dopiero po jej zakończeniu możemy przejść do wizualizacji.
Wybierając trzy podstawowe sekcje, które zawiera większość stron internetowych: nagłówek, główny obszar treści i stopka są objęte, a następnie książka przeskakuje do procesu konfiguracji podstawowego pliku HTML. Znowu każdy z podstawową znajomością HTML nie będzie miał problemu z tą częścią.
Po zakończeniu podstawowego kodu HTML, od Photoshopa do HTML można uzyskać informacje dotyczące dzielenia plików .PSD.
Poświęć chwilę, aby spojrzeć na projekt w Photoshopie. Spróbuj wskazać każdy obraz, który będzie potrzebny. Pamiętaj, że funkcje można odtworzyć za pomocą CSS; więc bądź kreatywny.
Chociaż wspomniano obie metody krojenia plików, książka wykorzystuje kombinację przycinania oraz wycinania i wklejania w celu pobrania potrzebnych obrazów, zamiast korzystania z narzędzia wycinania.
Obie metody są całkowicie poprawne. Polecam, aby wypróbować obie i wybrać, która kiedykolwiek okaże się najszybsza ... dla ciebie.
Skróty klawiszowe przyspieszające ten proces są szczegółowo omówione. Zapisywanie tych obrazów w Internecie, w tym wszystkich ustawień, których należy używać, oraz tego, jakiego typu plików obrazu użyć, dla których typów obrazów, jest również szeroko dyskutowany, podobnie jak sprite'y CSS. Ostatni, ale nie mniej ważny w tej sekcji, jest kilka uwag na temat korekt, które następnie będą musiały zostać wprowadzone do pliku HTML na podstawie używanych obrazów tła.
Gdy kod HTML i obrazy będą gotowe, nadszedł czas, aby zagłębić się w CSS swojej witryny. Resetowanie przeglądarki jest zestresowane i szczegółowo omówione, a także jak odbudować standardowy, domyślny plik CSS.
Każda przeglądarka wykorzystuje trochę "domyślnego CSS", aby automatycznie stylizować swój znacznik. Na pierwszy rzut oka może się wydawać, że jest to niezwykle pomocne ... Gdyby każda przeglądarka implementowała je identycznie, nie stanowiłoby to problemu. Niestety, tak nie jest.
Istnieje wiele zasad CSS, w tym względne lub bezwzględne pozycjonowanie i kształty CSS, które są praktyczne i użyteczne. Dla tych, którzy nie są ekspertami w CSS, sekcje te będą szczególnie pouczające, podczas gdy ci, którzy są, mogą chcieć pominąć te części. Kolejnym świetnym fragmentem kodu CSS jest tworzenie lepkich stopek, co może być frustrujące dla nowych projektantów CSS.
Opisujemy kodowanie dodatkowych stron poza naszą stroną główną, w tym sposób wprowadzania drobnych zmian w układzie i zawartości oraz co trzeba dodać do plików CSS. Do czasu, gdy skończysz z tą sekcją, będziesz mieć wszystkie szablony stron niezbędne do w pełni funkcjonalnej witryny portfolio.
Ostatni, regularny rozdział w książce opisuje, jak dostosować projekt do różnych przeglądarek, szczególnie w przypadku starszych przeglądarek, takich jak Internet Explorer 6 i 7. Jednym z największych problemów, o których mowa jest brak przejrzystości w obrazach w IE6. , z różnymi rozwiązaniami do przezwyciężenia.
Przeglądanie witryny internetowej w programie Internet Explorer 7 i nowszych wersji po raz pierwszy spowoduje, że będziesz się śmiał. Możesz mieć szczęście, ale przez większość czasu znajdziesz wiele problemów, które należy naprawić.
Dodatkowy rozdział na końcu pokazuje, jak stworzyć efekty przejściowe jQuery, które są włączone do projektu strony. Dla każdego nowego w JavaScript i jQuery jest to interesujący projekt, który uczy podstawowych technik.
Ogólnie rzecz biorąc, jeśli zlecasz outsourcing konwersji plików .PSD do HTML lub jeśli chciałeś wypróbować projektowanie stron internetowych w Photoshopie, ta książka jest zdecydowanie warta przeczytania.
Kompletne instrukcje krok po kroku, które można łatwo zastosować do wielu projektów i ton przykładowego kodu, Od Photoshopa do HTML z pewnością pomoże Ci w konwersji własnych projektów. Przy odrobinie praktyki omówione koncepcje mogą być stosowane praktycznie na każdym projekcie!
Książka zawiera również pliki źródłowe dla tworzonej strony, które możesz wykorzystać w swoich własnych projektach.
Napisany wyłącznie dla WDD przez Cameron Chapman .
Co myślisz o tej książce? Daj nam znać w polu komentarzy ...