Nowoczesne strony WWW. HTML5, CSS3, Adobe Muse, Wordpress - ebook

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 a znacznikiem zamykającym .

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 , jest widoczne w oknie przeglądarki. Sekcja 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 lub . 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 posiada swój znacznik zamykający . 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 ma dodatkowy parametr charset o wartości utf-8. Zapisuje się to tak: , 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 nie ma znacznika . 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:

. HTML 5 jest tolerancyjny – jeśli tego nie dodamy, nie będzie błędu.

14. Na koniec zmodyfikuj znacznik