Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice

Table of contents

1. Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice
2. Przedmowa
   1. Podziękowania
   2. O autorze
3. I. Podstawy
   1. 1. Od czego zacząć?
      1. Czy jestem spóźniony?
      2. Od czego powinienem zacząć?
      3. Czego powinienem się nauczyć?
         1. Projektowanie grafiki
         2. Projektowanie informacji
         3. Projektowanie interfejsu
         4. Tworzenie dokumentów
         5. Tworzenie skryptów oraz programowanie
         6. Multimedia
      4. Czy muszę nauczyć się Javy?
         1. HTML i XHTML
         2. CSS (kaskadowe arkusze stylów)
         3. JavaScript i skrypty DOM
         4. Programowanie po stronie serwera
         5. XML
         6. Java
      5. Co muszę kupić?
         1. Wyposażenie
         2. Oprogramowanie
            1. Tworzenie stron internetowych
            2. Edytory HTML
            3. Oprogramowanie do tworzenia grafiki
            4. Narzędzia do tworzenia multimediów
            5. Narzędzia internetowe
      6. Czego się nauczyłem?
      7. Sprawdź się!
   2. 2. Jak działa Internet?
      1. Internet a World Wide Web
      2. Serwowanie informacji
      3. Słowo o przeglądarkach
      4. Adresy stron internetowych (URL)
         1. Części adresu URL
         2. Pliki domyślne
      5. Anatomia strony internetowej
         1. Dokumenty HTML
         2. Krótkie wprowadzenie do języka HTML
         3. Gdzie są jednak obrazki?
      6. Składanie wszystkiego w całość
      7. Sprawdź się!
   3. 3. Natura projektowania stron internetowych
      1. Wersje przeglądarek
         1. Radzenie sobie z różnymi wersjami przeglądarek
      2. Alternatywne środowiska przeglądania stron internetowych
         1. Użytkownicy niepełnosprawni
         2. Mobilny Internet
         3. Radzenie sobie z różnorodnością
         4. Do dalszej lektury
      3. Preferencje użytkownika
         1. Radzenie sobie z ustawieniami użytkownika
      4. Różne platformy
         1. Radzenie sobie z różnorodnością platform
      5. Prędkość połączenia z Internetem
         1. Radzenie sobie z nieznaną prędkością połączenia z Internetem
      6. Rozmiar okna przeglądarki oraz rozdzielczość monitora
         1. Układ strony internetowej
         2. Wymiary strony internetowej
         3. Radzenie sobie z rozmiarem okna przeglądarki
      7. Kolory monitora
         1. Jasność
         2. Liczba kolorów
         3. Radzenie sobie z różnymi kolorami na monitorach
      8. Należy znać publiczność docelową
      9. Pamiętanie o najważniejszym
      10. Sprawdź się!
