Projekt okładki i stron tytułowych Grzegorz Laskowski

Ilustracja na okładce Kovacs Tamas/Shutterstock

Wydawca Łukasz Łopuszański

Redaktor prowadzący Irena Puchalska

Redaktor Lucyna Wyciszkiewicz-Pardej

Koordynator produkcji Anna Bączkowska

Przygotowanie publikacji elektronicznej Ewa Modlińska

Skład wersji elektronicznej na zlecenie Wydawnictwa Naukowego PWN Michał Nakoneczny / 88em.eu

Książka, którą nabyłeś, jest dziełem twórcy i wydawcy. Prosimy, abyś przestrzegał praw, jakie im przysługują. Jej zawartość możesz udostępnić nieodpłatnie osobom bliskim lub osobiście znanym. Ale nie publikuj jej w internecie. Jeśli cytujesz jej fragmenty, nie zmieniaj ich treści i koniecznie zaznacz, czyje to dzieło. A kopiując jej część, rób to jedynie na użytek osobisty.

Szanujmy cudzą własność i prawo

Więcej na www.legalnakultura.pl

Polska Izba Książki

Copyright © by Wydawnictwo Naukowe PWN SA

eBook został przygotowany na podstawie wydania papierowego z 2015 r. (wyd. I)

Warszawa 2015

ISBN 978-83-01-18394-3

Wydawnictwo Naukowe PWN SA

02-460 Warszawa, ul. Gottlieba Daimlera 2

tel. 22 69 54 321, faks 22 69 54 288

infolinia 801 33 33 88

e-mail: pwn@pwn.com.pl

www.pwn.pl

  Spis treści

Wstęp

1. Strony responsywne

2. Podstawy tworzenia stron internetowych

2.1. HTML5 i struktura dokumentu

2.2. Kaskadowe arkusze stylów CSS

3. Narzędzia

3.1. Edytory

3.1.1. Sublime Text

3.1.2. Adobe Brackets

3.2. Testowanie

3.2.1. Wprowadzenie

3.2.2. W przeglądarce

3.2.3. Adobe Inspect CC

4. Projektowanie

Makieta

4.2. Projekt graficzny

5. Kodowanie elastycznej strony

5.1. Wprowadzenie

5.2. Struktura dokumentu HTML

5.3. Reset stylów CSS

5.4. Znacznik meta viewport

5.5. Organizacja pracy

5.6. Nagłówek strony

5.6.1. Wprowadzenie

5.6.2. Google Fonts

5.6.3. Określenie wysokości elementu-rodzica

5.6.4. Zapytania medialne

5.6.5. Dynamiczna zmiana klas za pomocą Biblioteki jQuery

5.7. Slogan

5.8. Sekcja Oferta

5.8.1. Układ trójkolumnowy

5.8.2. Responsywne obrazy

5.8.3. Własność box-sizing

5.9. Obszar O nas & Blog

5.9.1. Układ dwukolumnowy

5.9.2. Ukrywanie elementów

5.10. Obszar Nasze realizacje

5.11. Stopka

5.11.1. Wprowadzenie

5.11.2. CSS sprite

5.11.3. Dodanie nowego punktu granicznego

5.12. Podstrony

6. Spis znaczników HTML użytych w książce

7. Kod źródłowy

Okładka

Strona tytułowa

Strona redakcyjna

Spis treści

Wstęp

1. Strony responsywne

  Wstęp

Szczególnie obecnie sukces zależy od tego, czy istniejemy w internecie. Jeśli nie mamy strony internetowej lub jest ona wykonana w sposób, który nie spełnia aktualnych standardów, szanse, że nawiążemy z kimś współpracę, są raczej minimalne. Oczywiście są branże, które zadają kłam temu stwierdzeniu, jednak to rzadkość.

Projektując strony internetowe, należy pamiętać, że coraz więcej internautów korzysta z urządzeń mobilnych. Tworzenie stron o sztywnych rozmiarach, które bardzo trudno przegląda się za pomocą smartfonów oraz tabletów, niejednokrotnie może użytkowników bardziej do nas zrazić, niż zachęcić do zapoznania się z tym, co mamy do zaoferowania.

