HTML i CSS w praktyce: Profesjonalne tworzenie stron internetowych

Możliwości i ograniczenia Internetu

Zasady projektowania i tworzenia serwisów internetowych

• rozpoznanie potrzeb Klienta
• wybór odpowiedniej technologii
• przygotowanie struktury serwisu
• omówienie układu strony internetowej
• struktura strony internetowej

Standardy budowy stron WWW

• typy dokumentów HTML
• HTML4 i HTML5
• CSS
• JavaScript i popularne biblioteki
• jQuery, Spry
• inne technologie

Podstawowe elementy strony WWW

• tekst
• grafika
• style CSS
• biblioteki JavaScript
• elementy i animacje
• PDF
• wideo i muzyka

Interfejs i narzędzia Adobe Fireworks

• narzędzia wektorowe
• narzędzia bitmapowe
• właściwości grafiki
• formaty graficzne stosowane w Internecie

Tworzenie elementów graficznych na stronę WWW w programie Adobe Fireworks

• import zdjęć i grafiki wektorowej
• edycja grafiki
• dodawanie efektów i cieni
• skalowanie
• użycie maski

Tworzenie projektu strony www

• import i dostosowanie grafiki
• zarządzanie wielkością
• dodawanie tekstów
• edycja kolorów
• nawigacja
• stopka, panele boczne
• reklamy i nowości
• cięcie grafiki na potrzeby języka HTML5 i stylów CSS

Cięcie, edycja i eksport projektu

• użycie narzędzia Slice tool
• wybór odpowiedniego formatu
• aktualizacja grafiki

Tworzenie elementów ozdobnych (strzałki, bullety, nagłówki itp.)

• zasady tworzenie niewielki plików graficznych
• przygotowanie prostych grafik śródtekstowych
• zasady eksportu grafiki bez tła

Zapis i optymalizacja elementów graficznych

• zasady optymalizacji plików graficznych
• zapis elementów graficznych dla strony WWW
• prototypy stron WWW

Przygotowanie struktury serwisu WWW

• site – definicja i zasady tworzenia i edycji
• budowa optymalnej struktury katalogów
• przygotowanie katalogu site’a

Interfejs programu Adobe Dreamweaver CS6

• okna i palety programu
• dopasowanie ekranu roboczego do własnych potrzeb
• tworzenie własnych skrótów klawiaturowych
• instalacja darmowych dodatków np. Lorem& More, Lightbox Gallery
• korzyści użycia i problemy z dodatkami

Tworzenie site’a

• konfiguracja site’a w programie Dreamweaver

Porównanie różnych metod budowy layoutu strony WWW

• zasady tworzenie układu strony WWW
• zasady tworzenie stron w oparciu o znacznik i style CSS
• Zasady użycia semantycznych znaczników HTML5
• zalety budowy strony w oparciu o znaczniki HTML5 i style kaskadowe

Przegląd layoutów stron WWW

• 960 Grid system
• Przegląd i porównanie wybranych układów strony internetowej
• układ jednokolumnowy
• układ dwukolumnowy
• układy wielokolumnowe

Zasady budowy layoutu w Adobe Dreamweaver

• Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www
• formatowanie elementów tekstowych
• wykorzystanie listy
• grafika na stronie www

Zasady użycia stylów CSS

• zasady tworzenie stylów CSS
• rodzaje selektorów
• style typu class, tag, id, compound
• dziedziczenie właściwości
• podstawowe właściwości stylów
• narzędzia tworzenia i edycji stylów w programie Adobe Dreamweaver CS6
• arkusze stylów
• łączenie arkusza ze stroną HTML
• CSS3

Tworzenie strony WWW

• podstawowe informacje o znacznikach HTML5
• tworzenie strony internetowej w oparciu o znaczniki semantyczne HTML5
• analiza struktury strony (headrer, footer, section, content, nav i inne elementy)

Wprowadzanie treści strony

• wprowadzanie tekstów
• wykorzystanie grafiki
• logiczna struktura strony WWW
• wykorzystanie listy, akapitów i znaczników nagłówkowych
• dodawanie elementów nawigacyjnych

