'Nowoczesne strony WWW' Krzysztofa Wołka to podręcznik do samodzielnego tworzenia własnej wizytówki w Internecie, a nawet czegoś więcej – kreowania swojej obecności w sieci. Koniec ze zlecaniem tego typu prac. Koniec z „czarną magią”, która – jak każda magia – okazała się do perfekcji doprowadzoną umiejętnością jak każda inna. Projektowanie własnej strony, które jeszcze nie tak dawno wydawało się przedsięwzięciem zarezerwowanym dla wtajemniczonych (programistów) stało się teraz dziecinnie proste, intuicyjne jak obsługa smartfona. Wystarczy skorzystać z istniejących szablonów, tzn. wybrać sobie taki, który najbardziej się spodoba, i dopasować go do swoich potrzeb. Nie znaczy to wcale, że strona ma wyglądać jak miliony czy miliardy innych (jak w Facebooku). Inwencja zawsze pozostanie w cenie, a chęć wyróżnienia się z tłumu chyba jest wpisana w ludzkie DNA. Już na podstawie spisu treści przewodnika ułożonego w stylu „krok po kroku” łatwo się zorientować w tematyce, której wcale nie trzeba ogarniać (tzn. rozumieć), a wystarczy ją po prostu zastosować zgodnie z instrukcją. Autor nie poprzestaje na przekazaniu podstawowych wiadomości, jak to ma miejsce zwykle w podręcznikach, ale przedstawia czytelnikom narzędzia, dzięki którym – jeśli tylko chcą – mogą wspiąć się na sam szczyt. Kiedyś mówiono, że co niezapisane, nie istnieje. Później, że nie istnieje ten, kto nie ma własnej strony WWW albo konta na Facebooku. Nie wszyscy jednak chcą być znalezieni. Ci mogą sobie darować lekturę książki Wołka. Ci natomiast, którym zależy na własnym wizerunku, a tym bardziej ci, którzy wykorzystują Internet jako narzędzie pracy – sposób na życie, środek do realizacji swoich pragnień, poznawania świata czy nawet zarabiania – powinni sięgnąć po 'Nowoczesne strony WWW', by posiąść wiedzę oraz umiejętności umożliwiające realizację zamierzeń. Tym bardziej że autor nie poprzestał na standardowych stronach internetowych, ale część swojej pracy poświęcił na przedstawienie ich dopełnienia, jakim z pewnością są blogi umożliwiające przekazywanie opinii, poglądów, a także szybkie interakcje z czytelnikami/użytkownikami. Skupił się przede wszystkim na darmowym systemie blogowym WordPress, ale nie pominął opcji płatnych, ekskluzywnych, stwarzających użytkownikom więcej możliwości. Jeśli nawet nie ma się wrażenia, że świat tradycyjnych mediów (prasy, radia, telewizji) przeminął, Internet – który jeszcze ich nie zastąpił – zmienił i wciąż zmienia ten świat. A nade wszystko jest bardziej egalitarny. Jak w Hyde Parku każdy może siebie wyrazić, jeśli chce i potrafi. A jeśli ma co wyrazić (coś ciekawego), ktoś może się tym zainteresować. Dopełnieniem tego podręcznika jest druga książka Krzysztofa Wołka – 'Rzeczywistość wirtualna dla każdego', która zawiera sporą część informacji z Nowoczesnych stron, stanowiących podstawę i wprowadzenie do „wyższego wtajemniczenia”, jakim jest niewątpliwie kreowanie VR i korzystanie z urządzeń VR. Warto więc wobec zainteresowania tematem obie pozycje wziąć pod uwagę.
Darmowy fragment publikacji:
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
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ż
folderu
utworzonego
wcześniej
miejsce
„wypasionastrona”.
położenia
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
lecz pliki
„wypasionastrona”,
tworzyć
bezpośrednio w
środowisku Dreamweavera. Będą one
zapisywane właśnie w tym katalogu.
foldery możesz
i
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
foldery
o następujących nazwach:
folder. Stwórz
cztery
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
dodatkowych metainformacji,
umieszczania
dla
wyszukiwarek
internetowych. Stronę można podejrzeć,
otwierając ją w przeglądarce internetowej, rozwijając ikonkę
np.
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ść
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.
znaczników
posiada
znaczniki
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:
takiej prostej strony można przedstawić
9. Strukturę
następująco:
10. Oczywiście jest to najbardziej podstawowa struktura,
serwis
jednak każdy, nawet najbardziej
internetowy można przedstawić w ten sposób.
rozbudowany,
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
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.
informacje
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
elementem
jest
h1
idzie – wyświetlany
(np.
najważniejszym, a co za tym
największą czcionką.
artykułu).
nagłówek
jest
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
wygenerować
stronie
przykładowy tekst „lorem ipsum”, aby wstawić go na stronę.
http://pl.lipsum.com/
możesz
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.
do
omawiania
Zanim
przejdziemy
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
ćwiczenie
się poprawnie wykonane
katalogu
znajduje
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:
ludziom,
jak
i maszynom
Znaczniki semantyczne to takie, które nadają znaczenie
zarówno
(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
Pobierz darmowy fragment (pdf)