Autoryzowany Ośrodek Szkoleniowy Adobe i Maxon

Szkolenie HTML i CSS w praktyce – moduł I: Solidne podstawy

Szkolenie HTML i CSS w praktyce – moduł I: Solidne podstawy

Kategoria: Tworzenie stron www i aplikacji,

Poziom: moduł I

Czas trwania: 40 godzin

Cena: 2500 PLN (netto)

 

Opis szkolenia

Szkolenie HTML i CSS w praktyce  moduł I: solidne podstawy to idealna propozycja dla tych, którzy chcą rozpocząć swoją przygodę z tworzeniem stron WWW. Szkolenie to jest pierwszą częścią Kursu tematycznego HTML i CSS oraz pierwszą częścią Kursu Web Designer.

W ciągu kilkudniowego szkolenia pokażemy Ci, że HTML i CSS to nie czarna magia, jak początkowo mogłoby się wydawać.

Podczas szkolenia HTML i CSS w praktyce  moduł I: Solidne podstawy  nauczysz się podstaw projektowania i tworzenia estetycznych oraz funkcjonalnych stron WWW. W przystępny sposób, zapoznając się krok po kroku z wiedzą niezbędną do tworzenia stron, zdobędziesz umiejętności poparte pełnym zrozumieniem tematyki oraz praktyką.

W trakcie 5-dniowych, zintegrowanych zajęć korzystamy oczywiście z możliwości jakie oferuje nam język HTML i CSS.  Podczas zajęć wykorzystujemy również produkty firmy AdobePhotoshop (przygotowanie projektu strony i jej elementów graficznych) oraz Dreamweaver (najlepszy na rynku edytor HTML i CSS), a także bibliotekę JavaScript itp. 

Podczas zajęć wykorzystujemy również programy podobne w działaniu do Adobe Dreamweaver, po to aby w bardziej przybliżyć Ci realia pracy przy kodowaniu serwisów www. W ten sposób zajmujemy się tworzeniem stron internetowych, które są atrakcyjne wizualnie i zgodne ze standardami. Naturalnie korzystamy także z fizycznego serwera WWW, gdzie uczestnicy zajęć mogą samodzielnie zamieszczać, aktualizować i testować efekty swojej pracy. Podczas szkolenia pokazujemy proces wyboru i zakupu optymalnej nazwy domeny oraz konfiguracji niezbędnych usług na serwerze. 

Ponadto, w trakcie szkolenia otrzymasz też wiedzę z zakresu optymalizacji i pozycjonowania stron internetowych. Podczas tworzenia projektu wykorzystujemy nabytą wiedzę, tak aby finalny produkt spełniał oczekiwania klientów i był w pełni satysfakcjonujący dla Ciebie jako jego twórcy.

Wprowadzenie do HTML

Szkolenie HTML i CSS w praktyce  moduł I: Solidne podstawy  rozpoczyna się od krótkiego wyjaśnienia dotyczącego standardów HTML i tego jak one ewoluowały.  Warto jest zrozumieć różnice między HTML i XHTML i spojrzeć na współczesne normy z szerszej perspektywy. Następnie, przystępujemy do nauki i analizy kodu HTML.  Szczególną uwagę przywiązujemy tutaj do sekcji <head> pod kątem dostępności i optymalizacji pod wyszukiwarki. Omawiamy tagi takie jak <title>, <meta>, <link> oraz <style>. Niektórzy z dotychczasowych uczestników naszego szkolenia zauważyli znaczą poprawę pozycji ich własnych stron w rankingu Google jedynie po wprowadzeniu zalecanych zmian omówionych w tej części szkolenia.

Szkolenie HTML i CSS w praktyce - moduł I: Solidne podstawy

Tworzenie struktury strony z HTML

W dalszej kolejności zajmujemy się analizą struktury HTML i znaczników treści, które są używane w typowych elementach stron WWW. Przyglądamy się temu jak stosowane są nagłówki w celu stworzenia semantycznej struktury i wypracowania sensownego układu strony. Szczególny nacisk kładziony jest na najczęściej używane znaczniki treści. Uczymy się tworzyć linki, listy, tabelki oraz osadzać je w typowym projekcie strony. Następnie zapoznajemy się ze znacznikami formatowania HTML mając na uwadze semantykę i stylowanie.

Uczestnicy szkolenia zapoznają się również z często popełnianymi błędami i problemami związanymi z użyciem HTML oraz poznają skuteczne sposoby radzenia sobie z nimi. Zwrócona zostanie ich uwaga na możliwe trudności wiążące się z instalacją i stosowaniem różnych wtyczek i narzędzi developerskich.

