Szkolenie Adobe Dreamweaver – tworzenie stron WWW

Szkolenie Adobe Dreamweaver to szeroki wachlarz działań, które pozwolą Ci poznać ten najpopularniejszy na świecie edytor kodu HTML. Pomimo że, podczas zajęć korzystamy z kodu HTML5 i CSS szkolenie to dedykuje wszystkim. Niezależnie od tego czy znasz podstawy kodowania HTML czy też po prostu zaczynasz dopiero swą przygodę z Adobe Dreamweaver z pewnością podczas zajęć znajdziesz wiele atrakcyjnych treści, które pozwolą Ci budować nowoczesne i responsywne strony internetowe z ogromną przyjemnością.

W trakcie takich zajęć sięgamy nie tylko do czystego kodu HTML5 czy CSS, wykorzystujemy także możliwości jakie oferuje Adobe Dreamweaver w zakresie szybkiego tworzenia stron internetowych w oparciu o nowoczesne rozwiązania typu Open Source jak: Bootstrap, jQuery, jQueryMobile. W ten sposób poznajesz nie tylko podstawy pracy z kodem HTML ale także zasady wprowadzania, użycia oraz edycji kodu JavaScript.

Czego nauczysz się podczas zajęć?

• Języka HTML5 do tworzenia struktury strony WWW
• Wykorzystania stylów CSS do zarządzania wyglądem strony
• Tworzenia nowoczesnych, responsywnych stron internetowych
• Planowania i tworzenia struktury serwisu internetowego
• Biegłej obsługi programu Adobe Dreamweaver
• Wykorzystania szablonów do tworzenia kolejnych stron witryny
• Tworzenia galerii typu Lightbox i innych
• Tworzenia sliderów i innych atrakcyjnych form graficznych
• Tworzenia przejść i podstaw animacji
• Tworzenia i obsługi formularzy internetowych
• Wykorzystania różnego typu selektorów CSS

• Tworzenia atrakcyjnych teł i gradientów
• Wykorzystania frameworka Bootstrap do szybkiego tworzenia responsywnych stron internetowych
• Użycia i konfiguracji widgetów Bootstrap
• Wykorzystania motywów kolorystycznych
• Testowania stron na urządzeniach mobilnych
• Konfiguracji serwera WWW
• Przesyłania i uaktualniania strony na serwerze

Przykłady stron WWW wykonanych przez uczestników zajęć w trakcie szkolenia Adobe Dreamweaver

Szkolenia Adobe Dreamweaver –  ogólny program zajęć

Planujemy strukturę serwisu

• Poznajemy różne sposoby planowania
• Opracowujemy teksty
• Projektujemy elementy graficzne
• Poznajemy różne formaty zapisu elementów graficznych
• Zapisujemy optymalnie przygotowane grafikę

Poznajemy podstawy Adobe Dreamweaver

• Poznajemy obszar roboczy i panele
• Dopasowujemy układ do naszych potrzeb
• Konfigurujemy panele i skróty klawiaturowe
• Poznajemy typy podglądu dokumentu
• Zapis przygotowanych ustawień

Tworzymy pierwsze dokumenty

• Poznajemy podstawowe, strukturalne znaczniki HTML5
• Wprowadzamy kod oraz wykorzystujemy gotowe rozwiązania Adobe Dreamweaver
• Podglądamy efekty naszych działań w przeglądarce
• Konfigurujemy przeglądarki alternatywne

Poznajemy kolejne znaczniki HTML5

• Dodajemy elementy graficzne
• Dodajemy odnośniki tekstowe i graficzne
• Dodajemy wypunktowanie
• Testujemy efekty naszych działań w różnych przeglądarkach

Tworzymy nowy serwis internetowy

• Konfigurujemy folder serwisu i gromadzimy niezbędne media
• Konfigurujemy serwis w programie Adobe Dreamweaver

Tworzymy stronę startową

• Dodajemy niezbędne metaznaczniki
• Budujemy strukturę strony startowej
• Dodajemy treść dla strony startowej
• Dodajemy logotyp i nazwę serwisu
• Dodajemy grafikę nagłówkową
• Dodajemy system nawigacji
• Dodajemy nagłówki i treści sekcji
• Dodajemy niezbędne elementy graficzne
• Wprowadzamy stopkę strony

