Wprowadzenie

• Dla kogo przeznaczona jest ta książka? (22)
  
• Wiemy, co sobie myślisz (23)
  
• Metapoznanie - myślenie o myśleniu (25)
  
• A oto, co możesz zrobić, by skłonić swój mózg do posłuszeństwa (27)
  
• Ważne informacje (28)
  
• Zespół korektorów merytorycznych (30)
  
• Podziękowania (31)

1. Tworzenie atrakcyjnych stron internetowych

• Twoja wielka szansa - Red Lantern Design (34)
  
• Od czego zaczynamy? (37)
  
• ZACZNIJ od narysowania projektu (39)
  
• Ustalenie nawigacji najwyższego poziomu (45)
  
• Umieszczenie wszystkiego w kontekście (47)
  
• Pokaż Jane proste szkice (48)
  
• Szkice pomagają skoncentrować się na funkcjonalności (49)
  
• Nie rujnuj dobrego projektu złym tekstem (60)
  
• Co sprawia, że tekst można szybko przebiec wzrokiem? (61)
  
• Projektowanie stron internetowych oparte jest na komunikacji i UŻYTKOWNIKACH (67)

2. Faza preprodukcji

• Twoje pierwsze "międzynarodowe" zlecenie... (70)
  
• Pomyśl, zanim zabierzesz się za tworzenie kodu (72)
  
• Jasna metafora wizualna wzmacnia motyw przewodni strony internetowej (73)
  
• Motyw przewodni reprezentuje zawartość strony (74)
  
• Burza mózgów - droga do metafory wizualnej (77)
  
• Wymyśl motyw przewodni i metaforę wizualną dla Marka (78)
  
• Elementy strony powinny kształtować metaforę wizualną (81)
  
• Zbuduj szybko próbkę kodu XHTML dla Marka (88)
  
• A także kod CSS... (89)
  
• Użyj szkiców, by rozwinąć pomysły i zaoszczędzić trochę czasu bez tworzenia kodu (93)
  
• Nie projektuj dla siebie! (94)
  
• Utworzymy teraz szkic dla Marka (96)

3. Organizacja strony

• Dopasowanie zawartości strony do jej układu (103)
  
• Organizacja informacji znajdujących się na stronie (104)
  
• Organizacja strony za pomocą architektury informacji (111)
  
• Architektura informacji w oparciu o sortowanie kart (112)
  
• Cała prawda o sortowaniu kart (113)
  
• Posortuj karty w stosy zgodnie z ich podobieństwem (118)
  
• Nazwy stosów powinny być krótkie i opisowe (119)
  
• Który sposób sortowania jest właściwy? (124)
  
• Ułóż karty w hierarchię strony (125)
  
• Diagramy architektury informacji to po prostu karty posortowane na papierze (127)
  
• Diagramy architektury informacji NIE są tylko spisem odnośników między stronami (128)
  
• Przejście z fazy preprodukcji do produkcji (132)
  
• Budowanie struktury witryny Marka (133)
  
• Najpierw utworzymy plik index.html... (134)
  
• ...a później plik screen.css ze stylami (135)
  
• Od preprodukcji do produkcji - pełny proces (138)

4. Układ strony

• Projektuje się z myślą o odbiorcach (142)
  
• Twoje najnowsze zadanie - RPM Music (145)
  
• Ustalenie odbiorców strony RPM Music za pomocą person (146)
  
• Pozwól, by to persony były Twoimi przewodnikami... (152)
  
• Rozdzielczość wpływa na projekt i układ strony (154)
  
• Miejsce dostępne na ekranie określa, jak DUŻA część strony będzie widoczna w przeglądarce użytkownika (156)
  
• Zbuduj kod XHTML i CSS zoptymalizowany pod kątem rozdzielczości 1024×768 (160)
  
• Ludzie lubią, gdy wszystko jest dobrze zorganizowane i równo ułożone (164)
  
• Jak szeroka powinna być moja siatka? Użyj złotej proporcji (165)
  
• Reguła trójpodziału: uproszczenie złotej proporcji (166)
  
• Strona RPM Music i złota proporcja - studium (złego) przypadku (167)
  
• Pamiętasz o personach i kliencie? (171)
  
• Konfiguracja strony RPM Music 2.0 z platformą Blueprint (173)
  