4. II. Znaczniki HTML i struktura dokumentu
   1. 4. Tworzenie prostej strony (przegląd HTML)
      1. Strona internetowa krok po kroku
      2. Przed rozpoczęciem należy uruchomić edytor tekstu
         1. Tworzenie nowego dokumentu w Notatniku (użytkownicy systemu Windows)
         2. Tworzenie nowego dokumentu w programie TextEdit (użytkownicy Macintosha)
      3. Krok 1. Zaczynamy od treści strony
         1. Zrozumienie pierwszego kroku
      4. Krok 2. Nadanie dokumentowi struktury
         1. Wprowadzenie do elementów HTML
         2. Podstawowa struktura dokumentu
      5. Krok 3. Zidentyfikowanie elementów tekstowych
         1. Wprowadzenie do semantycznego oznaczania tekstu
         2. Elementy blokowe oraz wewnętrzne
         3. Style domyślne
      6. Krok 4. Dodanie obrazka
         1. Elementy puste
         2. Atrybuty
      7. Krok 5. Zmiana wyglądu za pomocą arkusza stylów
      8. Kiedy dobre strony nie działają dobrze
      9. Sprawdź się!
      10. Przegląd (X)HTML — elementy struktury dokumentu
   2. 5. Oznaczanie tekstu
      1. Bloki jako budulec strony
         1. Akapity
         2. Nagłówki
         3. Długie cytaty
         4. Test sformatowany
         5. Adresy
      2. Listy
         1. Listy nieuporządkowane
         2. Listy uporządkowane
         3. Listy definicji
      3. Dodawanie złamania wiersza
      4. Tekstowe elementy wewnętrzne
         1. Semantyczne elementy wewnętrzne
            1. Akcentowanie tekstu
            2. Krótkie cytaty
            3. Skróty i akronimy
            4. Odwołania
            5. Definiowanie pojęć
            6. Fragmenty kodu programu
            7. Tekst wstawiony oraz usunięty
         2. Prezentacyjne elementy wewnętrzne
      5. Elementy uniwersalne (div oraz span)
         1. Podział tekstu za pomocą elementu div
         2. Oznaczenie za pomocą elementu span
         3. Identyfikatory elementów
            1. Identyfikator id
            2. Identyfikator class
      6. Niektóre znaki specjalne
      7. Zestawienie wszystkiego razem
      8. Sprawdź się!
      9. Przegląd (X)HTML — elementy tekstowe
   3. 6. Dodawanie odnośników
      1. Atrybut href
      2. Tworzenie odnośników do stron znajdujących się w Internecie
      3. Tworzenie odnośników w ramach własnej strony internetowej
         1. Odnośniki w ramach jednego katalogu
         2. Odnośnik do pliku znajdującego się w katalogu niżej
         3. Odnośnik do pliku znajdującego się w katalogu wyżej
         4. Ścieżki określane względem katalogu głównego
         5. Tak samo jest w przypadku obrazków
         6. Odnośnik do określonego miejsca na stronie
            1. Krok 1. Nazwanie miejsca docelowego
            2. Krok 2. Utworzenie odnośnika do miejsca docelowego
         7. Odnośnik do fragmentu innego dokumentu
      4. Otwieranie stron docelowych w nowym oknie przeglądarki
         1. Otwieranie nowego okna za pomocą (X)HTML
         2. Otwieranie nowego okna za pomocą JavaScriptu
      5. Odnośniki z adresami poczty e-mail
      6. Sprawdź się!
      7. Przegląd (X)HTML — element kotwicy
   4. 7. Dodawanie obrazków
      1. Słowo o formatach obrazków
      2. Element img
      3. Podawanie lokalizacji za pomocą atrybutu src
         1. Udostępnienie tekstu alternatywnego za pomocą atrybutu alt
         2. Długie opisy
         3. Podawanie wymiarów na szerokość oraz wysokość
            1. Dopasowanie wartości do rzeczywistego wymiaru w pikselach
      4. Mapy obrazów
         1. Części mapy obrazu
         2. Tworzenie mapy obrazu
         3. Interpretowanie mapy obrazu
      5. Sprawdź się!
         1. Przegląd (X)HTML — elementy obrazków oraz map obrazu
   5. 8. Podstawowe znaczniki tabel
      1. W jaki sposób wykorzystywane są tabele
      2. Minimalna struktura tabeli
      3. Nagłówki tabel
      4. Rozciąganie komórek
         1. Rozciąganie komórek na kolumny
         2. Rozciąganie komórek na wiersze
      5. Dopełnienie komórek oraz odstępy
         1. Dopełnienie komórek
         2. Odstępy między komórkami
      6. Podpisy oraz podsumowania
         1. Element caption
         2. Atrybut summary
      7. Dostępność tabel
      8. Podsumowanie zagadnień związanych z tabelami
      9. Sprawdź się!
      10. Przegląd (X)HTML — elementy tabeli
   6. 9. Formularze
      1. Jak działają formularze
         1. Od wpisania danych do odpowiedzi
      2. Element form
         1. Atrybut action
         2. Atrybut method
            1. Metoda POST
            2. Metoda GET
      3. Zmienne oraz zawartość
         1. Atrybut name
         2. Nazywanie zmiennych
      4. Dostępność formularza
         1. Podpisy
         2. Elementy fieldset oraz legend
      5. Wielkie podsumowanie kontrolek
         1. Kontrolki pól tekstowych
            1. Jednowierszowe pole tekstowe
            2. Pole tekstowe z hasłem
            3. Wielowierszowe pole tekstowe
         2. Przyciski submit oraz reset
         3. Przyciski opcji i pola wyboru
            1. Przyciski opcji
            2. Pola wyboru
         4. Menu
            1. Menu rozwijane
            2. Menu przewijane
            3. Grupowanie opcji menu
         5. Kontrolka wyboru pliku
         6. Kontrolki ukryte
      6. Projektowanie i wygląd formularza
      7. Sprawdź się!
      8. Przegląd (X)HTML — formularze
   7. 10. Rozumienie standardów
      1. Wszystko, co zawsze chciałeś wiedzieć o HTML, ale bałeś się o to zapytać
         1. HTML zostaje zanieczyszczony
         2. ...i wraca na właściwe tory
         3. HTML w trzech odmianach
            1. Transitional
            2. Strict
            3. Frameset
         4. Zapoznanie z DTD
      2. Na scenę wkracza XHTML
         1. Przepisanie HTML
         2. Składnia XHTML
         3. Wymagania dotyczące przestrzeni nazw oraz języka
      3. Z punktu widzenia przeglądarki
      4. Deklarowanie typu dokumentu
         1. Dostępne deklaracje DOCTYPE
            1. DTD dla HTML 4.01
            2. DTD dla XHTML 1.0
      5. Jaką definicję typu dokumentu zastosować?
         1. Transitional czy Strict?
         2. HTML czy XHTML?
         3. Co robią zawodowcy?
      6. Sprawdzanie poprawności dokumentów
      7. Kodowanie znaków
         1. Unicode
         2. Określanie kodowania znaków
      8. Wszystko razem
         1. HTML 4.01 Strict
         2. XHTML 1.0 Strict
      9. Sprawdź się!