Poznajemy zasady edycji elementów strony startowej

• Wprowadzamy zmiany za pomocą kodu HTML
• Modyfikujemy elementy korzystając z okien dialogowych i możliwości programu Adobe Dreamweaver
• Wykorzystujemy podgląd kodu i podgląd gotowej strony do testowania efektów naszych działań
• Testujemy stronę w różnych przeglądarkach

Wchodzimy w świat CSS

• Poznajemy podstawowe typy selektorów CSS
• Poznajemy złożone selektory
• Poznajemy podstawowe właściwości CSS
• Poznajemy składnię kodu CSS

Wprowadzamy kod CSS odpowiedzialny za wygląd strony startowej

• Budujemy ogólną strukturę strony
• Formatujemy logotyp i system nawigacji
• Nadajemy wygląd pozostałym elementów górnej części naszej strony
• Formatujemy sekcje i treść strony
• Nadajemy wygląd tytułom, nagłówkom i pozostałym tekstom
• Formatujemy elementy graficzne

Wykorzystujemy różne typy selektorów CSS

• Poznajemy selektor typu CLASS
• Wprowadzamy selektory typu ID
• Dodajemy złożone selektory

Dodajemy zaawansowane elementy wyglądu

• Dodajemy zaokrąglone narożniki
• Wprowadzamy gradienty
• Dodajemy i skalujemy elementy tła
• Testujemy efekty naszych działań w przeglądarce

Przekształcamy stronę startową w stronę responsywną

• Modyfikujemy rozmiary elementów strukturalnych
• Formatujemy teksty i elementy graficzne
• Dodajemy Media Query (zapytanie o media) i testujemy stronę w różnych przeglądarkach

Testujemy stronę na urządzeniach mobilnych

• Instalujemy niezbędne oprogramowanie
• Konfigurujemy podgląd strony na komórce lub tablecie
• Testujemy, testujemy i testujemy

Dodajemy animację nagłówka

• Poznajemy różne typy Sliderów nagłówkowych
• Importujemy niezbędne biblioteki JavaScript
• Dodajemy kod Slidera do naszej strony startowej
• Konfigurujemy animację nagłówka strony

Dodajemy szablony stron

• Poznajemy zasady działania szablonów
• Dodajemy obszary edytowalne
• Tworzymy szablon strony internetowej
• Budujemy podstrony serwisu na bazie opracowanego szablonu

Wykorzystujemy tabele

• Wprowadzamy i konfigurujemy tabelę
• Wypełniamy tabelę treścią
• Formatujemy wygląd tabeli

Dodajemy galerię

• Omawiamy zasady działania galerii
• Importujemy i dodajemy biblioteki galerii typu Lightbox
• Dodajemy i konfigurujemy galerię Lightbox na stronie

Pracujemy z serwerem WWW

• Konfigurujemy ustawiania swerera WWW
• Przesyłamy naszą stronę na serwer
• Testujemy stronę w Internecie
• Wprowadzamy zmiany i aktualizujemy stronę na serwerze

Poznajemy zasady budowy formularzy

• Dodajemy formularz internetowych
• Wypełniamy formularz treścią i nadajemy mu wygląd
• Konfigurujemy formularz i skrypt PHP odpowiedzialny za przesyłanie wiadomości
• Przesyłamy formularz i niezbędne elementy na serwer WWW
• Testujemy działanie formularzy online

Dodajemy kolejne elementy stron

• Wprowadzamy panele z zakładkami i obiekty typu Accordion
• Konfigurujemy wygląd dodatkowych elementów
• Dodajemy filmy wideo i pliki muzyczne
• Konfigurujemy ustawienia plików audi i wideo

Wykorzystujemy framework Bootstrap

• Tworzymy stronę z przykładu Adobe Dreamweaver
• Modyfikujemy jej wygląd i dodajemy niezbędne treści
• Testujemy responsywny układ w różnych przeglądarkach i na urządzeniach mobilnych

Budujemy nową stronę w oparciu o Bootstrap

• Poznajemy Framework Bootstrap
• Dodajemy logo i nawigację
• Budujemy strukturę strony
• Wypełniamy stronę treścią
• Dodajemy grafikę i łącza
• Modyfikujemy wygląd strony

Prace uczestników szkolenia – Tworzenie aplikacji HTML5