• Użyj reguł CSS platformy Blueprint do nadania stylu stronie RPM Music 2.0 (176)
  
• Czas dodać zawartość strony RPM Music (177)
  
• Dodaj nieco kodu CSS, by uporządkować układ strony (181)

5. Projektowanie w kolorze

• Wspomóż lokalną scenę muzyczną (192)
  
• Strona 9Rules - złoty standard sieci blogów (193)
  
• Czasami możliwość wyboru jest nieco ograniczona (194)
  
• Kolor wpływa na emocje (195)
  
• Koło barw (czyli od czego wszystko się zaczęło) (199)
  
• Użyj koła barw do wybrania kolorów, które do siebie pasują (202)
  
• Najpierw wybiera się kolor PODSTAWOWY (202)
  
• Atrakcyjny wzorzec kolorów można stworzyć za pomocą schematu triady kolorów (203)
  
• Zaczynamy pisać kod strony SampleRate (205)
  
• Utworzenie prostego układu strony za pomocą arkusza CSS (206)
  
• Przeciwieństwem ciężkości jest... lekkość (212)
  
• Utwórz bogatszą paletę kolorów za pomocą schematu czwórkowego (214)
  
• Czas uaktualnić arkusz CSS strony SampleRate (218)

6. Dobry system nawigacyjny

• Nowy semestr w szkole rozpoczęty (226)
  
• Pierwszym krokiem w stronę dobrej nawigacji jest dobra architektura informacji (229)
  
• Czym tak naprawdę jest nazwa? (230)
  
• Rozwiązanie nr 1 - nawigacja z poziomymi zakładkami (236)
  
• Rozwiązanie nr 2 - nawigacja pionowa (238)
  
• Elementy blokowe to Twoi przyjaciele (244)
  
• Pozycjonowanie nawigacji blokowej za pomocą pływania (245)
  
• Ikony nic nie MÓWIĄ... po prostu ładnie wyglądają (247)
  
• Dodawaj ikony do tekstu, a nie odwrotnie (249)
  
• Uaktualnij kod XHTML strony CNM, by używał odnośników tekstowych (250)
  
• Teraz możesz nadać elementom blokowym styl... (251)
  
• Główny system nawigacyjny nie powinien się zmieniać... ale system drugorzędny już TAK (253)
  
• Każda podstrona otrzymuje własny drugorzędny system nawigacyjny (254)
  
• Dodanie stylu do nawigacji za pomocą arkusza CSS (255)

7. Pisanie tekstów na potrzeby stron internetowych

• Utwórz lepszą gazetę internetową (265)
  
• Strona gazety "The Hipster Intelligencer" - specyfikacja projektu (266)
  
• Problemem jest TEKST (266)
  
• Ulepszenie zawartości strony za pomocą odwróconej piramidy (273)
  
• Skracanie tekstu (279)
  
• Dodanie list do kodu XHTML (289)
  
• Nagłówki sprawiają, że tekst jeszcze łatwiej przebiec wzrokiem (291)
  
• Mieszaj ze sobą czcionki, by podkreślić nagłówki i inny tekst (300)
  
• Ważny jest poziom nagłówka, a nie jego rozmiar (301)

8. Dostępność

• Audio-2-Go - niedostępna dostępność (308)
  
• Dostępność oznacza, że ze strony może korzystać KAŻDY (309)
  
• Jak CZYTA się Twoja strona? (310)
  
• Informacje na stronie powinny być zrozumiałe... dla KAŻDEGO (312)
  
• Pogódź się z tym - komputery naprawdę są głupie (313)
  
• Komputer przeczyta tekst atrybutu ALT obrazka (314)
  
• Przekształć długi tekst atrybutu ALT w opis LONGDESC (318)
  
• Twoje modyfikacje poprawiły sytuację tylko NIEKTÓRYCH klientów Audio-2-Go (320)
  
• Dostępność nie ogranicza się do czytników ekranu (321)
  
• Elementy powinny być aktywowane PO KOLEI (323)
  
• Strona Audio-2-Go jest teraz ZNACZNIE bardziej DOSTĘPNA (326)
  
• WCAG Priority 1 (330)
  
• Kolory nie powinny być JEDYNĄ formą komunikacji (334)
  
• Świat w bezpiecznych barwach... (335)
  
• Świat w zaburzonych barwach... (335)
  
• Audio-2-Go oczami osoby z zaburzeniami rozpoznawania barw (336)
  