5. III. CSS I Prezentacja Dokumentu
   1. 11. Zorientowanie na kaskadowe arkusze stylów
      1. Zalety CSS
         1. Siła CSS
      2. Jak działają arkusze stylów
         1. 1. Oznaczanie dokumentu
         2. 2. Pisanie reguł
            1. Selektory
            2. Deklaracje
         3. 3. Dołączanie stylów do dokumentu
      3. Najważniejsze koncepcje
         1. Dziedziczenie
            1. Struktura dokumentu
            2. Rodzice i dzieci
            3. Przekazywanie
         2. Konflikt stylów i kaskada
            1. Specyficzność
            2. Kolejność reguł
         3. Model pojemnika
         4. Grupowanie selektorów
      4. Dalsza nauka CSS
         1. Książki
         2. Zasoby internetowe
            1. Pokazowe strony oparte na CSS, źródła inspiracji
            2. Ważne strony osobiste
      5. Sprawdź się!
   2. 12. Formatowanie tekstu (i jeszcze więcej selektorów)
      1. Właściwości dotyczące czcionek
         1. Określanie nazwy czcionki
            1. Ograniczenia czcionek
            2. Gatunkowe rodziny czcionek
            3. Strategie określania czcionek
         2. Określanie wielkości czcionki
            1. Praca ze słowami kluczowymi
            2. Praca z wartościami procentowymi oraz em
         3. Waga czcionki (pogrubienie)
         4. Styl czcionki (kursywa)
         5. Wariant czcionki (kapitaliki)
         6. Skrótowa właściwość font
      2. Zmiana koloru tekstu
      3. Więcej typów selektorów
         1. Selektory potomne
         2. Selektory identyfikatorów
         3. Selektory klas
         4. Specyficzność
      4. Zmiana stylu wiersza tekstu
         1. Wysokość wiersza
         2. Wcięcie tekstu
         3. Wyrównanie w poziomie
      5. Podkreślenia oraz inne „dekoracje”
      6. Zmiana wielkości liter
      7. Odstępy
      8. Sprawdź się!
      9. Przegląd CSS — właściwości dotyczące czcionki oraz tekstu
   3. 13. Kolory i tła (i jeszcze więcej selektorów oraz zewnętrzne arkusze stylów)
      1. Określanie wartości koloru
         1. Nazwy kolorów
         2. Wartości kolorów RGB
            1. Słów kilka na temat koloru RGB
            2. Wybór koloru
            3. Wpisywanie wartości RGB do arkuszy stylów
            4. O wartościach szesnastkowych
         3. Podsumowanie informacji dotyczących wartości koloru
      2. Kolor pierwszego planu
      3. Kolor tła
      4. Wprowadzenie do selektorów pseudoklas
         1. Pseudoklasy odnośników
         2. Love, HA!
      5. Selektory pseudoelementów
         1. Pierwsza litera oraz wiersz
      6. Obrazki tła
         1. Dodawanie obrazka tła
         2. Powielanie tła
         3. Pozycja tła
         4. Przytwierdzanie tła
      7. Skrótowa właściwość background
      8. I wreszcie — zewnętrzne arkusze stylów
         1. Wykorzystywanie elementu link
         2. Importowanie za pomocą @import
         3. Modularne arkusze stylów
      9. Arkusze stylów przeznaczone dla druku (oraz innych mediów)
      10. Sprawdź się!
      11. Przegląd CSS — właściwości dotyczące koloru oraz tła
   4. 14. Model pojemnika (dopełnienie, obramowanie, marginesy)
      1. Pojemnik elementu
      2. Określanie wymiarów zawartości elementu
         1. Określanie wysokości
         2. Radzenie sobie z przepełnieniem zawartości elementu
      3. Dopełnienie
         1. Skrótowa właściwość padding
      4. Obramowanie
         1. Styl obramowania
         2. Szerokość obramowania (grubość)
         3. Kolor obramowania
         4. Połączenie stylu, szerokości oraz koloru obramowania
      5. Marginesy
         1. Zachowanie marginesów
            1. Składanie marginesów
            2. Marginesy elementów wewnętrznych
            3. Marginesy ujemne
      6. Przypisywanie ról wyświetlania
      7. Przegląd modelu pojemnika
      8. Sprawdź się!
      9. Przegląd CSS — podstawowe właściwości modelu pojemnika
   5. 15. Pływanie oraz pozycjonowanie
      1. Normalny układ dokumentu
      2. Pływanie
         1. Więcej przykładów pływania
            1. Pływający tekstowy element wewnętrzny
            2. Pływające elementy blokowe
            3. Większa liczba elementów pływających
         2. Wyłączanie zawijania tekstu wokół elementów pływających
      3. Podstawy pozycjonowania
         1. Typy pozycjonowania
         2. Określanie pozycji
      4. Pozycjonowanie względne
      5. Pozycjonowanie bezwzględne
         1. Bloki zawierające
         2. Określanie pozycji
            1. Miary w pikselach
            2. Wartości procentowe
            3. Zejście na ziemię
         3. Kolejność układania elementów na stosie
      6. Pozycjonowanie sztywne
      7. Sprawdź się!
      8. Przegląd CSS — podstawowe właściwości dotyczące układu dokumentu
   6. 16. Układ strony oparty na CSS
      1. Strategie związane z układem strony
         1. Płynny układ strony
            1. W jaki sposób tworzy się płynne układy strony?
            2. Radzenie sobie z długością wiersza
      2. Sztywny układ strony
         1. W jaki sposób tworzy się sztywne układy strony?
      3. Elastyczny układ strony
         1. W jaki sposób tworzy się elastyczne układy strony?
         2. Który układ należy zastosować?
      4. Szablony stron internetowych
         1. Wykorzystywanie szablonów
         2. Wielokolumnowe układy strony z wykorzystaniem elementów pływających
            1. Układ dwukolumnowy ze stopką Metoda: pływanie Typ: płynny
               1. Kod dokumentu
               2. Uwagi do kodu dokumentu
               3. Arkusz stylów
               4. Uwagi do arkusza stylów
            2. Układ trzykolumnowy ze stopką Metoda: pływanie Typ: sztywny
               1. Kod dokumentu
               2. Uwagi do kodu dokumentu
               3. Arkusz stylów
               4. Uwagi do arkusza stylów
         3. Układy strony wykorzystujące pozycjonowanie bezwzględne
            1. Układ dwukolumnowy z wąską stopką Metoda: pozycjonowanie Typ: płynny
            2. Uwagi do kodu dokumentu
            3. Kod dokumentu
            4. Arkusz stylów
            5. Uwagi do arkusza stylów
            6. Układ trzykolumnowy z wąską stopką Metoda: pozycjonowanie Typ: płynny
            7. Kod dokumentu
            8. Uwagi do kodu dokumentu
            9. Arkusz stylów
            10. Uwagi do arkusza stylów
            11. Układ trzykolumnowy z obramowaniem i dopełnieniem pomiędzy kolumnami Metoda: pozycjonowanie Typ: sztywny
            12. Kod dokumentu
            13. Uwagi do kodu dokumentu
            14. Arkusz stylów
            15. Uwagi do arkusza stylów
      5. Wyśrodkowanie strony o sztywnej szerokości
      6. Przegląd układów strony opartych na CSS
      7. Sprawdź się!
   7. 17. Techniki CSS
      1. Właściwości stylów dotyczące tabel
         1. Obramowanie rozdzielone i złożone
            1. Model rozdzielonego obramowania
            2. Model złożonego obramowania
         2. Puste komórki
      2. Zmiana znaków wypunktowania oraz numerowania list
         1. Wybór znaku wypunktowania
         2. Pozycja znaku wypunktowania
         3. Wykonanie własnych znaków wypunktowania
         4. Skrótowa właściwość list-style
      3. Wykorzystywanie list do nawigacji po stronie
         1. Elementy listy jako elementy wewnętrzne
         2. Elementy listy jako elementy pływające
         3. Więcej informacji na temat nawigacji z wykorzystaniem zakładek
      4. Techniki zastępowania obrazków
      5. Uzyskanie efektu rollover za pomocą CSS
         1. Zamiana obrazków tła
         2. Przesunięcie obrazka tła
      6. Podsumowanie arkuszy stylów
      7. Sprawdź się!
      8. Przegląd CSS — właściwości dotyczące tabel oraz list
