Kurs

HTML i CSS w praktyce: Profesjonalne tworzenie stron internetowych

O kursie

Kurs HTML i CSS – profesjonalne tworzenie stron internetowych umożliwia uczestnikom korzystać z nowych możliwości jakie oferuje język HTML5 i CSS3. Do pracy nie używają jednak notatnika, ale produktów firmy Adobe: Photoshop / Illustrator (przygotowanie projektu strony i jej elementów graficznych) oraz Dreamweaver (najlepszy na rynku edytor HTML i CSS), a także licznych dodatków np. zewnętrznych bibliotek JavaScript.

Na szkoleniu powstają nowoczesne, atrakcyjne wizualnie i zgodne ze standardami strony internetowe. Uczestnicy poznają wszystkie etapy pracy od pomysłu, przez tworzenie galerii, formularzy i animacji aż po pełne kodowanie HTML/HTML5 i CSS/CSS3. Stronę zamieszczają na serwerze www, gdzie samodzielnie ją aktualizują i testują efekty swojej pracy. Powstałe strony responsywne są zgodne z zasadami RDW (Responsive Web Design) a budowane aplikacje mobilne gotowe do publikacji w App Store lub Google Play.

Kurs HTML i CSS w dużej mierze polega na ćwiczeniach praktycznych, umożliwiając tworzenie stron www pod okiem doświadczonego trenera.
Dlaczego warto wziąć udział?

Czego się nauczysz

W ramach Szkolenie HTML i CSS w praktyce – moduł I:

  • Projektowania i tworzenia grafiki internetowej i jej optymalizacji
  • Wykorzystania narzędzi graficznych do edycji i dopasowania zdjęć
  • Użycia filtrów i efektów dla zdjęć oraz elementów graficznych
  • Dopasowania kolorów i jasności zdjęć
  • Sterowania wielkością zdjęć i elementów graficznych
  • Cięcia projektu na elementy konieczne do budowy strony HTML
  • Tworzenia atrakcyjnych nagłówków oraz reklam graficznych
  • Wykorzystanie programu Adobe Dreamweaver do edycji kodu HTML5 i stylów kaskadowych
  • Wykorzystanie innych edytorów kodu dostępnych na rynku
  • Tworzenia szablonów stron www
  • Zasad tworzenia nowoczesnych stron www
  • Znaczników i struktury kodu HTML5
  • Dodawania łączy i ich formatowania
  • Tworzenia różnorodnych struktur nawigacyjnych (menu)
  • Formatowania menu głównego oraz innych elementów nawigacyjnych
  • Użycia grafik na stronie www
  • Zasad języka HTML oraz nowości HTML5
  • Budowy stron WWW z użyciem HTML5 oraz arkuszy stylów CSS
  • Zarządzania wyglądem strony i jej elementów przy użyciu stylów CSS
  • Tworzenie i edycji różnorodnych stylów CSS
  • Wykorzystania różnych selektorów CSS
  • Wykorzystania języka JavaScript i różnorodnych widgetów
  • Wykorzystania interaktywnych elementów typu: Accordion, Tabbed Panel czy Collapsible Panel
  • Użycia zewnętrznych bibliotek JavaScript
  • Tworzenia, testowania i wdrażania atrakcyjnych formularzy w oparciu o style CSS
  • Walidacji danych formularza i przesyłania ich w wiadomości e-mail
  • Tworzenia nowoczesnych galerii zdjęć z użyciem biblioteki Lightbox lub podobnych
  • Użycia filmów wideo i muzyki na stronie internetowej
  • Przesyłania strony WWW na serwer produkcyjny
  • Optymalizacji grafiki i kodu pod wymagania Google
  • Aktualizacji strony na serwerze produkcyjnym
  • Dodawania efektów specjalnych i trików
  • Tworzenia strony www od podstaw i… podszewki

