Cel lekcji

Podczas tej lekcji stworzysz swoją pierwszą stronę internetową korzystając z WordPressa.

Po wykonaniu wszystkich zadań będziesz potrafić:

poruszać się po panelu WordPress,
tworzyć nowe strony,
dodawać tekst i nagłówki,
dodawać obrazy,
tworzyć listy,
dodawać przyciski i linki,
tworzyć menu strony,
publikować stronę internetową,
samodzielnie zmieniać wygląd strony.

Nie musisz znać HTML, CSS ani JavaScript. Na tym etapie skupiamy się na tworzeniu strony za pomocą gotowych narzędzi WordPressa.

1. Czym jest WordPress?

WordPress to system, który pozwala tworzyć i zarządzać stronami internetowymi.

Nie musisz pisać całego kodu strony ręcznie. Zamiast tego możesz korzystać z gotowych elementów, takich jak:

nagłówki,
teksty,
obrazy,
przyciski,
galerie,
kolumny,
menu.

WordPress może być wykorzystany między innymi do stworzenia:

strony osobistej,
bloga,
strony firmy,
portfolio,
strony szkoły,
strony projektu,
sklepu internetowego.

2. Poznaj panel WordPress

Zaloguj się do panelu administracyjnego WordPress.

Rozejrzyj się po lewej stronie ekranu.

Spróbuj znaleźć:

Strony – tutaj tworzymy strony internetowe.
Wpisy – tutaj tworzymy wpisy, np. artykuły na blogu.
Media – tutaj znajdują się obrazy i inne pliki.
Wygląd – tutaj zmieniamy wygląd strony.
Wtyczki – tutaj można dodawać nowe możliwości do WordPressa.
Użytkownicy – tutaj można zarządzać użytkownikami strony.

Zadanie

Nie zmieniaj jeszcze żadnych ustawień.

Spróbuj samodzielnie znaleźć wszystkie wymienione miejsca w panelu.

3. Strona czy wpis?

W WordPressie możemy tworzyć między innymi strony i wpisy.

Strona

Strona zawiera najczęściej informacje, które nie zmieniają się bardzo często.

Przykłady:

O mnie
Kontakt
Oferta
Galeria
Regulamin

Wpis

Wpis jest przeznaczony przede wszystkim do publikowania nowych treści.

Przykłady:

Nowy artykuł na blogu
Relacja z wycieczki
Aktualności
Informacja o wydarzeniu

Na dzisiejszej lekcji będziemy przede wszystkim tworzyć strony.

4. Tworzymy pierwszą stronę – „O mnie”

Przejdź do:

Strony → Dodaj nową

Utwórz stronę o nazwie:

O mnie

Na stronie umieść informacje o sobie.

Nie musisz podawać prywatnych danych. Możesz stworzyć fikcyjną postać.

Przykład:

Mam na imię Kuba. Interesuję się komputerami, muzyką i sportem. W wolnym czasie gram w gry komputerowe i uczę się programowania.

5. Dodaj nagłówek

Na stronie dodaj nagłówek:

Cześć! Mam na imię…

Następnie pod nagłówkiem umieść kilka zdań opisujących Ciebie lub stworzoną przez Ciebie postać.

Pamiętaj:

nagłówki powinny wyróżniać ważne informacje,
długiego tekstu nie należy pisać jako jednego wielkiego nagłówka,
tekst powinien być łatwy do przeczytania.

Zadanie

Dodaj jeszcze jeden nagłówek:

Moje zainteresowania

6. Dodaj listę

Pod nagłówkiem Moje zainteresowania utwórz listę.

Przykład:

muzyka,
sport,
gry komputerowe,
fotografia,
podróże.

Wybierz własne zainteresowania.

Zadanie dodatkowe

Spróbuj stworzyć również listę numerowaną.

Przykład:

Programowanie
Grafika
Muzyka
Sport

Sprawdź, czym różni się lista punktowana od numerowanej.

7. Dodaj obraz