6. IV. Tworzenie grafiki stron internetowych
   1. 18. Podstawy grafiki stron internetowych
      1. Źródła obrazków
         1. Tworzenie własnych obrazków
         2. Ilustracje elektroniczne
         3. Clipart
         4. Wynajęcie projektanta grafiki
      2. Zapoznanie się z formatami grafiki
         1. Wszechobecny GIF
            1. Ośmiobitowy kolor indeksowany
            2. Kompresja obrazków GIF
            3. Przezroczystość
            4. Przeplot
            5. Animacje
         2. Fotogeniczny JPEG
            1. Obrazki dwudziestoczterobitowe w trybie Truecolor
            2. Kompresja stratna
            3. Progresywny obrazek JPEG
            4. Dekompresja
         3. Niesamowity PNG
            1. Większa liczba formatów obrazków
            2. Przezroczystość
            3. Wyświetlanie progresywne (przeplot)
            4. Korekcja gammy
            5. Osadzony tekst
            6. Kiedy warto używać PNG
         4. Wybór najlepszego formatu
         5. Zapisywanie obrazka w wybranym formacie
      3. Rozmiar oraz rozdzielczość obrazka
         1. Żegnajcie, cale — witajcie, piksele!
         2. Zmiana wielkości obrazka
      4. Praca z przezroczystością
         1. Jak działa przezroczystość binarna
         2. Jak działa przezroczystość kanału alfa
         3. Tworzenie przezroczystych obrazków GIF oraz PNG
            1. Unikanie efektów „halo”
            2. Dodawanie przezroczystości do spłaszczonych obrazków
      5. Podsumowanie informacji dotyczących grafiki stron internetowych
      6. Sprawdź się!
   2. 19. Optymalizacja grafiki stron internetowych
      1. Po co optymalizować grafi kę?
      2. Uniwersalne strategie optymalizacyjne
      3. Optymalizacja plików GIF
         1. Zmniejszenie liczby kolorów
         2. Redukcja roztrząsania
         3. Wykorzystywanie filtra stratnego
         4. Projektowanie z myślą o kompresji GIF
            1. Utrzymanie jednolitych kolorów
            2. Paski poziome
         5. Podsumowanie informacji dotyczących optymalizacji GIF
      4. Optymalizacja plików JPEG
         1. Zapoznanie z kompresją JPEG
            1. Unikanie szczegółów
            2. Unikanie jednolitych kolorów
         2. Należy korzystać z agresywnej kompresji
         3. Optymalizacja ważona (selektywne obrazki JPEG)
            1. Wykorzystywanie optymalizacji ważonej (Photoshop)
            2. Wykorzystywanie jakości selektywnej (Fireworks)
         4. Wybór zoptymalizowanych plików JPEG
         5. Rozmywanie lub wygładzanie obrazka
         6. Podsumowanie wiadomości na temat optymalizacji obrazków JPEG
      5. Optymalizacja plików PNG
         1. PNG-24
         2. PNG-8
      6. Optymalizacja pod kątem rozmiaru docelowego
      7. Przegląd optymalizacji
      8. Sprawdź się!
