Tworzenie responsywnych stron WWW: HTML5, CSS3, Adobe Dreamweaver CC

Kurs przeznaczony dla osób, które chcą:

opanować umiejętność tworzenia witryn internetowych za pomocą języka HTML i kaskadowych arkuszy stylów - CSS;
modyfikować istniejące strony i serwisy WWW w warstwie kodu i wizualnej;
nabyć niezbędną wiedzę teoretyczną i praktyczną do ubiegania się o stanowisko Front-End Developera.

Dodatkowo kurs wyposaża w wiedzę umożliwiającą projektowanie stron responsywnych, czyli dopasowanych do wyświetlania na urządzeniach o różnej rozdzielczości, od ekranów monitorów począwszy na urządzeniach mobilnych kończąc.

Wiedza i umiejętności wyniesione z kursu pozwalają stworzyć atrakcyjną wizualnie witrynę internetową z rozbudowaną siecią zakładek (odnośników), galerią zdjęć, formularzem kontaktowym i ciekawymi animacjami (np. slider) bez konieczności użycia rozszerzeń języków dynamicznych.

Kurs prowadzony jest za pomocą programu Adobe Dreamweaver CC. Adobe Dreamweaver CC to kompleksowy zestaw narzędzi dla projektantów stron internetowych i interfejsów. Łączy on zaawansowane narzędzie do opracowywania szaty projektu z edytorem kodu i rozbudowanymi funkcjami zarządzania serwisami internetowymi. Program ułatwia projektowanie i kodowanie serwisów internetowych oraz zawartości mobilnej.

Kurs zakłada opanowanie przez uczestnika programu nauczania pozwalającego samodzielnie wykonać responsywną witrynę internetową. Ma to nastąpić przez stopniowe wprowadzanie nowej wiedzy i praktyczne jej zastosowanie. Uczeń pod okiem szkoleniowca krok po kroku wykona witrynę internetową, której zawartość będzie obejmować całą wiedzę zaczerpniętą w trakcie zajęć.

Podczas szkolenia uczestnik nauczy się:

tworzyć strukturę strony wykorzystując język HTML,
dodawać linki, zakładki, tabele,
wstawiać grafikę, kolory, animację i ruch,
tworzyć i formatować formularze,
formatować wygląd strony za pomocą kaskadowych arkuszy stylów CSS,
dodawać menu rozwijalne,
tworzyć galerie zdjęć,
formatować strony pod kątem urządzeń mobilnych,
wykorzystywać Adobe Dreamwerver CC do projektowania i publikowania strony,
dodawać elementy strony w sposób szybszy bez konieczności kodowania,
pracować ze stylami w programie,
wykorzystywać szablony,
wykorzystywać elemnety SPRY bez programowania,

tryby szkolenia

1. STANDARDOWY

zajęcia dwa razy w tygodniu, najczęściej w godzinach popołudniowych lub wieczornych, opcjonalnie w soboty,
12 spotkań (1 sp. to 3 godziny), łącznie 36 godzin.

2. INTENSYWNY

zajęcia codziennie przez 7 dni, od pon. do pon. po 6 godzin w godz. 9.00 - 15.00 (z półgodzinną przerwą),
42 godzin.

Szkolenie jest indywidualne (jedna osoba na zajęciach). Możliwy jest również kurs w grupie od 2 do 4 osób (np. z jednej firmy).

Zobacz CENNIK.

terminy

najbliższe zaplanowane szkolenia w zakładce: PLAN SZKOLEŃ lub TERMINY

Zagadnienia

Nauka języka HTML:

Wprowadzenie do języka HTML. Dlaczego HTML5.
Struktura dokumentu HTML (czyli strony internetowej), kontrukcja znaczników i ich zastosowanie.
Elementy zawarte w głowie dokumentu (metatagi, style, title, link).
Znaczniki treści (nagłówki, paragrafy, tabele, listy).
Formatowanie treści za pomocą znaczników (strong, em, sub, sup itd.).
Odsyłacze – budowa i zastosowanie; w tym także odsyłacze wewnętrzne.
Dodawanie zdjęć i obrazków – różne praktyczne zastosowania.
Dodawanie mediów – plików muzycznych i filmowych.
Elementy blokowe języka HTML i ich zastosowanie w budowie strony.
Identyfikatory – główny atrybut znaczników.
Tworzenie formularzy na stronie.

