WERSJA DEMONSTRACYJNA

Wydawnictwo Psychoskok
Konin 2018

Krzysztof Wołk
„Nowoczesne strony WWW.

HTML 5, CSS3, Adobe Muse, Wordpress”

Copyright © by Krzysztof Wołk, 2018

Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2018

Wszelkie prawa zastrzeżone. Żadna część niniejszej publikacji nie

może być reprodukowana, powielana i udostępniana w

jakiejkolwiek formie bez pisemnej zgody wydawcy.

Projekt okładki: Krzysztof Wołk

Korekta: Bogusław Jusiak

Skład epub, mobi i pdf: Kamil Skitek

Krzysztof Wołk - www.wolk.pl

ISBN: 978-83-8119-294-1

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

Wstęp

1. Struktura HTML

1.1. Definiowanie struktury strony

1.2. Stworzenie podstawowej struktury strony

1.3. Podstawowe elementy blokowe

1.4. Podstawowe elementy liniowe

2. Znaczniki semantyczne

2.1. Wstęp do znaczników HTML 5

Metadata kontent

Sectioning kontent

Heading kontent

Phrasing kontent

Embedded kontent

Interactive kontent

2.2. Elementy tworzące sekcje

2.3. Elementy nietworzące sekcji

2.4. HTML 5 outline

3. Cięcie techniczne – wstęp do CSS

3.1. Cięcie techniczne

Zadanie

3.2. Tworzenie dokumentu CSS

Zadanie

Zadanie

Zadanie

Zadanie

4. Elementy blokowe i opływanie

4.1. Elementy blokowe

Zadanie

4.2. Opływanie

Zadanie: Pozycjonowanie elementów w nagłówku

Zasada 1.

Zasada 2.

Zadanie: Opływanie pozostałych elementów

5. Nowe selektory i pozycjonowanie CSS

Zadanie: Stylowanie menu

Zadanie: Stylowanie aside

Zadanie: Stylowanie boksu ustawień

Zadanie: Stylowanie nowości

Zadanie: Boksy reklamowe

Zadanie: Stopka

Zadanie dodatkow

6. Responsywny układ elementów HTML

7. Strona internetowa portfolio z formularzem kontaktowym

8. HTML 5 Pokaz Slajdów/Galeria WWW

9. Adobe Muse – WWW bez linii kodu

9.1. Nowy projekt – New Site

9.2. Widok Planowania

9.3. Tryb projektowania strony – Design

9.4. Wstęp do Parallax Scroll

9.5. Narzędzie tekstowe – wprowadzanie tekstu

9.6. Wstawianie grafik

9.7. Formularze kontaktowe

9.8. Wstawianie linków – Hyperlinks

9.9. Widgety

9.10. Zadanie

9.11. Responsywność na stronie

9.11.1. Responsywny tekst

9.11.2. Kotwice

Zadanie

9.12. Efekt Parallax Scroll

9.12.1. Przykładowy projekt logo dla strony.

Zadanie 1.

9.12.2. Logo z przesuwającym się tłem.

Zadanie 2.

9.12.3. Zmiana obrazu – przesuwanie logo

Zadanie 3.

9.12.4. Wyostrzenie rozmycia

Zadanie 4.

9.12.5. Parallax we wszystkie kierunki

9.12.5. Parallax we wszystkie kierunki

Zadanie 5.

Zadanie 6.

9.13. Większa strona z Parallaxą

9.13.1. Import elementów stworzonych w Adobe Edge Animate

9.13.2. Parallax

9.13.3. Kotwice

9.13.4. Dodanie Menu

9.13.5. Górne Menu przesuwane wraz ze stroną

9.13.6. Element zatrzymuje się i nie wyjeżdża

9.13.7. Wideo automatycznie zapętlone z pliku

9.13.8. Wideo pochodzące z YouTube.

9.13.9. Przysłonięcie wideo maską w formacie PNG

