Як намалювати неймовірний дизайн сайту з нуля, зверстати його і встановити на WordPress

Від автора: 8 безкоштовних відеоуроків покажуть Вам, як намалювати неймовірний дизайн сайту з нуля, зверстати його і встановити на WordPress.

Урок 1. Підготовка до роботи, розстановка направляючих.

У цьому уроці ми зробимо розмітку макета, використовуючи направляючі. Це необхідно, щоб усі елементи сайту були вирівняні, а не “налазять” і “ховалися” один за одним. Напрямні в подальшому значно полегшать верстку сайту.

Урок 2. Шапка сайту.

У цьому уроці ми зробимо колаж на тему подорожі з предметів, які беремо з собою або зустрічаємо під час подорожей. В процесі ми опрацюємо кожну картинку: висвітлюючи, затемнюючи, додаючи відблиски, тіні, малюючи свої фігури з нуля, деформуючи і змінюючи форми різних предметів і багато іншого. Ми зробимо з купи картинок гармонійно вписується шапку в загальний дизайн блогу, коли відвідувач буде заходити на сайт – він відразу буде розуміти, куди потрапив і що його тут чекає.

Урок 3. Опрацювання меню, контенту, правого блоку і футера.

У цьому уроці ми зробимо просте і зручне меню, пошук по сайту, гарний ротатор картинок на всю ширину, правий блок з категоріями країн. Також створимо пости, які буде зручно читати, і зробимо футер, який не буде відволікати від контенту, але буде надавати всю необхідну інформацію про сайт.

Урок 4. Продумуємо розмітку сторінки і нарізаємо макет.

У цьому уроці ми продумаємо розмітку майбутньої HTML сторінки, виділимо основні блоки, з яких вона буде складатися. Виріжемо з макета всі необхідні для роботи зображення. Зверстаємо «шапку» сайту, меню і форму для пошуку. Також встановимо логотип і слоган сайту.

Урок 5. Верстаємо область основного вмісту.

У цьому уроці ми зверстаємо область основного контенту, навігацію за рубриками і «підвал» сайту. Щоб зменшити кількість використовуваних картинок і не збільшувати вагу сторінки, при верстці будемо використовувати нові властивості CSS3. А також, щоб зменшити кількість використовуваних класів, будемо активно застосовувати псевдо-класи.

Урок 6. Встановлюємо слайдер, допрацьовуємо сайт.

Як відомо, Internet Explorer нижче 9-ой версії не підтримує властивості CSS3. У даному уроці ми все-таки змусимо» Internet Explorer підтримувати ці властивості, щоб сайт виглядав однаково у всіх браузерах. Також у даному уроці ми встановимо слайдер на нашу сторінку для прокрутки зображень.

Урок 7. Створення теми WordPress. Частина 1.

У цьому уроці ми почнемо з необхідних теоретичних пояснень і установки CMS WordPress. Зокрема, дізнаємося про особливості створення теми для обраної нами системи управління сайтом, розберемо структуру будь-якої теми, поговоримо про те, що необхідно знати для успішного створення теми. Після установки CMS WordPress і створення папки для майбутньої теми, ми почнемо поступове вивчення функцій WP, знання яких є невід’ємною частиною при створенні будь-якої теми. Після короткого знайомства з функціями ми перенесемо наявний шаблон у папку з створюваної темою. Після перенесення шаблону в тему ми розділимо шаблон на логічні частини (header, footer, sidebar), які підключимо до головного шаблону теми (index). В кінці першого уроку здійснюється динамічний висновок короткого тексту статей на сторінки блогу.

Урок 8. Створення теми WordPress. Частина 2.

Ваші побажання, відгуки та рекомендації залишайте в коментарях!