InDesign w praktyce – od grafiki do HTML i CSS

39.00 

Czas trwania: 3 godzina i 30 minut
Lekcji: 25
Wymiary wideo (mp4): 1280 x 720 px
Wielkość plików do pobrania: 0,7 GB (zip)
ISBN: 978-83-62017-37-9
Program: InDesign

Kategorie: ,

Opis

Informacje o kursie

Czy z InDesignem możemy zaprojektować szablon strony WWW? Jak najbardziej. Czy możemy wygenerować poprawne pliki HTML i CSS? Oczywiście. InDesign sprawdza się doskonale jako narzędzie do tworzenia prototypów i generowania plików potrzebnych do dalszej pracy nad projektami związanymi z WWW. Ten kurs to odmienne spojrzenie na InDesigna, który postrzegany jest jako aplikacja do składu drukowanych publikacji lub interaktywnych dokumentów PDFów.

Rola InDesigna w projektowaniu WEB

Photoshop i Illustrator są z reguły oczywistym wyborem podczas budowy prototypów lub wizualizacji projektów webowych. Ich powszechność – szczególnie Photoshopa – pomaga popularności, ale to InDesign pozwala nam generować pliki HTML z uwzględnieniem struktury XML. Dlatego nic nie stoi na przeszkodzie, aby rozszerzyć swoje umiejętności o kolejną funkcjonalność tego znakomitego programu.

Jak InDesign to robi?

Na bazie stylów InDesigna możemy przypisywać znaczniki HTML do obiektów, tekstu i znaków. Wykorzystując style możemy także kontrolować nazwy klas, które są podstawą kaskadowych arkuszy stylów (CSS). Co więcej, możemy także kontrolować kolejność eksportowanych ramek/obiektów oraz ich wzajemne zagnieżdżenie – a wszystko to, dzięki wewnętrznym znacznikom InDesigna i strukturze XML (tą ostatnią, budujemy metodą „przeciągnij i upuść”). Są to niezwykle proste ale i potężne narzędzia, które nie wymagają znajomości programowania.

A co, jeśli jestem początkującym użytkownikiem InDesigna, czy ten kurs jest dla mnie?

Jak najbardziej. Szkolenie ma formulę tutoriala, a to oznacza, że będziemy realizować po kolei poszczególne etapy bez skrótów i niedomówień. Nawet osoba, która nie miała dotychczas styczności z programem powinna sobie poradzić beż większych problemów – każdy krok został zaprezentowany w materiale wideo. Mimo to, dla osób, które nie miały wcześniej styczności z InDesignem, polecam szkolenie wprowadzające w arkana programu: InDesign od podstaw w praktyce: Projekt CV. [LINK]

HTML i CSS w kursie

Pliki HTML i CSS w całości generuje InDesign – my, będziemy je edytować, aby odwzorować projekt graficzny w przeglądarce internetowej. W przypadku HTML, będzie to głównie usuwanie zbędnych kontenerów, klas i identyfikatorów. Po stronie pliku CSS, będzie to redukcja kodu i dopisanie kilku linii właściwości CSS. Pomimo tego, że nie jest to kurs o HTML/CSS, to każda osoba nie znająca w/w technologii bez problemu opracuje wspomniane pliki.

Zakres materiału i cel kursu

W pierwszym module będziemy zajmować się projektem od strony graficznej. Wykorzystamy podstawowe narzędzia i utworzymy swoisty prototyp. W ramach modułu zajmiemy się:

  • Organizacją materiału na warstwach
  • Formatowaniem obiektów i tekstu
  • Tworzeniem i przypisywaniem stylów

W drugim module sprawdzimy, jak wygląda surowy projekt po wyeksportowaniu do HTML/CSS. Szybko okażę się, że wiele rzeczy możemy poprawić po stronie InDesigna. Dlatego w dalszej części modułu zajmiemy się:

  • Pracą z klasami CSS i znacznikami HTML w InDesign
  • Pracą ze znacznikami InDesigna dla potrzeb struktury XML
  • Strukturą XML

Trzeci moduł to wyjście z InDesigna i wkroczenie na nowe terytorium. Za pomocą darmowego programy Atom [LINK], przystosujemy projekt do wyświetlania w oknie przeglądarki internetowej. Poruszymy następujące zagadnienia:

  • Dopasowanie struktury kontenerów
  • Usuwanie wybranych klas utworzonych przez InDesigna poza naszą kontrolą
  • Usuwanie zbędnych identyfikatorów
  • Redukcja i uproszczanie kodu CSS
  • Formatowanie obiektów i tekstu za pośrednictwem CSS

Spis treści:

Moduł 1 – Projekt graficzny (1h i 11 minut)
1. Parametry i ustawienia projektu (6:49)
2. Layout i organizacja warstw (5:39)
3. Tło i menu boczne (3:47)
4. Obiekty menu bocznego (5:35)
5. Formatowanie menu bocznego (10:00)
6. Style menu bocznego (10:30)
7. Obiekty głównego kontentu (7:32)
8. Formatowanie głównego kontentu (9:07)
9. Style głównego kontentu (7:49)
10. Dodatkowe kontenery (5:03)
Moduł 2 – Struktura XML (1h i 9 minut)
1. Testowy eksport do HTML (8:53)
2. Przejrzenie testowego pliku HTML i CSS (16:26)
3. Tworzenie klas CSS w InDesign (15:52)
4. Przypisywanie znaczników w InDesign (8:22)
5. Struktura XML w InDesign (5:52)
6. Eksport do HTML i inspekcja kodu (6:22)
7. Alternatywny opis obrazków (2:28)
8. Linki (5:33)
Moduł 3 – Praca z HTML i CSS (1h i 10 minut)
1. Rozpoczęcie pracy z programem Atom (3:02)
2. Oczyszczanie kodu HTML (9:38)
3. Redukcja kodu CSS (12:05)
4. Stylowanie menu bocznego (19:50)
5. Stylowanie głównego kontentu (13:00)
6. Stylowanie tekstu w kontnerach z CSS (8:51)
7. Stylowanie tekstu w paragrafach z CSS (3:56)