9.13.10. Formularze kontaktowe.

9.13.11. Formularz kontaktowy w Lightbox

9.14. Horyzontalny efekt Parallax Scroll

Zadanie 1.

9.14.1. Widgety

9.14.1.1. Widget o nazwie Fullscreen Video Background.

Zadanie 2.

9.14.1.2. Widget Interactive Split Comparison

Zadanie 3.

Zadanie 4.

10. Wordpress jako darmowy system blogowy – wordpress.com

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 aplikacje Adobe Dreamweaver oraz Adobe Muse.

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://goo.gl/8aBNQ2.

1. Struktura HTML

1.1. Definiowanie struktury strony

1. Utwórz na dysku katalog „wypasionastrona”.

2. Otwórz program Adobe Dreamweaver CS6 i z menu Site wybierz New Site.

3. W wyświetlonym okienku wpisz nazwę witryny oraz wskaż miejsce położenia wcześniej utworzonego folderu „wypasionastrona”.

4. Kliknij w „Save”.

5. Zlokalizuj panel Files w Adobe Dreamweaver. Będzie on pokazywał wszystkie pliki i katalogi, które umieścisz w folderze „wypasionastrona”, lecz pliki i foldery możesz tworzyć bezpośrednio w środowisku Dreamweavera. Będą one zapisywane właśnie w tym katalogu.

6. Utwórz pierwszą czystą stronę HTML o nazwie „index.html”. Z menu File wybierz New. W wyświetlonym okienku zaznacz opcje jak niżej.

7. Zauważ, że w panelu Files pojawił się plik „index.html”. Będzie to nasza strona główna. Zawsze pierwszą stronę należy nazwać „index.html”.

8. Stwórz dodatkowe foldery na przyszłe dodatkowe pliki. Klikając w panelu Files prawym przyciskiem myszy w nazwę witryny, wybierz New folder. Stwórz cztery foldery o następujących nazwach:

a. „_assets”,

b. „_css”,

c. „_images”,

d. „_scripts”.

9. W tym momencie panel Files powinien wyglądać podobnie do tego poniżej.

10. Sprawdź na dysku folder „wypasionastrona” – struktura odpowiada tej stworzonej w programie Dreamweaver.

11. Do poszczególnych folderów przekopiuj pliki znajdujące się w materiałach.

12. Po przekopiowaniu kliknij prawym przyciskiem myszy w nazwę witryny i wybierz Refresh. Powinieneś zobaczyć wszystkie pliki w panelu Files w odpowiednich katalogach.

1.2. Stworzenie podstawowej struktury strony

1. Kliknij dwukrotnie w „index.html”, aby otworzyć go do edycji.

2. W Dreamweaverze pracuj póki co w trybie Split z podglądem Live.

3. Zobaczysz podstawową strukturę swojej strony HTML:

4. Napisz coś pomiędzy znacznikiem otwierającym <body> a znacznikiem zamykającym </body>.

5. Po napisaniu fragmentu tekstu kliknij w okno podglądu po prawej stronie. Powinieneś zobaczyć swój tekst na stronie internetowej. Wszystko, co napiszesz w znacznikach <body>, jest widoczne w oknie przeglądarki. Sekcja <head> służy do umieszczania dodatkowych metainformacji, np. dla wyszukiwarek internetowych. Stronę można podejrzeć, otwierając ją w przeglądarce internetowej, rozwijając ikonkę i wybierając Preview in Firefox. Mogą tam pojawić się inne nazwy przeglądarek, w zależności od konfiguracji komputera, lecz rekomendowanymi przeglądarkami do pracy nad stronami są Firefox lub Google Chrome.

