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

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

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

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

Інструкція

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

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

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

Напишіть спочатку тільки HTML код. Просто перерахуйте всі блоки на сторінці. Надайте кожному ідентифікатор, а групам блоків свій клас.

Приступайте до стилів. Створіть у каталозі зі сторінкою папку і назвіть її СSS. У ній для зручності бажано розмістити декілька файлів зі стилями.

Створіть поруч з папкою CSS папку IMG. Потім витягуйте зображення з макета. Краще це робити в такій послідовності: поєднуєте всі шари, шукайте потрібний елемент, копіюєте його, створюєте новий графічний документ і зберігаєте під зрозумілим і «читабельним» ім'ям.

Після того як всі вищеописані кроки будуть завершені, необхідно перевірити зверстану сторінку на помилки (друга назва - валідність). Існують сайти, спеціально для цього створені. Не варто панікувати, якщо раптом валідатор покаже багато помилок. Вони не критичні, але рекомендується уникати їх.

Наостанок перевірте створену сторінку у всіх популярних браузерах. Можливо, в якомусь з них сайт буде виглядати не так, як ви очікували.