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)
|
 |