Formatowanie strony i edycja układu strony w oparciu o style CSS

• wykorzystanie różnorodnych selektorów CSS
• zasady dziedziczenia
• hierarchia stylów
• użycie zaawansowanych właściwości CSS do formatowania elementów strony i jej układu

Tworzenie atrakcyjnej nawigacji

• wykorzystanie listy do tworzenia nawigacji
• wykorzystanie stylów CSS do edycji wyglądu menu
• dodawanie łączy
• efekty specjalne nawigacji (wykorzystanie pseudoklas: hover, :active, :selected)

Optymalizacja strony pod kątem wyszukiwarek internetowych

• logiczna struktura strony
• znaczniki w sekcji head
• zasady tworzenia tytułu i użycia nagłówków
• teksty alternatywne, nazwy łączy, itp
• logika strony i znaczników

Praca z grafiką

• zarządzanie wielkością, optymalizacja grafiki
• kadrowanie i efekty graficzne w programie Dreamweaver CC
• wykorzystanie elementów tylu Smart Object i współpraca z plikami Photoshopa
• teksty alternatywne
• dodawanie łączy
• formatowanie grafiki za pomocą stylów CSS

Zaawansowane formatowanie tekstów

• zasady formatowania tekstów na stronie WWW
• wykorzystanie typografii i stylów CSS
• formatowanie tekstów za pomocą stylów CSS

Arkusze stylów CSS  głębsze spojrzenie

• formatowanie grafiki, list, nagłówków
• ostateczne dostosowanie wyglądu strony przy użyciu stylów CSS
• dostosowanie stylów do poprawnego wyświetlania strony w różnych przeglądarkach
• ciekawe efekty wizualne z użyciem stylów CSS
• dodawanie tła strony
• interaktywne elementy nawigacji
• wykorzystanie CSS

Tworzenie animacji na bazie stylów CSS

• animacje na stronie www
• animacje za pomocą stylów CSS

Budowa szablonów stron WWW

• tworzenie szablonów stron internetowych w programie Dreamweaver
• rodzaje szablonów
• wykorzystanie szablonów do tworzenie kolejnych podstroi serwisu
• edycja szablonu i aktualizowanie podstron

Zasady użycia animacji Aniamte na stronie WWW

• zalety i wady technologii Aniamte na stronie WWW
• osadzenie elementów Aniamte na stronie WWW
• alternatywy dla technologii Aniamte

Tworzenie stron WWW na podstawie szablonów Dreamweavera

• użycie elementów Aniamte, animacji na stronie WWW
• wykorzystanie i formatowanie tabel
• zapis i testowanie stron
• dodawanie łączy
• tworzenie i edycja stylów CSS dla elementów nawigacyjnych
• zaawansowane sposoby użycia stylów do formatowania menu

Praca z formularzem WWW

• zasady budowy formularza
• tworzenie interaktywnego formularza kontaktowego
• formatowanie elementów formularza za pomocą stylów CSS
• walidacja i testowanie działania formularza na stronie WWW
• elementy Spry w budowie formularzy
• edycja stylów CSS formularza
• przygotowanie formularza do przesyłania danych
• tworzenie strony potwierdzającej przesłanie danych

Testowanie i walidacja strony WWW

• testowanie poprawności działania strony w różnych przeglądarkach
• testowanie poprawności kodu HTML i stylów CSS

Konfiguracja serwera WWW

• konfiguracja site’a
• wybór firmy hostingowej i zakup domeny
• serwer ftp
• konfiguracja Adobe Dreamweaver CC do pracy z serwerem

Przesyłanie i aktualizacja strony na serwer WWW

• połączenie z fizycznym serwerem WWW
• przesyłanie strony na serwer
• pobieranie stron z serwera
• aktualizacja strony na serwerze WWW
• synchronizacja

JavaScrip  na stronie WWW

• Ajax i strony WWW
• Adobe Spry
• JQuery, MooTools

Współpraca z dodatkami JavaScript

• Adobe Widget Browser oraz Adobe Exchange
• wykorzystanie widgetów do tworzenia animacji nagłówka oraz innych elementów strony
• inne dodatki

Tworzenie interaktywnej galerii typu Lightbox

