Практика верстки під мобільні пристрої
опис розділів курсу
Розділ 1. Верстка макета APPIX
Макет APPIX має нестандартну структуру розташування контенту. Це дає нам можливість розглянути різні прийоми і техніки адаптивної верстки. У першому блоці курсу ми з вами
з исходника дизайну в форматі PSD з нуля зверстаємо даний макет
При верстці макета APPIX ми розглянемо практично всі існуючі техніки для роботи з адаптивним контентом. Ви навчитеся адаптувати під різні пристрої контент, розташований в дві колонки, в три колонки, в чотири колонки. Навчіться також адаптувати двоколонковий контент, кожна з колонок якого ділиться ще на дві колонки.
вивчивши цей блок курсу, ви дізнаєтеся:
- як максимально ефективно досліджувати PSD-макет сайту.
- Як визначити відповідну розмітку сторінки.
- Як ефективно використовувати медіа-запити.
- Як адаптивно працювати з зображеннями.
- як вмістити широке меню в вузький екран смартфона.
- Як ефективно використовувати позиціонування для адаптивних сайтів.
- дізнаєтеся тонкощі поведінки плаваючих блоків і властивості float.
- Як використовувати властивість float для адаптивних сайтів.
- Як визначити та вирізати необхідні зображення.
- Як описати, здавалося б, табличну структуру блоками.
- як вирівнювати елементи для адаптивної верстки.
- Як ефективно задавати відступи для адаптивних сайтів.
- як передбачити всі можливі поведінки сайту при його наповненні і уникнути можливих проблем.
- як передбачити і описати всі можливі елементи, які можуть бути на сайті, але яких немає в макеті.
- Як, використовуючи firebug, знайти потрібні стилі і змінити їх.
- Як ефективно використовувати псевдо-класи.
- як округлити кути для зображень за допомогою CSS 3.
- Як уникнути руйнування меж блоку.
Розділ 2. Верстка макета CREATIVE+:
У другому блоці курсу ми будемо працювати з макетом CREATIVE+. На відміну від нестандартної структури макета APPIX, даний макет складається з шапки сайту, центрального блоку і футера. Центральний блок ділиться на дві колонки: колонка з основним контентом і колонка навігації. Тобто макет CREATIVE + має структуру блогу.
В рамках даного блоку курсу ми зробимо адаптивну верстку макета CREATIVE+. Верстку будемо робити адаптивну і в той же час гумову. Це дозволить нам красиво уміщати сайт в самих різних дозволах екранів-від найменших до найбільших.
вивчивши цей блок курсу, ви дізнаєтеся:
Вивчивши попередні два блоки курсу, ви вже зможете з легкістю адаптивно верстати макети різної складності. Але є деякі специфічні техніки і прийоми, які не розглядалися при верстці макетів APPIX і CREATIVE+. І оскільки вони досить часто зустрічаються при верстці сайтів, ми їх розглянемо окремо в даному блоці курсу.
У третій частині курсу ми покращимо і доповнимо створені нами верстки. Розглянемо Додаткові техніки і прийоми адаптивної верстки, які можуть стати в нагоді в майбутньому.
Вивчивши цей блок курсу, ви дізнаєтеся:
Бонус 1. Преміум-курс по CSS 3
CSS3-новітній стандарт веб-розробок, значно розширює функціональні можливості мов веб-програмування і дозволяє реалізувати оригінальні візуальні рішення для ваших інтернет-проектів.
За допомогою CSS3 ви зможете створювати такі привабливі ефекти, як напівпрозорі фони, градієнти і тіні. Зможете використовувати оригінальні шрифти, зазвичай не застосовуються в мережі, а також впроваджувати на сайтах анімацію без використання Flash і JavaScript.
Усі сучасні браузери добре підтримують більшість властивостей CSS 3, що дає нам можливість використовувати їх на веб-сторінках і отримувати очікуваний результат.
використовуючи CSS 3, Ви зможете створювати на своїх сторінках:
1. Візуальні ефекти, які не залежать від зображень. CSS3 надає безліч нових властивостей, що дозволяють створювати візуальні ефекти, які раніше вимагали обов'язкового використання в зображеннях округлені кути, падаючі тіні, напівпрозорі фони, градієнти і зображення в якості рамок полів.
2. Унікальні шрифти. Правило font-face дозволяє створити посилання на файл шрифту на сервері та використовувати його для відображення тексту на сторінці. Це дозволяє не обмежуватися шрифтами, доступними на комп'ютері користувачів, і значно спрощує гарне оформлення тексту.
3. Перехід. Переходи CSS3 являють собою найпростіший тип анімації, що змінює стиль елемента. Наприклад, це може бути плавне зміна кольору кнопки в момент, коли над нею виявляється покажчик миші. Причому для цього не потрібно ні Flash, ні JavaScript.
4. Потужні селектори. Специфікації CSS3 включають багато нових селекторів, які в основному стосуються псевдо-класів та атрибутів. Вони дозволяють отримати доступ до певних фрагментів HTML-коду, не додаючи ідентифікаторів або класів, що спрощує код і захищає його від помилок.
5. Трансформації полів. Ще одна категорія візуальних ефектів, які стали можливими з появою CSS3. З її допомогою можна управляти положенням і формою блоку в двовимірному і тривимірному просторах — це поворот, масштабування, нахил блоку і т. д.
Все це та багато іншого ви дізнаєтесь і зможете застосувати на своїх веб-сайтах, пройшовши курс CSS 3.
Бонус 2. Уроки по роботі в програмі Dreamweaver
Web-сторінки можна створювати в будь-якому текстовому редакторі. Навіть звичайного блокнота буде достатньо для створення web-сторінки.
Але є програми, які створені спеціально, щоб полегшити життя розробнику. Це програми, які прискорюють і автоматизують процес створення web-сторінок.
Одна з них-програма для створення web-сторінокdreamweaver. Вона дає масу можливостей для прискорення і спрощення процесу створення сайтів. Володіє гнучким і легко настроюється під себе вікном розробника.
Вивчивши даний бонус
Ви без зусиль зможете користуватися програмою, що прискорить процес створення і наповнення web-сторінок.
Ви зможете налаштувати або створити своє власне вікно розробника, що забезпечить максимально зручне використання програми.
В уроках розглянуті всі панелі інструментів, які надає програма
Плюс до цього, показано, як створити свою панель інструментів, зручну спеціально для вас. Тут також розглянуті спірні можливості роботи програми і наслідки, до яких вони можуть привести.
Бонус 3. Збірник корисних інструментів веб-розробника
Якщо до першої групи можна віднести спеціалізовані для web редактори коду, то інструменти другої групи можна використовувати як розширення для браузерів.
В даному бонусі мова піде саме про тих інструментах, які використовуються як розширення для браузерів.
Вони досить прості і зручні у використанні. Оскільки вони встановлені в сам браузер, то дозволяють аналізувати, тестувати, виправляти поточну завантажену сторінку і відразу ж бачити результат змін на цій же сторінки.
Вивчивши уроки
Ви зможете всілякими методами протестувати сторінку.
Зможете швидко вносити зміни в код і тут же бачити результат.
Опануйте інструмент, який дозволяє швидко знаходити та виправляти помилки. За допомогою інструментів ви зможете переробляти цілі шматки коду прямо з браузера, аналізувати і оцінювати оптимізацію сторінки і багато-багато іншого.
У другому блоці курсу ми будемо працювати з макетом CREATIVE+. На відміну від нестандартної структури макета APPIX, даний макет складається з шапки сайту, центрального блоку і футера. Центральний блок ділиться на дві колонки: колонка з основним контентом і колонка навігації. Тобто макет CREATIVE + має структуру блогу.
В рамках даного блоку курсу ми зробимо адаптивну верстку макета CREATIVE+. Верстку будемо робити адаптивну і в той же час гумову. Це дозволить нам красиво уміщати сайт в самих різних дозволах екранів-від найменших до найбільших.
вивчивши цей блок курсу, ви дізнаєтеся:
- як максимально ефективно досліджувати PSD макет сайту.
- Як визначити відповідну розмітку сторінки.
- Як ефективно використовувати медіа запити.
- Як адаптивно працювати з зображеннями.
- як призначити широкі фонові зображення для адаптивних сайтів.
- як вмістити широке меню в вузький екран смартфона.
- Як ефективно використовувати позиціонування для адаптивних сайтів.
- дізнаєтеся тонкощі поведінки плаваючих блоків і властивості float.
- Як використовувати властивість float для адаптивних сайтів.
- Як визначити та вирізати необхідні зображення.
- як вирівнювати елементи для адаптивної верстки.
- Як ефективно задавати відступи для адаптивних сайтів.
- як передбачити всі можливі поведінки сайту при його наповненні і уникнути можливих проблем.
- як передбачити і описати всі можливі елементи, які можуть бути на сайті, але яких немає в макеті.
- Як, використовуючи firebug, знайти потрібні стилі і змінити їх.
Вивчивши попередні два блоки курсу, ви вже зможете з легкістю адаптивно верстати макети різної складності. Але є деякі специфічні техніки і прийоми, які не розглядалися при верстці макетів APPIX і CREATIVE+. І оскільки вони досить часто зустрічаються при верстці сайтів, ми їх розглянемо окремо в даному блоці курсу.
У третій частині курсу ми покращимо і доповнимо створені нами верстки. Розглянемо Додаткові техніки і прийоми адаптивної верстки, які можуть стати в нагоді в майбутньому.
Вивчивши цей блок курсу, ви дізнаєтеся:
- Як змусити працювати вашу верстку в старих версіях IE і чи варто це робити.
- Як встановити галерею зображень і зробити її адаптивною.
- Як встановити відео та зробити його адаптивним.
- Як адаптивно працювати з формами і чому це важливо.
- як адаптувати громіздке меню під маленькі екрани.
Бонус 1. Преміум-курс по CSS 3
CSS3-новітній стандарт веб-розробок, значно розширює функціональні можливості мов веб-програмування і дозволяє реалізувати оригінальні візуальні рішення для ваших інтернет-проектів.
За допомогою CSS3 ви зможете створювати такі привабливі ефекти, як напівпрозорі фони, градієнти і тіні. Зможете використовувати оригінальні шрифти, зазвичай не застосовуються в мережі, а також впроваджувати на сайтах анімацію без використання Flash і JavaScript.
Усі сучасні браузери добре підтримують більшість властивостей CSS 3, що дає нам можливість використовувати їх на веб-сторінках і отримувати очікуваний результат.
використовуючи CSS 3, Ви зможете створювати на своїх сторінках:
1. Візуальні ефекти, які не залежать від зображень. CSS3 надає безліч нових властивостей, що дозволяють створювати візуальні ефекти, які раніше вимагали обов'язкового використання в зображеннях округлені кути, падаючі тіні, напівпрозорі фони, градієнти і зображення в якості рамок полів.
2. Унікальні шрифти. Правило font-face дозволяє створити посилання на файл шрифту на сервері та використовувати його для відображення тексту на сторінці. Це дозволяє не обмежуватися шрифтами, доступними на комп'ютері користувачів, і значно спрощує гарне оформлення тексту.
3. Перехід. Переходи CSS3 являють собою найпростіший тип анімації, що змінює стиль елемента. Наприклад, це може бути плавне зміна кольору кнопки в момент, коли над нею виявляється покажчик миші. Причому для цього не потрібно ні Flash, ні JavaScript.
4. Потужні селектори. Специфікації CSS3 включають багато нових селекторів, які в основному стосуються псевдо-класів та атрибутів. Вони дозволяють отримати доступ до певних фрагментів HTML-коду, не додаючи ідентифікаторів або класів, що спрощує код і захищає його від помилок.
5. Трансформації полів. Ще одна категорія візуальних ефектів, які стали можливими з появою CSS3. З її допомогою можна управляти положенням і формою блоку в двовимірному і тривимірному просторах — це поворот, масштабування, нахил блоку і т. д.
Все це та багато іншого ви дізнаєтесь і зможете застосувати на своїх веб-сайтах, пройшовши курс CSS 3.
Бонус 2. Уроки по роботі в програмі Dreamweaver
Web-сторінки можна створювати в будь-якому текстовому редакторі. Навіть звичайного блокнота буде достатньо для створення web-сторінки.
Але є програми, які створені спеціально, щоб полегшити життя розробнику. Це програми, які прискорюють і автоматизують процес створення web-сторінок.
Одна з них-програма для створення web-сторінокdreamweaver. Вона дає масу можливостей для прискорення і спрощення процесу створення сайтів. Володіє гнучким і легко настроюється під себе вікном розробника.
Вивчивши даний бонус
Ви без зусиль зможете користуватися програмою, що прискорить процес створення і наповнення web-сторінок.
Ви зможете налаштувати або створити своє власне вікно розробника, що забезпечить максимально зручне використання програми.
В уроках розглянуті всі панелі інструментів, які надає програма
Плюс до цього, показано, як створити свою панель інструментів, зручну спеціально для вас. Тут також розглянуті спірні можливості роботи програми і наслідки, до яких вони можуть привести.
Бонус 3. Збірник корисних інструментів веб-розробника
Якщо до першої групи можна віднести спеціалізовані для web редактори коду, то інструменти другої групи можна використовувати як розширення для браузерів.
В даному бонусі мова піде саме про тих інструментах, які використовуються як розширення для браузерів.
Вони досить прості і зручні у використанні. Оскільки вони встановлені в сам браузер, то дозволяють аналізувати, тестувати, виправляти поточну завантажену сторінку і відразу ж бачити результат змін на цій же сторінки.
Вивчивши уроки
Ви зможете всілякими методами протестувати сторінку.
Зможете швидко вносити зміни в код і тут же бачити результат.
Опануйте інструмент, який дозволяє швидко знаходити та виправляти помилки. За допомогою інструментів ви зможете переробляти цілі шматки коду прямо з браузера, аналізувати і оцінювати оптимізацію сторінки і багато-багато іншого.
https://privatelink.de/?http://webformyself.com/