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