7. V. Od Początku Do Końca
   1. 20. Proces tworzenia strony internetowej
      1. 1. Konceptualizacja oraz zbieranie informacji
      2. 2. Tworzenie i organizowanie treści strony
         1. Tworzenie treści strony
         2. Projektowanie informacji
      3. 3. Zaprojektowanie wyglądu i sposobu działania strony
         1. Szkic strony
         2. Proces tworzenia kreacji graficznej strony
      4. 4. Stworzenie działającego prototypu
      5. 5.Testowanie
         1. Podstawowy test jakości
         2. Testowanie działania w przeglądarkach
         3. Testowanie przez użytkowników
      6. 6. Uruchomienie strony
      7. 7. Utrzymywanie strony
      8. Przegląd procesu tworzenia strony
      9. Sprawdź się!
   2. 21. Umieszczanie stron w Internecie
      1. www.mojastrona.com
         1. Co jest w nazwie domeny?
         2. Rejestracja domeny
         3. Czy domena jest dostępna?
      2. Znalezienie serwera WWW
         1. Na własnym podwórku
         2. Profesjonalne usługi hostingowe
         3. Darmowy hosting
      3. Proces publikowania strony w Internecie
      4. Transfer plików za pomocą FTP
         1. Oprogramowanie FTP
         2. Korzystanie z FTP krok po kroku
      5. Sprawdź się!