• Instalacja biblioteki Lightbox
• przygotowanie grafiki
• struktura galerii
• edycja i formatowanie galerii
• edycja kodu JavaScript
• publikacja galerii

Tworzenie elementów Ajax

• tworzenie interfejsu strony w oparciu o zakładki, panel typu Accordion czy Collapsible Panel
• edycja stylów CSS dla elementów Spry

Osadzenie mapy Google na stronie

• wykorzystanie dodatku Google Map do osadzenia mapy

Dodatkowe biblioteki JavaScript np. JQuery

• instalacja i wykorzystanie gadżetów JQuery
• tworzenie galerii zdjęć przy użyciu biblioteki Lightbox

Pływające reklamy Aniamte na stronie WWW

• zasady dodawania reklam umieszczonych ponad stroną internetową

Wykorzystanie filmów wideo i muzyki na stronie WWW

• problemy z przeglądarkami i wojna formatów
• praca z plikami FLV
• wykorzystanie plików mp4, mp3, ogg
• tworzenie odtwarzacza wideo na stronie WWW
• tworzenie odtwarzacza audio na stronie www

Tips & Triks, biblioteki Javascript oraz dodatki do programu

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i aplikacje

Adobe Dreamweaver

• Projektowanie serwisu
• Tworzenie stron HTML
• Tworzenie stylów CSS

Projektowanie i tworzenie stron WWW

• Język HTML5
• Struktura strony
• Tworzenie zaawansowanych układów stron
• Elementy graficzne
• Wykorzystanie CSS

Praca z CSS

• Nowoczesne style CSS
• Selektory CSS
• Projektowanie bez użycia class i id
• Grafika CSS
• Gradienty i zaokrąglone narożniki
• Cienie

Animacje CSS

• Tworzenie prostych przejść CSS
• Interaktywne przejścia CSS

Media Queries – Zapytania o media

• Tworzenie punktów kontrolnych
• Dopasowanie wyglądu strony dla różnych wielkości ekranu
• Skalowanie strony na urządzenia mobilne
• Modyfikacja wyglądu strony
• Usuwanie i dodawanie elementów w zależności od wielkości stron
• Tworzenie mobilnej strony internetowej

Formularze HTML5

• Typy pól formularza
• Dodawanie formularzy na stronie internetowej i aplikacji
• Walidacja HTML5
• Współpraca z JavaScript

Podstawy języka JavaScript

• Typy danych, zmienne, obiekty
• Dostęp do obiektów
• Funkcje, tworzenie funkcji
• Tworzenie prostych instrukcji warunkowych
• Budowa różnego typu kalkulatorów (walutowe, BMI, temperatury, jednostek itp.)

Biblioteki JavaScript

• Poznajemy przykładowe biblioteki JavaScript
• Instalacja biblioteki
• Praca z Lightbox, jQueryCcle
• Podstawy jQuery, Zepto
• Selektory, zdarzenia i funkcje

jQueryMobile

• Tworzenie mobilnych serwisów i aplikacji
• Sterowanie wyglądem
• Theme Roller – tworzenie własnych skórek
• Dodajemy przejścia
• Elementy interaktywne
• Listy, nawigacja, menu

Adobe Edge Animate

• Zasady tworzenia animacji HTML5 w Edge Animate
• Podstawy animacji
• Tworzenie banerów HTML5
• Zapis i eksport animacji
• Wykorzystanie animacji Adobe Edge na stronie internetowej i aplikacji

Adobe Edge Animate – głębsze spojrzenie

• Złożone animacje
• Symbole
• Dodajemy elementy interaktywne
• Podstawy JavaScript w programie Adobe Edge Animate
• Projektujemy interaktywne banery, czołówki i animacje

Testowanie strony na urządzeniach mobilnych

• Adoobe Edge Inspect
• Ripple
• Testowanie na tabletach, telefonach komórkowych

Tworzenie natywnej aplikacji iOS, Windows, Android

• Współpraca z serwisem PhoneGapBuild
• Zapis i tworzenie aplikacji
• Testowanie aplikacji
• Zasady publikacji pracy w App Store i Google Play