6. Dokument HTML składa się z zagnieżdżonych znaczników HTML. Każdy znacznik ma swoją nazwę i jest umieszczony pomiędzy znakami „<” oraz „>”, np. znacznik <body> lub <html>. Większość znaczników określa pewien zakres informacji, które są objęte tymi znacznikami. Z tego powodu większość znaczników posiada znaczniki otwierające i zamykające. Znaczniki zamykające są tak samo zbudowane jak otwierające, z tą różnicą że wstawiany jest znak „/” zaraz po „<”, czyli np. znacznik otwierający <body> posiada swój znacznik zamykający </body>. Wszystko, co znajdzie się pomiędzy tymi dwoma znacznikami, będzie należało do „body” – tak jak wcześniej napisany przykładowy tekst.

7. Skoro pewne elementy są zagnieżdżone w sobie, warto tę strukturę wizualizować w postaci wcięć w kodzie. Pamiętaj, że jest to istotne z punktu widzenia przyszłego rozbudowywania serwisu. Wcięcia możesz robić, zaznaczając jakiś blok kodu i wciskając klawisz Tab (tabulator). Jeśli wciśniesz go wraz z klawiszem Shift, wcięcia będą się robiły w odwrotną stronę (usuwasz wcięcia).

8. Zrób wcięcia tak, aby było widać, które elementy i w jakich są zagnieżdżone.

Powinno to wyglądać mniej więcej tak:

9. Strukturę takiej prostej strony można przedstawić następująco:

10. Oczywiście jest to najbardziej podstawowa struktura, jednak każdy, nawet najbardziej rozbudowany, serwis internetowy można przedstawić w ten sposób.

11. Pomiędzy „<” a „>”, oprócz nazwy znacznika, mogą znaleźć się dodatkowe parametry tego znacznika, np. powyżej znacznik <meta> ma dodatkowy parametr charset o wartości utf-8. Zapisuje się to tak: <meta charset=”utf-8”>, a więc nazwy znaczników oraz nazwy parametrów piszemy bez cudzysłowów. Natomiast wartości parametrów zawsze starajmy się umieszczać w cudzysłowie.

12.  Da się zauważyć, że nie wszystkie znaczniki mają znaczniki zamykające. W powyższym przykładzie znacznik <meta> nie ma znacznika </meta>. Chodzi o to, że wszystkie niezbędne informacje zostały przekazane bezpośrednio w samym znaczniku w postaci parametrów. W tym przypadku chodziło o przekazanie, w jakim standardzie strona jest zakodowana – charset=utf-8.

13.  Ciekawostka: znaczniki, które nie wymagają domknięcia, w HTML 4 trzeba było domykać same w sobie, czyli np. dodając znak „/” na samym końcu:

<meta charset=”utf-8” />. HTML 5 jest tolerancyjny – jeśli tego nie dodamy, nie będzie błędu.

14. Na koniec zmodyfikuj znacznik <title>. Definiuje on to, co pokazuje się w górnym pasku przeglądarki. Sprawdź, wciskając klawisz F12. Twoja strona powinna wyświetlić się w domyślnej przeglądarce internetowej.

1.3. Podstawowe elementy blokowe

1. Elementy blokowe to takie, które „rozpychają” się na całą szerokość elementu nadrzędnego – w naszym przypadku na całą szerokość okna przeglądarki. Wszystko, co jest po elementach blokowych, wyświetlane jest pod nimi.

2. Znaczniki <h1>, <h2>… </h6> definiują nagłówki strony (np. nagłówek artykułu). <h1> jest elementem najważniejszym, a co za tym idzie – wyświetlany jest największą czcionką.

3. Otwórz z FTP plik „cw01 – podglad.jpg”. Jest to podgląd całego ćwiczenia – jak powinno ono wyglądać na koniec tej lekcji. W podglądzie na czerwono zaznaczone są na czerwono typy znaczników, którymi zostały wykonane dane elementy.

4. Skonstruuj wszystkie znaczniki nagłówkowe (<h1>, <h2>, <h3>) znajdujące się w dokumencie.