8. A. Odpowiedzi do ćwiczeń
   1. Rozdział 1. Od czego zacząć?
   2. Rozdział 2. Jak działa Internet?
   3. Rozdział 3. Natura projektowania stron internetowych
   4. Rozdział 4. Tworzenie prostej strony (przegląd HTML)
      1. Ćwiczenia od 4.1. do 4.5.
   5. Rozdział 5. Oznaczanie tekstu
      1. Ćwiczenie 5.1.
      2. Ćwiczenie 5.2.
      3. Ćwiczenie 5.3.
   6. Rozdział 6. Dodawanie odnośników
      1. Ćwiczenie 6.1.
      2. Ćwiczenie 6.2.
      3. Ćwiczenie 6.3.
      4. Ćwiczenie 6.4.
      5. Ćwiczenie 6.5.
      6. Ćwiczenie 6.6.
      7. Ćwiczenie 6.7.
   7. Rozdział 7. Dodawanie obrazków
      1. Ćwiczenie 7.1.
   8. Rozdział 8. Podstawowe znaczniki tabel
      1. Ćwiczenie 8.1.
      2. Ćwiczenie 8.2.
      3. Ćwiczenie 8.3.
      4. Ćwiczenie 8.4.
   9. Rozdział 9. Formularze
      1. Ćwiczenia od 9.1. do 9.3. — końcowy dokument źródłowy
   10. Rozdział 10. Rozumienie standardów
       1. Ćwiczenie 10.1.
   11. Rozdział 11. Zorientowanie na kaskadowe arkusze stylów
   12. Rozdział 12. Formatowanie tekstu
       1. Ćwiczenia od 12.1. do 12.3.
   13. Rozdział 13. Kolory i tła
       1. Ćwiczenie 13.1.
   14. Rozdział 14. Model pojemnika
       1. Ćwiczenie 14.3.
   15. Rozdział 15. Pływanie oraz pozycjonowanie
   16. Rozdział 16. Układ strony oparty na CSS
   17. Rozdział 17. Techniki CSS
       1. Ćwiczenie 17.1., Projekt A
       2. Ćwiczenie 17.1., Projekt B
       3. Ćwiczenie 17.2., Projekt A
       4. Ćwiczenie 17.2., Projekt B
   18. Rozdział 18. Podstawy grafiki stron internetowych
   19. Rozdział 19. Optymalizacja grafiki stron internetowych
   20. Rozdział 20. Proces tworzenia strony internetowej
   21. Rozdział 21. Umieszczanie stron w Internecie
9. B. Selektory CSS2.1
10. Indeks
11. Kolofon
12. Copyright