Termin Responsive Web Design działa czasami nieco odstraszająco. Jednak nie należy się go bać. W gruncie rzeczy korzystamy tu głównie z języka HTML5 oraz stylów CSS3, które są podstawowymi narzędziami webmasterskimi.

W książce zostały przedstawione wszystkie etapy tworzenia witryny internetowej, począwszy od makiet oraz layoutów, a skończywszy na zakodowaniu serwisu dla różnych rozdzielczości.

1 Strony responsywne

Projektowanie stron internetowych to bardzo szeroki temat, do którego podejście w przeciągu ostatnich kilku lat zmieniło się diametralnie. Początkowo strony można było kojarzyć ze statycznym tekstem i zdjęciami, z czasem zaczęto jednak urozmaicać je różnymi elementami animowanymi. Obecnie na stronach www można umieścić również muzykę czy pliki wideo. Okazuje się jednak, że to za mało. Z chwilą, kiedy na rynku pojawiły się smartfony i tablety, tradycyjne strony internetowe przestały się sprawdzać w stu procentach.

Strona internetowa po wczytaniu do przeglądarki w urządzeniach mobilnych zdecydowanie traci na jakości. Często, aby coś przeczytać, musimy dany fragment strony powiększyć, co z kolei sprawia, że inny fragment nie jest widoczny. Przeglądanie takiej strony bywa irytujące i bardzo niewygodne. Aby rozwiązać ten problem, zaczęto tworzyć strony mobilne. Jednak ich wykonanie najczęściej łączy się z powieleniem całej witryny i zaprojektowaniem jej tylko z myślą o urządzeniach mobilnych. To natomiast wiąże się z dwukrotną aktualizacją strony www – pierwsza aktualizacja dotyczy oczywiście wersji witryny przeznaczonej dla komputerów, druga natomiast wersji zaprojektowanej dla urządzeń mobilnych. Jeżeli aktualizacja jest wykonywana stosunkowo rzadko, można próbować projektować tego typu strony.

O wiele lepszym rozwiązaniem jest Responsive Web Design, w skrócie zwane RWD. To technika projektowania stron, dzięki której uzyskujemy optymalne wyświetlanie treści witryny zarówno na monitorze komputera, laptopa, jak i na wyświetlaczach urządzeń mobilnych. Strona responsywna w porównaniu do tradycyjnej o wiele lepiej dopasowuje się do tych urządzeń, ponieważ już na etapie projektowania zakładamy różne rozdzielczości, w jakich w przyszłości będzie wyświetlana.

Zaletą stron responsywnych jest fakt, że tworząc strony dla różnych urządzeń, nie musimy powielać ich treści. Również aktualizacja treści wymaga od nas zmian tylko w jednym miejscu – nie wykonujemy aktualizacji osobno dla komputerów oraz smartfonów i tabletów. Podczas wczytywania strony do okna przeglądarki automatycznie sprawdzana jest rozdzielczość ekranu urządzenia, z którego korzystamy, po czym ładowane są style, które przeznaczyliśmy dla tej właśnie rozdzielczości. Dzięki takiemu rozwiązaniu mamy pewność, że tekst będzie czytelny, a grafiki nie będą większe niż szerokość ekranu.

Równie istotną sprawą jest nawigacja. Zastosowanie wielopoziomowej nawigacji w urządzeniach o stosunkowo niewielkich rozmiarach jest dość kłopotliwe dla użytkownika. Strony responsywne korzystają z bardzo prostej nawigacji, do której dostęp mamy z każdego miejsca witryny. Zazwyczaj, jeśli używamy smartfonu lub tabletu, widoczny jest niewielki przycisk menu. Wystarczy jedno stuknięcie w przycisk, aby menu zostało wyświetlone i abyśmy mogli wybrać w nim inną podstronę.