Добрий день, дорогі друзі! Практично кожен початківець веб-майстер задається питанням — як самостійно створити свій сайт не вкладаючи при цьому жодних коштів. Звичайно, зовсім без грошових вливань не обійтися і на покупку хостингу та реєстрації домену доведеться витратити якусь мінімальну суму. Далі в статті докладно розглянемо кожен етап самостійного створення сайту.
Взагалі є два основних способи самостійного створення сайту без фінансових витрат. Це або створити сайт самому повністю своїми руками — розробити дизайн, зверстати макет, написати скрипт движка, або вивчити який-небудь безкоштовний движок сайту (CMS), наприклад Joomla або WordPress, і вже на його основі робити веб-проект.
Сьогодні коротко розглянемо як навчитися повністю самостійного створення сайту з докладним описом кожного етапу.
Отже, будь створення сайту починається з планування.
Планування сайту
Безкоштовний відеоурок Створення Інтернет-магазину на OpenCart
На цьому етапі визначаємо цілі і завдання сайту, тобто визначаємо для чого він потрібен. Залежно від цілей визначається цільова аудиторія майбутнього сайту (стать і вік відвідувачів, територія). Визначивши мету і завдання, обов’язково слід переглянути сайти конкурентів або сайти схожих тематик і постаратися визначити їх сильні і слабкі сторони.
Коли з цілями сайту все зрозуміло і вивчені сайти конкурентів, визначаємо наповнення сайту, які у нього повинні бути розділи і функціональні блоки. Тут бажано намалювати прототип сайту.
Прототип сайту — це креслення або приблизний ескіз вашого сайту. Тобто для кожного розділу сайту: стартова сторінка, сторінка контактів, інформація про товар, кошик та ін. — ви малюєте схему розташування основних блоків (логотип, назву, меню, система навігації і ін) у вигляді прямокутників та гуртків. Прототип сайту можна малювати як просто на папері, так і за допомогою спеціальних програм. Приклад простого прототипу сайту:
прототип сайту
Прототип допоможе вам прискорити створення дизайну сайту і вирішити більшість питань із замовником вже на початковому етапі.
Дизайн сайту
Безкоштовний відеоурок Створення Інтернет-магазину на OpenCart
Після планування приступаємо до створення дизайну сайту. На цьому етапі в будь-якій графічній програмі (зазвичай в photoshop-е) промальовуємо зовнішній вигляд сайту. При малюванні дизайну необхідно в першу чергу визначитися основні кольори і шрифти сайту. На відміну від прототипу сайту, тут кожен функціональний блок і розділ сайту промальовується до найдрібніших деталей.
Важливо, щоб дизайн сайту викликав гарне враження і позитивні емоції у відвідувачів майбутнього сайту.
Взагалі веб-дизайн — це величезна окрема область. Щоб стати хорошим веб-дизайнером необхідно добре володіння програмою Photoshop (або іншою графічною програмою), навчитися компонувати зображення, вміти малювати іконки і кнопки для сайту, і зробити хоча б кілька дизайнів.
У результаті цього етапу ви повинні отримати макет (картинку або кілька картинок) вашого сайту.
Для вивчення веб-дизайну я пропоную вам пройти досить простий і безкоштовний відеокурс по веб-дизайну. З допомогою нього ви швидко навчитеся створювати прості, але в теж час красиві дизайни сайтів і опануєте базовими навичками роботи в програмі Photoshop. Для більш детального вивчення роботи в програмі Photoshop можна пройти курс «PHOTOSHOP для онлайн-бізнесмена», правда він платний.
Для більш детального вивчення веб-дизайну рекомендую підписатися на розсилку школи веб-дизайну. В розсилці міститься безліч простих уроків, які допоможуть Вам навчитися малювати професійні, гармонійні сайти і надалі при належній старанності, Ви спокійно зможете заробляти просто на створенні дизайнів сайтів.
Верстка сайту
Безкоштовний відеоурок Створення Інтернет-магазину на OpenCart
Коли отримали готовий макет сайту можна приступати до верстки. Версткою сайту називається процес створення веб-сторінки макета, який ви отримали на етапі дизайну. Тобто з допомогою мови HTML і CSS картинку переводите у веб-сторінку.
На цьому етапі також можуть знадобитися навички роботи в Photoshope, але не на такому рівні як при створенні дизайну сайту (необхідно буде нарізати макет і відкоригувати деякі зображення за розміром, кольором тощо). Основним же інструментом верстальника є знання мов HTML і CSS.
Мова HTML
Кожен хто хоч якось пов’язаний з веб-розробкою повинен знати мову гіпертекстової розмітки HTML (HyperText Markup Language). HTML складається з спеціальних команд — тегів, за допомогою яких верстальник створює структуру HTML-сторінки, розмічає, де повинні бути заголовки, абзаци, посилання, таблиці, зображення, відео, форми та інше. Також за допомогою тегів створюється і структура сторінки сайту, що розмічається, де буде розташована шапка сайту, основний контент, сайдбар і підвал. Щоб докладніше дізнатися, що таке HTML ознайомтеся зі статтею Як створити WEB-сторінку.
HTML-розмітка є основою будь-якого сайту, але з іншого боку навчитися використовувати HTML найлегше, що є у веб-розробці. З цієї мови починається навчання створення сайтів. Для вивчення HTML можна скористатися статтями сайту з розділу » Основи HTML. Або пройти один з відео курсів з основ HTML, яких в мережі не мало як платних, так і безкоштовних:
Безкоштовний Відеокурс по основам HTML
Безкоштовний курс по HTML5 і CSS3 для початківців
Мова CSS
Другий основний інструмент верстальника мова CSS, який відповідає за оформлення веб-сторінки. Зазвичай мови HTML і CSS вивчають спільно, так як вони складають в сучасній веб-верстці єдине ціле. Тільки HTML відповідає за структуру веб-сторінки, а CSS за її зовнішній вигляд.
З допомогою CSS верстальщик задає розміри блоків, вказує шрифт і його розмір, колір тексту, фонові кольори і зображення та інші параметри. За допомогою CSS можна змінювати колір, фон, шрифт, ширину, висоту, положення, форму та багато іншого у будь-якого елемента сторінки.
Якщо HTML ми оперуємо тегами, то в CSS використовується поняття CSS-властивості, які призначаються тегам. Схема призначення CSS-властивості тегу виглядає наступним чином: тег { css властивість: значення; }, тобто в CSS-код ми спершу задаємо ім’я тега, а потім для нього ми вказуємо потрібні властивості з потрібними значеннями.
У вивченні мова CSS трохи складніше HTML з-за великої кількості властивостей і різного їх поведінки в різних браузерах. Для навчання мови CSS можна скористатися статтями сайту з розділу Довідник CSS, або переглянути одну з відеокурсів:
Уроки з CSS
Безкоштовний курс по HTML5 і CSS3 для початківців
Або платні, але більш докладні:
Курс з HTML5 і CSS3
Освоївши мови HTML і CSS, можна приступати до перекладу макету сайту в html-сторінки. Існує два види верстки сайту таблична і блокова. У сучасному веб-дизайні в основному використовується блокова верстка, яка в свою чергу буває гумовою або з фіксованою шириною. Для вивчення верстки сайтів я рекомендую пройти один з відеокурсів:
Приклади верстки PSD-макету в безкоштовному міні-курсі.
І платні варіанти, але більш докладні:
Верстка сайту з нуля.
Сайт з нуля
З появою планшетів і смартфонів в веб-розробці з’явилося таке поняття як адаптивна верстка. Це коли один і той же сайт добре виглядає і на великих екранах моніторів комп’ютерів, і на маленьких екранах смартфонів. В адаптивній верстки дуже допомагають медиазапросы CSS. Тому при навчанні верстки сайтів не буде зайвим переглянути Уроки адаптивної верстці.
