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

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

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

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

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

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

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

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

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