Krzysztof Wołk
Nowoczesne strony WWW. HTML5, CSS3, Wordpress.
Wydanie II
Wydawnictwo Psychoskok Konin 2021
Wersja Demonstracyjna
Krzysztof Wołk
„Nowoczesne strony WWW. HTML5, CSS3, Wordpress.
Wydanie II”
Copyright © by Krzysztof Wołk, 2021
Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2021
Wszelkie prawa zastrzeżone.
Żadna część niniejszej publikacji nie
może być reprodukowana, powielana i udostępniana w jakiejkolwiek formie bez pisemnej zgody wydawcy.
Redaktor prowadząca: Renata Grześkowiak Projekt okładki: Krzysztof Wołk
Skład epub, mobi i pdf: Kamil Skitek
ISBN: 978-83-8119-785-4
Wydawnictwo Psychoskok Sp. z o.o.
ul. Spółdzielców 3, pok. 325, 62-510 Konin tel. (63) 242 02 02, kom. 695-943-706
http://www.psychoskok.pl/
http://wydawnictwo.psychoskok.pl/
e-mail:wydawnictwo@psychoskok.pl
Spis treści:
Część 1. HTML5 + CSS3 ...7
Wstęp ...7
Rozdział 01 – Wstęp, elementy blokowe i liniowe ...8
1. Interfejs użytkownika ...8
2. Zapisywanie pliku ...19
3. Podstawowa struktura strony internetowej ...21
4. Podstawowe elementy blokowe ...27
5. Podstawowe elementy liniowe...30
Zadanie...32
Rozdział 02 – Znaczniki semantyczne ...33
1. Wstęp ...34
2. Znaczniki semantyczne – czym są? ...35
3. Znaczniki w HTML5 ...37
4. Elementy, które nie tworzą sekcji – nie są widoczne na outline ...39
Zadanie...40
Zadanie...44
Rozdział 03 – cięcie techniczne ...48
1. Wstęp ...48
Zadanie...49
Zadanie...50
2. ID a CLASS ...51
Zadanie...53
Rodział 04 – wstęp do CSS...55
1. Nowy plik CSS ...55
Zadanie...58
2. Komentarze ...59
3. Podstawowe style ...59
4. Style...61
5. CLEAR...69
Zadanie...70
6. Logo, wyszukiwarka, menu, header ...71
Zadanie...74
1. Pozycjonowanie elementów w CSS ...78
2. Stylowanie nagłówka ...81
3. Obrazek i napisy w nagłówku ...90
4. Guzik „ZOBACZ WIĘCEJ”...96
5. Treść artykułów ...98
6. Kontener z newsami ...104
7. Zawartość stopki...108
Rozdział 06 – Responsive web design...115
Zadanie...115
Zadanie...124
Zadanie...127
Część 2. WORDPRESS.COM...129
Rozdział 01 - WORDPRESS.com ...129
1. Rejestracja użytkownika i zakładanie witryny...130
2. Panel Administracyjny ...134
2.1. Sekcja SITE:...135
2.2. Sekcja WYGLĄD: ...137
2.3. Sekcja TOOLS:...140
2.4. Sekcja ZARZĄDZAJ ...143
3. Dostosowanie wyglądu strony ...147
3.1. Zakładka DOSTOSUJ: ...147
4. Najpopularniejsze i najbardziej przydatne wtyczki dla wordpress.com ...148
5. Dodawanie nowej strony ...151
6. Dodawanie wpisów ...157
7. Co nam oferuje zatem wersja darmowa? ...157
Zadanie...158
Część 3. WordPress.org - Instalacja i obsługa systemu CMS ...159
1. Instalacja skryptu ...159
2. Omówienie funkcjonalności WordPress. ...166
2.1. Wpisy...168
2.1.1. Dodawanie nowego wpisu ...169
2.2.2. Kategorie ...184
2.2.3. Tagi...184
2.2. Media...185
2.3. Strony ...188
2.3.1. Dodawanie nowej strony ...190
2.4. Komentarze ...200
2.5. Wygląd strony...202
2.5.1. Motywy ...203
2.5.1.1. Instalowanie motywów z biblioteki WordPress. ....209
2.5.2. Dostosuj...212
2.5.3. Widgety...224
2.5.4. Menu...225
2.5.5. Tło...227
2.5.6. Install Plugins ...228
2.5.7. Edytor motywu ...234
2.6. Ustawienia ...236
2.6.1. Ogólne ...237
2.6.2. Pisanie...238
2.6.3. Czytanie...239
2.6.4. Dyskusja ...241
2.6.5. Media...242
2.6.6. Bezpośrednie odnośniki ...243
2.6.7. Prywatność ...244
2.7. Użytkownicy...244
Zadanie utrwalające ...248
3. Przegląd najpopularniejszych wtyczek ...249
3.1. Unyson ...250
3.2. Brizy...257
3.3. Beaver Builder ...260
3.4. Elementor ...263
3.5. Contact Form 7 ...265
3.6. UpdraftPlus...268
Część 1. HTML5 + CSS3
Wstęp
Z lektury niniejszej publikacji dowiesz się w sposób bardzo praktyczny, oparty na ciekawych przykładach prosto z życia wziętych jak możesz stworzyć od podstaw swoją pierwszą stronę internetową, korzystając z najnowszych technologii. Będzie to HTML 5, CSS 3, Wordpress oraz aplikacja Adobe Dreamweaver.
Aplikacja Dreamweaver nie jest wymagana, wystarczy dowolny edytor tekstowy np. Notepad++, który posiada kolorowanie składni.
Dzięki lekturze stworzysz strony www, które będą responsywne oraz będą posiadały efekt paralaksy. Nauczysz się ręcznie z poziomu kodu modyfikować strony tworzone w generatorach.
Materiały znajdziesz pod adresem:
https://drive.google.com/drive/folders/1QgT3rvFb723WtA E-XqoJefJ0pALYzb6j?usp=sharing
Rozdział 01 – Wstęp, elementy blokowe i liniowe
1. Interfejs użytkownika
Na początek otwieramy Adobe Dreamweaver i wybieramy opcję File > New (Plik > Nowy).
Wybieramy typ pliku i dajemy mu tytuł, który oczywiście potem można zmienić, klikamy przycisk Create (Utwórz).
Po włączeniu programu prawdopodobnie zobaczymy tylko okno z kodem. Dlatego też będziemy musieli włączyć kilka różnych opcji, aby widzieć zachodzące na przykład na stronie zmiany.
Na początek włączamy View > Split > Code-Live (Widok >
Podziel > Kod - Aktywny).
Okno powinno zostać podzielone na pół. Górna połowa będzie przedstawiała rezultat kodu napisanego w dolnej połowie.
Włączamy jeszcze opcję DOM. Window > DOM (Okno >
DOM).
Opcja ta pozwala na późniejsze sprawniejsze poruszanie się po kodzie.
Przydatne może również okazać się okienko FILES, pozwalające na sprawne poruszanie się po plikach znajdujących się na komputerze. Zwłaszcza, jeśli pracujemy na własnym sprzęcie.
Obydwa te okienka możemy sprawnie przypiąć do prawej krawędzi programu przytrzymując je za górną krawędź i przeciągając je w odpowiednie miejsce.
Następnie warto włączyć paski narzędziowe Window >
Toolbars > Standard (Okno > Paski narzędziowe > Standardowy).
Włączy się pasek jak na obrazku poniżej:
Pasek ten również można przypiąć do okna programu, przeciągając go w odpowiednie miejsce.
Po przypięciu wygląda następująco:
Następnie włączamy pozostałe paski narzędzi ( Window >
Toolbars > Common, a także Document) ( Okno > Paski narzędziowe > Wspólny oraz Dokument).
Tak jak poprzednie elementy należy je przypiąć do interfejsu.
Koniec Wersji Demonstracyjnej