Wprowadzenie do CSS

Znaczna część szkolenia poświęcona jest na zapoznanie się ze stylami CSS. Na początek, uczestnicy szkolenia dowiedzą się jakie są sposoby umieszczania stylów CSS w dokumencie i każdy z nich zostanie przećwiczony. Następnie przeanalizujemy składnię CSS i zwrócimy uwagę na najczęściej popełniane błędy zapisu reguł. Poznamy selektory takie jak klasa, identyfikator oraz ich atrybuty.

Szkolenie jest wprowadzeniem do typografii CSS i omówieniem najczęściej używanych właściwości służących do stylowania tekstu, w tym zmiany odstępów między elementami, fontów czy też dekoracji znaków. Wszystkie nabyte umiejętności będą niezbędne do elementów projektowanej strony www.

Praca nad wyglądem strony z CSS

Każdy Web designerWeb developer powinien wiedzieć na czym polega model pudełkowy w CSS i tego też nauczymy się w tej części szkolenia HTML i CSS. Wyjaśnimy jak wpływa on na odstępy i rozmieszczenie poszczególnych elementów na stronie. Nauczymy się kontrolować rozmiar treści i stosować obrazki tła dla kontenerów i strony WWW. Podobnie jak w przypadku HTML, uczestnicy szkolenia poznają możliwe trudności wiążące się z używaniem CSS i narzędzi developerskich przeglądarek.

Przygotowanie i optymalizacja grafiki na potrzeby strony internetowej

Istnieje takie przysłowie, które mówi, że jeden obraz jest wart więcej niż tysiąc słów. Samo stwierdzenie jest już bardzo stare, ale jego przesłanie niezwykle aktualne także w świecie wirtualnym. Dla przykładu, Klient e-commerce nie ma możliwości dotknięcia produktu, zapoznania się z jego fakturą, obejrzenia z każdej strony, dlatego w znacznej mierze polega na obrazach z jakimi ma styczność na stronie internetowej. Jeśli prowadzisz bloga lub projektujesz stronę internetową, również będzie Ci zależeć, aby zdjęcia wyglądały profesjonalnie i przyciągały oko użytkowników. Zdjęcia w wysokiej rozdzielczości, ostre, pełne kolorów potrafią dużo ważyć. Spróbuj zamieścić kilka takich na stronie internetowej, a nieliczni odwiedzający będą mieli na tyle wytrwałości, aby pozostać na stronie Waszego sklepu i sfinalizować zakup produktu. Ciężkie zdjęcia znacząco wydłużają czas ładowania się strony www, a aktualnie szczególnie na ten element warto zwrócić uwagę przy projektowaniu stron pod urządzenia mobilne. To jest bardzo ważne w kontekście optymalizacji serwisu www pod kątem jego wydajności.

Przygotowanie i optymalizacja grafiki

Podczas szkolenia trener pokaże Wam jak odnaleźć równowagę między jakością zdjęć a ich rozmiarem, kiedy grafika używana jest na stronie WWW, tak aby zdjęcia prezentowały się dobrze, szybko ładowały i nie sprawiały wyszukiwarce problemów z indeksowaniem. Zaprezentowane zostaną narzędzia graficzne służące do edycji. Uczestnicy szkolenia HTML i CSS poznają dostępne opcje zapisu grafik dla Internetu: GIF, JPG i PNG wraz z ich mocnymi stronami i słabościami. Jako uczestnik szkolenia dowiesz się jak zmieniać rozmiary, kompresować zdjęcia i jaki nadać im tytuł oraz tekst alternatywny, tak aby korzystnie wpłynąć na SEO i zwiększyć szanse na pojawienie się Twojej grafiki w Google Grafika, a samego artykułu w wynikach wyszukiwania. W celu zwiększenia zakresu wiedzy w tym temacie zapoznaj się również z naszą ofertą dotyczącą kursu Adobe Photoshop.

Galerie, mapy i wideo i audio na stronie WWW

Zamieszczanie video na stronie jest stosunkowo częstą praktyką, czy to w przypadku blogów czy gigantów działających na rynkach międzynarodowych, więc tworząc stronę prędzej czy później zetkniesz się z tą tematyką. Dowiesz się jakie istnieją możliwości w tym zakresie i które sposoby są warte uwagi. Poznasz nowe elementy HTML5 dedykowane właśnie do obsługi odtwarzaczy wideo i audio.

Poprawna optymalizacja stron WWW