• Gwiazdki są prawdziwym problemem (338)
  
• Obrazki tła są nadal Twoimi przyjaciółmi (339)
  
• Kolejność to nie tylko atrybuty tabindex (340)

9. Słuchaj swoich użytkowników

• Problemy w RPM Music (352)
  
• Niech przemówią użytkownicy - za pośrednictwem ankiet i grup fokusowych (354)
  
• Ankiety i grupy fokusowe nie są darmowe (357)
  
• Zadaj w ankiecie właściwe pytania (360)
  
• Ostateczna wersja ankiety dla użytkowników strony RPM Music (370)
  
• Mamy wyniki! (372)
  
• Odpowiedzi na pytanie otwarte: (373)
  
• Użycie przeglądarek (375)
  
• Napraw błąd CSS na stronie RPM Music przez przeniesienie pseudoklasy :hover (376)
  
• Składniki taniego testu użyteczności (383)
  
• Wykorzystaj skrypt moderatora do organizacji testu (384)
  
• Przyjaciele i rodzina mogą być problemem (391)
  
• Wyniki testu użyteczności - czyli co mówią użytkownicy (392)
  
• Prosty problem... (393)
  
• O użytkownikach mówią statystyki strony (395)
  
• Narzędzia do statystyk strony internetowej (396)

10. Ewolucja projektu

• Twoje dotychczasowe portfolio... (402)
  
• Odświeżanie strony i jej zawartości sprawia, że użytkownicy chętnie powracają (404)
  
• W projektowaniu stron chodzi o ewolucję, nie rewolucję (407)
  
• Do ewolucji projektu strony wykorzystaj CSS (408)
  
• Dodaj interaktywność do strony za pomocą efektownego wyświetlania zdjęć z użyciem JavaScriptu (420)
  
• Dodanie biblioteki Facebox do strony Red Lantern Design (421)
  
• Edycja pliku strony głównej (422)
  
• Dodanie do strony bloga - WordPress (427)
  
• Dodaj bloga opartego na systemie WordPress do strony Red Lantern Design (428)
  
• Cała prawda o Blogu (430)
  
• Zmieniaj wygląd i sposób działania bloga za pomocą motywów (432)

11. Projektowanie stron jako biznes

• Najnowszy potencjalny klient - "Foo Bar" (436)
  
• Oferta dla restauracji "Foo Bar" musi zawierać (437)
  
• Budujemy prototyp strony restauracji "Foo Bar" (438)
  
• Witaj w świecie PIRACTWA PROJEKTÓW (445)
  
• Jakim typem projektanta stron jesteś? (448)
  
• Red Lantern Design ma nowego potencjalnego klienta (453)
  
• Co tak naprawdę składa się na projektowanie strony internetowej? (456)
  
• Ostateczna kalkulacja oferty... (457)
  
• W specjalnym liście ofertowym przedstaw klientowi szczegółowe wyliczenia (463)
  
• Podcast Trilobite Labs - kolejne wyzwanie (465)
  
• Wykorzystaj licencję Creative Commons (465)
  
• Licencje Creative Commons (466)

12. Dziesięć najważniejszych rzeczy (których nie omówiliśmy)

• Nr 1: Projekty międzynarodowe i wielokulturowe (472)
  
• Nr 2: Przyszłość kodu stron internetowych (474)
  
• Nr 3: Przyszłość CSS (476)
  
• Nr 4: Projektowanie dla urządzeń mobilnych (477)
  
• Nr 5: Tworzenie aplikacji internetowych (478)
  
• Nr 6: Rytm w układzie strony (479)
  
• Nr 7: Kontrastowy tekst (480)
  
• Nr 8: Dopasuj nazwy odnośników do stron, do których kierują (481)
  
• Nr 9: Kontrast jest podstawowym elementem tworzącym układ strony (482)
  
• Nr 10: Więcej narzędzi do projektowania (483)

Skorowidz (485)

• Titel: Head First Web Design. Edycja polska
• Autor: Ethan Watrall, Jeff Siarto
• Originaler Titel: Head First Web Design
• Übersetzung: Anna Trojan
• ISBN: 978-83-246-6061-2, 9788324660612
• Veröffentlichungsdatum: 2012-10-16
• Format: E-book
• Artikelkennung: hfwdep
• Verleger: Helion