Teraz dodaj obraz związany z tematyką swojej strony.

Może to być na przykład:

komputer,
samochód,
aparat fotograficzny,
piłka,
gitara,
góry,
gra komputerowa,
grafika związana z Twoim hobby.

Dodaj obraz do strony.

Następnie sprawdź, czy możesz:

zmienić jego rozmiar,
zmienić jego położenie,
wyrównać go do lewej lub prawej strony,
dodać opis.

Ważne

Nie każde zdjęcie znalezione w Google można po prostu wykorzystać na swojej stronie.

Podczas kolejnych zajęć dowiesz się więcej o prawach autorskich i licencjach.

8. Dodaj link

Dodaj do swojej strony fragment tekstu:

Moja ulubiona strona internetowa

Następnie spraw, aby kliknięcie tego tekstu otwierało wybraną przez Ciebie stronę internetową.

Wyzwanie

Dodaj drugi link.

Tym razem link powinien prowadzić do strony związanej z Twoim hobby.

9. Utwórz drugą stronę

Teraz utwórz kolejną stronę:

Moje hobby

Umieść na niej:

nagłówek,
krótki opis hobby,
obraz,
listę,
link do ciekawej strony internetowej.

Postaraj się, aby druga strona wyglądała inaczej niż pierwsza.

10. Dodaj przycisk

Przejdź ponownie do strony O mnie.

Dodaj przycisk z napisem:

Poznaj moje hobby

Spraw, aby kliknięcie przycisku przenosiło użytkownika do strony:

Moje hobby

Wyzwanie

Zmień tekst przycisku na własny.

Przykłady:

Zobacz więcej
Dowiedz się więcej
Moje zainteresowania
Sprawdź
Zobacz moje hobby

11. Tworzymy stronę główną

Utwórz kolejną stronę:

Start

To będzie strona główna Twojej witryny.

Umieść na niej:

Nagłówek

Na przykład:

Witaj na mojej stronie!

Krótki tekst

Napisz kilka zdań zachęcających użytkownika do poznania Twojej strony.

Przykład:

Witaj na mojej stronie internetowej. Znajdziesz tutaj informacje o mnie, moich zainteresowaniach oraz rzeczach, które najbardziej mnie interesują.

Obraz

Dodaj duży obraz pasujący do tematyki strony.

Przycisk

Dodaj przycisk:

Dowiedz się więcej

Połącz go ze stroną O mnie.

12. Tworzymy menu

Strona internetowa powinna pozwalać użytkownikowi łatwo przechodzić pomiędzy jej poszczególnymi częściami.

Utwórz menu zawierające:

Start
O mnie
Moje hobby

Sprawdź, czy każdy element menu prowadzi do właściwej strony.

Test

Klikaj kolejno wszystkie elementy menu.

Sprawdź:

czy każda strona się otwiera,
czy nie ma błędnych linków,
czy można wrócić na stronę główną,
czy menu jest łatwe do znalezienia.

13. Eksperyment – zmień wygląd

Teraz możesz poeksperymentować.

Spróbuj zmienić:

wielkość nagłówków,
wielkość tekstu,
kolory,
wygląd przycisków,
rozmieszczenie elementów,
szerokość obrazów,
odstępy między elementami.

Nie musisz kopiować wyglądu żadnej konkretnej strony.

Spróbuj stworzyć własny styl.

14. Wyzwanie – „Zrób coś po swojemu”

Teraz przestajesz wykonywać instrukcje krok po kroku.

Twoim zadaniem jest samodzielne ulepszenie strony.

Dodaj przynajmniej trzy nowe elementy, których wcześniej nie używałeś.

Możesz spróbować dodać:

dodatkowy obraz,
kolejną sekcję,
dodatkowy przycisk,
cytat,
kolejną listę,
większy nagłówek,
kolumny,
dodatkowy link.

Sprawdź, jakie elementy oferuje edytor WordPress.

15. Eksperyment – „Zepsuj stronę”

Teraz możesz zrobić coś nietypowego.