Nie jest tajemnicą, że Google bardzo ceni strony doskonałe pod względem technicznym. Jeśli zależy Ci na tym, aby Twoja strona uzyskała wysoką pozycję w wynikach wyszukiwania istotne jest, abyś już na starcie zdobył rzetelne podstawy i podczas dalszego doskonalenia nie odpuszczał w żadnym momencie i na żadnym etapie pracy i nauki własnej. Podczas tego szkolenia, nasz trener  nauczy Cię tworzenia stron z dbałością o szczegóły. Już od samego początku pokaże Ci jak zadbać o poprawną optymalizację kodu strony. Nauczysz się tworzyć strony, które będą się szybko ładowały, zostaną zaopatrzone w poprawnie sformułowane nagłówki i metatagi pozwalające na sprawne odnalezienie strony przez wyszukiwarki oraz zgodne z najnowszymi standardami tworzenia stron internetowych.

Podczas szkolenia poznasz szereg narzędzi i wykształcisz umiejętności, które pozwolą Ci zaistnieć w branży i samodzielnie tworzyć dobre strony WWW oraz zadbać o ich pozycjonowanie w wyszukiwarkach.

Po zakończeniu kursu zachęcamy do wzięcia udziału w Szkoleniu HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje

Dla kogo jest to szkolenie?

Szkolenie HTML i CSS w praktyce – moduł I: solidne podstawy przeznaczone jest przede wszystkim dla osób, które rozpoczynają swoją przygodę z HTML i CSS oraz chcą zacząć tworzyć strony www w oparciu o praktyczną wiedzę przekazywaną w przystępny sposób.

Czego nauczymy?

  • 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

Czego oczekujemy?

Znajomość obsługi komputera oraz platformy PC lub MacOS.

Program

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
  • HTML5
  • CSS
  • JavaScript i popularne biblioteki
  • jQuery,
  • inne technologie

Podstawowe elementy strony WWW

  • tekst
  • grafika
  • style CSS
  • biblioteki JavaScript
  • PDF
  • wideo i muzyka

Przygotowanie struktury serwisu WWW

  • site – definicja i zasady tworzenia i edycji
  • budowa optymalnej struktury katalogów
  • przygotowanie katalogu site’a

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

  • Przegląd i porównanie wybranych układów strony internetowej
  • układ jednokolumnowy
  • układ dwukolumnowy
  • układy wielokolumnowe
  • grid i wstęp do Responsive Web Design

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
  • 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
  • wykorzystanie elementów typu 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 CSS3

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

Tworzenie stron WWW na podstawie szablonów Dreamweavera

  • 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
  • edycja stylów CSS formularza

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

Tworzenie interaktywnej galerii typu Lightbox

  • Instalacja biblioteki Lightbox
  • przygotowanie grafiki
  • struktura galerii
  • edycja i formatowanie galerii
  • edycja kodu JavaScript
  • publikacja galerii

Osadzenie mapy Google na stronie

  • wykorzystanie Google Map API do osadzenia mapy

Dodatkowe biblioteki JavaScript np. JQuery

  • instalacja i wykorzystanie gadżetów JQuery
  • tworzenie galerii zdjęć przy użyciu biblioteki Lightbox

Wykorzystanie filmów wideo i muzyki na stronie WWW

  • problemy z przeglądarkami i wojna formatów
  • wykorzystanie i osadzanie filmów z YouTube
  • 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

Wstęp do pozycjonowania i optymalizacji SEO

Dbamy o wysoką jakość szkoleń i komfort uczestników.

Standard szkoleń — co zapewniamy?

  • małe, kameralne grupy szkoleniowe,
  • sprawdzonych wykładowców – praktyków,
  • klimatyzowane sale,
  • samodzielne stanowiska pracy,
  • komputery PC z opcją wyświetlania 3D i funkcją touch,
  • komputery typu iMAC,
  • możliwość korzystania z tabletów Wacom,
  • najnowsze oprogramowanie z możliwością wyboru platformy i wersji językowej,
  • drukowane lub elektroniczne materiały szkoleniowe,
  • obiady oraz serwis kawowy,
  • woda gazowana, niegazowana, ciasteczka
  • certyfikaty potwierdzające realizację zajęć w Autoryzowanym Ośrodku Szkoleniowym wystawiane w języku polskim lub angielskim.

Po każdym szkoleniu w Akademii IT Media uczestnicy wypełniają ankietę oceniając odbyte zajęcia. W ankiecie oceniają zarówno poziom swojego zadowolenia na podstawie spełnionych oczekiwań jak również sposób prowadzenia zajęć przez wykładowcę, jego przygotowanie i profesjonalizm.