Всем известно, что процесс создания крупных сайтов долгий и сложный. Он состоит из нескольких этапов. В этой статье мы расскажем, что такое верстка сайта и почему именно этот этап является одним из самых важных в веб-разработке.

Но в начале, рассмотрим последовательность, при которой создаются веб-ресурсы:

1)     Необходимо нарисовать макет в Фотошопе или другом графическом редакторе.

2)     Макет преобразуется в HTML и CSS код, который уже можно открыть в браузере. Именно этот этап называется версткой сайта.

3)     Теперь готовый макет необходимо наполнить содержанием – текстом и изображениями.

4)     Публикует готовые страницы в интернете.

Если говорить простым языком, то верстка – это процесс написания кода, благодаря которому все элементы макета корректно отображаются в браузере. Человека, у которого можно заказать верстку сайта, называют верстальщиком.

Веб-сайты принято делать по определенной модели. Вы, вероятно, замечали, что практически все ресурсы имеют заголовок (header) и подвал (footer). Это необходимо для того, чтобы пользователи привыкали к данной структуре и могли спокойно ориентироваться на любой площадке.

От верстки многое зависит. Если она будет некачественной, то ваш ресурс будет долго загружаться и некорректно отображаться на смартфонах и планшетах.

Из-за большого спроса, появились люди, которые специализируются на верстке. Найти их можно на биржах фриланса. Перед началом сотрудничества вы можете ознакомиться с портфолио исполнителя и обсудить с ним детали заказа. Также, некоторые биржи (например, uJobs), предлагают функцию «безопасная сделка», которая гарантирует вам качественно выполненную работу.

Верстка сайта может стоить как дешево (если вы заказываете у новичка), так и дорого (если вы заказываете у опытного специалиста). Однако качественно сделанный ресурс не только сможет себя окупить в короткий срок, но и создаст положительный имидж вашей компании.

Сьогодні ми покажемо вам, як створити таке меню як на YouTube. Воно знаходиться у лівій частині і підписане як «Посібник». Меню складається з маленької іконки, напису та має список посилань, який з’являється по кліку на іконку чи на сам напис. Якщо клікнути, то іконка меню переміститься у праву частину, напис зникне і з’явиться меню з посиланнями. Для того, щоб зробити меню більш цікавим, ми додамо більше стилів та ефектів.

Отже, давайте зробимо це! Читати далі »

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

Проте, в залежності від виду, кожні 7, 11, 13 або 17 років періодичні цикади одночасно масово вилізають на поверхню і перетворюються в шумних летючих тварюк, розмножуються та незабаром помирають.

Хоча наші дивні цикади весело «відкидають копита», виникає очевидне запитання: це просто випадковість, чи числа 7, 11, 13 і 17 якісь особливі?

Виявляється, у цих чисел є дещо спільне. Всі вони прості числа, тобто такі, що діляться тільки на себе і на одиницю.

Чому це так важливо? Читати далі »

Я вже створив багато уроків на тему ретро ефекту, але всі вони робилися з використанням Photoshop. Граючись з деякими новими фічами CSS3, я вирішив створити досить пристойний ретро ефект використовуючи лише цей інструмент. Давайте поглянемо, як використовуючи CSS градієнти та фільтри, можна зробити такий ефект прямо в браузері.

Наразі, CSS фільтри підтримуються тільки у Webkit браузерах (Chrome, Safari), але досить скоро фони будуть підтримуватися в усіх сучасних браузерах. Читати далі »

Ви коли-небудь цікавилися, як стилізувати checkbox’и і radio кнопки без використання JavaScript? Завдяки CSS3 це легко зробити.

Цим уроком ми відкриваємо серію статей, які стосуються не тільки візуального оформлення, а й того, як всю цю красу реалізувати в коді. Читати далі »

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

Оскільки розробка сайту — це командна, багатоетапна робота, то для досягнення якісного результату на етапі дизайн-верстка, потрібно пропрацювати не лише візуальну частину дизайну, а й продумати інтерактивні елементи. Тобто ті, які змінюють свій стан від дій користувача. Це відразу відкине багато запитань верстальщика типу: «а як ця кнопка буде підсвічуватись?». Читати далі »

Ця тема буде цікава скоріше верстальщикам, т.я. оптимізація графіки при нарізанні макету це їх відповідальність. Чому саме необхідно робити таку оптимізацію, думаю, не потрібно пояснювати. Лише зазначу — якщо ви хочете, щоб майбутній веб-сайт завантажувався швидше, то графіка повинна мати якомога менший розмір. Та й, наприклад, google ставить у результатах пошукової видачі вище ті сайти, які завантажуються швидше. Читати далі »