Krzysztof Wołk

Nowoczesne strony WWW. HTML5, CSS3, Wordpress.

Wydanie II

Wersja Demonstracyjna

Wydawnictwo Psychoskok
Konin 2021

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

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/1QgT3rvFb723WtAE-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