Як зверстати макет сайту

Як зверстати макет сайту

Верстка макету сайту — досить цікавий процес. Для того щоб почати верстати, потрібно освоїти базові навички HTML і CSS. Для початку краще прочитати спеціалізовану літературу, а вже потім приступати до роботи, але можна займатися вивченням і на практиці, осягаючи ази у справі.

Вам знадобиться

- Браузер;
- Текстовий редактор, бажано з підсвічуванням синтаксису (наприклад: Notepad, psPad);
- Намальований макет сайту (як правило, у програмі Photoshop).

Інструкція

  1. Відкрийте всі програмні засоби для створення макета. Розділіть робочу область монітора на дві горизонтальні частини. У верхню помістіть графічний редактор з завантаженим макетом, а в нижню тестовий редактор. Це потрібно для того, щоб не відволікатися на згортання і розгортання вікна при написанні коду. Такий підхід дуже зручний і помітно збільшить ККД.
  2. Розгляньте структуру графічного макету. Зверніть увагу на те, як лежать шари. Точно також повинен верстатиметься майбутній веб-документ, тому що так задумував дизайнер.
  3. Пишіть код, завантаживши сторінку в браузер. Оновлюйте сторінку і намагайтеся зробити так, щоб зображення макета був ідентичний майбутньої сторінці.
  4. Напишіть спочатку тільки HTML код. Просто перерахуйте всі блоки на сторінці. Дайте кожному ідентифікатор, а групам блоків свій клас.
  5. Приступайте до стилів. Створіть у каталозі з сторінкою папку і назвіть її СSS. У ній для зручності бажано розмістити кілька файлів зі стилями.
  6. Створіть поруч з папкою CSS папку IMG. Потім витягуйте зображення з макета. Краще це робити в такій послідовності: поєднуєте всі шари, шукайте потрібний елемент, копіюєте його, створюєте новий графічний документ і зберігаєте під зрозумілим і «читабельним» іменем.
  7. Після того як всі вищеописані кроки будуть завершені, необхідно перевірити зверстану сторінку на помилки (друга назва — валідність). Існують сайти, спеціально для цього створені. Не варто панікувати, якщо раптом валідатор покаже багато помилок. Вони не критичні, але рекомендується уникати їх.
  8. Наостанок перевірте створену сторінку у всіх популярних браузерах. Можливо, в якомусь із них сайт буде виглядати не так, як ви очікували.

Корисні поради

Невеликі і однотонні зображення бажано зберігати в форматі gif. Ті, які вимагають прозорого фону, — в png. Якщо зображення велике, то «пограти» з його якістю і постарайтеся оптимізувати.