5.  Element <p> definiuje paragraf tekstu. Na stronie http://pl.lipsum.com/ możesz wygenerować przykładowy tekst „lorem ipsum”, aby wstawić go na stronę.

6. Zdefiniuj w odpowiednich miejscach paragrafy tekstu, posługując się przykładowym „lorem ipsum”.

7.  Element <img> musi zawsze posiadać następujące parametry:

• src=”ścieżka dostępu do obrazka JPG, GIF lub PNG”;

• alt=”napis który pojawia się w momencie ładowania obrazka lub po przytrzymaniu kursora myszy nad obrazkiem”.

Przykład wstawienia obrazka może wyglądać tak:

<img src=”_images/foto.jpg” alt=”obrazek z wakacji”>.

8. Wstaw w dokumencie w odpowiednich miejscach obrazki – tak jak pokazano na podglądzie.

9.  Podczas pisania znacznika img w Dreamweaverze program podpowiada fragmenty kodu. Gdy postawisz pierwszy cudzysłów po src=, możesz wybrać

i wskazać element w dowolnym katalogu w strukturze strony. Ważne, aby to był katalog należący do witryny!

10. Takie elementy listy, jak np.:

• pierwszy,

• drugi,

• trzeci,

definiuje się przy pomocy znacznika <ul>, a następnie poszczególne elementy przy pomocy znacznika <li>. Taka przykładowa lista mogłaby wyglądać następująco:

<ul>

<li>pierwszy</li>

<li>drugi</li>

<li>trzeci</li>

</ul>.

11. Stwórz listy w odpowiednim miejscu – tak jak na podglądzie.

12.  Na podglądzie elementy listy są w kolorze fioletowym i podkreślone. Ponadto w podglądzie występuje napis „więcej” i również jest podkreślony. Są to linki odsyłające do innych stron, lecz w tym przypadku są to już elementy liniowe, o których mowa w następnym rozdziale.

1.4. Podstawowe elementy liniowe

1. Elementy blokowe układają się jeden na drugim. Czasami jednak chcemy np. wyróżnić fragment tekstu lub wstawić w tekście odnośnik i nie chcemy, aby elementy spadały niżej, lecz były wyświetlane w tej samej linii.

2. Element <a> jest odnośnikiem do innej strony, innej witryny bądź innego miejsca na tej samej stronie. Może przyjmować takie parametry:

a. href=”adres strony lub witryny do, której linkujemy”;

b. target=”_blank” – link otworzy się w nowej karcie przeglądarki. Jeśli nie wstawisz tego parametru, link otworzy się domyślnie w tym samym oknie;

c. Przykład odnośnika linkującego do strony wp.pl może wyglądać następująco:

<a href=http://www.wp.pl target=”_blank”>kliknij tutaj aby przejść do wp.pl</a>;

d. Czy to, co wpiszesz lub umieścisz pomiędzy elementami <a> i </a>, będzie klikalne i odnosiło do tego, co napiszesz w parametrze href.