W ramach Szkolenie HTML i CSS w praktyce – moduł II:

  • Zasad wykorzystania Adobe Dreamweaver do pracy z kodem HTML i CSS
  • Zasad i sposobów tworzenia stron internetowych w oparciu o HTML i CSS
  • Wykorzystania nowoczesnych stylów CSS3
  • Tworzenia Media Queries – zapytań o media
  • Tworzenia prostych przejść i animacji CSS
  • Dostosowania stylów CSS dla różnych mediów
  • Framework Bootstrap – prototypowania i struktury strony
  • Podstaw języka JavaScript
  • Tworzenia interaktywnych formularzy
  • Projektowania stron responsywnych
  • Współpracy z jQuery i jQueryMobile
  • Współpracy z PhoneGapBuild
  • Zapisu natywnej aplikacji dla systemu Android, iOS, Windows
  • Publikacji na różne media
  • Testowania aplikacji na tabletach Android, iOS
  • Zasady publikacji w App Store i Google Play
Kto powinien wziąć udział?

Kurs HTML i CSS – profesjonalne tworzenie stron internetowych przeznaczony jest dla:

  • Web Developerów, którzy posiadają już jakąś wiedzę w zakresie języka HTML i CSS i chcą poznać pracę w aplikacjach Adobe;
  • Managerów projektów IT, którzy na co dzień współpracują z zespołem informatyków i chcą mieć większą kontrolę nad realizacją projektów;
  • Konsultantów w dziale wsparcia IT, którzy chcą jeszcze lepiej zrozumieć potrzeby klientów i usprawnić swoje działania;
  • potencjalnych Studentów Informatyki, którzy chcą sprawdzić czy przyszłość związana z branżą informatyczną jest odpowiednim dla nich wyborem;
  • innych osób, które chcą opanować tworzenie stron www od podstaw, a także przyswoić sobie projektowanie stron internetowych zgodnie z aktualnymi trendami i wymogami rynku.

Program kursu

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

Czas trwania

10 dni, 8:30-16:30
I Etap: 15 - 19 listopada 2021
II Etap:29 listopada – 3 grudnia 2021

Prelegenci

Cytat

Marcin Bober

Marcin Bober. Prowadzi szkolenia z zakresu budowania i optymalizacji serwisów www i aplikacji mobilnych. W pracy dydaktycznej duży nacisk kładzie na przygotowanie słuchaczy do samodzielnej pracy i tworzenia własnych kreatywnych rozwiązań.

Gdzie i kiedy

Online 15 listopada - 3 grudnia 2021

Zapisz się

Cena standardowa
za osobę
5600 PLN
+23% VAT
Cena zawiera:
  • udział w zajęciach
  • materiały szkoleniowo-konferencyjne
  • certyfikat uczestnictwa
Zapisz się

Organizator

IT MEDIA S.C.
03-219 Warszawa
ul. Elektronowa 2,
woj. mazowieckie
FAQ

Najczęściej zadawane pytania

Prosimy o przejście do sekcji Zapisz się, aby wypełnić formularz zgłoszenia w wydarzeniu. Po jego wysłaniu organizator skontaktuje się celem potwierdzenia przyjęcia zgłoszenia i przekazania szczegółów organizacyjnych.

Prosimy o wypełnienie formularza zgłoszenia dostępnego na górze strony. Po jego otrzymaniu skontaktujemy się, aby potwierdzić zgłoszenie i przekazać wszystkie informacje organizacyjne.

Wymagany jest dostęp do internetu.

Kontakt

Masz pytania? Napisz do nas

Wypełnij formularz

Uzupełnij pole
Wybierz termin wydarzenia
Uzupełnij pole
Uzupełnij pole
Uzupełnij wiadomość
Potwierdź, że nie jesteś botem.
Musisz zaakceptować regulamin.

Dane kontaktowe

IT MEDIA S.C.
03-219 Warszawa ul. Elektronowa 2,
Darmowy biuletyn informacyjny

Zapisz się do newslettera i otrzymuj powiadomienia o nowych wydarzeniach!