CSS – formatowanie znaczników języka HTML:

Sposoby dodawania arkuszy stylów w dokumencie HTML.
Charakterystyka selektorów CSS - własności i wartości.
Tekst i czcionka – różnice i zastosowanie: m.in. zmiana rozmiaru, koloru i rodzaju czcionki, zmiana położenia i widoczności tekstu.
Działanie na elementach blokowych – m.in. rozmiar, obramowanie, rozmieszczenie, widoczność; wzajemne powiązanie.
Odstępy między elementami – margines zewnętrzny i wypełnienie.
Pozycjonowanie i sposoby wpływania na wyświetlanie elementów na stronie.

Operacje na kolorach – gradient, tło, definiowanie kolorów, uzyskiwanie efektu przeźroczystości.
Operacje na obrazach - wykorzystanie grafiki jako tła, zastosowanie filtrów dla obrazów.
Obramowanie i operacje z użyciem cienia.

Atrybut klasy – jak używać, gdzie zastosować.
Pseudoklasy – wybrane przykłady zastosowania; w tym pseudoklasy odnośników.
Zmiana wyglądu elementów po najechaniu na nie kursorem.
Zmiana wyglądu elementów, do których przenosi nas kliknięcie kursorem.

Animacje i efekt ruchu

- czyli płynna zmiana wyglądu lub rozmiaru danych elementów, zależnie bądź niezależnie od działań podejmowanych przez użytkownika.

Stworzenie slidera ze zdjęciami.
Stworzenie rozwijanego menu.
Stworzenie galerii zdjeć.
Wprowadzenie ruchomych elementów tła na stronie.
Wzbogacenie odnośników o efekty dynamiczne.
Transformacja elementów (wydłużanie, obracanie, ścieśnianie, wykrzywianie).

Responsywny układ strony

– czyli dopasowanie wyświetlania strony do różnych rozdzielczości.

Popularne układy strony (kolumnowy, siatka, stałe i procentowe wymiary).
Użycie reguły @mediaqueries.
Właściwości aktywowane za pomocą flexbox.
Właściwość column.
Omówienie budowy stron za pomocą siatki – gridy.

Adobe Dreamweaver CC

Konfigurowanie projektowanego serwisu.
Omówienie budowy stron za pomocą siatki - gridy.
Widoki: widok projektu i edytor kodu; mieszany; Opcje widoku: numerowanie lini kodu, zawijanie tekstu, kolorowanie kodu i błędów, wyświetlanie linijki i siatki
Dostosowanie interfejsu do własnych potrzeb
Właściwości dokumentu: Ustawienie obrazka jako tła; Domyślny koloru tekstu; Kolor linków; Marginesy strony; Ustawienie polskiej strony kodowej
Tabele, warstwy, projektowanie makiet.
Wstawianie tekstu; Wstawianie znaków specjalnych; właściwości tekstu, rodzaje tekstów; Hyperlinki; Listy; Wstawianie zakładki;
Listy, linie, wstawianie daty, wstawianie komentarzy.
Grafika, obiektów Animate, współpraca z Photoshopem
Formatowanie elementów strony za pomocą stylów css.
Tworzenie galerii.
Narzędzia SPRY, pasek menu, panel z zakładkami, paneli harmonijkowych, dołączanie danych.
Obsługa zdarzeń Javy Script.
Wstawianie przycisków i menu przycisków
Formularze
Praca w szablonami, edycja szablonów, wykorzystanie gotowych szablonów.
Sprawdzanie poprawności kodu, sprawdzanie pisowni, wyszukiwanie i zastępowanie tekstu, przeglądanie stron w przeglądarkach, renderowanie stylów na potrzeby różnych nośników.
Publikowanie stron.

Projektowanie stron WWW

etapy pracy nad strona internetową
style graficzne stron internetowych
szukanie pomysłów, kreatywność
czynniki decydujące o użyteczności witryny
przygotowanie grafiki do potrzeb Internetu: rozdzielczość, kompresja, formaty grafiki
testowanie witryny
etapy publikacji w Internecie
dostępność / użyteczność stron WWW (WCAG 2.0/WAI)

wybieram ten kurs