3. Spraw, aby wszystkie elementy w listach były odnośnikami. Póki nie mamy gotowej witryny, w miejsce href wstawiaj hash (znak „#”).

4. Następnie zaraz po elemencie <p> w odpowiednim miejscu (według podglądu) wstaw odnośnik „więcej”.

5. Element <b> pogrubia tekst, a element <i> robi z niego kursywę, choć tak naprawdę wygląd elementów, jak np. pogrubienie czy kursywa, powinno się uzyskiwać za pomocą arkuszy stylów, o których będzie mowa w następnych zajęciach. W HTML 5 często stosuje się dodatkowe znaczniki semantyczne, a więc takie, które nie mówią nic o tym, jak element ma wyglądać, ale o tym, co on oznacza. W HTML 5 substytutami <b> oraz <i> są elementy <strong> oraz <em>. Oznaczają one, że pewien fragment jest „istotny”. Większość przeglądarek wyświetla takie „istotne” fragmenty jako pogrubienie i kursywę, jednak nie musi tak być. Standard się rozwija i w przyszłości <strong> nie musi być pisany boldem, tylko np. większą czcionką w innym kolorze.

6. Zastosuj do wybranych fragmentów tekstu elementy <strong>, <em> i <a>.

2. Znaczniki semantyczne

1. Zanim przejdziemy do omawiania znaczników semantycznych, uzupełnijmy stronę o pozostałe elementy, aby kontent „wypasionej” strony był adekwatny do tego, co widać na screenie „opisana struktura.jpg” w katalogu „_assets”.

2. Otwórz w Dreamweaverze witrynę „cw 03 – start”. W tym katalogu znajduje się poprawnie wykonane ćwiczenie z poprzednich zajęć.

3. Na naszej stronie brakuje sekcji „Dołącz do nas” widocznej na screenie. Napisz ją zaraz pod nagłówkiem <h1>Wypasiona strona</h1>:

a. Napis „Dołącz do nas!” powinien być nagłówkiem <h2>.

b. Napis „jesteśmy na:” powinien być paragrafem <p>.

c. Ikonki social media powinny być odnośnikami.

4. Jeśli porównasz to, co zrobiliśmy na poprzednich zajęciach, z tym, co jest na screenie, zauważysz, że brakuje jeszcze pola wyszukiwarki. Wyszukiwarka jest bardzo prostym formularzem. W HTML formularze definiuje się przy pomocy znacznika <form>. To, co jest pomiędzy znacznikami <form>, definiuje zawartość tego formularza. W szczególności może to być pole do wprowadzania danych – znacznik <input>. Przepisz zaraz za elementem </ul> definiującym strukturę menu poniższy kod dla wyszukiwarki:

Znaczniki semantyczne to takie, które nadają znaczenie zarówno ludziom, jak i maszynom (przeglądarkom internetowym). Znaczniki semantyczne służą właśnie do nadawania znaczenia poszczególnym elementom strony. Na początku wybór odpowiednich znaczników może być dość trudny. Weźmy dla przykładu nagłówki, których jest sześć: <h1>, <h2>… <h6>. W przeglądarce <h1> jest największy, a <h6> najmniejszy.

Zawartość <h1> powinna być bardziej istotna niż np. zawartość <h3>. Z drugiej strony istnieje możliwość zmiany ich wielkości wyświetlania. Bez problemu można uczynić znacznik <h3> większym od <h1>. Z perspektywy przeglądarki internetowej nie stanowi to różnicy, ale jeśli człowiek spojrzy na kod, za pierwszym razem może być zaskoczony i zmylony – element <h3> nie powinien być większy niż <h1>.

Po lewej stronie jest zaprezentowana symbolicznie strona w XHTML, a po prawej w HTML 5.

2.1. Wstęp do znaczników HTML 5

Możesz myśleć o znacznikach HTML 5, że są zorganizowane według takich kategorii:

• Metadata kontent

• Flow kontent

• Sectioning kontent

• Heading kontent

• Phrasing kontent

• Embedded kontent

• Interactive kontent

Metadata kontent

Zawartość, która ustanawia zachowanie całej zawartości strony. Używa się jej do połączenia dokumentu HTML z innymi dokumentami, np. CSS. Np. element <meta> lub elementy <style> lub <scripts>. Elementy metadata kontent są zlokalizowane w sekcji <head>.

Sectioning kontent

Ta kategoria jest nowa w HTML 5 i zawiera takie elementy, jak: <article>, <aside>, <nav> czy <section>. W3C wyjaśnia sectioning kontent jako „defining the scope of headings and footers”, czyli że mogą zawierać nagłówki i stopki (może być ich więcej na stronie).

KONIEC WERSJI DEMONSTRACYJNEJ

Dziękujemy za skorzystanie z oferty naszego wydawnictwa i życzymy miło spędzonych chwil przy kolejnych naszych publikacjach.

Wydawnictwo Psychoskok