tel: 71 / 79 000 75
tel. kom. 506 501 852
e-mail: biuro@quali.pl
Wrocław, pl. Wolności 11/101 więcej >>
SZKOŁA
GRAFIKI
KOMPUTEROWEJ
STRONA GŁÓWNA

Quali na Facebooku


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



foto: Kacper Kucharski, Adobe Dreamweaver w akcji

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,
  • 14 spotkań (1 sp. to 3 godz. lekcyjne), łącznie 42 godziny lekcyjne.

2. INTENSYWNY

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

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)

Wybrales nowy kurs!!

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

Zobacz Twoje wybrane kursyZamknij okienko


 
projekt: Quali; copyright©2003::2017 |
DANE FIRMY: Quali - szkolenia i doradztwo Beata Krzyś pl. Wolności 11/101, 50-071 Wrocław, NIP: 895-169-23-55, REGON: 932931330,
NR KONTA: Mbank 25 1140 2017 0000 4902 0309 4836.