Celowo zmień kilka elementów strony.

Możesz:

zmienić kolejność elementów,
dodać za dużo obrazów,
zmienić wielkość tekstu,
zmienić kolory,
przenieść przyciski,
zmienić nagłówki.

Następnie spróbuj przywrócić stronę do wyglądu, który uważasz za lepszy.

Cel ćwiczenia

Nie chodzi o stworzenie brzydkiej strony.

Chodzi o sprawdzenie, co można zmienić i jak działa edytor.

Nie bój się eksperymentować.

16. Test swojej strony

Przed zakończeniem sprawdź całą witrynę.

Czy masz:

stronę główną?
stronę „O mnie”?
stronę „Moje hobby”?
menu?
nagłówki?
tekst?
obrazy?
listy?
linki?
przyciski?

Następnie kliknij wszystkie elementy strony.

Sprawdź, czy wszystko działa.

17. Test użytkownika

Wyobraź sobie, że pierwszy raz wchodzisz na swoją stronę.

Odpowiedz sobie na pytania:

Czy od razu wiem, czego dotyczy strona?

Czy łatwo znaleźć najważniejsze informacje?

Czy wiem, gdzie kliknąć?

Czy tekst jest łatwy do przeczytania?

Czy obrazy pasują do treści?

Czy menu jest zrozumiałe?

Czy strona nie zawiera zbyt dużej ilości informacji?

Czy strona wygląda dobrze?

Jeżeli na któreś pytanie odpowiesz „nie”, spróbuj poprawić swoją stronę.

18. Zadanie końcowe

Stwórz własną wersję pierwszej strony internetowej.

Twoja witryna powinna zawierać:

minimum 3 strony,
menu,
minimum 2 obrazy,
minimum 2 przyciski,
minimum 2 linki,
nagłówki,
tekst,
minimum jedną listę,
stronę główną.

Temat strony wybierasz samodzielnie.

Możesz stworzyć stronę:

o swoim hobby,
o sporcie,
o grach,
o muzyce,
o samochodach,
o technologii,
o fotografii,
o podróżach,
o zwierzętach,
o fikcyjnej firmie,
o swoim przyszłym zawodzie.

19. Zadanie dla chętnych

Jeżeli skończyłeś wcześniej, spróbuj zrobić coś więcej.

Dodaj do swojej strony:

kolejną podstronę,
galerię zdjęć,
dodatkowe przyciski,
sekcję z ciekawostkami,
sekcję „Kontakt”,
formularz kontaktowy, jeżeli jest dostępny,
własne logo lub grafikę.

Spróbuj również znaleźć w WordPressie element, którego wcześniej nie używaliśmy.

Następnie sprawdź, co się stanie po jego dodaniu.

20. Pytania na koniec

Zastanów się:

Czym różni się strona od wpisu?
Do czego służy motyw WordPressa?
Do czego służy wtyczka?
Dlaczego strona powinna mieć menu?
Dlaczego nie należy umieszczać zbyt dużej ilości tekstu w jednym miejscu?
Dlaczego obrazy powinny pasować do treści?
Co sprawia, że strona internetowa wygląda profesjonalnie?
Co było najłatwiejsze podczas tworzenia strony?
Co było najtrudniejsze?
Co chciałbyś dodać do swojej strony podczas następnej lekcji?

Co już potrafisz?

Jeżeli wykonałeś wszystkie zadania, potrafisz już:

korzystać z panelu WordPress,
tworzyć strony,
dodawać tekst,
stosować nagłówki,
tworzyć listy,
dodawać obrazy,
dodawać linki,
tworzyć przyciski,
tworzyć menu,
łączyć ze sobą różne strony,
zmieniać wygląd strony,
testować działanie witryny.

To dopiero początek.

Na kolejnych zajęciach zajmiemy się tym, jak sprawić, żeby strona wyglądała bardziej profesjonalnie, była wygodna na telefonie i przypominała prawdziwą stronę internetową firmy lub organizacji.