Kurs: Cięcie .PSD i kodowanie do HTML & CSS

Naucz się tworzyć wspaniałe strony internetowe zgodne z najnowszymi standardami

Z tym kursem opanujesz tworzenie witryn na podstawie gotowego projektu graficznego (.PSD) z programu Photoshop. Dowiesz się jak pociąć grafikę, jak osadzić ją w kodzie HTML5 i jak "ostylować" stronę za pomocą CSS3.

Przerabiając kurs wykonasz aż trzy projekty, które pozwolą Ci opanować sprawdzone i skuteczne techniki tworzenia stron internetowych. Każdy z nich omawia kompletny proces cięcia i kodowania layoutu:

1. Serwis zawierający m.in. sekcję z artykułami, filmami itp. Projekt zawiera dużą ilość grafiki i jest doskonałą okazją do zapoznania się z procedurami cięcia na plasterki pliku PSD.
2. Sklep internetowy zawierający m.in. wyszukiwarkę, menu główne, menu kategorii, listę produktów, różnego rodzaju elementy nawigacyjne i formularze. W kursie oprócz strony głównej sklepu wykonamy także stronę produktu.
3. Szablon responsywny (tzw. responsive web design) – ten projekt pozwoli ci opanować techniki tworzenia elastycznych witryn, które prawidłowo działają zarówno na komputerach stacjonarnych jak i różnych urządzeniach mobilnych (telefonach, tabletach itp.). Przy okazji poznasz ciekawy framework, który znacznie przyspieszy twoją pracę oraz sprawi, że strony zawsze prawidłowo dopasują się do różnych rozdzielczości.

W kursie duży nacisk autorzy położyli na omówienie nowoczesnych technologii. W projektach wykorzystują wspaniałe możliwości oferowane przez CSS3: cienie, gradienty, zaokrąglenia itp. Omawiane są także zagadnienia związane z dostosowaniem strony do różnych przeglądarek.

Wszystkie materiały użyte w projektach zostały dołączone do kursu. Każdy z nich tworzony jest na podstawie gotowego pliku PSD. Pliki PSD zostały stworzone w innym kursie, który także możesz znaleźć w naszej ofercie: „Photoshop - projektowanie stron ”.

Kurs prowadzony jest przez certyfikowanego experta Adobe^®

Spis treści kursu

Projekt 1 - serwis internetowy
Omówienie projektu
Cięcie na plasterki
Wycinanie części górnej
Wycinanie części dolnej
Podstawowa struktura HTML
Kodowanie logo
Górna sekcja strony
Kod artykułów
Sekcja wideo
Stopka
Reguła @font-face
Ogólne style
Gradienty CSS
Style menu głównego
Style banera
Cienie CSS
Boxy w części górnej
Style głównej sekcji
Formatowanie artykułów - wstęp
Formatowanie artykułów - rozwinięcie
Style sekcji wideo
Podstawowe style stopki
Podstawowe style stopki

Projekt 2 - sklep internetowy
Główne założenia projektu
Eksport plasterków do PNG
Eksport plasterków do JPG
Kod nagłówka
Menu główne i wyszukiwarka
Baner i pasek nawigacyjny
Lewa kolumna
Nagłówek sekcji z produktami
Lista produktów
Panel Strony
Kod stopki

Sklep internetowy - style
Wprowadzenie do CSS
Style górnej sekcji
Style menu użytkownika
Nagłówek
Style menu głównego
Wyszukiwarka
Pasek nawigacyjny
Style banera
Style kolumn
Tytuły
Menu kategorii
Lewa kolumna - boxy
Menu Widok
Formatowanie listy produktów
Style pojedynczego produktu
Panel strony - część lewa
Panel strony - część prawa
Stopka - ogólne style
Stopka - style zawartości
Kompatybilność z różnymi przeglądarkami

Strona produktu - HTML
Eksport grafiki
Podstawowy kod HTML
Zdjęcia i nazwa produktu
Kolumna po lewej stronie
Kolumna po prawej stronie
Zawartość zakładek

Strona produktu - CSS
Podstawowe style prawej kolumny
Style obrazków
Info - lewa kolumna
Info - kontynuacja
Info - prawa kolumna
Formularz zamówienia
Style zakładek

Projekt 3 - responsywny
Założenia elastycznego szablonu
Tworzenie nowego dokumentu
Kodowanie nagłówka
Kodowanie banera
Sekcja - polecane produkty
Sekcja - najnowsze produkty
Sekcja - dół strony
Kodowanie stopki
Podstawy elastycznego CSS
Style ramki
Style górnej sekcji
Klasa "social"
Formatowanie stopki
Media Queries