Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www

Szkolenie HTML i CSS w praktyce – moduł I: tworzenie stron www

z certyfikatem Adobe Training Center

Stacjonarnie Warszawa lub online | na żywo

Jako jedyny w Polsce Autoryzowany Ośrodek Szkoleniowy Adobe mamy zaszczyt zaprosić Cię na Szkolenie HTML i CSS – moduł I z certyfikatem Adobe Training Center! Szkolenie prowadzone jest w formie zajęć stacjonarnych w Warszawie lub zdalnej pracy z domu w dowolnej lokalizacji. Ma charakter praktycznych ćwiczeń warsztatowych z trenerem.

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

Autoryzowany Ośrodek Szkoleniowy Adobe

Akademia IT Media jest Autoryzowanym Ośrodkiem Szkoleniowym Adobe.
Mamy zaszczyt posiadać tę akredytację nieprzerwanie od 2005 roku.
Gwarantujemy najwyższą jakość prowadzonych przez nas szkoleń.

Jak wygląda szkolenie?

Program szczegółowy

Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www

Internet

• Możliwości Internetu
• 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
• HTML4 i 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

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 tylu 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 CS6
• 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
• Przygotowanie formularza do przesyłania danych
• Tworzenie strony potwierdzającej przesłanie danych

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 dodatku Google Map do osadzenia mapy

Dodatkowe biblioteki JavaScript np. JQuery

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

Pływające reklamy Aniamte na stronie WWW

• Zasady dodawania reklam umieszczonych ponad stroną internetową

Wykorzystanie filmów wideo i muzyki na stronie WWW

• Problemy z przeglądarkami i wojna formatów
• Praca z plikami FLV
• Wykorzystanie plików mp4, mp3, ogg
• Tworzenie odtwarzacza wideo na stronie WWW
• Tworzenie odtwarzacza audio na stronie www

Tips & Triks

• Biblioteki Javascript

SEO

• Wstęp do pozycjonowania i optymalizacji

Jak zdobyć dofinansowanie na Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www?

Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www - opinie na temat szkolenia

Zarówno oferowane Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www, jak i pozostałe szkolenia organizowane przez IT Media cieszą się dużym uznaniem wśród uczestników, którzy najwyższej oceniają naszych wykładowców. Goście zajęć doceniają ich przygotowanie, zaangażowanie i podejście. Przychodząc na nie, przekonasz się, że stawiamy na wykwalifikowaną kadrę, która z pasją podchodzi do prowadzenia wykładów. Nasze kursy i usługi mają średnią ocen 4,9 w Google oraz 5,0 na Facebooku.

Sprawdź nasze opinie na Google >

Dowiedz się więcej o szkoleniu

Szkolenie HTML i CSS w praktyce – moduł I: tworzenie stron www pozwoli Ci odkryć podstawy 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 Adobe: Photoshop (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: Tworzenie stron www 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. I to jedynie po wprowadzeniu zalecanych zmian omówionych w tej części szkolenia.

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. Co więcej, 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 także 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 designer i Web 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 też 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. 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. Warto zwrócić uwagę na ten element przy projektowaniu stron pod urządzenia mobilne. To jest bardzo ważne w kontekście optymalizacji serwisu www pod kątem jego wydajności.

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, 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. Dlatego też 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. Co więcej, dowiesz się, jak zaopatrzyć stronę w poprawnie sformułowane nagłówki i metatagi. Elementy te są zgodne z najnowszymi standardami tworzenia stron internetowych i wpływają na sprawniejsze odnalezienie strony przez wyszukiwarki.

Niech przemówią za nas liczby

Voucher na szkolenie